网站建设教的误区,网站建设规划书结构,如何登录到wordpress,安康市网站开发自定义指令是用来增强与扩展元素功能的
在vue官方文当中写的很明白,这里我就不在赘述官方文档.只记录在项目中的实际应用.
局部定义
templateh4指令/h4p v-color-red字体固定颜色的指令/pp v-color-valueblue可…自定义指令是用来增强与扩展元素功能的
在vue官方文当中写的很明白,这里我就不在赘述官方文档.只记录在项目中的实际应用.
局部定义
templateh4指令/h4p v-color-red字体固定颜色的指令/pp v-color-valueblue可赋值的颜色指令(小驼峰写法)/pp v-ColorValueyellow可赋值的颜色指令(不用驼峰)/p
/template
script setup langts
const vColorRed {beforeMount:(el:any){el.style.color red}
}
const vColorValue {mounted:(el:any,binding:object){el.style.color binding.value}
}/script
style langless 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(复制成功)}}
})
在页面中应用如下
templateh4指令/h4p v-color-red字体固定颜色的指令/pp v-color-valueblue可赋值的颜色指令(小驼峰写法)/pp v-ColorValueyellow可赋值的颜色指令(不用驼峰)/p!--全局的自定义指令--p stylecursor: pointer; v-copy点击我可以复制一段文字/pp{{ copyStr }}nbsp;nbsp;nbsp;el-icon stylecursor: pointer;font-size: 24px; v-copy-valuecopyStrCopyDocument //el-icon/p
/template
script setup langts
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 langless scoped/style
效果如下
