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>
相关推荐
MiyueFE22 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子26 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟2 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计