Vue 之自定义指令

Vue 之自定义指令

Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用新的改变

1. 在src目录下新建directives/index.js文件

   import waterMarker from './waterMarker' //自定义水印
   const directives = {
   	  waterMarker
       }
   export default {
   		  install(Vue) {
   		    Object.keys(directives).forEach((key) => {
   		      Vue.directive(key, directives[key])
   		    })
   		  },
       }
   

2.在 main.js 引入并调用

```javascript
import Directives from './directives'
Vue.use(Directives)
 ```

3.指令定义函数提供了几个钩子函数（可选）：

• bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。
• inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
• update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值
• componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
• unbind: 只调用一次， 指令与元素解绑时调用
  4.自定义水印代码

function addWaterMarker(str, parentNode, font, textColor) {
  const can = document.createElement('canvas')
  parentNode.appendChild(can)
  can.width = 200
  can.height = 150
  can.style.display = 'none'
  const cans = can.getContext('2d')
  cans.rotate((-20 * Math.PI) / 180)
  cans.font = font || '16px Microsoft JhengHei'
  cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'
  cans.textAlign = 'left'
  cans.textBaseline = 'Middle'
  cans.fillText(str, can.width / 10, can.height / 2)
  parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
}

const waterMarker = {
  bind: function (el, binding) {
    addWaterMarker(
      binding.value.text,
      el,
      binding.value.font,
      binding.value.textColor
    )
  },
}
export default waterMarker
v-waterMarker="{text:blog_name,textColor:'rgba(180, 180, 180, 0.4)'}"