给 element-plus 增加一个防抖的功能
element-plus
element-plus 功能非常强大，但是好像只有 el-autocomplete 提供了一个防抖功能，其他表单子控件并没有提供防抖功能，而 el-autocomplete 的防抖和我想要的效果又不太一样，所以只好写个函数实现我想要的防抖效果。
需求
Vue是响应性和双向绑定的，用户在文本框输入一个字母，就会立即响应，如果是表单的话问题不大，但是如果是查询的话，就有点不方便。
比如用户想查询“Vue”：输入 v 后立即响应，去后端查询“v”；然后输入u，又立即响应去后端查询“vu”；然后输入e，又立即响应去后端查询“vue”。
显然只有最后一次查询才是我们希望的，而前两次是无效查询。
如果响应时不立即查询的话，那么就需要用户在输入完毕后，还要去按“查询”按钮，这样多了一步操作，不是很方便。
这时候就需要防抖功能出场了。
功能
支持 el-input 的防抖 支持 el-checkbox-group 等其他表单子控件的防抖 支持汉字输入的防抖 使用简单，可以灵活设置
技术栈
Vue3.2 Vite2 element-plus
设计函数
原始防抖代码来自于Vue官网，介绍 customRef（https://v3.cn.vuejs.org/api/refs-api.html#customref）时使用的例子，感觉挺简洁的，于是就拿过来改了改。
核心代码：（来自Vue官网）
function useDebouncedRef(value, delay = 200) {
let timeout
return customRef((track, trigger) => {
return {
get () {
track()
return value
},
set (newValue) {
clearTimeout(timeout)
timeout = setTimeout(() => {
value = newValue
trigger()
}, delay)
}
}
})
}
是不是很简单，就是用 setTimeout 设置一个延迟提交的功能，然后每次 set 先把之前的 setTimeout 给撤销掉，这样就只保留最后一次的 setTimeout 。
这个函数用在原生 input 上面是没有问题的，但是放在 el-input 里面，就出现了一点小问题，防抖后只会出现最后一次按的字母，之前输入的字母“消失”了。输入汉字也是很怪异的样子。
用console.log在 set 和 ge t的地方分别打印 value、newValue 值，对比一下发现了问题。
原生 input
触发 set 的时候，newValue 的值 = 原来的值 + 录入的全部值。input 实时显示录入内容，但是 model 延迟后才会响应变化。el-input
触发 set 的时候，newValue 的值 = 原来的值 + 录入的最后一个值（先敲的消失了）。el-input 并不会实时显示录入内容，而是等延迟后才会更新的内容。
发现不同后我们就可以想办法解决问题了，我们建立一个 debounceRef.js 的文件：
debounceRef.js
import { customRef, watch } from'vue'
/**
* 控件的防抖输入
* @param { object } props 组件的 props
* @param { object } events 事件集合，run：立即提交；clear：清空计时，用于汉字输入
* @param { object } emit 组件的 emit
* @param { number } delay 延迟时间，默认500毫秒
* @param { string } name v-model的名称，默认 modelValue，用于emit
*/
const debounceRef = (props, events = {}, emit = () => {}, delay = 500, name = 'modelValue') => {
// 计时器
let timeout = null
// 内部变量，直接给控件赋值。
// 初始化设置属性值
let _value = (typeof props.model === 'object') ?
props.model[props.colName] :
props[name]
// 提交给属性
const _setValue = (__val) => {
if (typeof props.model === 'object') {
props.model[props.colName] = __val
} else {
emit(`update:${name}`, __val)
}
}
/**
* 立即提交的事件
*/
events.run = () => {
clearTimeout(timeout) // 清掉上一次的计时
_setValue(_value)
}
/**
* 清掉上次计时，用户汉字的连续输入
*/
events.clear = () => {
clearTimeout(timeout) // 清掉上一次的计时
}
return customRef((track, trigger) => {
// 监听父组件的属性变化，然后赋值
if (typeof props.model === 'object') {
watch(() => props.model[props.colName], (v1) => {
_value = v1
trigger()
})
} else {
watch(() => props[name], (v1) => {
_value = v1
trigger()
})
}
return {
get () {
track()
return _value
},
set (val) {
_value = val // 绑定值
trigger() // 输入内容绑定到控件，但是不提交
clearTimeout(timeout) // 清掉上一次的计时
timeout = setTimeout(() => {
_setValue(val) // 提交
}, delay)
}
}
})
}
exportdefault debounceRef
因为这是基于二次封装组件设置的函数，所以参数涉及了组件的 props 和 emit ，有的时候再次封装一下，可以让代码更简洁。
防抖输入
设置一个内部变量 _value ，用于保存输入的内容，直接给组件赋值。同时用 watch 监听属性的变化，有变化了就赋值给 _value，然后调用 trigger() 更新模板。这样可以达到一种比较好的体验效果，el-input 可以实时显示录入的信息，外部也可以通过属性进行赋值。汉字的问题
一般的汉字输入法，在敲字的时候，并不会立即触发 set，这样造成输入英文、数字和输入汉字的延迟时间不一致的问题。解决方法就是设置“键盘按下”事件，在事件里面清除 setTimeout （使用 clear 事件实现），这样就可以保持输入英文和汉字是一样的时间延迟了。立即提交的问题
输入完毕后希望立即提交，而不必等到延迟时间到了再提交，这里的解决方案是加处理事件。el-input 提供了几个事件，比如失去焦点，按回车等事件，那么可以在这些事件里面清除 setTimeout ，然后立即提交即可，通过 run 函数实现。
封装控件
为了更方便使用，我们可以基于 el-input 做二次封装，建立一个 text.vue 的文件。
text.vue，模板：
<template>
<el-input
v-model="value"
clearable
@blur="myblur"
@change="mychange"
@clear="myclear"
@keydown="mykeydown"
>
el-input>
template>
代码：
import debounceRef from'../js/debounceRef.js'
// 设置属性
const props = defineProps({
modelValue: [String, Number],
model: Object,
colName: String
})
// 设置提交
const emit = defineEmits(['update:modelValue'])
const events = {
run: () => {},
clear: () => {}
}
const value = debounceRef(props, events, emit)
// 在点击由 clearable 属性生成的清空按钮时触发
const myclear = () => {
events.run() // 立即执行
}
// 仅在输入框失去焦点或用户按下回车时触发
const mychange = () => {
events.run() // 立即执行
}
// 在 Input 失去焦点时触发
const myblur = () => {
events.run() // 立即执行
}
// 按键，用于汉字的连续输入
const mykeydown = (e) => {
// console.log('按键信息：', e)
events.clear()
}
这样在使用的时候就可以很方便了。
使用封装的控件
模板：
<nf-text v-model="retUser.name">nf-text>
<nf-text :model="retUser" colName="name" >nf-text>
代码：
const retUser = reactive({
name: '对象的响应性',
address: '',
age: 18,
like: []
})
v-model vs proxy 一般都是使用 v-model 的方式来实现双向绑定，但是我感觉有点绕圈圈，既然表单有一个 model 对象，那么为啥不能直接修改呢？于是设置了这种兼容方式，可以使用 v-model，也可以传入 model 和 属性名称，然后在子组件里面就可以通过 proxy 的 set 拦截的方式实现**“直接”**的修改。
不封装组件，直接使用
如果我就是不想封装，我想直接用行不行？当然是可以的，只需要设置好参数即可。
const retUser = reactive({
name: '对象的响应性',
address: '',
age: 18,
like: []
})
const addressProps = {
model: retUser,
colName: 'address'
}
const events = {
run: () => {},
clear: () => {}
}
const address = debounceRef(addressProps, events)
// 按键，用于汉字的连续输入
const mykeydown = (e) => {
events.clear()
}
依据 model 设置对象，再设置回调函数的对象即可。然后的用法类似于 computed。
当然这样看起来就比较麻烦了，因为一开始就是基于二次封装组件来设计的。
除了文本框还支持其他吗？
各种表单子控件，基本都支持，比如CheckBoxGroup等，虽然其 value 是数组形式，但是也同样支持的，效果就是：选择选项一、二、三，然后一起响应。
<template>
<el-checkbox-group v-model="checkList">
<el-checkbox label="Option A" />
<el-checkbox label="Option B" />
<el-checkbox label="Option C" />
<el-checkbox label="Option D" />
<el-checkbox label="Option E" />
el-checkbox-group>
<div v-if="model" style="display: none;">{{model[colName]}}div>
template>
// 设置属性
const props = defineProps({
modelValue: [Array],
model: Object,
colName: String
})
const emit = defineEmits(['update:modelValue'])
const events = {
run: () => {},
clear: () => {}
}
const checkList = debounceRef(props, events, emit)
这里就不需要设置各种事件了。
总结
个人感觉还是挺方便的。你可能觉得没必要二次封装，其实上面介绍的封装，只是整个二次封装的一小部分代码，还有其他各种功能。
不知道大家有没有猜出来我想实现什么功能？
本文作者：自然框架
个人网址：jyk.cnblogs.com
声明：本文为 脚本之家专栏作者 投稿，未经允许请勿转载。
写的不错？赞赏一下
长按扫码赞赏我
原创推荐：
妙！vue自定义指令实现一个可拖拽对话框（el-dialog专用）
手拉手带你用 vite2 + vue3 + elementPlus 做个博客尝尝鲜
vue3 专用 indexedDB 封装库，基于Promise告别回调地狱
打破约定俗成：其实Vue3的子组件也是可以“直接”改props的