vue直接可以用的自定义指令

vue直接可以用的自定义指令

这里使用的都是全局注册，因此需要在入口文件main.js中使用
随机颜色(背景色)

Vue.directive('bgc', {
    inserted(el) {
        let a = () => Math.floor(Math.random() * 256)
        el.style.backgroundColor = `rgb(${a()},${a()},${a()})`
    }
})

拖拽盒子

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;
    }
  },
});

输入框自动聚焦

 Vue.directive: ('focus',{
      inserted(el) {
        // console.log(el);
        el.focus();
     			 }
  })