vue全局和局部自定义属性v-xxx

遇到一个需要自定义属性的情况，发现用起来很方便
vue全局和局部自定义属性v-xxx

一.局部自定义属性v-xxx,写在需要的组件内

局部自定属性直接将需要添加的属性写入directives中，写入inserted和update两个方法，就可以直接使用了

<template>
  <div class="container">
    <h1>局部：自定义指令</h1>

    <!-- 局部自定义指令 -->
    <input type="text" v-aaa="numb" />
    <button @click="numb++">numb++</button>

    <div class="box" v-move></div>
  </div>
</template>

<script>
export default {
  // 自定义指令：对使用该指令 dom节点 做dom简单操作
  directives: {
    // v-自定义指令名称：v-aaa
    aaa: {
      inserted(el) {
        // 虚拟dom第一次渲染到页面是成为真实dom节点 执行
        //   el: 对使用该指令 真实dom节点
        el.focus();
      },
      update(el, obj) {
        // 自定义指令对应 数据/标签 更新时, 此方法执行
        //   el: 对使用该指令 真实dom节点
        //   obj：传入的数据对象，里面可以获取传入的数据值
        // console.log(obj);
        // obj里有个属性value
        el.style.width = 100 + obj.value + "px";
      },
    },
  },
};
</script>

<style scoped>
.container {
  height: 600px;
  border: 1px solid #ccc;
  position: relative;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  position: absolute;
  top: 200px;
  left: 0px;
}
</style>

二.全局自定义属性v-xxx,既然是全局,就要写在main.js里,

全局自定义属性必须将属性写入main.js里，可以直接在main.js中的Vue.directive中写入需要添加的属性，也可以新建一个directive文件夹，然后再引入到main.js中

方式1.

// 全局指令：背景色就会随机变:在任何组件内都可以使用
Vue.directive("bgc", {
  inserted(el) {
    let a = () => Math.floor(Math.random() * 256);
    el.style.backgroundColor = `rgb(${a()},${a()},${a()})`;

    // 拓展：给dom注册事件 
  },
});
Vue.directive("move", {
  inserted(el) {
    let father = el.parentNode;
    let mx_ = father.offsetWidth - el.offsetWidth;
    let my_ = father.offsetHeight - el.offsetHeight;
    el.onmousedown = function(e) {
      let x = e.offsetX;
      let y = e.offsetY;
      father.onmousemove = function(e) {
        let mx = e.clientX - x;
        let my = e.clientY - y;

        mx = mx > mx_ ? mx_ : mx;
        my = my > my_ ? my_ : my;

        mx = mx < 0 ? 0 : mx;
        my = my < 0 ? 0 : my

        el.style.left = mx + 'px';
        el.style.top = my + 'px';
      }
    }

    el.onmouseup = function() {
      father.onmousemove = null;
    }
  },
});

方式2.
directives文件夹下permission文件夹下move.js

function checkPermission (el) {
      let father = el.parentNode;
	    let mx_ = father.offsetWidth - el.offsetWidth;
	    let my_ = father.offsetHeight - el.offsetHeight;
	    el.onmousedown = function(e) {
	      let x = e.offsetX;
	      let y = e.offsetY;
	      father.onmousemove = function(e) {
	        let mx = e.clientX - x;
	        let my = e.clientY - y;
	
	        mx = mx > mx_ ? mx_ : mx;
	        my = my > my_ ? my_ : my;
	
	        mx = mx < 0 ? 0 : mx;
	        my = my < 0 ? 0 : my
	
	        el.style.left = mx + 'px';
	        el.style.top = my + 'px';
	      }
	       el.onmouseup = function() {
		      father.onmousemove = null;
		    }
   }
 

 export default {
    inserted(el) {
      checkPermission(el)
    },
    update(el) {
      checkPermission(el)
    }
  }
 

directives文件夹下的index.js

import hasPermi from './permission/move'

const install = function(Vue) {
  Vue.directive('move', move)
}

if (window.Vue) {
  window['move'] = move
  Vue.use(install); // eslint-disable-line
}

export default install

main.js

import directive from './directive' // directive
Vue.use(directive)