编写版本：v1.2.1
适用版本：v1.2.0+
前置条件：使用的工程需在 Webpack5 版本以上，并使用模块联邦（ModuleFederationPlugin）接入 ui-base-core 项目提供的共享组件

共享组件-动态标签

一、 效果图

支持折叠多个标签显示

二、 组件路径

baseCore/core-add-tag.vue

源码：ui-base-core/src/components/core-tag/add-tag.vue

三、 使用举例

template

<template>
    ...
    <el-form-item label="资产标签" prop="assetLabel">
        <CoreAddTag
          v-model="form.assetLabel"
          size="default"
          :separator="tagSeparator"
          :close-tag-before="handleAssetLabelCloseTag"
          :readonly="readonly"
          @confirm="handleConfirm"
        />
    </el-form-item>
    ...
</template>

script

<script setup>

import CoreAddTag from 'baseCore/core-add-tag.vue'
...
// 是否只读
const readonly = ref(false)
// 数据分隔符
const tagSeparator = ref(',')
// 处理提交事件
const handleConfirm = () => {

}
// 标签删除前确认事件
const handleAssetLabelCloseTag = (callback) => {
  MessageBox.confirm('确认删除操作', '提示', { 'button-size': size }).then(() => {
    callback(true)
    handleConfirm()
  }).catch(() => {})
}
...
</script>

四、 组件API

属性

事件