您的位置:58脚本 > treg 标记 Vant Tag 标记

treg 标记 Vant Tag 标记

2023-05-26 08:32 Vant中文教程

treg 标记 Vant Tag 标记

treg 标记 Vant Tag 标记

treg 标记

引入

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 warningstringdefault
size大小, 可选值为large mediumstring-
color标签颜色string-
plain是否为空心样式booleanfalse
round是否为圆角样式booleanfalse
mark是否为标记样式booleanfalse
text-color文本颜色,优先级高于color属性stringwhite
closeable v2.2.9是否为可关闭标签booleanfalse

Slots

名称说明
default标签显示内容

Events

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


实例演示

阅读全文
以上是58脚本为你收集整理的treg 标记 Vant Tag 标记全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 58脚本 58jiaoben.com 版权所有 联系我们
桂ICP备12005667号-28 Powered by CMS