[Vue] 自定义命令

Vue 自定义命令

官方的vue命令包括：v-html v-if v-else v-show v-for等等为了提高效率，减少重复项编写，vue支持自定义命令，可以封装一些DOM操作，扩展额外的功能

语法

注册

• 全局注册

//在main.js中
Vue.directive('指令名', {"inserted" (el) {// 可以对 el 标签，扩展额外功能el.focus()}
})

• 局部注册

//在Vue组件的配置项中
directives: {"指令名": {inserted () {// 可以对 el 标签，扩展额外功能el.focus()}}
}

使用

注意：在使用指令的时候，一定要先注册，再使用，否则会报错使用指令语法： v-指令名。

如：<input type="text" v-focus/> 注册指令时不用加v-前缀，但使用时一定要加v-前缀

扩展

钩子函数:

Vue 2.X 与 Vue 3.X 相比，钩子函数是存在变化的

Vue 2.X钩子函数：

• bind：自定义指令绑定到DOM后调用。只调用一次，指令第一次绑定到元素的调用。在这里可以进行一次性的初始化设置。注意：只是加入进了DOM，但是渲染没有完成。

• inserted：自定义指令所在DOM，插入到父DOM后调用，渲染已经完成（父节点存在即可调用，不必存在于document中）。

• update：元素更新，但子元素尚未更新，将调用此钩子（自定义指令所在组件更新时执行，但是不保证更新完成）,和自定义指令所在组件有关。

• componentUpdated：组件和子级更新后执行（自定义指令所在组件更新完成，且子组件也完成更新）

• unbind：解绑（销毁）（自定义指令所在DOM销毁时执行），只调用一次。

Vue 3.X钩子函数：

• created：自定义指令所在组件，创建后调用

• beforeMount：相当于Vue 2.X中的bind，当元素被插入到DOM前调用

• mounted：相当于Vue 2.X中的inserted，当绑定元素的父组件被挂载后调用

• beforeUpdate：绑定元素的父组件更新前调用

• updated：相当于Vue 2.X中的componentUpdated，在绑定元素的父组件及他自己的所有子节点都更新后调用

• beforeUnmount：绑定元素的父组件卸载前调用

• unmounted：绑定元素的父组件卸载后调用

钩子函数参数

指令的钩子会传递以下几种参数：

• el：指令绑定到的元素。这可以直接操作DOM。

• binding：一个对象，包含以下属性。

  • value：传递给指令的值。例如在v-my-directive="1+1"中，值是2.

  • oldValue：之前的值，仅在beforeUpdate和updated中可用。无论值是否更改，它都可用.

• arg：传递给指令的参数（如果有的话）。例如在v-my-directive:foo中，参数是"foo".

• modifiers：一个包含修饰符的对象（如果有的话）。例如在v-my-directive:foo:bar中，修饰符对象是{ foo: true, bar: true }.

• instance：使用该指令的组件实例.

• dir：指令的定义对象.

• vnode：代表绑定元素的底层VNode。虚拟DOM节点，一个真实DOM元素的蓝图，对应el.

• prevNode：上一个虚拟节点。之前的渲染中代表指令所绑定元素的VNode。仅在beforUpdate和updated钩子中使用.

常用指令

1.复制粘贴指令 v-copy

实现：一键复制文本内容，用于粘贴思路：1.动态创建textarea标签，并设置reaOnly属性及移除可视区域2.将要复制的值赋给textarea标签的value属性，并插入到body3.选中值textarea并复制4.将body中插入的textarea移除5.在第一次调用时绑定事件，在解绑时移除事件

const copy = {bind(el, { value }) {el._value = valueel.handler = () => {if (!el._value) {// 复制的值为空时，给出的提示操作。console.log('无可复制的内容')return}
​// 创建 textarea 标签const textarea = document.createElement('textarea')// 设置readOnly(规定字段为只读)属性，防止 iOS下自动唤起键盘，并移除可视区域textarea.readOnly = 'readOnly'textarea.style.position = 'absolute'textarea.style.left = '-9999px'// 将需要复制的值，赋给 textarea 标签的 value  值textarea.value = el._value // 将 textarea 插入到 body 中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及复制文本即可

<template><button v-copy="text">复制</button>
</template>
​
<script>export default {data () {return {text: '这是一条复制文本'}}}
</script>

2.长按指令 v-longpress

实现：长按超过两秒，执行回调函数思路：1.创建一个计时器，两秒后执行函数2.当用户按下按钮时触发mousedown事件（移动端touchstart事件)，启动计时器；3.用户松开按钮时调用mouseout事件（移动端touchend事件）4.如果mouseup事件在两秒内触发，此事件当作普通点击事件5.如果计时器没有在两秒内清除，定为长按事件，触发相关回调函数

const longpress = {bind: (el, binding, vNode) {// 没有绑定函数抛出错误if (typeof binding.value !== 'function') {throw 'longpress callback not a function'}
​// 计时器变量el._timer = null// 运行函数el._handler = e => {binding.value(e)}// 创建计时器（2秒后执行函数）el._start = e => {// 0为鼠标左键if (e.type === 'click' && e.button !== 0) return
​if (el._timer === null) {el._timer = setTimeout(_ => {el._handler()}, 2000)
​// 取消浏览器默认事件el.addEventListener('contextmenu', e => {e.preventDefault()})}}// 两秒内松手，取消计时器el._cancel = e => {if (el._timer !== null) {clearTimeout(el._timer)el._timer = null}}
​// 添加计时监听el.addEventListener('mousedown', el._start)el.addEventListener('touchstart', el._start)// 添加取消监听el.addEventListener('click', el._cancel)el.addEventListener('mouseout', el._cancel)el.addEventListener('touchend', el._cancel)el.addEventListener('touchcancel', el._cancel)},unbind(el) {// 移除监听el.removeEventListener('mousedown', el._start)el.removeEventListener('touchstart', el._start)el.removeEventListener('click', el._cancel)el.removeEventListener('mouseout', el._cancel)el.removeEventListener('touchend', el._cancel)el.removeEventListener('touchcancel', el._cancel)}
}
​
export default longpress

使用：给DOM节点加上v-longpress及相应回调函数

<template><button v-longpress="handleLongpress">复制</button>
</template>
​
<script>export default {methods: {handleLongpress() {alert('这是长按指令')}}}
</script>

3.防抖指令 v-debounce

场景：项目开发中，经常会遇到按钮多次点击后，重复请求接口，造成数据混乱，例如表单提交。实现：使用防抖，防止按钮在短时间内多次点击，设置按钮在1秒内只能点击一次。思路：1.定义延时方法，在1秒内再调用该方法，则重新计算执行时间2.将事件绑定在点击方法上

const debounce = {inserted: (el, binding) => {// 没有绑定函数抛出错误if (typeof binding.value !== 'function') {throw 'debounce callback not a function'}
​let timerel.addEventListener('click', () => {if (timer) clearTimeout(timer)
​timer = setTimeout(_ => {binding.value()}, 1000)})}
}
​
export default debounce

使用：给DOM节点加上v-debounce及回调函数

<template><button v-debounce="handleDebounce">防抖</button>
</template>
​
<script>export default {methods: {handleDebounce() {console.log('防抖，触发一次')}}}
</script>

4.节流指令 v-throttle

场景：同防抖指令场景实现：使用节流方法，限制1秒内按钮只能点击一次思路：1.定义一个开关，默认时打开状态2.在点击按钮后关闭开关，在1秒内再点击按钮，不执行回调函数3.1秒过后，开关打开

const throttle = {bind: (el, binding) => {// 没有绑定函数抛出错误if (typeof binding.value !== 'function') {throw 'throttle callback not a function'}
​// 开关el._flag = trueel._timer = nullel._handler = () => {if (!el._flag) return
​// 函数执行后关闭开关el._flag && binding.value()el._flag = false
​if (el._timer) clearTimeout(el._timer)
​el._timer = setTimeout(_ => {el._flag = true}, 1000)}el.addEventListener('click', el._handler)},unbind: (el, binding) => {el.removeEventListener('click', el._handler)}
}
​
export default throttle

使用：给DOM节点加上v-throttle及回调函数

<template><button v-throttle="handleThrottle">节流</button>
</template>
​
<script>export default {methods: {handleThrottle() {console.log('节流，触发一次')}}}
</script>

5.点击元素外部指令 v-clickOut

场景：弹窗，点击弹窗外部（即蒙版），关闭弹窗实现：点击指定区域外部，执行相应回调函数思路：判断点击的元素是否指定元素是则不执行，否则执行相应回调函数

const clickOut = {bind: (el, binding) => {el._handler = e => {// 判断点击的元素是否本身，是则返回if (el.contains(e.target)) return
​// 如果绑定了函数，则调用函数if (typeof binding.value === 'function') {binding.value()}}
​// 添加事件监听setTimeout(_ => {document.addEventListener('click', el._handler)}, 0)},unbind(el) {// 解除事件监听document.removeEventListener('click', el._handler)}
}
​
export default clickOut

使用：给指定DOM节点加v-clickOut及回调函数

<template><!-- v-clickOut、v-click-out都可以使用 --><div style="width:100px;height:100px;background-color:red;" v-click-out="handleClickOut">target DOM</div>
</template>
​
<script>export default {methods: {handleClickOut() {console.log('外部元素触发')}}}
</script>

6.拖拽指令 v-draggable

实现：指定元素在可视区域内任意拖拽思路：设置指定元素相对定位，父元素绝对定位鼠标按下时（触发onmousedown事件）时记录指定元素当前的left、top值鼠标移动时（触发onmousemove事件）时计算每次移动的横向距离、纵向距离，并改变left、top值鼠标松开时（触发onmouseup事件）时完成一次拖拽

const draggable = {inserted: (el) => {el.style.cursor = 'move'el._onmousedown = e => {// 记录当前的left、top值let disX = e.pageX - el.offsetLeftlet disY = e.pageY - el.offsetTop
​// 鼠标移动document.onmousemove = e => {let x = e.pageX - disXlet 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 = _ => {document.onmousemove = document.onmouseup = null}}}
}
​
export default draggable

使用：给指定DOM节点加v-draggable即可

<template><!-- 需要加上position:absolute --><div style="width:40px;height:40px;background-color:green;position:absolute;" v-draggable></div>
</template>

7.水印指令 v-Money

实现：给指定页面添加背景水印思路：使用canvas特性生成base64格式的图片文件，设置其字体大小，颜色等。将其设置为背景图，实现水印效果

function addWaterMarker (str, parentNode, font, textColor) {// 水印文字，父元素，字体，文字颜色var can = document.createElement('canvas')parentNode.appendChild(can)can.width = 200can.height = 150can.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

使用：给DOM节点加上v-waterMarker，并设置水印文案，字体大小及颜色等

<template><div class="water-marker" v-waterMarker="waterMarker"></div>
</template><script>export default {waterMarker: {text: '版权所有',font: '14px Microsoft Fangc',textColor: 'rgba(180, 180, 180, 0.4)'}}
</script><style lang="scss" scoped>
.water-marker {width: 400px;height: 400px;border: 1px solid #eee;
}
</style>