vue自定义指令两种方式,vue中如何定义及使用自定义指令
在这篇文章中，边肖为大家整理了vue中四个自定义指令的解释和示例用法，感兴趣的朋友可以跟着看。
四个实用的vue自定义命令
1、v-drag
要求：用鼠标拖动元素
想法：
元素的偏移量=鼠标滑动后的坐标-鼠标最初单击元素时的坐标。初始单击时可见区域中元素的顶部和左侧。
以可见区域为边界，在可见区域内拖动。[相关推荐：《vue.js教程》]
代码：
Vue.directive(drag ，{
已插入(el) {
let header=el.querySelector(。dialog _ header’)
header . style . CSS text=；光标：移动；
header . onmousedown=function(e){
//获取当前可见区域的宽度和高度
let client width=document . document element . client width
let client height=document . document element . client height
//获取自己的宽度和高度
设El width=El . getboundingclientrect()。宽度
设El height=El . getboundingclientrect()。高度
//从当前距离获取可视区域的顶部和左侧
let elTop=El . getboundingclientrect()。顶端
let elle ft=El . getboundingclientrect()。左边的
//点击时获取坐标
让startX=e.pageX
让开始=e .佩吉
document . onmousemove=function(e){
//元素偏移量=鼠标滑动后的坐标-鼠标最初点击元素时的坐标。初始单击时，元素和可见区域之间的距离是顶部和左侧。
let moveX=e.pageX - startX elLeft
让我们开始吧
//以可视区域为边界，限制在可视区域内拖动。
if((moveX El width)client width moveX 0 (moveY El height)client height moveY 0){
返回
}
El . style . CSS text= top: moveY px；左： moveX px
}
document.onmouseup=function () {
document.onmousemove=null
document.onmouseup=null
}
}
}
})
2、v-wordlimit
要求：背景字段长度有限，区分中英文，中文两个字节，英文一个字节；所以输入框需要限制输入的字数，区分字节数，回显已经输入的字数。
想法：
单字节常规/[\x00-\xff]/g
创建一个包装单词limit的元素，并将其放置在textarea和输入框中。
输入字符分别有一个字节的enLen数和两个字节的cnLen数；用于后续的字符串截断处理。
当输入字数超过限定字数时，会被截断；substr(0，enLen cnLen)
如果输入框的值被更新或初始化，需要回显正确的字节数。
代码：
Vue.directive(wordlimit ，{
bind(el，binding){
console . log( bind )；
设{ value }=binding
Vue.nextTick(()={
//找出输入框是textarea框还是输入框
让电流=0
let arr=array . prototype . slice . call(El . children)
for(设I=0；长度；i ) {
if(arr[i]。tagName==TEXTAREA arr[i]。tagName==INPUT){
电流=i
}
}
//更新当前输入框中的字节数
El . children[El . children . length-1]。innerhtml=el.children[current].value.replace(/[^\x00-\xff]/g,**).长度“/”值//eslint-disable-line
})
},
更新(el，绑定){
console.log(“更新”)；
设{ value }=binding
Vue.nextTick(()={
//找出输入框是textarea框还是输入框
让电流=0
let arr=array . prototype . slice . call(El . children)
for(设I=0；长度；i ) {
if(arr[i]。tagName==TEXTAREA arr[i]。tagName==INPUT){
电流=i
}
}
//更新当前输入框中的字节数
El . children[El . children . length-1]。innerhtml=el.children[current].value.replace(/[^\x00-\xff]/g,**).长度“/”值//eslint-disable-line
})
},
插入(el，装订){
console . log( inserted )；
设{ value }=绑定
//找到输入框是文本区域框还是投入框
让电流=0
设arr=array。原型。切片。呼叫(El。儿童)
对于(设I=0；长度；i ) {
if(arr[i]).tagName==TEXTAREA arr[i].tagName==INPUT){
电流=我
}
}
//创建包裹字数限制的元素，并定位布局在文本区域和投入框上
让div=document。createelement( div )
如果(El。儿童[当前]。tagName==TEXTAREA){//是文本区，定位在右下角
div。style= color:# 909399；位置：绝对；字体大小：12px底部：5px右：10px
}否则{
让styStr=
如果(!埃尔。班级名单。包含( is-disabled ){//输入框不是置灰的状态则添加背景颜色
styStr= background:# fff；
}
div。style= color:# 909399；位置：绝对；字体大小：12px底部：2px右：10px行高：28px高度：28px 斯蒂斯特尔
}
div.innerHTML=0/值
el.appendChild(分区)
埃尔。儿童[当前]。风格。右填充= 60px
el.oninput=()={
let val=el.children[current].价值
瓦尔=val.replace(/[^\x00-\xff]/g,**)//eslint-disable-line
//字数限制的盒子插入到埃尔后是最后一个元素
埃尔。儿童[El。孩子。长度-1].innerHTML=val.length /值
if(val.lengthvalue){
设cnLen=0 //一个字节的字数
设enLen=0 //两个字节的字数
if(val.match(/[^**]/g)val.match(/[^**]/g).长度){
val.match(/[^**]/g).长度//计算一个字节的字数
//一个字节两个字节都有的情况
如果((值val.match(/[^**]/g).长度)0){
cnLen=Math.floor(值val.match(/[^**]/g).长度)/2)
}否则{
cnLen=0
}
}else{ //全部两个字节的情况
enLen=0
cnLen=Math.floor(值/2)
}
if(enLenvalue){
enLen=值
}
//超过限定字节数则截取
埃尔。儿童[当前]。值=El。儿童[当前]。价值。substr(0，enLen cnLen)
//更新当前输入框的字节数
埃尔。儿童[El。孩子。长度-1].innerhtml=el.children[current].value.replace(/[^\x00-\xff]/g,**).长度"/"值//eslint-disable-line
}
}
},
})
使用：
El-input type= textarea rows= 3 v-word limit= 20 v-model= value /El-input
3、v-anthor
需求：点击某个元素（通常是标题、副标题之类的),动画滚动到对应的内容块
思路：
定时器使用窗户。滚动浏览
不考虑工程师协会的话，可直接使用window.scrollBy({ top:left:0，behavior:smooth })
代码：
Vue.directive(锚,{
插入(el，装订){
设{ value }=绑定
让定时器=空
el.addEventListener(click ，function(){
//当前元素距离可视区域顶部的距离
设电流top=El。getboundingclientrect().顶端
动画滚动（当前停止)
},假)
函数动画滚动（当前停止){
如果(计时器){
清除时间间隔（定时器)
}
设c=9
timer=setInterval(()={
if(c==0){
清除时间间隔（定时器)
}
c -
window.scrollBy(0，(当前顶部值)/10)
},16.7)
}
}
})
使用：
div class= box v-anchor= 20 style= color:red；是的/div
4、v-hasRole
需求：根据系统角色添加或删除相应元素
代码：
Vue.directive(hasRole ，{
插入(el，装订){
设{ value }=绑定
让roles=JSON。解析(会话存储。getitem( userInfo ).劳力士
if(value数组值的值实例。长度0){
let有权限=值。包括(角色)
如果(!hasPermission){
埃尔。父节点El。父节点。移除孩子
}
}否则{
抛出新错误(` 1请检查指令绑定的表达式，正确格式例如v-hasRole=[admin ， reviewer] `)
}
}
})
这就是本文关于vue中四个自定义命令的解释和示例用法。有关vue中四个自定义命令的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。