首先说一下应用场景
el-input框为禁用状态时，点击取消禁用，并显示后方两个按钮，
点击绿色按钮保存input框当前值，失去焦点或点击红色框时恢复改变前的值
思路就是不在input上的失去焦点方法，而是手动调用失去焦点方法
注意mouseleave 事件不支持冒泡 。
mouseout 父元素内如果有子元素，鼠标离开子元素且未离开父元素，也会触发mouseout
<template><div><divstyle="display: flex; align-items: center"@mouseleave="handlemouseout"><el-inputref="elInputFocus":value="value"@input="elInputValue":disabled="disabled"autofocus></el-input><el-buttontype="success"icon="el-icon-check"circlesize="mini"v-if="!disabled"@click="handleConfirm"></el-button><el-buttontype="danger"icon="el-icon-close"circlesize="mini"v-if="!disabled"@click="handleClose"></el-button></div></div></template><script>import { Input } from "element-ui";export default {extends: Input,model: {prop: ["value"],},components: {},props: {value: {type: String,default: "",},disabled: {type: Boolean,default: false,},},watch: {disabled(val) {if (!val) {this.$nextTick(() => {this.$refs.elInputFocus.focus();});}else{this.flag=false}},value(newval, oldval) {this.oldValue = oldval;this.newValue = newval;},},computed: {},data() {return {oldValue: "",newValue: "",flag: false,};},methods: {handlemouseout(e){console.log(e);this.flag = truethis.handleBlur()},elInputValue(e) {this.$emit("input", e);},handleConfirm() {this.flag = true;this.$emit("input", this.newValue);this.$emit("confirm");},handleClose() {this.$refs.elInputFocus.blur();if (this.oldValue) {this.$emit("input", this.oldValue);}this.$emit("close");},handleBlur() {if (this.disabled && this.flag) {return;}this.$refs.elInputFocus.blur();if (this.oldValue) {this.$emit("input", this.oldValue);}this.$emit("blur");},},created() {},mounted() {},};</script><style lang="scss" scoped>.el-input {margin-right: 10px;}.el-button {width: 26px;height: 26px;}</style>
如果觉得《input失去焦点事件和点击事件冲突的解决思路》对你有帮助，请点赞、收藏，并留下你的观点哦！
