首页 > 其他分享 >vue 项目中实现按钮防抖

vue 项目中实现按钮防抖

时间:2022-12-09 16:33:29浏览次数:40  
标签:防抖 vue .. antiShake timer let 按钮

1.新建 .js文件存放防抖方法

// 防抖
export const antiShake= (fn, t) => {
  let delay = t || 1000
  let timer
  return function () {
    let args = arguments;
    if (timer) {
      clearTimeout(timer)
    }
 
    let callNow = !timer
 
    timer = setTimeout(() => {
      timer = null
    }, delay)
 
    if (callNow) fn.apply(this, args)
  }
}

2.引入防抖文件,methods中添加方法

//引入防抖文件
import { antiShake } from '../../../../common/antiShake.js'; //防抖

methods: {  
         //给按钮添加防抖
        startDrawPolygon: antiShake(function () {
            this.getDepartments() //按钮触发的方法
        }),
}


3.html代码

<el-button @click="startDrawPolygon()" style="background-color:#409EFF; color: #FFF;" slot="append" icon="el-icon-search">搜索</el-button>

标签:防抖,vue,..,antiShake,timer,let,按钮
From: https://www.cnblogs.com/chenxdnote/p/16969302.html

相关文章

  • vite+ts+vue3+router4+Pinia+ElmPlus+axios+mock项目基本配置
    1.vite+TS+Vue3npmcreateviteProjectname:...yourProjectNameSelectaframework:>>VueSelectavariant:>>Typescrit2.修改vite基本配置配置Vite{#configu......
  • vue3组合式api<script lang="ts" setup>中如何接收父组件props传值,以及子组件emit回调
    子组件children.vue首先要引入<scriptlang="ts"setup>import{defineProps,defineEmits}from"vue";constprops=defineProps<{id:string,option:any}>()c......
  • 【Vue】单元格合并,与动态校验
     效果要求先看需求效果:多个数据授权项,配置的时候,业务名称大多数都是一样的,需要合并单元格处理  在elementUI组件文档中有说明[合并列行]:https://element.eleme......
  • vue-router路由
    安装先查看node_modules中是否存在vue-routervue-router是一个插件包,所以我们还是需要用npm/cnpm来进行安装的,在第一个vue-cli文件下输入以下命令npminstallvue-route......
  • vue fullcalendar日历拖拽插入整理
    <!--交易时间管理--><template><divclass="container"><Row><Colspan="6"><divclass="module-title">假期列表</div><divclass="......
  • vue3 使用vue3-video-play
    1.安装版本"vue3-video-play":"^1.3.1-beta.6",2.在main.ts中进行组件注册import{createApp}from'vue'importAntdfrom'ant-design-vue'importAppfrom'......
  • vue之vue-router路由
    vue-router简介:VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:嵌套的路由/视图表模块化的、基于组件的路......
  • vue之element-ui
    注意:命令行都要使用管理员模式运行第一步:创建vue工程下面处理项目,创建安装依赖等,都是在命令行进行处理。创建一个工程(vue)vueinitwebpackvue安装依赖,我们需要安装vue-ro......
  • vue3 Vuex使用
    首先src下要有src\store\index.jsindex.js先引入creatStoreimport{createStore}from'vuex'exportdefaultcreateStore({state(){return{......
  • 基于Python+Django+Vue+MYSQL的社团管理系统
    OverridetheentrypointofanimageIntroducedinGitLabandGitLabRunner9.4.Readmoreaboutthe extendedconfigurationoptions.Beforeexplainingtheav......