基礎(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 v-if="show" closeable size="medium" type="primary" @close="close">
  標(biāo)簽
</van-tag>

export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    close() {
      this.show = false;
    },
  },
};

標(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>

Props

Slots

Events

樣式變量

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