Vue自定义指令--- 文本高亮，输入框聚焦，鼠标拖拽

文本高亮，字体放大，鼠标拖拽

<template>
  <div id="main">
	<p v-colors>文本颜色突出</p>	
	//进入界面默认，文本框聚焦
	<input type="text" v-focus>
	// 鼠标拖拽
	<div class="drag" v-drag></div>
  </div>
</template>
<script>
export default {
  name: 'directives',
  data () {
    return {}
  },
  mounted(){},
  directives:{
 	//文本指定颜色
    colors(el,binding){
       //el.style.color = 'red';
       el.style.color=binding.value;
    },
    //输入框聚焦  行为相关的用inserted
    focus{
      inserted(el){
      	el.focus();
      }
    },
  	//拖拽
	/*
	 @left,top 元素的相对位置
	 @parentWid,parentHei 元素的父节点的宽高
	 @dragX,dragY  鼠标相对元素的位置
	 */
    drag(el){
      let dragger = el;
       document.onselectstart = function () {
        return false;
      };
      dragger.onmousedown = e =>{
   		let left, top,parentWid, parentHei;
        //算出鼠标相对元素的位置
        let dragX = e.clientX  - dragger.offsetLeft;
        let dragY = e.clientY - dragger.offsetTop;

        // 获取父级节点 的宽高
        parentWid = e.target.parentNode.clientWidth;
        parentHei = e.target.parentNode.clientHeight;

        document.onmousemove = e =>{
         //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
         left = e.clientX - dragX;
         top = e.clientY - dragY;
		
		 // 边界设置  先求最小
         left = Math.min(left, parentWid - drager.offsetWidth);
         left = Math.max(0, left);

         top = Math.min(top, parentHei - drager.offsetHeight);
         top = Math.max(0, top);

		  //移动当前元素
          dragger.style.left = `${left}px`;
          dragger.style.top = `${top}px`;
        }
        document.onmouseup = e =>{
          //释放监听
          document.onmousemove = document.onmouseup= null;
         //return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
        return false;
        }
      }
    },
  }
}
</script>
<style scoped>
#main{
  position: relative;
  .drag{
  	 position: absolute;
 	 width: 100px;
     height: 100px;
     background-color: cyan;
  }
}
</style>

此笔记仅仅为了记录自己在项目中所学到的知识，如果有问题，可以提出，我们可以共同探讨。