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 = value
el.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 timer
el.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 = true
el._timer = null
el._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.offsetLeft
let disY = e.pageY - el.offsetTop
// 鼠标移动
document.onmousemove = 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 = _ => {
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 = 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
使用:给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>