Vue3全局自定义指令

用自定义指令来操控dom

// 写在main.js中

const app = createApp(App)

app.directive('font', {
  beforeMount: (el, binding) => {
    let size = 12
    if (binding.modifiers.small) {
      size = 8
    } else if (binding.modifiers.large) {
      size = 50
    }

    if (binding.modifiers.red) {
      el.style.color = '#f00'
    }

    el.style.fontSize = size + 'px'
  }
})

// 使用自定义指令：使用modifiers创建的自定义指令应该用"."而不是":"
<div ref="box" v-font.large.red></div>

使用之后的效果