在按钮点击后强制按钮失去焦点
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>
标签:el,鼠标,default,button,disabled,String,Boolean,evt,target From: https://www.cnblogs.com/wjian0916/p/17433798.html