选择标签组件

使用组件

安装依赖

npm install @moment-design/choose-tag --save

使用组件

<template>
  <m-button type="primary" @click="refChooseTag.open()"> 选择标签 </m-button>
  <div style="margin-top: 16px">已选数据：{{ config.data }}</div>
  <!-- 选择标签组件 -->
  <ChooseTag
    ref="refChooseTag"
    :config="config"
    @change="(v: any) => (v?.length && (config.data = v))"
  ></ChooseTag>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import ChooseTag from '../index.vue';

const refChooseTag = ref();
const config: any = reactive({
  add: true,
  max: 3,
  tags: [
    { label: '社群标签', value: 2 },
    { label: '自动标签', value: 5 },
    { label: '企微标签', value: 6 },
  ],
  apis: {
    // 数结构接口
    // querylabelType,
    // 点击树获取详情接口
    // queryLabelList,
    // 左侧搜索功能接口
    // queryTreeLabelInfo,
    // 新增标签接口
    // addLabel,
  },
  data: [],
});
</script>

API

Props

| 参数名 | 描述 | 类型 | 默认值 | | ------ | -------------------- | ------------------------------------------ | ------ | | add | 是否可添加标签 | boolean | false | | max | 最大可选数量 | number | - | | tags | 顶部一级标签显示配置 | any[{label: string, value: string,number}] | [] | | apis | 数据接口 | apisConfig | {} |

apisConfig

| 参数名 | 描述 | 类型 | 默认值 | | ------------------ | ------------------ | ---- | ------ | | querylabelType | 数结构接口 | any | - | | queryLabelList | 点击树获取详情接口 | any | - | | queryTreeLabelInfo | 左侧搜索功能接口 | any | - | | addLabel | 新增标签接口 | any | - |

Events

| 事件名 | 描述 | 参数 | | ------ | -------- | -------------- | | change | 已选数据 | (datas: any[]) |

Expose

| 事件名 | 描述 | 参数 | | ------ | ---------------- | ----------------- | | open | 主动触发打开弹窗 | datas |