vue3 + element plus 使用el-button焦点问题 失焦操作
当我点击按钮,弹出了个提示弹窗,但是,当我弹窗关闭的时候,按钮还是处于激活的状态。点击按钮后会有激活的样式,除非点击其他地方才能取消掉,
·
问题:
点击按钮后会有激活的样式,除非点击其他地方才能取消掉,
影响:
当我点击按钮,弹出了个提示弹窗,但是,当我弹窗关闭的时候,按钮还是处于激活的状态。(体验效果差)
更改思路:
通过ref 强制失焦
代码:
<div class="monL-but monL">
<el-button plain type="primary" ref='resetBtn' @click="onReset">重置</el-button>
</div>
<script lang="ts">
export default defineComponent({
setup () {
const resetBtn = ref() // 通过ref去获取dom
const onReset = async () => {
ElMessageBox.confirm(
'是否确定此操作?', '提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).then(async () => {
ElMessage({
type: 'success',
message: '重置成功!'
})
}).catch(() => {
// console.log('取消重置')
resetBtn.value.buttonRef.blur()
// 获取 button 的dom。
// 注意 : blur()是在dom上才有,resetBtn.value获取的是组件里的属性,
// 得找到哪个属性是dom, buttonRef是dom,所以blur()能执行
})
}
}
})
return {
onReset,
resetBtn
}
</script>
更多推荐
已为社区贡献13条内容
所有评论(0)