Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what custom instructions are in vue". In daily operation, I believe many people have doubts about what custom instructions are in vue. Xiaobian consulted all kinds of materials and sorted out simple and easy operation methods. I hope to help you answer the doubts about "what custom instructions are in vue"! Next, please follow the small series to learn together!

Four Practical VUE Custom Instructions

1、v-drag

Requirement: mouse drag element

Thinking:

Element offset = coordinates after mouse slide-coordinates when mouse initially clicks element + top, left of element distance visible area when mouse initially clicks.

Limit dragging to the visible area using the visible area as a boundary.

Code:

Vue.directive('drag', { inserted(el) { let header = el.querySelector('.dialog_header') header.style.cssText += ';cursor:move;' header.onmousedown = function (e) { //Get the width and height of the current visible area let clientWidth = document.documentElement.clientWidth let clientHeight = document.documentElement.clientHeight //Get your own width and height let elWidth = el.getBoundingClientRect().width let elHeight = el.getBoundingClientRect().height //Get the top and left of the current distance visible area let elTop = el.getBoundingClientRect().top let elLeft = el.getBoundingClientRect().left //Get the coordinates of the click let startX = e.pageX let startY = e.pageY _document.onmousemove = function (e) { //element offset = coordinates after mouse slide-coordinates when mouse initially clicks element + top, left of element distance visible area when mouse initially clicks element let moveX = e.pageX - startX + elLeft let moveY = e.pageY - startY + elTop //Drag the visible area as a boundary and restrict it to the visible area 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(() =>

{ //Find whether the input box is a textarea box or an input box 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][xss_clean] = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line }) }, update(el,binding){ console.log('update'); let { value } = binding Vue.nextTick(() =>

{ //Find whether the input box is a textarea box or an input box 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][xss_clean] = 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[xss_clean] = '0/'+ value el.appendChild(div) el.children[current].style.paddingRight = '60px' el.oninput = () =>

{ let val = el.children[current].valueval = val.replace(/[^\x00-\xff]/g,'**') //eslint-disable-line // 字数限制的盒子插入到el后是最后一个元素 el.children[el.children.length-1][xss_clean] = 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][xss_clean] = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line } } },})

使用：

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) } }})

使用：

是的

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[xss_clean] && el[xss_clean].removeChild(el) } }else{ throw new Error(`请检查指令绑定的表达式，正确格式例如 v-hasRole="['admin','reviewer']"`) } }})到此，关于"vue中有哪些自定义指令"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧!若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.