注册指令
src目录下创建 directives 文件
- 定义单个指令文件
// directives/debounce.js
const debounce = {
inserted: function(el, binding) {
// el : 绑定好的标签
// binding : 各种信息对象,如 value: 传递的值
}
};
export default debounce;
指令定义函数提供了几个钩子函数(可选):
- bind: 只调用一次,指令第一次绑定到元素时调用,可以定义一个在绑定时执行一次的初始化动作。
- inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
- update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值。
- componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
- unbind: 只调用一次, 指令与元素解绑时调用。
- 整合组件
// directives/index.js
// 导入指令组件
import debounce from './debounce'
// 自定义指令
const directives = {
copy,
debounce
}
export default {
install(Vue) {
Object.keys(directives).forEach((key) => {
Vue.directive(key, directives[key])
})
},
}
- 全局注册
import Vue from 'vue'
import Directives from '@/directives/index'
Vue.use(Directives)
1. 自定义指令-防抖
使用
<template>
<div>
<!-- 方式1 不需要传参直接传递方法即可 -->
<button v-debounce="func">复制</button>
<!-- 方式2 需要传递参数使用第二种,默认返回事件对象,自己可用可不用 -->
<button v-debounce="(e)=>{func(e, '1111')}">复制</button>
<!-- 方式3 支持传递对象,可以指定方法名称 -->
<button v-debounce="{method: (e)=>{func(e, '2222')}, 'eventName': 'click'}">复制</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
func(e, params){
console.log(e);
console.log(params);
}
},
}
</script>
定义指令
const debounce = {
inserted: function(el, binding) {
let timer;
let eventName = binding.value.eventName || 'click'
el.addEventListener(eventName, e => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
if (typeof binding.value === "function") {
binding.value(e);
} else {
binding.value.method(e);
}
}, 500);
});
}
};
export default debounce;
2. 复制到剪切板
使用
<div v-copy="'复制的内容'">
点我复制
</div>
2. 定义指令
const copy = {
bind(el, obj) {
const {value} = obj
el.$value = value
el.handler = () => {
if (!el.$value) {
// 值为空的时候,给出提示。可根据项目UI仔细设计
console.log('无复制内容')
return
}
// 动态创建 textarea 标签
const textarea = document.createElement('textarea')
// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域
textarea.readOnly = 'readonly'
textarea.style.position = 'absolute'
textarea.style.left = '-9999px'
// 将要 copy 的值赋给 textarea 标签的 value 属性
textarea.value = el.$value
// 将 textarea 插入到 body 中
document.body.appendChild(textarea)
// 选中值并复制
textarea.select()
const result = document.execCommand('Copy')
if (result) {
console.log('复制成功') // 可根据项目UI仔细设计
}
document.body.removeChild(textarea)
}
// 绑定点击事件,就是所谓的一键 copy 啦
el.addEventListener('click', el.handler)
},
// 当传进来的值更新的时候触发
componentUpdated(el, { value }) {
el.$value = value
},
// 指令与元素解绑的时候,移除事件绑定
unbind(el) {
el.removeEventListener('click', el.handler)
},
}
export default copy
3. 按钮权限
4. 表单格式验证
后续持续更新~