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>
相关推荐
paopaokaka_luck25 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9491 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_1 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路4 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js