tag 标签组件

标签组件

基础用法

基础用法

测试测试测试测试测试测试

<template>
	<LiRow style="width: 600px; display: flex; gap: 20px" :gutter="50">
		<LiCol style="display: flex; gap: 20px">
			<LiTag>测试</LiTag>
			<LiTag type="primary">测试</LiTag>
			<LiTag type="success">测试</LiTag>
			<LiTag type="danger">测试</LiTag>
			<LiTag type="info">测试</LiTag>
			<LiTag type="warning">测试</LiTag>
		</LiCol>
	</LiRow>
</template>
<script setup lang="ts"></script>
<style scope lang="scss"></style>

主题

使用theme属性

测试测试测试测试测试测试

测试测试测试测试测试测试

测试测试测试测试测试测试

<template>
	<LiRow style="width: 600px; display: flex; gap: 20px" :gutter="50">
		<LiCol style="display: flex; gap: 20px">
			<LiTag>测试</LiTag>
			<LiTag type="primary">测试</LiTag>
			<LiTag type="success">测试</LiTag>
			<LiTag type="danger">测试</LiTag>
			<LiTag type="info">测试</LiTag>
			<LiTag type="warning">测试</LiTag>
		</LiCol>
		<LiCol style="display: flex; gap: 20px">
			<LiTag theme="dark">测试</LiTag>
			<LiTag type="primary" theme="dark">测试</LiTag>
			<LiTag type="success" theme="dark">测试</LiTag>
			<LiTag type="danger" theme="dark">测试</LiTag>
			<LiTag type="info" theme="dark">测试</LiTag>
			<LiTag type="warning" theme="dark">测试</LiTag>
		</LiCol>
		<LiCol style="display: flex; gap: 20px">
			<LiTag theme="plain">测试</LiTag>
			<LiTag type="primary" theme="plain">测试</LiTag>
			<LiTag type="success" theme="plain">测试</LiTag>
			<LiTag type="danger" theme="plain">测试</LiTag>
			<LiTag type="info" theme="plain">测试</LiTag>
			<LiTag type="warning" theme="plain">测试</LiTag>
		</LiCol>
	</LiRow>
</template>
<script setup lang="ts"></script>
<style scope lang="scss"></style>

圆角

使用round属性

测试测试测试测试测试测试

测试测试测试测试测试测试

测试测试测试测试测试测试

<template>
	<LiRow style="width: 600px; display: flex; gap: 20px" :gutter="50">
		<LiCol style="display: flex; gap: 20px">
			<LiTag round>测试</LiTag>
			<LiTag type="primary" round>测试</LiTag>
			<LiTag type="success" round>测试</LiTag>
			<LiTag type="danger" round>测试</LiTag>
			<LiTag type="info" round>测试</LiTag>
			<LiTag type="warning" round>测试</LiTag>
		</LiCol>
		<LiCol style="display: flex; gap: 20px">
			<LiTag theme="dark" round>测试</LiTag>
			<LiTag type="primary" theme="dark" round>测试</LiTag>
			<LiTag type="success" theme="dark" round>测试</LiTag>
			<LiTag type="danger" theme="dark" round>测试</LiTag>
			<LiTag type="info" theme="dark" round>测试</LiTag>
			<LiTag type="warning" theme="dark" round>测试</LiTag>
		</LiCol>
		<LiCol style="display: flex; gap: 20px">
			<LiTag theme="plain" round>测试</LiTag>
			<LiTag type="primary" theme="plain" round>测试</LiTag>
			<LiTag type="success" theme="plain" round>测试</LiTag>
			<LiTag type="danger" theme="plain" round>测试</LiTag>
			<LiTag type="info" theme="plain" round>测试</LiTag>
			<LiTag type="warning" theme="plain" round>测试</LiTag>
		</LiCol>
	</LiRow>
</template>
<script setup lang="ts"></script>
<style scope lang="scss"></style>

可关闭

使用closable属性

测试测试测试测试测试测试

测试测试测试测试测试测试

测试测试测试测试测试测试

<template>
	<LiRow style="width: 600px; display: flex; gap: 20px" :gutter="50">
		<LiCol style="display: flex; gap: 20px">
			<LiTag closable>测试</LiTag>
			<LiTag type="primary" closable>测试</LiTag>
			<LiTag type="success" closable>测试</LiTag>
			<LiTag type="danger" closable>测试</LiTag>
			<LiTag type="info" closable>测试</LiTag>
			<LiTag type="warning" closable>测试</LiTag>
		</LiCol>
		<LiCol style="display: flex; gap: 20px">
			<LiTag theme="dark" closable>测试</LiTag>
			<LiTag type="primary" theme="dark" closable>测试</LiTag>
			<LiTag type="success" theme="dark" closable>测试</LiTag>
			<LiTag type="danger" theme="dark" closable>测试</LiTag>
			<LiTag type="info" theme="dark" closable>测试</LiTag>
			<LiTag type="warning" theme="dark" closable>测试</LiTag>
		</LiCol>
		<LiCol style="display: flex; gap: 20px">
			<LiTag theme="plain" closable>测试</LiTag>
			<LiTag type="primary" theme="plain" closable>测试</LiTag>
			<LiTag type="success" theme="plain" closable>测试</LiTag>
			<LiTag type="danger" theme="plain" closable>测试</LiTag>
			<LiTag type="info" theme="plain" closable>测试</LiTag>
			<LiTag type="warning" theme="plain" closable>测试</LiTag>
		</LiCol>
	</LiRow>
</template>
<script setup lang="ts"></script>
<style scope lang="scss"></style>

tag Attributes

参数	说明	类型	可选值	默认值
type	类型	string	default / primary / success / warning / info / danger	default
theme	主题	string	light / dark/ plain	light
closable	可关闭的	boolean		false