本文主要介绍“vue中有哪些自定义命令”。在日常操作中，我相信很多人对vue中的自定义命令有什么疑问。边肖查阅了各种资料，整理出简单易用的操作方法，希望能帮你解答“vue中有哪些自定义命令”的疑惑！接下来，请和边肖一起学习！
四个实用的vue自定义指令
1、v-drag
要求：用鼠标拖动元素
思考：
元素偏移量=鼠标滑动后的坐标-鼠标最初单击元素时的坐标。首次单击时可见区域中元素的顶部和左侧。
使用可见区域作为边界，并限制在可见区域拖动。
代码：
Vue.directive('drag '，{ 0
插入(El){ 0
letheader=el.querySelector('。dialog _ header’)
header . style . CSS text='；cursor:move'
header . onmousedown=function(e){ 0
//获取当前可见区域的宽度和高度
letclientWidth=document . document element . client width
letclientHeight=document . document element . client height
//获取自己的宽度和高度
letelWidth=El . getboundingclientrect()。宽度
letelhx8=El . getboundingclientrect()。高度
//从当前距离获取可见区域的顶部和左侧
letelTop=El . getboundingclientrect()。顶端
letelLeft=El . getboundingclientrect()。左边的
//点击时获取坐标。
letstartX=e.pageX
letstartY=e.pageY
document . onmousemove=function(e){ 0
//元素偏移量=鼠标滑动后的坐标-鼠标最初点击元素时的坐标。首次单击时可见区域中元素的顶部和左侧。
letmoveX=e.pageX-startX elLeft
letmoveY=e.pageY
- startY + elTop
//将可视区域作为边界，限制在可视区域里面拖拽
if ((moveX + elWidth) > clientWidth || moveX < 0 || (moveY + elHeight) > clientHeight || moveY < 0) {
return
}
el.style.cssText += 'top:' + moveY + 'px;left:' + moveX + 'px;'
}
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null
}
}
}
})
2、v-wordlimit
需求：后台字段限制了长度，并且区分中英文，中文两个字节，英文一个字节；所以输入框需要限制输入的字数并且区分字节数，且需回显已输入的字数。
思路：
-
一个字节的正则/[\x00-\xff]/g
-
创建包裹字数限制的元素，并定位布局在textarea和input框上
-
分别计算输入的字符一个字节的有enLen个，两个字节的有cnLen个；用来后面字符串截断处理
-
当输入的字数超过限定的字数，截断处理；substr(0,enLen+cnLen)
-
接口更新了输入框的值，或者初始化输入框的值，需要回显正确的字节数
代码：
Vue.directive('wordlimit',{
bind(el,binding){
console.log('bind');
let { value } = binding
Vue.nextTick(() =>{
//找到输入框是textarea框还是input框
let current = 0
let arr = Array.prototype.slice.call(el.children)
for (let i = 0; i < arr.length; i++) {
if(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
current = i
}
}
//更新当前输入框的字节数
el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
})
},
update(el,binding){
console.log('update');
let { value } = binding
Vue.nextTick(() =>{
//找到输入框是textarea框还是input框
let current = 0
let arr = Array.prototype.slice.call(el.children)
for (let i = 0; i < arr.length; i++) {
if(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
current = i
}
}
//更新当前输入框的字节数
el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
})
},
inserted(el,binding){
console.log('inserted');
let { value } = binding
//找到输入框是textarea框还是input框
let current = 0
let arr = Array.prototype.slice.call(el.children)
for (let i = 0; i < arr.length; i++) {
if(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
current = i
}
}
//创建包裹字数限制的元素，并定位布局在textarea和input框上
let div = document.createElement('div')
if(el.children[current].tagName=='TEXTAREA'){//是textarea，定位在右下角
div.style = 'color:#909399;position:absolute;font-size:12px;bottom:5px;right:10px;'
}else{
let styStr = ''
if(!el.classList.contains('is-disabled')){//input框不是置灰的状态则添加背景颜色
styStr = 'background:#fff;'
}
div.style = 'color:#909399;position:absolute;font-size:12px;bottom:2px;right:10px;line-height:28px;height:28px;'+styStr
}
div.innerHTML = '0/'+ value
el.appendChild(div)
el.children[current].style.paddingRight = '60px'
el.oninput = () =>{
let val = el.children[current].value
val = val.replace(/[^\x00-\xff]/g,'**') //eslint-disable-line
// 字数限制的盒子插入到el后是最后一个元素
el.children[el.children.length-1].innerHTML = val.length + '/' + value
if(val.length>value){
let cnLen = 0 //一个字节的字数
let enLen = 0 //两个字节的字数
if(val.match(/[^**]/g) && val.match(/[^**]/g).length){
enLen = val.match(/[^**]/g).length // 计算一个字节的字数
//一个字节两个字节都有的情况
if((value - val.match(/[^**]/g).length)>0){
cnLen = Math.floor((value - val.match(/[^**]/g).length)/2)
}else{
cnLen = 0
}
}else{ //全部两个字节的情况
enLen = 0
cnLen = Math.floor(value/2)
}
if(enLen>value){
enLen = value
}
//超过限定字节数则截取
el.children[current].value = el.children[current].value.substr(0,enLen+cnLen)
//更新当前输入框的字节数
el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
}
}
},
})
使用：
<el-input type="textarea" rows="3" v-wordlimit="20" v-model="value"></el-input>
3、v-anthor
需求：点击某个元素（通常是标题、副标题之类的），动画滚动到对应的内容块
思路：
-
定时器使用window.scrollBy
-
不考虑ie的话，可直接使用 window.scrollBy({ top: ,left:0,behavior:'smooth' })
代码：
Vue.directive('anchor',{
inserted(el,binding){
let { value } = binding
let timer = null
el.addEventListener('click',function(){
// 当前元素距离可视区域顶部的距离
let currentTop = el.getBoundingClientRect().top
animateScroll(currentTop)
},false)
function animateScroll(currentTop){
if(timer){
clearInterval(timer)
}
let c = 9
timer = setInterval(() =>{
if(c==0){
clearInterval(timer)
}
c--
window.scrollBy(0,(currentTop-value)/10)
},16.7)
}
}
})
使用：
<div class="box" v-anchor="20" style="color:red;">是的</div>
4、v-hasRole
需求：根据系统角色添加或删除相应元素
代码：
Vue.directive('hasRole',{
inserted(el,binding){
let { value } = binding
let roles = JSON.parse(sessionStorage.getItem('userInfo')).roleIds
if(value && value instanceof Array && value.length>0){
let hasPermission = value.includes(roles)
if(!hasPermission){
el.parentNode && el.parentNode.removeChild(el)
}
}else{
throw new Error(`请检查指令绑定的表达式，正确格式例如 v-hasRole="['admin','reviewer']"`)
}
}
})
到此，关于“vue中有哪些自定义指令”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/149062.html