TagsPanel 标签面板

该组件目前处于实验性状态，需要进行更加严密的测试，API 也可能发生比较大的变动

展示一组标签，并且有一个添加按钮，可以结合自己的业务场景进行组合

import { DuTagsPanel } from 'dangoui'

示例

各种示例

<template>
  <PreviewBlock title="基础">
    <DuTagsPanel
      :tags="tags"
      @add="handleAddClick"
      @remove="handleRemove"
    />
  </PreviewBlock>
  <PreviewBlock title="支持展开">
    <DuTagsPanel
      :tags="tags"
      @add="handleAddClick"
      @remove="handleRemove"
      :collapse-count="5"
    />
  </PreviewBlock>
  <PreviewBlock title="支持展开收起">
    <DuTagsPanel
      :tags="tags"
      @add="handleAddClick"
      @remove="handleRemove"
      :collapse-count="5"
      can-toggle
    />
  </PreviewBlock>
  <PreviewBlock title="使用 add 插槽">
    <DuTagsPanel
      :tags="tags"
      @add="handleAddClick"
      @remove="handleRemove"
      :collapse-count="5"
      can-toggle
    >
      <template #add>
        <DuButton size="small" type="outline">
          添加<span style="color: gray; font-weight: 400;" @click="handleAddClick">（可选）</span>
        </DuButton>
      </template>
    </DuTagsPanel>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuTagsPanel, DuButton } from 'dangoui'

const tags = ['你好', 'Hello', '안녕하세요', 'Bonjour', 'こんにちは', 'Hallo'].map(text => ({ value: text, text, canRemove: text !== '你好' }))

function handleAddClick() {
  console.log('[demo] add click')
}

function handleRemove(item) {
  console.log('[demo] remove', item.value)
}
</script>

API

属性

属性名	类型	默认值	说明
add-text	`string`	`"\u6DFB\u52A0"`	添加按钮文案
tags	`{ text: string; value: string \| number; canRemove?: boolean; }[] \| undefined`	`[]`	标签，value 是唯一标识符，没有 canRemove 字段的话默认可以删除
can-toggle	`boolean`	`false`	可以收起
collapse-count	`number`	`10`	多少个的时候显示展开按钮

插槽

名称
add

事件

名称	类型
add	`(event: "add"): void`
remove	`(event: "remove", payload: { value: string \| number; }): void`