Tag 标签

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

Forget about the Price Tag

import { DuTag } from 'dangoui'

示例

<template>
  <PreviewBlock title="大小">
    <DuTag size="mini" @click="handleClick">标签</DuTag>
    <DuTag size="small" @click="handleClick">标签</DuTag>
    <DuTag @click="handleClick">标签</DuTag>
    <DuTag size="medium" @click="handleClick">标签</DuTag>
    <DuTag size="large" @click="handleClick">标签</DuTag>
  </PreviewBlock>
  <PreviewBlock title="不同类型">
    <DuTag>标签</DuTag>
    <DuTag bg="solid" icon="lock">标签</DuTag>
    <DuTag round>标签</DuTag>
    <DuTag bordered>标签</DuTag>
    <DuTag size="small" bordered bg="ghost" icon="lock">标签</DuTag>
    <DuTag size="mini" bordered bg="ghost">标签</DuTag>
    <DuTag size="mini" bordered bg="ghost" round>标签</DuTag>
    <DuTag size="mini" bg="solid">标签</DuTag>
  </PreviewBlock>
  <PreviewBlock title="带图标">
    <DuTag size="mini" icon="lock">标签</DuTag>
    <DuTag size="small" icon="lock">标签</DuTag>
    <DuTag icon="lock">标签</DuTag>
  </PreviewBlock>
  <PreviewBlock title="可关闭">
    <DuTag size="small" closeable @close="handleClose">标签</DuTag>
    <DuTag closeable @close="handleClose">标签</DuTag>
  </PreviewBlock>
  <PreviewBlock title="内置颜色">
    <DuTag color="primary">标签</DuTag>
    <DuTag color="secondary">标签</DuTag>
    <DuTag color="success">标签</DuTag>
    <DuTag color="warning">标签</DuTag>
    <DuTag color="error">标签</DuTag>
    <DuTag color="default">标签</DuTag>
  </PreviewBlock>
  <PreviewBlock title="自定义颜色">
    <DuTag color="#B2D600" icon="lock" closeable>标签</DuTag>
    <DuTag color="#B2D600" icon="lock" bordered closeable>标签</DuTag>
    <DuTag color="#B2D600" icon="lock" bordered bg="ghost" closeable>标签</DuTag>
    <DuTag color="#B2D600" icon="lock" bordered bg="solid" closeable>标签</DuTag>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuTag } from 'dangoui'

function handleClose() {
  console.log('[demo] close')
}

function handleClick() {
  console.log('[demo] click')
}
</script>

API

属性

属性名	类型	默认值	说明
color	`string \| { border: string; text: string; background: string; }`	`"primary"`	颜色，可以使用主题预置的颜色或者十六进制颜色表示，也可以使用对象更灵活地来自定义颜色 TODO: 抽象到公用类型中，并可以外部扩展，这样就能进行主题定制与扩展
ext-class	`string \| string[] \| Record<string, boolean>`	`""`
ext-style	`string \| { [x: string]: string \| number; }`	`""`
size	`"normal" \| "mini" \| "small" \| "medium" \| "large"`	`"normal"`	大小
round	`boolean`	`false`	是否为圆角
bordered	`boolean`	`false`	是否带有边框
closeable	`boolean`	`false`	是否可关闭（显示一个关闭按钮）
bg	`"ghost" \| "soft" \| "solid"`	`"soft"`	实心、淡色、透明
icon	`string`	-	左侧

插槽

名称
default

事件

名称	类型
click	`(event: "click", event: any): void`
close	`(event: "close"): void`