vue之双击实现可编辑组件

最新推荐文章于 2024-05-26 11:28:00 发布

小小liang

最新推荐文章于 2024-05-26 11:28:00 发布

阅读量1.8k

点赞数 2

分类专栏： vue 后台组件

本文链接：https://blog.csdn.net/weixin_47409897/article/details/113822810

版权

vue 后台组件专栏收录该内容

20 篇文章 6 订阅

订阅专栏

vue之双击实现可编辑组件

在这里插入图片描述

editText/EditText.vue

<template>
  <div>
    <div v-if="isEdit">
      <input type="text" v-model="newVal" />
      <button @click="save">保存</button>
      <button @click="cancel">取消</button>
    </div>
    <div v-else @dblclick="edit">{{ newVal }}</div>
  </div>
</template>

<script>
export default {
  name: "EditText",
  props: ["val"],
  data() {
    return {
      nameEditText: "nameEditText",
      newVal: this.val,
      backUp: null,
      isEdit: false
    };
  },
  methods: {
    cancel() {
      this.newVal = this.backUp;
      this.isEdit = false;
    },
    edit() {
      //先让其他的 编辑框为 flase
      this.$parent.$children
        .filter(item => item.nameEditText == "nameEditText")
        .forEach(items => {
          items.isEdit = false;
        });
      this.isEdit = true;
      this.backUp = this.newVal;
    },
    save() {
      this.isEdit = false;
    }
  },
  components: {}
};
</script>
<style lang="scss" scoped></style>

editText/index.js

/**
 * 文本双击可编辑 组件
 */
import EditText from "./EditText.vue";
EditText.install = function (vue) {
  vue.component(EditText.name, EditText);
};
export default EditText;

main.js

import EditText from "@/components/commom/editText/index";
Vue.use(EditText);

使用组件

<template>
  <div>
    <EditText :val="editObj.nickName"></EditText>
    <EditText :val="editObj.age"></EditText>
    <EditText :val="editObj.gneder"></EditText>
  </div>
</template>

<script>
export default {
  name: "Dres",
  data() {
    return {
      editObj: {
        nickName: "XZL",
        age: 22,
        gneder: "男"
      }
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped></style>