对 Button 组件防止短时间重复点击

1. 组件内部自我沉默
   全局封装 Button 组件，接受一个 onClick 属性，本身有一个自己内部的 selfDisabled，每次点击的时候触发 props.onClick 然后将自己的 selfDisabled 置为 true，一段时间置为 false

props: {
  onClick: () => {}
},
setup: (props, context) => {
  const selefDisabled = ref(false)
    const onClick = () => {
      props.onClick?.()
      selefDisabled.value = true
      setTimeout(() => {
        selefDisabled.value = false
      }, 400)
    }
return () => (
      
        {context.slots.default?.()}
      
    )
}

2. 请求前沉默，请求结束后解除沉默
   对于接口请求很慢的情况下，我们自己内部设置的时间满足不了，所以我们还需要接受一个外部传入的 disabled，然后本身 Button 组件内部的 disabled 属性先通过判断 selfDisabled 如果它是 false 在判断props.disabled

props: {
  disabled: {
      type: Boolean as PropType,
      default: false
    },
  autoSelfDisabled: {
    type: Boolean,
    default: false
  }
},
const _disabled = computed(() => {
      if (!props.autoSelfDisabled) {
        return props.disabled
      }
      if (selefDisabled.value) {
        return true
      } else {
        return props.disabled
      }
    })


        {context.slots.default?.()}
      

两个方案结合完整代码

props: {
  onClick: () => {},
disabled: {
      type: Boolean as PropType,
      default: false
    },
  autoSelfDisabled: {
    type: Boolean,
    default: false
  }
},
setup: (props, context) => {
  const selefDisabled = ref(false)
    const onClick = () => {
      props.onClick?.()
      selefDisabled.value = true
      setTimeout(() => {
        selefDisabled.value = false
      }, 400)
    }
const _disabled = computed(() => {
      if (!props.autoSelfDisabled) {
        return props.disabled
      }
      if (selefDisabled.value) {
        return true
      } else {
        return props.disabled
      }
    })
return () => (
      
        {context.slots.default?.()}
      
    )
}

使用

const disabled = ref(false)
const handleClick = () => {
  disabled.value = true
  axios.post('xxx').finally(() => disabled.value = false)
}

点我