vue自定义指令如何使用和优化

分享最实用的前端知识

该篇只分享vue自定义指令如何使用,不展示指令的其他详细知识，其他的请查看官方文档，或者自行百度，这里举例拖拽指令的使用。

1、全局定义注册指令

在main.js文件中定义

import Vue from 'vue'
import App from './App.vue'
​
Vue.config.productionTip = false
​
// 注册一个全局自定义指令 `v-drag`
Vue.directive('drag', {
  // 当被绑定的元素插入到 DOM 中时……
  // 指令的定义
  bind: function (el) {
    var odiv = el; // 获取当前元素
    var dragFlag = false;
    el.style.position = "absolute"; // 这一步一定不要忘记
    var x, y;
    odiv.style.cursor = "move";
    odiv.onmousedown = (e) => {
      e = e || window.event;
      x = e.clientX - odiv.offsetLeft;
      y = e.clientY - odiv.offsetTop;
      dragFlag = true;
      document.onmousemove = (e) => {
        if (dragFlag) {
          e = e || window.event;
          odiv.style.left = e.clientX - x + "px";
          odiv.style.top = e.clientY - y + "px";
        }
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
        dragFlag = false;
      };
    };
  },
})
​
​
​
new Vue({
  render: h => h(App),
}).$mount('#app')

​

2、在局部组件中使用自定义指令

<template>
  <div id="app">
    <div v-drag style="width: 200px; height: 200px; background: orange">
      这是一个被拖动的div
    </div>
  </div>
</template>
​
<script>
​
export default {
  name: "App",
  //定义组件v-drag
  directives: {
    drag: {
      // 指令的定义
      bind: function (el) {
        var odiv = el; // 获取当前元素
        var dragFlag = false;
        el.style.position = "absolute"; // 这一步一定不要忘记
        var x, y;
        odiv.style.cursor = "move";
        odiv.onmousedown = (e) => {
          e = e || window.event;
          x = e.clientX - odiv.offsetLeft;
          y = e.clientY - odiv.offsetTop;
          dragFlag = true;
          document.onmousemove = (e) => {
            if (dragFlag) {
              e = e || window.event;
              odiv.style.left = e.clientX - x + "px";
              odiv.style.top = e.clientY - y + "px";
            }
          };
          document.onmouseup = (e) => {
            document.onmousemove = null;
            document.onmouseup = null;
            dragFlag = false;
          };
        };
      },
    },
  },
};
</script>
​
<style>
</style>

​

3、封装自定义指令+全局引用

我们如果将自定义指令全部写入main.js中会导致main.js中代码过多过于冗杂，而且这样也不易分离组件

那么我们可以将mian.js中的组件简化并写成一个单独的组件

• 创建js文件封装

  创建工具js文件，引入vue，写好组件，并导出

  import Vue from 'vue'  //引入vue
  ​
  const drag = Vue.directive('drag', {
      // 当被绑定的元素插入到 DOM 中时……
      // 指令的定义
      bind: function (el) {
          var odiv = el; // 获取当前元素
          var dragFlag = false;
          el.style.position = "absolute"; // 这一步一定不要忘记
          var x, y;
          odiv.style.cursor = "move";
          odiv.onmousedown = (e) => {
              e = e || window.event;
              x = e.clientX - odiv.offsetLeft;
              y = e.clientY - odiv.offsetTop;
              dragFlag = true;
              document.onmousemove = (e) => {
                  if (dragFlag) {
                      e = e || window.event;
                      odiv.style.left = e.clientX - x + "px";
                      odiv.style.top = e.clientY - y + "px";
                  }
              };
              document.onmouseup = (e) => {
                  document.onmousemove = null;
                  document.onmouseup = null;
                  dragFlag = false;
              };
          };
      },
  })
   
  export default drag        //导出组件

• 在全局引用并使用组件

  import Vue from 'vue'
  import App from './App.vue'
  ​
  ​
  Vue.config.productionTip = false
  ​
  //引用组件，直接可以生效
  import drag from '@/utils/drag'
  ​
  ​
  ​
  new Vue({
    render: h => h(App),
  }).$mount('#app')

  ​