Vue 之自定义指令

最新推荐文章于 2024-11-16 22:55:41 发布

艾瑞利亚

最新推荐文章于 2024-11-16 22:55:41 发布

阅读量1.7k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40788768/article/details/123438397

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue 之自定义指令

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

在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)'}"