【Vue】自定义指令(directive)、管道命令(filters)

directive、filters

指令以防暴力为例，调用示例 v-preventReClick:wait="a.bind(this)" 管道命令常用于日期格式化，调用示例 {{ val | timeFormat }}"，

官方文档: Vue => 自定义指令

/** * 防反跳。func函数在最后一次调用时刻的wait毫秒之后执行！ * @param func 执行函数 * @param wait 时间间隔 * @param immediate 为true，debounce会在wai 时间间隔的开始调用这个函数 * @returns {Function} */ export function debounce(func, wait, immediate = true) { let timestamp, timer = null; return function (...args) { if (timer) clearTimeout(timer); const now = new Date().getTime() const laster = immediate && now - (timestamp ?? 0) > wait timer = laster ? func.apply(this, args) : setTimeout(function () { func.apply(this, args); timestamp = timer = null; }, wait) timestamp = now } }

新建工具类文件 globalVue.js，通过 Vue bind 事件进行注册，局部注册的话可以在 mounted 进行重载 this.func = debounce(this.func, 100)

import { isFunction, debounce } from './util' import moment from 'moment'; // 全局公用方法 export const globalUtil = {} export default { // 全局指令 directive: { preventReClick: { bind(el, { value, arg = 250 }) { if (isFunction(value)) { el.addEventListener("click", debounce(value, arg)) } } } }, // 全局过滤器 filter: { timeFormat(val) { return moment().format(val) } } }

脚手架工程的话，直接在 main.js 中引入

import Vue from 'vue' import { default as globalVue, globalUtil } from './globalVue' // 自定义全局公用类、指令、过滤器 Vue.prototype.$util = globalUtil Object.entries(globalVue).forEach(([name, item]) => { Object.entries(item).forEach(([key, value]) => { Vue[name](key, value) }) })