Vant4 Tag 標(biāo)簽

介紹

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

引入

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

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

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

代碼演示

基礎(chǔ)用法

通過 ?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>

圓角樣式

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

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

標(biāo)記樣式

通過 ?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)簽大小

通過 ?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>

自定義顏色

通過 ?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

類型定義

組件導(dǎo)出以下類型定義：

import type { TagSize, TagType, TagProps } from 'vant';

主題定制

樣式變量

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