vue自定义指令的创建和使用

最新推荐文章于 2025-07-11 16:31:29 发布

qq_42959262

最新推荐文章于 2025-07-11 16:31:29 发布

阅读量496

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42959262/article/details/84987510

本文详细介绍了Vue中自定义指令的使用方法，包括bind、inserted、update等钩子函数的功能与应用场景，以及如何全局注册自定义指令。通过具体实例，展示了如何利用自定义指令实现元素样式动态调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2、inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3、update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5、unbind:只调用一次，指令与元素解绑时调用
方式一
main.js里面引入例如
import roundDirective from ‘…/js/directive/round’
全局注册
Vue.directive(‘round’, roundDirective)
贴上round.js的代码
export default{
bind (el, binding) {
const value = binding.value
const style = el.style
const color = [
{ value: 1, color: ‘#1fa5e0’ },
{ value: 2, color: ‘#0f0’ }
]
if (typeof value === ‘object’) {
Object.keys(value).forEach(i => {
let width = 50
let height = 20
let colorValue = color
if (value.type === ‘radius’) {
width = 15
height = 15
style.borderRadius = ‘50%’
colorValue = color
}
style.width = width + ‘px’
style.height = height + ‘px’
style.verticalAlign = ‘middle’
const colorName = colorValue.filter(item => {
return item.value === value.background
})

    style.background = colorName[0] ? colorName[0].color : ''
    style.display = 'inline-block'
  })
}

}
}
引用

方式二
官方文档
https://cn.vuejs.org/v2/guide/custom-directive.html