vue自定义指令

 vue 的自定义指令详细用法

在Vue.js中，自定义指令（Custom Directives）允许你在DOM元素上添加自定义行为。指令是带有指令名称的特殊属性，以 `v-` 作为前缀，例如 `v-custom-directive`。你可以在Vue实例中注册自定义指令，并在模板中使用它们来操作DOM元素。

以下是Vue自定义指令的详细用法：

1. 注册自定义指令：
在Vue实例中，通过`directive`方法来注册自定义指令。它接收两个参数：指令名称和一个对象，该对象定义了指令的行为。

// 全局注册
Vue.directive('custom-directive', {
  // 指令选项
});

// 局部注册（在组件中）
directives: {
  'custom-directive': {
    // 指令选项
  }
}

2. 指令选项对象中的钩子函数：
指令对象中可以定义一系列的钩子函数，用来处理不同的指令生命周期事件。以下是常用的钩子函数：

- `bind`: 只调用一次，当指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- `inserted`: 被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。
- `update`: 指令所在组件的 VNode 更新时调用，但可能发生在其子 VNode 更新之前。
- `componentUpdated`: 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- `unbind`: 只调用一次，指令与元素解绑时调用，可以在这里进行清理操作。

3. 钩子函数的参数：
每个钩子函数都会接收一些参数，用于访问指令的相关信息和操作元素。

- `el`: 指令所绑定的元素，可以使用原生DOM操作。
- `binding`: 一个对象，包含以下属性：
  - `name`: 指令名，不包括 `v-` 前缀。
  - `value`: 指令的绑定值，例如 `v-custom-directive="value"` 中的 `value`。
  - `oldValue`: 指令之前的绑定值，仅在 `update` 和 `componentUpdated` 钩子中可用。
  - `expression`: 绑定值的表达式文本。
  - `arg`: 指令参数，例如 `v-custom-directive:arg` 中的 `arg`。
  - `modifiers`: 一个包含修饰符的对象，例如 `v-custom-directive.modifiers`。

4. 自定义指令的使用：
在模板中使用自定义指令时，通过 `v-指令名` 来调用。

<div v-custom-directive="someValue"></div>

注意：在自定义指令的定义中，`someValue` 是你可以在钩子函数中访问的绑定值。

示例：创建一个简单的自定义指令，实现在元素上鼠标悬停时改变背景颜色的功能：

<template>
  <div>
    <div v-custom-hover-color="'red'">Hover over me</div>
  </div>
</template>

<script>
Vue.directive('custom-hover-color', {
  bind: function(el, binding) {
    // 鼠标悬停时的事件处理
    el.addEventListener('mouseenter', function() {
      el.style.backgroundColor = binding.value;
    });
    // 鼠标离开时的事件处理
    el.addEventListener('mouseleave', function() {
      el.style.backgroundColor = null;
    });
  }
});

export default {
  // 组件的其他选项
}
</script>

这只是一个简单的例子，你可以根据需求来定义更复杂的自定义指令。自定义指令在处理DOM操作、封装第三方库等场景非常有用，但在使用时要谨慎，确保不要过度使用指令，以保持代码的可读性和维护性。

// import Vue from 'vue'
// let MyDirective = {}
// export default MyDirective.install = function (vue, options) {
//   Vue.directive('loadmore', {
//     bind(el, binding) {
//       console.log(el,binding)
//       const selectDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
//       selectDom.addEventListener('scroll', function () {
//         const isEnd = this.scrollHeight - this.scrollTop <= this.clientHeight
//         if (isEnd) {
//           binding.value()
//         }
//       })
//     }
//   })
// }
import {
  bind
} from 'file-loader'
import store from '../store'
export default {
  loadmore: {
    bind(el, binding) {
      const selectDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      selectDom.addEventListener('scroll', function () {
        const isEnd = this.scrollHeight - this.scrollTop <= this.clientHeight
        if (isEnd) {
          binding.value()
        }
      })
    }
  },
  btnHas: {
    inserted(el, binding) {
      if (!store.getters.btns.includes(binding.value)) {
        el.parentNode.removeChild(el)
      }
    }
  },
  keyEnter: {
    bind(el, binding, vnode) {},
    inserted(el, binding) {
      document.onkeydown = function (e) {
        let key = window.event.keyCode;
        if (key == 13) {
          binding.value();
        }
      }
    },
    unbind() {
      document.onkeydown = null;
    },
  }
}