vue3自定义指令

自定义指令是用来增强与扩展元素功能的

在vue官方文当中写的很明白,这里我就不在赘述官方文档.只记录在项目中的实际应用.

局部定义

效果如下

全局定义

在main.ts中定义两种形式的复制文本指令

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

//复制元素上所有文本
app.directive('copy',{
  mounted:(el)=>{
    el.onclick = function(){
      console.log(el.innerText,'el是什么')
      navigator.clipboard.writeText(el.innerText)
      ElMessage.success('复制成功')
    }
  }
})

//复制可以选择的文本
app.directive('CopyValue',{
  mounted:(el:any,binding:object)=>{
    el.onclick = function(){
      navigator.clipboard.writeText(binding.value)
      ElMessage.success('复制成功')
    }
  }
})

在页面中应用如下

效果如下