防止重复点击 2.0

 关注

发布于: 2020 年 09 月 19 日

防止重复点击﻿
介绍﻿
第一版采用了Vue的指令的方式，虽然可以解决问题，但是把一些全局变量需要放到组件中，不好维护，封装也不好。所以我开发了第二版，采用组件的方式，把底层逻辑全部封装到组件中，只暴露点击事件。和原生组件保持一致。进一步降低学习难度，对使用者更友好。
﻿
组件﻿
<template>
  <je-button :type="type" :size="size" :disabled="disabled" @click="singleClick">
    <slot></slot>
  </je-button>
</template>
<script>
// 状态机，用于简单判断状态，用于防止按钮极限快速点击
const Status = (function () {
  let loading = false
  function lock() {
    loading = true
  }
  function unlock() {
    loading = false
  }
  function getStatus() {
    return loading
  }
  return {
    lock,
    unlock,
    getStatus,
  }
})()
export default {
  name: 'singleClick',
  props: {
    type: String,
    size: String,
    disabled: {
      type: Boolean,
      default: false,
    },
    isloading: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    isloading(newVal, oldVal) {
      if (newVal == false) {
        Status.unlock()
      }
    },
  },
  methods: {
    singleClick() {
      if (Status.getStatus()) return
      Status.lock()
      this.$emit('update:isloading', true)
      this.$emit('click')
    },
  },
}
</script>
<style lang="less" scoped></style>
﻿
如何使用﻿
<singleClick type="primary" size="middle" :isloading.sync="loadingStatus" :disbaled="isabled || loadingStatus" @click="commitData">提交发布</singleClick>
﻿
备注﻿
该组件依赖JEUI组件库。这是一个非常优秀的Vue组件库，作者是一个超级厉害的前端大佬。
﻿
不和disabled耦合，可以扩展使用场景，把防止重复点击变成独立功能
﻿

发布于: 2020 年 09 月 19 日阅读数: 26

原文链接:【http://xie.infoq.cn/article/933afc661cbcf08c741329aa5】。文章转载请联系作者。

老菜鸟

 关注

简单才是美 2020.09.18 加入

还未添加个人简介

发布

暂无评论