vue方法封装,vue封装自定义组件
市面上关于vue.js自定义指令的文章大多是讲语法的，很少讲实际的应用场景和用例。下面这篇文章主要介绍了关于Vue自定义封装说明和实际使用的相关资料，有需要的朋友可以参考一下。
目录
前言封装指令基本钩子函数钩子函数参数实际使用复制指令(v-copy)点击复制双击复制点击图标复制句柄点击逻辑完整代码权限操作指令(v-hasPermi)摘要
前言
Vue默认内置了v-model、v-if、v-show、v-html、v-text等指令，但是这些往往不足以满足我们实际的项目开发场景，比如门禁按钮、路由菜单、复制文本等功能，所以我们需要定制一些符合我们项目需求的指令。那么我们如何包装自定义指令并使用它们呢？让我们从封装指令的基础开始。
封装指令基础
钩子函数
Bind:仅在指令第一次绑定到元素时调用一次。可以执行一次性初始化。Inserted:当绑定元素插入父节点时调用(只保证父节点存在，但不一定插入文档)。Update:当其组件的VNode更新时调用，或者它可能发生在其子VNode更新之前。ComponentUpdated:在指令所在组件的VNode及其子VNode都更新后调用。Unbind:仅在指令从元素解除绑定时调用一次。
钩子函数参数
钩子参数包括el、binding、vnode和oldVnode。
El:指令绑定的元素可以用来直接操作DOM。绑定：包含以下属性名的对象：指令名。不要包括v前缀(例如，v-copy的名称是copy)。Value:指令的绑定值(例如，在v-copy=1 1 中，值为2)。OldValue:指令绑定的前一个值，该值仅在update和componentUpdated挂钩函数中可用，无论该值是否更改。Expression:字符串形式的指令表达式(例如，v-copy=1 1 ，表达式为 1 1 )。Arg:传递给指令的参数(例如，在v-copy:dblclick中，arg的值是dblclick)。Modifiers:包含修改器的对象(例如，在v-copy.dblclick.icon中，modifier对象为：{dblclick: true，icon: true})。vnode:Vue编译生成的虚拟节点。OldVnode:前一个虚拟节点。仅在update和componentUpdated挂钩函数中可用。
实际使用
复制指令（v-copy）
我们先来看看如何使用它：
单击复制
V-copy点击Copy /div //默认复制div的副本。
V-copy= copyStr 单击copy /div //复制指令的内容(copyStr)
给el添加一个click事件，判断binding的值是否为空。如果是，则默认情况下获取绑定元素的文本内容。
el.addEventListener(click ，()={
设str=binding.value？binding . value:El . innertext；
handle click(str)；
});
El . style . cursor= copy ；
双击复制
Div v-copy:dblclick双击复制/Div //默认复制div的副本。
V-copy: dblclick= copyStr 双击copy /div //copy指令(copyStr)中的内容
向el添加一个双击事件，以确定binding的值是否为空。如果是，则默认情况下获取绑定元素的文本内容。
el.addEventListener(dblclick ，()={
设str=binding.value？binding . value:El . innertext；
handle click(str)；
});
El . style . cursor= copy ；
点击icon复制
Div v-copy:图标点击图标复制/Div //默认复制div的副本。
V-copy: icon= copyStr 单击图标复制/div //复制指令的内容(copyStr)
确定el是否添加了图标，如果没有，添加I标签，放置图标，添加点击事件到图标，并复制。
if (el.hasIcon)返回；
const icon element=document . createelement( I )；
icon element . set attribute( class ， El-icon-document-copy )；
icon element . set attribute( style ， margin-left:5px )；
El . appendchild(icon element)；
el.hasIcon=true
icon element . addevent listener( click ，()={
设str=binding.value？binding . value:El . innertext；
handle click(str)；
});
icon element . style . cursor= copy ；
handleClick 逻辑
判断是否有编号为复制目标的输入框，没有则创造一个编号为复制目标的输入框，然后进行选中，调用execCommand(copy )进行选中文字的复制。
功能手柄点击（文本){
如果(!文档。getelementbyid(复制目标){
const复制目标=文档。createelement(“input”)；
copyTarget.setAttribute(id ， copy target )；
copyTarget.setAttribute(style ， position:fixed；top:0；左：0;不透明度：0;z索引：-1000;);
文档。身体。appendchild(复制目标)；
}
//复制内容
常量输入=文档。getelementbyid(“复制目标”)；
输入值=文本；
输入。select()；//选取文本域中的内容。
//调用execCommand()可以实现浏览器菜单的很多功能。如保存文件，打开新文件，撤消、重做操作…
文档。exec命令(“copy”)；//复制选中的文字到剪贴板；
//Message.success(复制成功);
通知({
标题： 成功，
消息：` ${text}已复制到剪切板`,
类型："成功"
});
}
完整代码
从"元素-ui "导入{消息，通知};
功能手柄点击（文本){
如果(!文档。getelementbyid(复制目标){
const复制目标=文档。createelement(“input”)；
copyTarget.setAttribute(id ， copy target )；
copyTarget.setAttribute(style ， position:fixed；top:0；左：0;不透明度：0;z索引：-1000;);
文档。身体。appendchild(复制目标)；
}
//复制内容
常量输入=文档。getelementbyid(“复制目标”)；
输入值=文本；
输入。select()；//选取文本域中的内容。
//调用execCommand()可以实现浏览器菜单的很多功能。如保存文件，打开新文件，撤消、重做操作…
文档。exec命令(“copy”)；//复制选中的文字到剪贴板；
//Message.success(复制成功);
通知({
标题： 成功，
消息：` ${text}已复制到剪切板`,
类型："成功"
});
}
const install=function (Vue) {
Vue.directive(copy ，{
bind (el，binding) {
如果(绑定。arg=== dblclick ){//双击触发
el.addEventListener(dblclick ，()={
设str=binding.value？装订。值：El。innertext
手柄点击(str)；
});
埃尔。风格。cursor= copy
} else if(绑定。arg=== icon ){//点击图标触发
if (el.hasIcon)返回；
const图标元素=文档。createelement( I )；
图标元素。设置属性(“class”、“El-icon-document-copy”)；
图标元素。set属性(“style”，“margin-left:5px”)；
埃尔。appendchild(图标元素)；
el.hasIcon=true
图标元素。addevent侦听器( click ，()={
设str=binding.value？装订。值：El。innertext
手柄点击(str)；
});
图标元素。风格。cursor= copy
} else { //单击触发
el.addEventListener(click ，()={
设str=binding.value？装订。值：El。innertext
手柄点击(str)；
});
埃尔。风格。cursor= copy
}
}
});
};
导出默认安装；
权限操作指令（v-hasPermi）
使用：El-button v-hasPermi=[ activity:school:add ]新增活动/el-button从商店获取用户的权限数组，判断此时有约束力的的价值值是否存在权限数组中，没有则进行按钮的隐藏。完整代码从" @/商店"导入商店；
const all permission= *:*:* ；
导出函数哈斯佩尔米(值){
//返回真实的
const权限=存储。getters商店。吸气剂。权限；
if(value数组值的值实例。长度0){
const permissionFlag=值
const有权限=权限。一些(权限=全部权限===权限 权限标志。包含(权限))；
如果(!hasPermissions) {
返回false
}
返回true
}
抛出新错误(“请设置操作权限标签值”)；
}
导出默认值{
插入(el，装订){
const { value }=binding
如果(！hasPermi(值)){
El . parent node El . parent node . remove child(El)；
}
}
};
总结
这就是这篇关于vue定制封装指令及其实际使用的文章。有关vue定制封装指令的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。