vue自定义全局指令-实现防抖与节流
export default { install(Vue, Options) { // 添加全局混入 Vue.mixin({ mounted() { console.log('组件创建成功') }, }) // 添加全局过滤器 Vue.filter('ellipsTexts', (text, num) => { if (text) { if (text.length > num) { return text.substring(0, num) + '...'; } else { return text; } } else { return text; } }) // 添加全局指令 只能输入数字 v-number-only Vue.directive('numberOnly', { bind(el) { el.handler = function () { el.value = el.value.replace(/\D+/, ''); }; el.addEventListener('input', el.handler); }, unbind(el) { el.removeEventListener('input', el.handler); } }) /*** * 防抖 单位时间只触发最后一次 * @param {?Number|300} time - 间隔时间 * @param {Function} fn - 执行事件 * @param {?String|"click"} event - 事件类型 例:"click" * @param {Array} binding.value - [fn,event,time] * 例:<el-button v-debounce="[reset,`click`,300]">刷新</el-button> * 也可简写成:<el-button v-debounce="[reset]">刷新</el-button> */ Vue.directive('debounce', { inserted: function (el, binding) { let [fn, event = "click", time = 300] = binding.value let timer el.addEventListener(event, () => { timer && clearTimeout(timer) timer = setTimeout(() => fn(), time) }) } }) /*** * 节流 每单位时间可触发一次 * 第一次瞬间触发,最后一次不管是否达到间隔时间依然触发 * 【考虑到input的change事件】 * @param {?Number|300} time - 间隔时间 * @param {Function} fn - 执行事件 * @param {?String|"click"} event - 事件类型 例:"click" * @param {Array} binding.value - [fn,event,time] * 例:<el-button v-throttle="[reset,`click`,300]">刷新</el-button> * 传递参数则:<el-button v-throttle="[()=>reset(param),`click`,300]">刷新</el-button> */ Vue.directive('throttle', { inserted: function (el, binding) { let [fn, event = "click", time = 300] = binding.value let timer, timer_end; el.addEventListener(event, () => { if (timer) { clearTimeout(timer_end); return timer_end = setTimeout(() => fn(), time); } fn(); timer = setTimeout(() => timer = null, time) }) } }) } }
//在main.js中引入
import disrective from "./disrective.js"
Vue.use(disrective)