Vant3 Tag 標簽

介紹

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

實例演示

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

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

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

代碼演示

基礎(chǔ)用法

通過 type 屬性控制標簽顏色。

<van-tag type="primary">標簽</van-tag>
<van-tag type="success">標簽</van-tag>
<van-tag type="danger">標簽</van-tag>
<van-tag type="warning">標簽</van-tag>

空心樣式

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

<van-tag plain type="primary">標簽</van-tag>

圓角樣式

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

<van-tag round type="primary">標簽</van-tag>

標記樣式

通過 mark 設(shè)置為標記樣式(半圓角)。

<van-tag mark type="primary">標簽</van-tag>

可關(guān)閉標簽

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

<van-tag :show="show" closeable size="medium" type="primary" @close="close">
  標簽
</van-tag>

import { ref } from 'vue';

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

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

標簽大小

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

<van-tag type="primary">標簽</van-tag>
<van-tag type="primary" size="medium">標簽</van-tag>
<van-tag type="primary" size="large">標簽</van-tag>

自定義顏色

通過 color 和 text-color 屬性設(shè)置標簽顏色。

<van-tag color="#7232dd">標簽</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">標簽</van-tag>
<van-tag color="#7232dd" plain>標簽</van-tag>

API

Props

Slots

Events

樣式變量

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