Vant3 Tag 標(biāo)簽

介紹

用于標(biāo)記關(guān)鍵詞和概括主要內(nèi)容。

實(shí)例演示

引入

通過(guò)以下方式來(lái)全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

import { createApp } from 'vue';
import { Tag } from 'vant';

const app = createApp();
app.use(Tag);

代碼演示

基礎(chǔ)用法

通過(guò) type 屬性控制標(biāo)簽顏色。

<van-tag type="primary">標(biāo)簽</van-tag>
<van-tag type="success">標(biāo)簽</van-tag>
<van-tag type="danger">標(biāo)簽</van-tag>
<van-tag type="warning">標(biāo)簽</van-tag>

空心樣式

設(shè)置 plain 屬性設(shè)置為空心樣式。

<van-tag plain type="primary">標(biāo)簽</van-tag>

圓角樣式

通過(guò) round 設(shè)置為圓角樣式。

<van-tag round type="primary">標(biāo)簽</van-tag>

標(biāo)記樣式

通過(guò) mark 設(shè)置為標(biāo)記樣式(半圓角)。

<van-tag mark type="primary">標(biāo)簽</van-tag>

可關(guān)閉標(biāo)簽

添加 closeable 屬性表示標(biāo)簽是可關(guān)閉的，關(guān)閉標(biāo)簽時(shí)會(huì)觸發(fā) close 事件，在 close 事件中可以執(zhí)行隱藏標(biāo)簽的邏輯。

<van-tag :show="show" closeable size="medium" type="primary" @close="close">
  標(biāo)簽
</van-tag>

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);
    const close = () => {
      show.value = false;
    };

    return {
      show,
      close,
    };
  },
};

標(biāo)簽大小

通過(guò) size 屬性調(diào)整標(biāo)簽大小。

<van-tag type="primary">標(biāo)簽</van-tag>
<van-tag type="primary" size="medium">標(biāo)簽</van-tag>
<van-tag type="primary" size="large">標(biāo)簽</van-tag>

自定義顏色

通過(guò) color 和 text-color 屬性設(shè)置標(biāo)簽顏色。

<van-tag color="#7232dd">標(biāo)簽</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">標(biāo)簽</van-tag>
<van-tag color="#7232dd" plain>標(biāo)簽</van-tag>

API

Props

Slots

Events

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請(qǐng)參考ConfigProvider 組件。