支持 Vue2/Vue3 版本 无差别使用

安装

npm i @blueking/collapsible-tag

使用

• vue3框架下使用

<template>
  <div class="container">
    <CollapsibleTag
      v-model="selected"
      :data="zones"
      :multiple="true"
      :tag-max-width="120"
      :tag-min-width="120"
    />
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';

  import CollapsibleTag from '@blueking/collapsible-tag';
  import '@blueking/collapsible-tag/vue3/vue3.css'

  const selected = ref([3, 4, 10, 15]);
  const zones = ref([
    {
      id: 1,
      name: '广州一区',
    },
    {
      id: 2,
      name: '广州二区二区',
    },
    {
      id: 3,
      name: '广州三区',
    },
    {
      id: 4,
      name: '广州四区四区四区',
    },
    {
      id: 5,
      name: '广州五区广州五区广州五区广州五区广州五区广州五区广州五区',
    },
    {
      id: 6,
      name: '广州六区',
    },
    {
      id: 7,
      name: '广州七区七区七区七区七区',
    },
    {
      id: 8,
      name: '广州八区',
    },
    {
      id: 9,
      name: '广州九区',
      disabled: true,
    },
    {
      id: 10,
      name: '广州十十区',
    },
    {
      id: 11,
      name: '广州十一区',
    },
    {
      id: 12,
      name: '广州十二区',
    },
    {
      id: 13,
      name: '广州十三区',
    },
    {
      id: 14,
      name: '广州十四区',
    },
    {
      id: 15,
      name: '广州十五区',
    },
    {
      id: 16,
      name: '广州十六区',
    },
  ]);
</script>

• vue2框架下使用

<template>
  <div class="container">
    <CollapsibleTag
      v-model="selected"
      :data="zones"
      :multiple="true"
      :tag-max-width="120"
      :tag-min-width="120"
    />
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';

  import CollapsibleTag from '@blueking/collapsible-tag/vue2';
  import '@blueking/collapsible-tag/vue2/vue2.css'

  const selected = ref([3, 4, 10, 15]);
  const zones = ref([
    {
      id: 1,
      name: '广州一区',
    },
    {
      id: 2,
      name: '广州二区二区',
    },
    {
      id: 3,
      name: '广州三区',
    },
    {
      id: 4,
      name: '广州四区四区四区',
    },
    {
      id: 5,
      name: '广州五区广州五区广州五区广州五区广州五区广州五区广州五区',
    },
    {
      id: 6,
      name: '广州六区',
    },
    {
      id: 7,
      name: '广州七区七区七区七区七区',
    },
    {
      id: 8,
      name: '广州八区',
    },
    {
      id: 9,
      name: '广州九区',
      disabled: true,
    },
    {
      id: 10,
      name: '广州十十区',
    },
    {
      id: 11,
      name: '广州十一区',
    },
    {
      id: 12,
      name: '广州十二区',
    },
    {
      id: 13,
      name: '广州十三区',
    },
    {
      id: 14,
      name: '广州十四区',
    },
    {
      id: 15,
      name: '广州十五区',
    },
    {
      id: 16,
      name: '广州十六区',
    },
  ]);
</script>

属性列表

| 属性名 | 描述 | 属性类型 | 默认值 | | ------------ | ---------------------------------------------------------------------------------------- | ----------------------- | -------- | | modelValue | 选中的值 | TagData['id'][] | [] | | data | tag列表数据 | TagData[] | [] | | lineClamp | 展示多少行，根据此属性自动计算是否显示展开/收起操作 | number | 2 | | getId | 默认读取id的数据key为id，可通过此方法自定义，接收参数 (data: TagData) 返回 id 值 | function | | | getName | 默认读取name的数据key为name，可通过此方法自定义，接收参数 (data: TagData) 返回 name 值 | function | | | disabled | 是否 disabled | boolean | false | | readonly | 是否 readonly | boolean | false | | multiple | 是否 multiple | boolean | false | | required | 是否 required，为 true 时必须要保留一个选中项 | boolean | false | | expandText | 展开操作的文本 | string | 展开全部 | | collapseText | 收起操作的文本 | string | 收起 | | emptyText | 空数据的文本 | string | 无数据 | | tagMinWidth | tag的最小宽度 | number | 120 | | tagMaxWidth | tag的最大宽度 | number | 260 | | autoExpand | 是否自动展开，'selected' 表示当有选中项被折叠时自动展开 | 'selected' \| boolean | false |

事件列表

| 事件名 | 参数 | 参数类型 | 描述 | | ------ | ------------- | ---------------- | ----------------- | | toggle | collapsed | boolean | 展开/收起切换事件 | | select | tag, selected | TagData, boolean | 选择tag事件 | | change | value | TagData['id'][] | 新的选中项 |

类型

export interface ICollapsibleTagProps {
  modelValue: TagData['id'][];
  data: TagData[];
  lineClamp: number;
  getId?: (data: TagData) => TagData['id'];
  getName?: (data: TagData) => TagData['name'];
  disabled?: boolean;
  readonly?: boolean;
  multiple?: boolean;
  required?: boolean;
  expandText?: string;
  collapseText?: string;
  emptyText?: string;
  tagMinWidth?: number;
  tagMaxWidth?: number;
  autoExpand?: 'selected' | boolean;
}

export type TagData = {
  id: number | string;
  name: string;
  disabled?: boolean;
  disabledTips?: string;
  [key: string]: boolean | number | string | undefined;
};