m-tag 标签

简述

标签组件，支持多种样式、尺寸、颜色。

注意

请以 uni_modules/m-unix 与本文为准；各端差异以 uni-app 与各平台官方文档为准。涉及隐私能力（相册、定位、剪贴板、手机号等）需在 manifest 与后台完成配置。

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

演示地址

与线上 H5 演示基座 分包一致（文档站右下角预览 iframe 亦指向同一路径）。

类型	地址
分包路径	pages_demo/tag/tag
线上 H5（hash）	打开演示

基本使用

<template>
	<view>
		<m-tag text="标签"></m-tag>
	</view>
</template>

Props

参数	说明	类型	默认值
type	样式类型，见下表「type 可选值」	string	default
size	尺寸，见下表「size 可选值」	string	medium
text	标签文字（与默认插槽二选一）	string	''
plain	是否镂空样式	boolean	false
round	是否圆角胶囊	boolean	false
mark	是否标记样式（一侧直角）	boolean	false
closable	是否显示关闭图标	boolean	false
disabled	是否禁用点击	boolean	false
color	自定义文字颜色（非空时覆盖类型默认字色）	string	''
bgColor	自定义背景色	string	''
customStyle	合并到根节点样式	object	{}

type 可选值

值	说明
primary	主色
success	成功
warning	警告
danger	危险
info	信息
default	默认灰

size 可选值

值	说明
large	大号
medium	中等（默认）
small	小号
mini	迷你

Events

事件名	说明	回调参数
click	点击标签（disabled 时不触发）	原生事件
close	点击关闭图标	原生事件

插槽

名称	说明
default	标签文字

示例

不同类型

<m-tag type="primary" text="primary"></m-tag>
<m-tag type="success" text="success"></m-tag>
<m-tag type="warning" text="warning"></m-tag>
<m-tag type="danger" text="danger"></m-tag>
<m-tag type="info" text="info"></m-tag>
<m-tag type="default" text="default"></m-tag>

不同尺寸

<m-tag type="primary" size="large" text="large"></m-tag>
<m-tag type="primary" size="medium" text="medium"></m-tag>
<m-tag type="primary" size="small" text="small"></m-tag>
<m-tag type="primary" size="mini" text="mini"></m-tag>

镂空 plain

<m-tag type="primary" plain text="镂空"></m-tag>

圆角

<m-tag type="primary" text="圆角" round></m-tag>

标记样式

<m-tag type="primary" text="标记" mark></m-tag>

可关闭

<m-tag text="可关闭" closable @close="handleClose"></m-tag>

自定义颜色

<m-tag text="自定义" bgColor="#000000" color="#ffffff"></m-tag>