前端开发的同学们应该对 Element UI
不陌生,而日常开发中,多少会存在一些组件无法完全满足我们需求的情况,或者说想在原组件的基础上附加一些功能,当遇到需要附加一些不是特别复杂的小东西的时候,采用 Vue 的自定义指令来实现,将会显得十分优雅
前景 我们知道 Element UI
的 el-input
组件 type
为 textarea
时,可通过设置 show-word-limit
属性来展示字数统计。但是我们当前项目使用的 Element UI
版本为 2.5.21
, 是没有该属性的,而我们暂时又不方便升级 Element UI
版本,而产品经理坚持要求这个小东西,那么看看如何解决这个问题
实际上这个小功能十分简单,如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <template > <div class ="el-input-wrap" > <el-input type ="textarea" :autosize ="{ minRows: 4, maxRows: 4 }" v-model ="desc" maxlength ="30" > </el-input > <span class ="el-input-count" > {{ desc.length }}/30</span > </div > </template > <script type ="text/ecmascript-6" > export default { data ( ) { return { desc: '' } } } </script > <style > .el-input-wrap { position: relative; } .el-input-count { position: absolute; line-height: 1.5; color : #909399 ; background : #fff ; font-size: 12px; bottom: 5px; right: 10px; } </style >
通过手动的方式添加父元素设置定位属性,再添加 span
元素设置定位和样式,来展示动态的长度限制效果,这么做就可以实现和新版本的 show-word-limit
一模一样的效果,然而始终有些许麻烦,每次用到的地方都要这么来一遍,且不太好抽出来封装组件,那么是不是可以考虑一下使用自定义指令来做呢?
思路 最终效果期望是通过一个指令来实现上面的效果,如
1 2 3 4 5 6 7 <el-input v-limit type ="textarea" :autosize ="{ minRows: 4, maxRows: 4 }" v-model ="desc" maxlength ="30" > </el-input >
和之前对比少了些什么?我们需要做些什么?
1,创建一个父元素 设置定位属性,这一步是展示文本是否定位在输入框的右下角的关键
2,创建一个 span
元素 设置样式,用于展示效果
3,将 el-input
绑定的值的长度填到 span
元素中
4,每次 el-input
绑定的值的长度改变时,更新 span
元素的值
思路有了,并不是很复杂,那么接下来我们看看,如何来编写这个代码
实战代码 首先创建一个js文件 showWordLimit.js
, 然后 export
一个可以注册指令的对象,然后在钩子函数 inserted
时,我们来实现第一步,创建一个父元素,并设置定位属性
1 2 3 4 5 6 7 export default { inserted: function ( ) { let wrap = document .createElement('div' ) wrap.style.position = 'relative' } }
既然是父元素,我们还需要将使用了该指令的 el-input
元素插入到这个父元素内,通过钩子的参数来拿到 dom
元素
1 2 3 4 5 6 7 8 9 export default { inserted: function (el ) { let wrap = document .createElement('div' ) wrap.style.position = 'relative' el.parentNode.replaceChild(wrap, el) wrap.appendChild(el) } }
这样下来,第一步就算完成了,下面继续创建一个 span
元素,并设置好样式,同时还要插入到刚刚创建的父元素内
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 export default { inserted: function (el ) { let wrap = document .createElement('div' ) wrap.style.position = 'relative' el.parentNode.replaceChild(wrap, el) wrap.appendChild(el) let oSpan = document .createElement('span' ) oSpan.style.lineHeight = 1.5 oSpan.style.color = '#909399' oSpan.style.position = 'absolute' oSpan.style.background = '#FFF' oSpan.style.fontSize = '12px' oSpan.style.bottom = '5px' oSpan.style.right = '10px' oSpan.innerText = '0/30' wrap.appendChild(oSpan) } }
注意到 innerText
的值,应该是个变量,根据 el-input
的 value
值长度来决定的,这里就需要用到动态指令的做法,在使用指令的时候,将这个值传过来,例如
1 2 3 4 5 6 7 <el-input v-limit ="desc.length" type ="textarea" :autosize ="{ minRows: 4, maxRows: 4 }" v-model ="desc" maxlength ="30" > </el-input >
回到 showWordLimit.js
,怎么接收这个值呢?同样也是通过钩子的参数 binding
能拿到,不清楚的可以参考Vue官方文档,自定义指令这一块,写得很清楚,拿到了之后,替换掉 span
元素的值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 export default { inserted: function (el, binding ) { let wrap = document .createElement('div' ) wrap.style.position = 'relative' el.parentNode.replaceChild(wrap, el) wrap.appendChild(el) let oSpan = document .createElement('span' ) oSpan.style.lineHeight = 1.5 oSpan.style.color = '#909399' oSpan.style.position = 'absolute' oSpan.style.background = '#FFF' oSpan.style.fontSize = '12px' oSpan.style.bottom = '5px' oSpan.style.right = '10px' oSpan.innerText = `${binding.value} /30` wrap.appendChild(oSpan) } }
OK,到目前为止,姑且可以试用一下了,在 man.js
导入并注册该指令
1 2 3 import showWordLimit from '@/directive/showWordLimit' Vue.directive('limit' , showWordLimit)
1 2 3 4 5 6 7 8 <el-input v-limit ="desc.length" type ="textarea" :autosize ="{ minRows: 4, maxRows: 4 }" v-model ="desc" maxlength ="30" > </el-input >
这个时候会发现,展示效果的数值,是不会随着输入框的内容长度变换而更新的,虽然是做了传递文本框内容长度的处理,但是在 inserted
内,它只会执行一次,如果文本框默认值的长度就有10,那么它显示的就将是10/30,然后我们编辑了内容,长度改变了,它依然还是10/30,如果想要每次编辑内容都更新这个展示效果的数值,那么久要用到另外一个钩子函数 update
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 export default { inserted: function (el, binding ) { let wrap = document .createElement('div' ) wrap.style.position = 'relative' el.parentNode.replaceChild(wrap, el) wrap.appendChild(el) let oSpan = document .createElement('span' ) oSpan.style.lineHeight = 1.5 oSpan.style.color = '#909399' oSpan.style.position = 'absolute' oSpan.style.background = '#FFF' oSpan.style.fontSize = '12px' oSpan.style.bottom = '5px' oSpan.style.right = '10px' oSpan.innerText = `${binding.value} /30` oSpan.setAttribute('id' , 'oSpan' ) wrap.appendChild(oSpan) }, update: function (el, binding ) { let oSpan = document .getElementById('oSpan' ) oSpan.innerText = `${binding.value} /30` } }
现在展示效果的数值应该已经可以实现实时更新了,细心的同学应该会发现,有个地方有遗漏,那就是展示效果的最大字符限制的数字,目前是固定死的30,那如果想限制字符为其他数值,就不行了,那要解决这个问题也非常简单,将传递过来的值,改为数组的形式即可
1 2 3 4 5 6 7 <el-input v-limit ="[desc.length, 50]" type ="textarea" :autosize ="{ minRows: 4, maxRows: 4 }" v-model ="desc" maxlength ="30" > </el-input >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 export default { inserted: function (el, binding ) { let wrap = document .createElement('div' ) wrap.style.position = 'relative' el.parentNode.replaceChild(wrap, el) wrap.appendChild(el) let oSpan = document .createElement('span' ) oSpan.style.lineHeight = 1.5 oSpan.style.color = '#909399' oSpan.style.position = 'absolute' oSpan.style.background = '#FFF' oSpan.style.fontSize = '12px' oSpan.style.bottom = '5px' oSpan.style.right = '10px' oSpan.innerText = `${binding.value[0 ]} /${binding.value[1 ]} ` oSpan.setAttribute('id' , 'oSpan' ) wrap.appendChild(oSpan) }, update: function (el, binding ) { let oSpan = document .getElementById('oSpan' ) oSpan.innerText = `${binding.value[0 ]} /${binding.value[1 ]} ` } }
至此,这个自定义指令就算完全做好了,当然难度不大,这篇文章的目的主要是希望可以给一些还没有接触过自定义指令应用的同学做个引导,讲述一个完整的应用流程和思路。
更多实例 v-copy 复制粘贴指令 需求:实现一键复制文本内容,用于鼠标右键粘贴。
思路:
动态创建 textarea 标签,并设置 readOnly 属性及移出可视区域
将要 copy 的值赋给 textarea 标签的 value 属性,并插入到 body
选中值 textarea 并复制
将 body 中插入的 textarea 移除
在第一次调用时绑定事件,在解绑时移除事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 const copy = { bind (el, { value } ) { el.$value = value el.handler = () => { if (!el.$value) { console .log('无复制内容' ) return } const textarea = document .createElement('textarea' ) textarea.readOnly = 'readonly' textarea.style.position = 'absolute' textarea.style.left = '-9999px' textarea.value = el.$value document .body.appendChild(textarea) textarea.select() const result = document .execCommand('Copy' ) if (result) { console .log('复制成功' ) } document .body.removeChild(textarea) } el.addEventListener('click' , el.handler) }, componentUpdated (el, { value } ) { el.$value = value }, unbind (el ) { el.removeEventListener('click' , el.handler) }, } export default copy
使用:给 Dom 加上 v-copy 及复制的文本即可
1 2 3 4 5 6 7 8 9 10 11 12 13 <template > <button v-copy ="copyText" > 复制</button > </template > <script > export default { data ( ) { return { copyText: 'a copy directives' , } }, } </script >
v-longpress 长按指令 需求:实现长按,用户需要按下并按住按钮几秒钟,触发相应的事件
思路:
创建一个计时器, 2 秒后执行函数
当用户按下按钮时触发 mousedown 事件,启动计时器;用户松开按钮时调用 mouseout 事件。
如果 mouseup 事件 2 秒内被触发,就清除计时器,当作一个普通的点击事件
如果计时器没有在 2 秒内清除,则判定为一次长按,可以执行关联的函数。
在移动端要考虑 touchstart,touchend 事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 const longpress = { bind: function (el, binding, vNode ) { if (typeof binding.value !== 'function' ) { throw 'callback must be a function' } let pressTimer = null let start = (e ) => { if (e.type === 'click' && e.button !== 0 ) { return } if (pressTimer === null ) { pressTimer = setTimeout (() => { handler() }, 2000 ) } } let cancel = (e ) => { if (pressTimer !== null ) { clearTimeout (pressTimer) pressTimer = null } } const handler = (e ) => { binding.value(e) } el.addEventListener('mousedown' , start) el.addEventListener('touchstart' , start) el.addEventListener('click' , cancel) el.addEventListener('mouseout' , cancel) el.addEventListener('touchend' , cancel) el.addEventListener('touchcancel' , cancel) }, componentUpdated (el, { value } ) { el.$value = value }, unbind (el ) { el.removeEventListener('click' , el.handler) }, } export default longpress
使用:给 Dom 加上 longpress 及回调函数即可
1 2 3 4 5 6 7 8 9 10 11 12 <template > <button v-longpress ="longpress" > 长按</button > </template > <script > export default { methods: { longpress () { alert('长按指令生效' ) } } }
v-debounce 输入框防抖指令 背景:在开发中,有些提交保存按钮有时候会在短时间内被点击多次,这样就会多次重复请求后端接口,造成数据的混乱,比如新增表单的提交按钮,多次点击就会新增多条重复的数据。
需求:防止按钮在短时间内被多次点击,使用防抖函数限制规定时间内只能点击一次。
思路:
定义一个延迟执行的方法,如果在延迟时间内再调用该方法,则重新计算执行时间。
将时间绑定在 click 方法上。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 const debounce = { inserted: function (el, binding ) { let timer el.addEventListener('keyup' , () => { if (timer) { clearTimeout (timer) } timer = setTimeout (() => { binding.value() }, 1000 ) }) }, } export default debounce
使用:给 Dom 加上 v-debounce 及回调函数即可
1 2 3 4 5 6 7 8 9 10 11 12 <template > <button v-debounce ="debounceClick" > 防抖</button > </template > <script > export default { methods: { debounceClick () { console .log('只触发一次' ) } } }
v-emoji 禁止表情及特殊字符 背景:开发中遇到的表单输入,往往会有对输入内容的限制,比如不能输入表情和特殊字符,只能输入数字或字母等。
我们常规方法是在每一个表单的@change 事件上做处理。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <template > <input type ="text" v-model ="note" @change ="vaidateEmoji" /> </template > <script > export default { methods: { vaidateEmoji ( ) { var reg = /[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!,。?!…—&$=()-+/*{}[\]]|\s/g this .note = this .note.replace(reg, '' ) }, }, } </script >
这样代码量比较大而且不好维护,所以我们需要自定义一个指令来解决这问题。
需求:根据正则表达式,设计自定义处理表单输入规则的指令,下面以禁止输入表情和特殊字符为例。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 let findEle = (parent, type ) => { return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type) } const trigger = (el, type ) => { const e = document .createEvent('HTMLEvents' ) e.initEvent(type, true , true ) el.dispatchEvent(e) } const emoji = { bind: function (el, binding, vnode ) { var regRule = /[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!,。?!…—&$=()-+/*{}[\]]|\s/g let $inp = findEle(el, 'input' ) el.$inp = $inp $inp.handle = function ( ) { let val = $inp.value $inp.value = val.replace(regRule, '' ) trigger($inp, 'input' ) } $inp.addEventListener('keyup' , $inp.handle) }, unbind: function (el ) { el.$inp.removeEventListener('keyup' , el.$inp.handle) }, } export default emoji
使用:将需要校验的输入框加上 v-emoji 即可
1 2 3 <template > <input type ="text" v-model ="note" v-emoji /> </template >
v-LazyLoad 图片懒加载 背景:在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度,造成不良的用户体验,所以进行图片懒加载优化势在必行。
需求:实现一个图片懒加载指令,只加载浏览器可见区域的图片。
思路:
图片懒加载的原理主要是判断当前图片是否到了可视区域这一核心逻辑实现的
拿到所有的图片 dome ,遍历每个图片判断当前图片是否到了可视区范围内
如果到了就设置图片的 src 属性,否则显示默认图片
图片懒加载有两种方式可以实现,一是绑定 srcoll 事件进行监听,二是使用 IntersectionObserver 判断图片是否到了可视区域,但是有浏览器兼容性问题。
下面封装一个懒加载指令兼容两种方法,判断浏览器是否支持 IntersectionObserver API,如果支持就使用 IntersectionObserver 实现懒加载,否则则使用 srcoll 事件监听 + 节流的方法实现。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 const LazyLoad = { install (Vue, options ) { const defaultSrc = options.default Vue.directive('lazy' , { bind (el, binding ) { LazyLoad.init(el, binding.value, defaultSrc) }, inserted (el ) { if (IntersectionObserver) { LazyLoad.observe(el) } else { LazyLoad.listenerScroll(el) } }, }) }, init (el, val, def ) { el.setAttribute('data-src' , val) el.setAttribute('src' , def) }, observe (el ) { var io = new IntersectionObserver((entries ) => { const realSrc = el.dataset.src if (entries[0 ].isIntersecting) { if (realSrc) { el.src = realSrc el.removeAttribute('data-src' ) } } }) io.observe(el) }, listenerScroll (el ) { const handler = LazyLoad.throttle(LazyLoad.load, 300 ) LazyLoad.load(el) window .addEventListener('scroll' , () => { handler(el) }) }, load (el ) { const windowHeight = document .documentElement.clientHeight const elTop = el.getBoundingClientRect().top const elBtm = el.getBoundingClientRect().bottom const realSrc = el.dataset.src if (elTop - windowHeight < 0 && elBtm > 0 ) { if (realSrc) { el.src = realSrc el.removeAttribute('data-src' ) } } }, throttle (fn, delay ) { let timer let prevTime return function (...args ) { const currTime = Date .now() const context = this if (!prevTime) prevTime = currTime clearTimeout (timer) if (currTime - prevTime > delay) { prevTime = currTime fn.apply(context, args) clearTimeout (timer) return } timer = setTimeout (function ( ) { prevTime = Date .now() timer = null fn.apply(context, args) }, delay) } }, } export default LazyLoad
使用,将组件内 标签的 src 换成 v-LazyLoad
1 <img v-LazyLoad ="xxx.jpg" />
v-permission 权限校验指令 背景:在一些后台管理系统,我们可能需要根据用户角色进行一些操作权限的判断,很多时候我们都是粗暴地给一个元素添加 v-if / v-show 来进行显示隐藏,但如果判断条件繁琐且多个地方需要判断,这种方式的代码不仅不优雅而且冗余。针对这种情况,我们可以通过全局自定义指令来处理。
需求:自定义一个权限指令,对需要权限判断的 dom 进行显示隐藏。
思路:
自定义一个权限数组
判断用户的权限是否在这个数组内,如果是则显示,否则则移除 Dom
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function checkArray (key ) { let arr = ['1' , '2' , '3' , '4' ] let index = arr.indexOf(key) if (index > -1 ) { return true } else { return false } } const permission = { inserted: function (el, binding ) { let permission = binding.value if (permission) { let hasPermission = checkArray(permission) if (!hasPermission) { el.parentNode && el.parentNode.removeChild(el) } } }, } export default permission
使用:给 v-permission 赋值判断即可
1 2 3 4 5 6 <div class ="btns" > <button v-permission ="'1'" > 权限按钮1</button > <button v-permission ="'10'" > 权限按钮2</button > </div >
vue-waterMarker 实现页面水印 需求:给整个页面添加背景水印
思路:
使用 canvas 特性生成 base64 格式的图片文件,设置其字体大小,颜色等。
将其设置为背景图片,从而实现页面或组件水印效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function addWaterMarker (str, parentNode, font, textColor ) { var can = document .createElement('canvas' ) parentNode.appendChild(can) can.width = 200 can.height = 150 can.style.display = 'none' var cans = can.getContext('2d' ) cans.rotate((-20 * Math .PI) / 180 ) cans.font = font || '16px Microsoft JhengHei' cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)' cans.textAlign = 'left' cans.textBaseline = 'Middle' cans.fillText(str, can.width / 10 , can.height / 2 ) parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png' ) + ')' } const waterMarker = { bind: function (el, binding ) { addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor) }, } export default waterMarker
使用,设置水印文案,颜色,字体大小即可
1 2 3 <template > <div v-waterMarker ="{text:'lzg版权所有',textColor:'rgba(180, 180, 180, 0.4)'}" > </div > </template >
v-draggable 拖拽指令 需求:实现一个拖拽指令,可在页面可视区域任意拖拽元素。
思路:
设置需要拖拽的元素为相对定位,其父元素为绝对定位。
鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。
鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值,并改变元素的 left 和 top 值
鼠标松开(onmouseup)时完成一次拖拽
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 const draggable = { inserted: function (el ) { el.style.cursor = 'move' el.onmousedown = function (e ) { let disx = e.pageX - el.offsetLeft let disy = e.pageY - el.offsetTop document .onmousemove = function (e ) { let x = e.pageX - disx let y = e.pageY - disy let maxX = document .body.clientWidth - parseInt (window .getComputedStyle(el).width) let maxY = document .body.clientHeight - parseInt (window .getComputedStyle(el).height) if (x < 0 ) { x = 0 } else if (x > maxX) { x = maxX } if (y < 0 ) { y = 0 } else if (y > maxY) { y = maxY } el.style.left = x + 'px' el.style.top = y + 'px' } document .onmouseup = function ( ) { document .onmousemove = document .onmouseup = null } } }, } export default draggable
使用: 在 Dom 上加上 v-draggable 即可
1 2 3 <template > <div class ="el-dialog" v-draggable > </div > </template >