耀极客论坛

 找回密码
 立即注册
查看: 590|回复: 0

vue中4个自定义指令讲解及实例用法

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 00:24:21 | 显示全部楼层 |阅读模式
  在本篇文章里小编给大家整理了一篇关于vue中4个自定义指令讲解及实例用法,有兴趣的朋友们可以跟着学习下。
  四个实用的vue自定义指令
1、v-drag
  需求:鼠标拖动元素
  思路:
  元素偏移量 = 鼠标滑动后的坐标 - 鼠标初始点击元素时的坐标 + 初始点击时元素距离可视区域的top、left。
将可视区域作为边界,限制在可视区域里面拖拽。【相关推荐:《vue.js教程》】

  代码:
  1. Vue.directive('drag', {
  2.   inserted(el) {
  3.     let header = el.querySelector('.dialog_header')
  4.     header.style.cssText += ';cursor:move;'
  5.     header.onmousedown = function (e) {
  6.       //获取当前可视区域宽、高
  7.       let clientWidth = document.documentElement.clientWidth
  8.       let clientHeight = document.documentElement.clientHeight
  9.       //获取自身宽高
  10.       let elWidth = el.getBoundingClientRect().width
  11.       let elHeight = el.getBoundingClientRect().height
  12.       //获取当前距离可视区域的top、left
  13.       let elTop = el.getBoundingClientRect().top
  14.       let elLeft = el.getBoundingClientRect().left
  15.       //获取点击时候的坐标
  16.       let startX = e.pageX
  17.       let startY = e.pageY
  18.       document.onmousemove = function (e) {
  19.         //元素偏移量 = 鼠标滑动后的坐标 - 鼠标初始点击元素时的坐标 + 初始点击时元素距离可视区域的top、left
  20.         let moveX = e.pageX - startX + elLeft
  21.         let moveY = e.pageY - startY + elTop
  22.         //将可视区域作为边界,限制在可视区域里面拖拽
  23.         if ((moveX + elWidth) > clientWidth || moveX ‹ 0 || (moveY + elHeight) > clientHeight || moveY ‹ 0) {
  24.           return
  25.         }
  26.         el.style.cssText += 'top:' + moveY + 'px;left:' + moveX + 'px;'
  27.       }
  28.       document.onmouseup = function () {
  29.         document.onmousemove = null
  30.         document.onmouseup = null
  31.       }
  32.     }
  33.   }
  34. })
复制代码
2、v-wordlimit
  需求:后台字段限制了长度,并且区分中英文,中文两个字节,英文一个字节;所以输入框需要限制输入的字数并且区分字节数,且需回显已输入的字数。
  思路:
  一个字节的正则/[\x00-\xff]/g

  创建包裹字数限制的元素,并定位布局在textarea和input框上

  分别计算输入的字符一个字节的有enLen个,两个字节的有cnLen个;用来后面字符串截断处理

  当输入的字数超过限定的字数,截断处理;substr(0,enLen+cnLen)

  接口更新了输入框的值,或者初始化输入框的值,需要回显正确的字节数

  代码:
  1. Vue.directive('wordlimit',{
  2.   bind(el,binding){
  3.     console.log('bind');
  4.     let { value } = binding
  5.     Vue.nextTick(() =>{
  6.       //找到输入框是textarea框还是input框
  7.       let current = 0
  8.       let arr = Array.prototype.slice.call(el.children)
  9.       for (let i = 0; i ‹ arr.length; i++) {
  10.         if(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
  11.           current = i
  12.         }
  13.       }
  14.    
  15.       //更新当前输入框的字节数
  16.       el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
  17.     })
  18.   },
  19.   update(el,binding){
  20.     console.log('update');
  21.     let { value } = binding
  22.     Vue.nextTick(() =>{
  23.       //找到输入框是textarea框还是input框
  24.       let current = 0
  25.       let arr = Array.prototype.slice.call(el.children)
  26.       for (let i = 0; i ‹ arr.length; i++) {
  27.         if(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
  28.           current = i
  29.         }
  30.       }
  31.    
  32.       //更新当前输入框的字节数
  33.       el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
  34.     })
  35.   },
  36.   inserted(el,binding){
  37.     console.log('inserted');
  38.     let { value } = binding
  39.     //找到输入框是textarea框还是input框
  40.     let current = 0
  41.     let arr = Array.prototype.slice.call(el.children)
  42.     for (let i = 0; i ‹ arr.length; i++) {
  43.       if(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
  44.         current = i
  45.       }
  46.     }
  47.     //创建包裹字数限制的元素,并定位布局在textarea和input框上
  48.     let div = document.createElement('div')
  49.     if(el.children[current].tagName=='TEXTAREA'){//是textarea,定位在右下角
  50.       div.style = 'color:#909399;position:absolute;font-size:12px;bottom:5px;right:10px;'
  51.     }else{
  52.       let styStr = ''
  53.       if(!el.classList.contains('is-disabled')){//input框不是置灰的状态则添加背景颜色
  54.         styStr = 'background:#fff;'
  55.       }
  56.       div.style = 'color:#909399;position:absolute;font-size:12px;bottom:2px;right:10px;line-height:28px;height:28px;'+styStr
  57.     }
  58.     div.innerHTML = '0/'+ value
  59.     el.appendChild(div)
  60.     el.children[current].style.paddingRight = '60px'
  61.     el.oninput = () =>{
  62.       let val = el.children[current].value
  63.       val = val.replace(/[^\x00-\xff]/g,'**') //eslint-disable-line
  64.       // 字数限制的盒子插入到el后是最后一个元素
  65.       el.children[el.children.length-1].innerHTML = val.length + '/' + value
  66.       if(val.length>value){
  67.         let cnLen = 0 //一个字节的字数
  68.         let enLen = 0 //两个字节的字数
  69.         if(val.match(/[^**]/g) && val.match(/[^**]/g).length){
  70.           enLen = val.match(/[^**]/g).length // 计算一个字节的字数
  71.           //一个字节两个字节都有的情况
  72.           if((value - val.match(/[^**]/g).length)>0){
  73.             cnLen = Math.floor((value - val.match(/[^**]/g).length)/2)
  74.           }else{
  75.             cnLen = 0
  76.           }
  77.         }else{ //全部两个字节的情况
  78.           enLen = 0
  79.           cnLen = Math.floor(value/2)
  80.         }
  81.         if(enLen>value){
  82.           enLen = value
  83.         }
  84.         //超过限定字节数则截取
  85.         el.children[current].value = el.children[current].value.substr(0,enLen+cnLen)
  86.         //更新当前输入框的字节数
  87.         el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
  88.       }
  89.     }
  90.   },
  91. })
复制代码
  使用:
  1. ‹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' })

  代码:
  1. Vue.directive('anchor',{
  2.   inserted(el,binding){
  3.     let { value } = binding
  4.     let timer = null
  5.     el.addEventListener('click',function(){
  6.       // 当前元素距离可视区域顶部的距离
  7.       let currentTop = el.getBoundingClientRect().top
  8.       animateScroll(currentTop)
  9.     },false)
  10.      
  11.     function animateScroll(currentTop){
  12.       if(timer){
  13.         clearInterval(timer)
  14.       }
  15.       let c = 9
  16.       timer = setInterval(() =>{
  17.         if(c==0){
  18.           clearInterval(timer)
  19.         }
  20.         c--
  21.         window.scrollBy(0,(currentTop-value)/10)
  22.       },16.7)
  23.     }
  24.   }
  25. })
复制代码
  使用:
  1. ‹div class="box" v-anchor="20">是的‹/div>
复制代码
4、v-hasRole
  需求:根据系统角色添加或删除相应元素
  代码:
  1. Vue.directive('hasRole',{
  2.   inserted(el,binding){
  3.     let { value } = binding
  4.     let roles = JSON.parse(sessionStorage.getItem('userInfo')).roleIds
  5.     if(value && value instanceof Array && value.length>0){
  6.       let hasPermission = value.includes(roles)
  7.       if(!hasPermission){
  8.         el.parentNode && el.parentNode.removeChild(el)
  9.       }
  10.     }else{
  11.       throw new Error(`请检查指令绑定的表达式,正确格式例如 v-hasRole="['admin','reviewer']"`)
  12.     }
  13.   }
  14. })
复制代码
  到此这篇关于vue中4个自定义指令讲解及实例用法的文章就介绍到这了,更多相关vue中值得了解的4个自定义指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 19:46 , Processed in 0.078825 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表