- 组件内部自我沉默
全局封装 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 () => (
<button disabled={selefDisabled.value} onClick={onClick}>
{context.slots.default?.()}
</button>
)
}
- 请求前沉默，请求结束后解除沉默
对于接口请求很慢的情况下，我们自己内部设置的时间满足不了，所以我们还需要接受一个外部传入的 disabled，然后本身 Button 组件内部的 disabled 属性先通过判断 selfDisabled 如果它是 false 在判断props.disabled
props: {
disabled: {
type: Boolean as PropType<boolean>,
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
}
})
<button disabled={_disabled.value} type={props.type} class={[s.button, s[props.level]]} onClick={onClick}>
{context.slots.default?.()}
</button>
两个方案结合完整代码
props: {
onClick: () => {},
disabled: {
type: Boolean as PropType<boolean>,
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 () => (
<button disabled={_disabled.value} onClick={onClick}>
{context.slots.default?.()}
</button>
)
}
使用
const disabled = ref(false)
const handleClick = () => {
disabled.value = true
axios.post('xxx').finally(() => disabled.value = false)
}
<Button onClick={handleClick} disabled={disabled.value}>
点我
</Button>
