# Badge 徽章

Badge:可设置成圆点或数字角标,支持缩放以及定位设置。

# 组件结构

<template>
	<view
		:class="[dot ? 'tui-badge-dot' : 'tui-badge', 'tui-' + type, !dot ? 'tui-badge-scale' : '']"
		:style="{ top: top, right: right, position: absolute ? 'absolute' : 'static', transform: getStyle, margin: margin }"
		@tap="handleClick"
	>
		<slot></slot>
	</view>
</template>

# 组件脚本

<script>
	export default {
		name: 'tuiBadge',
		props: {
			//primary,warning,green,danger,white,black,gray,white_red
			type: {
				type: String,
				default: 'primary'
			},
			//是否是圆点
			dot: {
				type: Boolean,
				default: false
			},
			margin: {
				type: String,
				default: '0'
			},
			//是否绝对定位
			absolute: {
				type: Boolean,
				default: false
			},
			top: {
				type: String,
				default: '-8rpx'
			},
			right: {
				type: String,
				default: '0'
			},
			//缩放比例
			scaleRatio: {
				type: Number,
				default: 1
			},
			//水平方向移动距离
			translateX: {
				type: String,
				default: '0'
			}
		},
		computed: {
			getStyle() {
				return `scale(${this.scaleRatio}) translateX(${this.translateX})`;
			}
		},
		methods: {
			handleClick() {
				this.$emit('click', {});
			}
		}
	};
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# props

参数 类型 描述 默认值
type String 样式类型,可传入[primary,warning,green,danger,white,black,gray]等 primary
dot Boolean 是否是圆点,不显内容 false
margin String 外边距值 0
absolute Boolean 是否绝对定位 false
top String top值,定位下生效 -8rpx
right String right值,定位下生效 0
scaleRatio Number 缩放比例 1
translateX Number 水平方向移动距离 0

# methods

名称 描述
@click 点击事件

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/badge/badge

# H5二维码

# 小程序二维码