博主介绍

📢点击下列内容可跳转对应的界面，查看更多精彩内容！

🍎主页：水香木鱼
🍍专栏：后台管理系统

文章目录

简介：这是一篇有关【Vue - 实现点击按钮（笔图标）可编辑 el-input 输入框（点击文字内容后变成＜input＞输入框同时能修改和取消）】的文章，博主用最精简的语言去表达给前端读者们。

在这里插入图片描述

1、edit组件源码

<!--edit组件-->
<template>
  <div>
    <div v-if="isEdit" class="editBox">
      <!-- 改修改框样式去下面style里 -->
      <input v-model="newVal" class="ipt" />
      <div @click="handleSave">
        <!-- 自定义提交按钮 -->
        <slot name="save"></slot>
      </div>
      <div @click="handleCancel">
        <!-- 自定义取消按钮 -->
        <slot name="cancel"></slot>
      </div>
    </div>

    <div v-else @click="handleEdit" class="editBox">
      <!-- 自定义文字样式 -->
      <div>
        {{ newVal }}
      </div>
      <slot name="button"></slot>
      <!-- 自定义编辑按钮 -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    val: {
      //文字显示
      type: String,
      default: "",
    },
  },
  data() {
    return {
      nameEditText: "nameEditText",
      newVal: this.val,
      backUp: null,
      isEdit: false,
    };
  },
  methods: {
    // 取消编辑状态
    handleCancel() {
      this.newVal = this.backUp;
      this.isEdit = false;
    },
    // 点击编辑
    handleEdit() {
      //先让其他的 编辑框为 flase
      this.$parent.$children
        .filter((item) => item.nameEditText == "nameEditText")
        .forEach((items) => {
          items.isEdit = false;
        });
      this.isEdit = true;
      this.backUp = this.newVal;
    },
    // 保存编辑($emit传递给父组件)
    // 同时清空状态
    handleSave() {
      this.isEdit = false;
      // 传递给父组件
      this.$emit("result", this.newVal);
    },
  },
};
</script>

<style scoped>
.editBox {
  display: flex;
  align-items: center;
}
.ipt {
  width: 300px;
}
</style>

2、页面使用

<template>
  <div class="box">
    <h1>本地数据：</h1>
    <el-alert :title="text" type="info"> </el-alert>
    <Edit :val="text" @result="getText">
      <a slot="button" style="margin-left: 30px" class="compile">
        <i class="el-icon-edit"></i>点击编辑
      </a>
      <a slot="save" class="save">提交</a>
      <a slot="cancel" class="cancel">取消</a>
    </Edit>
  </div>
</template>

<script>
// 注意路径
import Edit from "@/components/edit.vue";
export default {
  components: { Edit },
  data() {
    return {
      text: "水香木鱼",
    };
  },

  methods: {
    /**
     * 获取编辑后的文字(点击组件"保存"按钮后触发)
     * @description 这块就直接请求接口修改即可,相关操作都在这
     * @param {String} e - 最终文字
     * @return void
     */
    getText(e) {
      // console.log(e)
      this.text = e;

      // 其他操作 ↓
      console.log("请求接口修改数据！！");
      // ...
    },
  },
};
</script>
<style lang="less" scoped>
//提交
.save {
  color: #fff;
  background: #fc5531;
  display: inline-block;
  width: 72px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 15px;
  font-size: 14px;
}

//取消
.cancel {
  color: #fc5531;
  border: 1px solid #fc5531;
  display: inline-block;
  width: 72px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 15px;
  font-size: 14px;
}
//编辑
.compile {
  color: #fc5531;
  border: 1px solid #fc5531;
  display: inline-block;
  width: 92px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 15px;
  font-size: 14px;
}
</style>