Tag 标签

该组件一般用于标记和选择，有如下特点：

• mode参数可以设置3种模式，dark(深色背景)、light(浅色背景)、plain(白色背景)
• shape参数可以设置多种形状，circle（两边半圆形）, square（方形，带圆角），circleLeft（左边半圆），circleRight（右边半圆）
• type参数可以设置5种主题，primary，success，warning，error，info

平台差异说明

基本使用

• 通过type参数设置主题类型，默认为primary
• text设置标签内容

<u-tag text="雪月夜" type="success" />

设置标签的类型

• 通过设置mode参数，可以设置标签的类型，dark(深色背景)、light(浅色背景)、plain(白色背景)

<u-tag text="一丘之貉" mode="dark" />
<u-tag text="沆瀣一气" mode="light" />
<u-tag text="狼狈为奸" mode="plain" />

设置标签的形状

通过shape参数，可以设置标签的形状，默认是square（方形，带圆角），可选：circle（两边半圆形）, circleLeft（左边半圆），circleRight（右边半圆）

<u-tag text="主谓宾" shape="circle" />
<u-tag text="定状补" shape="circleLeft" />

设置标签是否可以关闭

设置closeable参数为true，会在标签上自动添加一个关闭图标
设置可关闭后，点击关闭按钮，会发出close事件，回调中手动设置show参数为false，可以隐藏Tag

<template>
    <u-tag text="要清楚" closeable :show="show" @close="tagClick" />
</template>
<script>
    export default {
        data() {
            return {
                show: true
            }
        },
        methods: {
            tagClick(index) {
                this.show = false;
            }
        }
    }
</script>

API

Props

Event