Vue+ElementUI 字符串数组标签化展示组件

一. 效果

数据:'["苹果","香蕉"]'

可添加,编辑,删除。

二. 组件源码

html 复制代码
<template>
  <div>
    <div v-for="(item, index) in items"
         :key="index">
      <el-input
        v-if="inputVisible && editingIndex === index"
        ref="input"
        v-model="inputValue"
        size="mini"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      />
      <el-tag
        v-else
        closable
        disable-transitions
        @close="removeTag(index)"
        @click="editTag(index)"
      >
        {{ item }}
      </el-tag>
    </div>
    <el-input
      v-if="inputVisible && editingIndex === null"
      ref="input"
      v-model="inputValue"
      size="mini"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <el-button v-else size="small" @click="showInput">+ 添加</el-button>
  </div>
</template>

<script>
export default {
  name: "EditableTags",
  props: {
    // 接收一个 JSON 数组字符串作为初始值
    initialItems: {
      type: String,
      default: '[]'
    }
  },
  data() {
    return {
      // 解析初始值
      items: JSON.parse(this.initialItems),
      inputVisible: false,
      inputValue: '',
      editingIndex: null
    };
  },
  watch: {
    // 监听 initialItems 的变化
    initialItems: {
      handler(newItems) {
        this.items = JSON.parse(newItems);
      },
      immediate: true
    },
    // 监听 items 的变化,触发父组件的更新事件
    items: {
      handler(newItems) {
        this.$emit('update:items', JSON.stringify(newItems));
      },
      deep: true
    }
  },
  methods: {
    removeTag(index) {
      this.items.splice(index, 1);
    },
    editTag(index) {
      this.editingIndex = index;
      this.inputValue = this.items[index];
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.input[0].focus();
      });
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      if (this.inputValue) {
        if (this.editingIndex !== null) {
          this.items[this.editingIndex] = this.inputValue;
          // 由于watch监控不到数组元素值的变化, 所以手动通知
          this.$set(this.items, this.editingIndex, this.inputValue);
          this.editingIndex = null;
        } else {
          this.items.push(this.inputValue);
        }
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
  }
};
</script>

<style scoped>
.el-tag {
  margin-right: 10px;
}
</style>

三. 使用组件

html 复制代码
<template>
  <editable-tags :initial-items='items' @update:items="newItems => items = newItems" />
</template>

<script>
import EditableTags from "editableTags";

export default {
  components: {
    EditableTags
  },
  data() {
    return {
      items: '["苹果","香蕉"]',
    }
  }
};
</script>
相关推荐
西陵27 分钟前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld33 分钟前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷2 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军2 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离2 小时前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库
whysqwhw3 小时前
鸿蒙工程版本与设备版本不匹配
前端
gnip3 小时前
http缓存
前端·javascript
我不只是切图仔3 小时前
我只是想给网站加个注册验证码,咋就那么难!
前端·后端
该用户已不存在4 小时前
macOS是开发的终极进化版吗?
前端·后端