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

Editor to share with you how to use custom instructions in vue. I hope you will get something after reading this article. Let's discuss it together.

1 、 v-drag

Requirements: mouse drag element

Train of thought:

Element offset = the coordinates after mouse sliding-the coordinates of the initial mouse click on the element + the top and left of the distance between the element and the visual area at the initial click.

Use the visual area as a boundary to limit dragging within the visual area.

Code:

Vue.directive ('drag', {inserted (el) {let header = el.querySelector (' .clients _ header') header.style.cssText + ='; cursor:move 'header.onmousedown = function (e) {/ / get the width and height of the current visual area let clientWidth = document.documentElement.clientWidth let clientHeight = document.documentElement.clientHeight / / get its own width and height let elWidth = el.getBoundingClientRect (). Width let elHeight = el.getBoundingClientRect (). Height / / get the top of the current distance from the visual area, Left 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 = the coordinates after the mouse slide-the coordinates of the initial mouse click on the element + the top of the visual area at the initial click of the element, Left let moveX = e.pageX-startX + elLeft let moveY = e.pageY-startY + elTop / / use the visual area as the boundary Limit dragging if ((moveX + elWidth) > clientWidth) within the visual area | | 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.valueval = val.replace (/ [^\ X00 -\ xff] / g The last element el.children.children.length-1] [xss_clean] = val.length +'/'+ value if (val.length > value) {let cnLen = 0 / / words per byte let enLen = 0 / / two-byte if (val.match) is the last element after the word limit box is inserted into el (/ [^ * *] / g) & & val.match (/ [^ * *] / g) .length) {enLen = val.match (/ [^ * *] / g). Length / / calculate the number of words in a byte / / if there are two bytes in a byte ((value-val.match (/ [^ * *] / g) .length) > 0) { CnLen = Math.floor ((value-val.match (/ [^ * *] / g) .length) / 2)} else {cnLen = 0} else {/ / all two bytes enLen = 0 cnLen = Math.floor (value/2)} if (enLen > value) {enLen = value} / / if the number of bytes exceeds the limit, intercept el.children[ current] .value = el.children.value.substr (0 EnLen+cnLen) / / update the number of bytes in the current input box el.children.length-1] [xss_clean] = el.children.value.replace (/ [^\ X00 -\ xff] / ggramage'). Length +'/'+ value//eslint-disable-line},})

Use:

3 、 v-anthor

Requirements: click on an element (usually a title, subtitle, etc.) and scroll to the corresponding content block

Train of thought:

Timer uses window.scrollBy

If you don't consider ie, you can use window.scrollBy ({top:, left:0,behavior:'smooth'}) directly.

Code:

Vue.directive ('anchor', {inserted (el,binding) {let {value} = binding let timer = null el.addEventListener (' click',function () {/ / distance from the top of the visual area let currentTop = el.getBoundingClientRect () .top animateScroll (currentTop)}) False) function animateScroll (currentTop) {if (timer) {clearInterval (timer)} let c = 9 timer = setInterval (() = > {if (caterpillar 0) {clearInterval (timer)} Cmuri-window.scrollBy (0, (currentTop-value) / 10)}, 16.7)}}))

Use:

Yes. 4. V-hasRole

Requirements: add or remove elements according to system roles

Code:

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 (`Please check the expression bound by the instruction After reading this article, I believe you have some understanding of "how to use custom instructions in vue". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.