el-button 鼠标点击后不自动失去焦点问题
在按钮点击后强制按钮失去焦点
1.在按钮点击的方法后加上失去焦点的方法
<el-button @click="showDetail(scope.row, $event)">详情</el-button>
showDetail (rowData, event) { if (event.target.nodeName === 'SPAN') { event.target.parentNode.blur() } else { event.target.blur() } this.openDialog(rowData) }
2.重写el-button 在内部调用失去焦点的方法
<template> <button class="el-button" @click="handleClick" :disabled="buttonDisabled || loading" :autofocus="autofocus" :type="nativeType" :class="[ type ? 'el-button--' + type : '', buttonSize ? 'el-button--' + buttonSize : '', { 'is-disabled': buttonDisabled, 'is-loading': loading, 'is-plain': plain, 'is-round': round, 'is-circle': circle } ]"> <i class="el-icon-loading" v-if="loading"></i> <i :class="icon" v-if="icon && !loading"></i> <span v-if="$slots.default"> <slot></slot> </span> </button> </template> <script> export default { name: 'ElButtonCustom', inject: { elForm: { default: '' }, elFormItem: { default: '' } }, props: { type: { type: String, default: 'default' }, size: String, icon: { type: String, default: '' }, nativeType: { type: String, default: 'button' }, loading: Boolean, disabled: Boolean, plain: Boolean, autofocus: Boolean, round: Boolean, circle: Boolean }, computed: { _elFormItemSize () { return (this.elFormItem || {}).elFormItemSize; }, buttonSize () { return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size; }, buttonDisabled () { return this.$options.propsData.hasOwnProperty('disabled') ? this.disabled : (this.elForm || {}).disabled; } }, methods: { handleClick (evt) { this.clickHandler(evt); this.$emit('click', evt); }, clickHandler (evt) { // 按钮点击事件的回调函数 let target = evt.target; if (target.nodeName == "SPAN") { target = evt.target.parentNode; } target.blur(); } } }; </script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具