vue3 输入框防抖

又菜又不想学的小张

已于 2023-07-25 17:10:09 修改

阅读量282

点赞数

文章标签： vue.js javascript 前端

于 2023-07-24 17:18:26 首次发布

本文链接：https://blog.csdn.net/qq_45108358/article/details/131900579

版权

说明：在每次输入的值中如果停止输入超过1s就会触发input事件

在 utils文件夹里面创建一个debounce.js文件

const TrackDirective = {
  /* 输入框防抖
  mounted: (el, binding) => {
    const debounceTime = 1000; 
      el.addEventListener('input', () => {
        clearTimeout(TrackDirective.timeoutId);
        TrackDirective.timeoutId = setTimeout(() => {
          binding.value();
        }, debounceTime);
      })
  }, */
  
  // 适配中文的防抖
  mounted: (el, binding) => {
    const debounceTime = 1000;
    let composing = false;
  
    el.addEventListener('compositionstart', () => {
      composing = true;
    });
  
    el.addEventListener('compositionend', () => {
      composing = false;
      clearTimeout(TrackDirective.timeoutId);
      TrackDirective.timeoutId = setTimeout(() => {
        if (!composing) {
          binding.value();
        }
      }, debounceTime);
    });
  
    el.addEventListener('input', () => {
      if (!composing) {
        clearTimeout(TrackDirective.timeoutId);
        TrackDirective.timeoutId = setTimeout(() => {
          binding.value();
        }, debounceTime);
      }
    });
  }
}
export default TrackDirective

在main.js里面进行引入

import { createApp } from 'vue'
import TrackDirective from './utils/debounce';
const app = createApp(App);
app.directive('track', TrackDirective)

在页面中进行使用时v-track
注意：其中绑定的input事件是输入值时触发的事件

 <van-field v-model="styleNo"  v-track="input" required label="款号" placeholder="请输入款号" center />

const input = () => {
  let params = {
    styleno: styleNo.value //输入框的值
  }
  progressApi(params).then(res => {  //调取的接口
    console.log(res);
    columns.value = res.Data
  })
}