el-input 后面放两个按钮，点击勾保存，点击叉不保存，同时输入框失焦也不保存

在 Vue.js 中，`el-input` 是 Element UI 库中的一个文本输入组件。如果你想在输入框后面添加两个按钮，一个用于保存（勾），另一个用于取消保存（叉），并且当输入框失去焦点时也触发相应的操作，你可以这样做：

首先，你需要安装 Element UI，然后在模板中设置这样的结构：

<template>
  <div>
    <el-input v-model="inputValue" :blur="handleBlur"></el-input>
    <span @click="save">保存</span>
    <span @click="cancel">取消</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      isSaving: false, // 标记是否正在保存
    };
  },
  methods: {
    save() {
      if (!this.isSaving && this.inputValue) { // 检查是否需要保存
        this.isSaving = true;
        setTimeout(() => { // 异步模拟保存过程
          // 在这里处理保存逻辑，例如调用 API 或者本地存储等
          console.log('数据已保存');
          this.isSaving = false; // 保存完成后标记为已保存
        }, 1000);
      }
    },
    cancel() {
      this.inputValue = ''; // 清空输入值
    },
    handleBlur() {
      if (this.isSaving) { // 如果正在保存，忽略失焦事件
        return;
      }
      this.cancel(); // 输入框失去焦点时自动取消保存
    },
  },
};
</script>

在这个例子中，当你点击保存按钮时，会有一个延迟（模拟网络请求），如果在这期间输入框再次聚焦，`handleBlur` 方法会被调用，此时会自动取消保存操作。同样，只要输入框失去焦点，无论何时点击取消按钮都会清空输入值。