新建自定义指令文件
import Vue from 'vue'
/**
* 防抖 就是指触发事件后在 特定间隔内 函数只能执行一次,如果在时间间隔内又触发了事件,则会重新计算函数执行时间
* 三个入参 响应函数名 时长 绑定事件名
* v-debounce="['addF',3000,'click']"
*/
Vue.directive('debounce', {
inserted: function(el, bindingObj) {
// let timer // 定义计时器对象
let flag
const [fn, time = 3000, attr = 'click'] = bindingObj.value // 解构取值 时间默认3000毫秒 绑定事件默认click
el.addEventListener(attr, () => {
if (!flag) {
flag = true
fn()
}
setTimeout(() => {
flag = false
}, time)
})
}
})
/**
* 节流 持续触发某个事件 特定时间间隔内只执行一次
* 三个入参 响应函数名 时长 绑定事件名
* v-throttle="['addF',3000,'click']"
*/
Vue.directive('throttle', {
inserted: function(el, bindingObj) {
let flag, timer
const [fn, time = 3000, attr = 'click'] = bindingObj.value // 解构取值 时间默认3000毫秒 绑定事件默认click
el.addEventListener(attr, () => {
if (flag) {
// 还没清除又触发了 就中断执行return false 重新倒计时
clearTimeout(timer)
timer = setTimeout(() => fn(), time)
return false
}
fn()
flag = setTimeout(() => (flag = null), time) // 触发后 规定时间间隔 将flag清除
})
}
})
-
超出自动省略号
/**
* 文字超出省略 使用该指令当文字内容超出宽度(默认 100 px)时自动变为省略形式
*/
Vue.directive('ellipsis', {
bind: function(el, binding) {
el.style.width = (binding.value || 100) + 'px'
el.style.whiteSpace = 'nowrap'
el.style.overflow = 'hidden'
el.style.textOverflow = 'ellipsis'
}
}
引入
//main.js
import Vue from 'vue'
//引入
import directive from './directive' // directive
//全局使用
Vue.use(directive)
//挂载
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
使用
<div slot="footer" class="dialog-footer">
<el-button v-debounce="[submitForm, 1000]" type="primary">确 定</el-button>
<el-button v-debounce="[cancel, 1000]">取 消</el-button>
</div>