Badge 徽标

在图标或文字右上角展示徽标数字或小红点。

代码示例

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="Badge徽标">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" />
			<view class="demo-row">
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge :content="5" />
					</view>
				</view>
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge :content="10" />
					</view>
				</view>
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge content="Hot" />
					</view>
				</view>
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge is-dot />
					</view>
				</view>
			</view>
		</zk-theme>

		<!-- 最大值 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="最大值" />
			<view class="demo-row">
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge :content="20" :max="9" />
					</view>
				</view>
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge :content="50" :max="20" />
					</view>
				</view>
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge :content="200" :max="99" />
					</view>
				</view>
			</view>
		</zk-theme>

		<!-- 自定义颜色 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义颜色" />
			<view class="demo-row">
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge :content="5" type="primary" />
					</view>
				</view>
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge :content="10" type="success" />
					</view>
				</view>
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge content="Hot" type="warning" />
					</view>
				</view>
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge is-dot type="info" />
					</view>
				</view>
			</view>
		</zk-theme>

		<!-- 自定义徽标内容 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义徽标内容" />
			<view class="demo-row">
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge content="NEW" />
					</view>
				</view>
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge content="HOT" />
					</view>
				</view>
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge content="99+" />
					</view>
				</view>
			</view>
		</zk-theme>

		<!-- 自定义位置偏移 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义位置偏移" />
			<view class="demo-row">
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge :content="5" :offset="[0, 0]" />
					</view>
				</view>
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge :content="10" :offset="[0, 0]" />
					</view>
				</view>
				<view class="badge-item">
					<view class="badge-container">
						<view class="demo-box"></view>
						<zk-badge content="Hot" :offset="[-10, 0]" />
					</view>
				</view>
			</view>
		</zk-theme>

		<!-- 搭配图标使用 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="搭配图标使用" />
			<view class="demo-row">
				<view class="badge-item">
					<view class="badge-container">
						<zk-icon name="chat-1-line" :size="48" :color="themeColors.textPrimary" />
						<zk-badge :content="5" />
					</view>
				</view>
				<view class="badge-item">
					<view class="badge-container">
						<zk-icon name="notification-line" :size="48" :color="themeColors.textPrimary" />
						<zk-badge content="99+" />
					</view>
				</view>
				<view class="badge-item">
					<view class="badge-container">
						<zk-icon name="user-line" :size="48" :color="themeColors.textPrimary" />
						<zk-badge is-dot />
					</view>
				</view>
			</view>
		</zk-theme>

		<!-- 独立展示 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="独立展示" />
			<view class="demo-row">
				<view class="badge-item standalone">
					<zk-badge :content="20" :fixed="false" />
				</view>
				<view class="badge-item standalone">
					<zk-badge content="99+" :fixed="false" />
				</view>
				<view class="badge-item standalone">
					<zk-badge is-dot :fixed="false" />
				</view>
			</view>
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		computed: {
			themeColors() {
				return uni.$store.state['zk-global'].theme.current
			}
		}
	}
</script>

<style>
	.demo-row {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.badge-item {
		width: 112rpx;
		margin-right: 40rpx;
		margin-bottom: 20rpx;
	}

	.badge-container {
		position: relative;
		padding: 16rpx;
	}

	.demo-box {
		width: 80rpx;
		height: 80rpx;
		background-color: #ccc;
		border-radius: 8rpx;
	}

	.badge-item.standalone {
		padding: 50rpx;
	}

	/* #ifdef APP-NVUE */
	.demo-row {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.badge-container {
		flex-direction: row;
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	.demo-row {
		display: flex;
		flex-wrap: wrap;
	}

	.badge-container {
		display: inline-block;
	}

	/* #endif */
</style>

API

Props 属性

参数	说明	类型	可选值	默认值	是否必填
content	显示的内容	number / string	-	''	否
max	最大值，超过最大值会显示 {max}+	number	-	99	否
isDot	是否显示为小红点	boolean	true / false	false	否
fixed	是否固定在右上角	boolean	true / false	true	否
type	徽标类型	string	primary / success / warning / danger / info	danger	否
bgColor	徽标背景颜色	string	-	''	否
color	徽标文字颜色	string	-	#ffffff	否
isAbsolute	是否使用绝对定位	boolean	true / false	true	否
top	上方偏移量	number / string	-	0	否
right	右侧偏移量	number / string	-	0	否
offset	设置徽标的偏移量，格式为 [x, y]	array	-	[]	否

Slots 插槽

名称	说明
default	徽标包裹的内容