后台系统框架开发的理解之tips篇

后台系统tips

有些同学用mvvm得时候就开始摒弃原生的DOM操作,甚至开始摒弃jquery,觉得jquery落后了。我觉得用vue.js的时候完全不需要有这个戒律,vue里也从来没说:你用了我vue就不要使用jquery和原生的dom操作了,你必须全页面都是vue对象。

vue更像一个library,是你工具箱里的一个工具,jquery也是其中的一个工具他们各自做着自己擅长的事情,vue不是一个Framework。

下面我们说说如何用vue+jquery来开发一个tips

  1. 首先我们先看页面上得tipsIcon,页面上有两个icontips

    		<head>
    <style>
    [v-cloak]{display: none;}
    .icon-tips{display: inline-block;
        background: #ff8907;
        border-radius: 8px;
        height: 16px;
        width: 16px;
        color: #fff;
        text-align: center;
    }
    .icon-tips:hover{cursor: pointer;color:#e3e3e3;}
    .tips-box{border:1px solid #e3e3e3;background: #666;padding:10px;position: absolute;border-radius: 3px;}
    </style>
    </head>
    <body>
    <span data-tips="我是tips的信息"  class="J_tips icon-tips" style="position: absolute;top:250px;left:150px;">?</span>
    <span data-tips="我是tips222的信息" class="J_tips icon-tips" style="position: absolute;top:50px;left:100px;">?</span>
     
    </body>	


  2. js相关

    (function(){
    	//这个可以自己封装一个模块
     var ele_tips = document.getElementById("tipsBox");
     if(!ele_tips){
     	//假如页面不存在这个tipsBox
     	//在body上增加这个节点
     	$("body").append('<div class="tips-box" id="tipsBox" :style="styleObject" v-text="text" v-cloak></div>');
     	 ele_tips = document.getElementById("tipsBox");
     }
     //创建vue对象
    var tipsBox = new Vue({
    	el:ele_tips,
    	data:{
    		styleObject:{
    		top:0,
    		left:0,
    		display:"none"
    		},
    		text:""
    	}
    });
    //jquery监测页面上的.J_tips 对象的事件
    //这个tips写的比较简陋,示意用,还有一些细节优化没写
    $(document).on("mouseenter",".J_tips",function(event){
    		//展示tipsBox
    		var ele= $(this);
    		var offset = ele.offset();
    		var s = {
    			top:(offset.top+15)+"px",
    			left:(offset.left-15)+"px",
    			display:"block"
    		};
    		var t = ele.attr("data-tips");
    		tipsBox.text = t;
    		tipsBox.styleObject=s;
    		
    }).on("mouseleave",".J_tips",function(event){
    		//隐藏tips
    		tipsBox.styleObject={
    		top:0,
    		left:0,
    		display:"none"};
    		tipsBox.text = "";
    
    });
    })();
  3. over,结束,点击这里查看demo


本文标题:后台系统框架开发的理解之tips篇
本文链接:https://56way.com/p/77.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。