vue3 自定义指令,vue自定义指令两种方式

　　除了Vue中的内置指令，还允许注册自定义指令。下面这篇文章主要介绍在Vue3.0中编写自定义指令的相关信息，有需要的朋友可以参考一下。

前言

　　Vue提供了丰富的内置指令，如v-if、v-bind、v-on等。除此之外，我们还可以通过Vue.directive({})或者directives:{}来定义指令。

　　在开始学习之前，我们要明白，自定义指令的应用场景，任何功能的开发，都是为了解决特定的问题。

　　通过自定义指令，我们可以对DOM做更多的底层操作，这不仅可以为我们提供一些场景下快速解决问题的思路，也可以让我们对vue的底层有更深入的了解。

第一步

　　At main.js

　　在src下，对应于resume的文件夹

　　从“@/Directives/index”导入指令；//自定义指令(@代表src)

　　const App=create App(App)；

　　app.use(指令)；

　　app . mount( # app )；

第二步

　　从导入副本。/copy ；//介绍所需的说明

　　const directivesList={

　　复制//装载

　　};

　　常量指令={

　　安装：功能(应用程序){

　　object . keys(directive list)。forEach((key)={

　　app.directive(key，directive list[key])；//寄存器

　　});

　　}

　　};

　　导出默认指令；//抛出

第三步

　　在copy.js中编写我们的指令内容Vue2和Vue3，只是一些生命周期函数的修改。

　　从“element-plus”导入{ El message }；

　　常量副本={

　　已安装(el，{ value }) {

　　埃尔。$value=值；

　　el.handler=()={

　　如果(！埃尔。$value) {

　　//当值为空时，给出提示

　　ElMessage.warning({

　　消息：“您好，复制的值不能为空。”,

　　类型：“警告”

　　});

　　返回；

　　}

　　if (window.clipboardData) {

　　window . clipboard data . setdata( text ，el。$ value)；

　　}否则{

　　(功能(内容){

　　document.oncopy=function (e) {

　　e.clipboardData.setData(text ，content)；

　　e . prevent default()；

　　document.oncopy=null

　　};

　　})(el。$ value)；

　　document . exec command( Copy )；

　　}

　　ElMessage.success(复制成功)；

　　};

　　//绑定click事件

　　el.addEventListener(click ，El . handler)；

　　},

　　更新前(el，{

　　价值

　　}) {

　　埃尔。$value=值；

　　},

　　未安装(el) {

　　el.removeEventListener(click ，El . handler)；

　　}

　　};

　　导出默认副本；

总结

　　关于为Vue3.0编写自定义指令的这篇文章到此为止，关于Vue3.0自定义指令的更多信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。