自定义指令是用来增强与扩展元素功能的
在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>效果如下
