vue之自定义指令

官方文档：https://cn.vuejs.org/v2/guide/custom-directive.html
简单实现一个鼠标经过改变背景色的指令：

默认效果

    <el-card v-hover>
    .........
    </el-card>

局部调用方式（组件内部）

  // 局部调用
  directives: {
    hover(el) {
      console.log(el);

      el.onmouseover = function (e) {
        el.style.background = "#D9ECFF";
        el.style.borderRadius = "5px";
      };

      el.onmouseout = function (e) {
        el.style.background = "#fff";
        el.style.borderRadius = "5px";
      };
    },
  },

全局调用方式（main.js）

Vue.directive('hover', function (el) {
    // 全局调用
    el.onmouseover = function (e) {
        el.style.background = "#D9ECFF";
        el.style.borderRadius = "5px";
    };

    el.onmouseout = function (e) {
        el.style.background = "#fff";
        el.style.borderRadius = "5px";
    };
})

hover效果