input失去焦点事件和点击事件冲突的解决思路

首先说一下应用场景

 

el-input框为禁用状态时，点击取消禁用，并显示后方两个按钮，

点击绿色按钮保存input框当前值，失去焦点或点击红色框时恢复改变前的值

思路就是不在input上的失去焦点方法，而是手动调用失去焦点方法

注意mouseleave 事件不支持冒泡 。

mouseout 父元素内如果有子元素，鼠标离开子元素且未离开父元素，也会触发mouseout

<template>
    <div>
        <div
            style="display: flex; align-items: center"
            @mouseleave="handlemouseout"
        >
            <el-input
                ref="elInputFocus"
                :value="value"
                @input="elInputValue"
                :disabled="disabled"
                autofocus
            ></el-input>
            <el-button
                type="success"
                icon="el-icon-check"
                circle
                size="mini"
                v-if="!disabled"
                @click="handleConfirm"
            ></el-button>
            <el-button
                type="danger"
                icon="el-icon-close"
                circle
                size="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 = true
            this.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>