vue3自定义指令

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

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

局部定义

<template>
 <h4>指令h4>
 <p v-color-red>字体固定颜色的指令p>
 <p v-color-value="'blue'">可赋值的颜色指令(小驼峰写法)p>
 <p v-ColorValue="'yellow'">可赋值的颜色指令(不用驼峰)p>
template>
<script setup lang="ts">
const vColorRed = {
    beforeMount:(el:any)=>{
        el.style.color = 'red'
    }
}
const vColorValue = {
    mounted:(el:any,binding:object)=>{
        el.style.color = binding.value
    }
}
 
script>
<style lang="less" scoped>style>

效果如下

全局定义

在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('复制成功')
    }
  }
})

在页面中应用如下

<template>
 <h4>指令h4>
 <p v-color-red>字体固定颜色的指令p>
 <p v-color-value="'blue'">可赋值的颜色指令(小驼峰写法)p>
 <p v-ColorValue="'yellow'">可赋值的颜色指令(不用驼峰)p>
 
 
 <p style="cursor: pointer;" v-copy>点击我可以复制一段文字p>
 <p>{{ copyStr }}   <el-icon style="cursor: pointer;font-size: 24px;" v-copy-value="copyStr"><CopyDocument />el-icon>p>
template>
<script setup lang="ts">
const vColorRed = {
    beforeMount:(el:any)=>{
        el.style.color = 'red'
    }
}
const vColorValue = {
    mounted:(el:any,binding:object)=>{
        el.style.color = binding.value
    }
}
const copyStr = '可以自定义的复制操作,点击小图标才可以复制我'
 
script>
<style lang="less" scoped>style>

效果如下