vue中4個自定義指令講解及例項用法
阿新 • • 發佈：2021-12-17
四個實用的自定義指令
1、v-drag
需求：滑鼠拖動元素
思路：
元素偏移量 = 滑鼠滑動後的座標 - 滑鼠初始點選元素時的座標 + 初始點選時元素距離可視區域的top、left。
將可視區域作為邊界，限制在可視區域裡面拖拽。【相關推薦：《vue.教程》】
程式碼：
Vue.directive('drag',{
inserted(el) {
let header = el.querySelector('.dialog_header')
header.style.Text += ';cursor:move;'
header.onmousedown = function (e) {
//獲取當前可視區域寬、高
let clientWidth = document.documentElement.clientWidth
let clientHeight = document.documentElement.clientHeight
//獲取自身寬高
let elWidth = el.getBoundingClientRect().width
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,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)www.cppcns.com
}
}
})
使用：
<div class="box" v-anchor="20" style="color:red;">是的</div>
4、v-hasRole
需求：根據系統角色新增或刪除相應元素
程式碼：
Vue.directive('hasRole',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中4個自定義指令講解及例項用法的文章就介紹到這了,更多相關vue中值得了解的4個自定義指令內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！