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

发布时间:2024年01月12日

在日常开发中有输入框输入内容后,等待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>

?

文章来源:https://blog.csdn.net/m0_58235310/article/details/135548793
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。