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

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

<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里,写在main.js里,写在main.js里,写在main.js里

// 全局指令：背景色就会随机变:在任何组件内都可以使用
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;
    }
  },
});