el-input输入内容1秒后查询

在日常开发中有输入框输入内容后，等待1秒再进行查询，封装一个函数。

js代码部分

/**
 * 自定义的ref，实现属性和内部变量的数据转换
 * @param { object } value input输入的内容
 * @param { number } duration 延迟刷新的时间，单位：毫秒，默认：0
 * @param { function } func 外部传入的查询函数，不可传值
 * @returns 自定义的ref
 */
export const eldebounceRef = (value, duration = 1000, func = null) => {
    let timer;
    return customRef((track, trigger) => {
        return {
            get() {
                // 依赖收集
                track();
                return value;
            },
            set(val) {
                clearTimeout(timer);
                // 派发更新
                trigger();
                value = val
                timer = setTimeout(() => {
                    if (func != null) {
                        func()
                    }
                }, duration)
            }
        }
    })
}

使用：

<template>
    <div class="mainrouter">
       <el-row>
        <el-col span="12" style="padding: 20px;">
            <div class="mb-4">input防抖：</div>
            <div>
                <el-input v-model="inputText" placeholder="防抖"></el-input>
                <div>{{ inputText }}</div>
            </div>
        </el-col>
       </el-row>
    </div>
</template>
<script setup>
import { ref } from 'vue'
// 防抖查询，这里是1秒后查询
import { eldebounceRef } from '@/composables/anti-shake.js'
const inputText = eldebounceRef('1',1000,search)
// 函数，疫苗后输出inputText
function search(){
    console.log(inputText.value);
}
</script>