AI教程网 - 未来以来,拥抱AI;新手入门,从AI教程网开始......

Vant Tag 标记

VANT教程 AI君 57℃

引入

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

Vue.use(Tag);

代码演示

基础用法

通过type属性控制标签颜色,默认为灰色

<van-tag>标签</van-tag>
<van-tag type="primary">标签</van-tag>
<van-tag type="success">标签</van-tag>
<van-tag type="danger">标签</van-tag>
<van-tag type="warning">标签</van-tag>

圆角样式

通过round设置为圆角样式

<van-tag round>标签</van-tag>
<van-tag round type="primary">标签</van-tag>
<van-tag round type="success">标签</van-tag>
<van-tag round type="danger">标签</van-tag>
<van-tag round type="warning">标签</van-tag>

标记样式

通过mark设置为标记样式(半圆角)

<van-tag mark>标签</van-tag>
<van-tag mark type="primary">标签</van-tag>
<van-tag mark type="success">标签</van-tag>
<van-tag mark type="danger">标签</van-tag>
<van-tag mark type="warning">标签</van-tag>

空心样式

设置plain属性设置为空心样式

<van-tag plain>标签</van-tag>
<van-tag plain type="primary">标签</van-tag>
<van-tag plain type="success">标签</van-tag>
<van-tag plain type="danger">标签</van-tag>
<van-tag plain type="warning">标签</van-tag>

自定义颜色

<van-tag color="#f2826a">标签</van-tag>
<van-tag color="#f2826a" plain>标签</van-tag>
<van-tag color="#7232dd">标签</van-tag>
<van-tag color="#7232dd" plain>标签</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>

标签大小

<van-tag type="danger">标签</van-tag>
<van-tag type="danger" size="medium">标签</van-tag>
<van-tag type="danger" size="large">标签</van-tag>

可关闭标签

添加closeable属性表示标签是可关闭的,关闭标签时会触发close事件,在close事件中可以执行隐藏标签的逻辑

<van-tag
  v-if="show.primary"
  closeable
  size="medium"
  type="primary"
  @close="close('primary')"
>
  标签
</van-tag>
<van-tag
  v-if="show.success"
  closeable
  size="medium"
  type="success"
  @close="close('success')"
>
  标签
</van-tag>
export default {
  data() {
    return {
      show: {
        primary: true,
        success: true
      }
    }
  },
  methods: {
    close(type) {
      this.show[type] = false;
    }
  }
}

API

Props

参数 说明 类型 默认值
type 类型,可选值为primary success danger warning string default
size 大小, 可选值为large medium string
color 标签颜色 string
plain 是否为空心样式 boolean false
round 是否为圆角样式 boolean false
mark 是否为标记样式 boolean false
text-color 文本颜色,优先级高于color属性 string white
closeable v2.2.9 是否为可关闭标签 boolean false

Slots

名称 说明
default 标签显示内容

Events

事件名 说明 回调参数
click 点击时触发 event: Event
close 关闭标签时触发

转载请注明:www.ainoob.cn » Vant Tag 标记

喜欢 (2)or分享 (0)