frontend/examking-app/plugins/uview-ui/components/u-badge/u-badge.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
	<view v-if="show" class="u-badge" :class="[
			isDot ? 'u-badge-dot' : '', 
			size == 'mini' ? 'u-badge-mini' : '',
			type ? 'u-badge--bg--' + type : ''
		]" :style="[{
			top: offset[0] + 'rpx',
			right: offset[1] + 'rpx',
			fontSize: fontSize + 'rpx',
			position: absolute ? 'absolute' : 'static',
			color: color,
			backgroundColor: bgColor
		}, boxStyle]"
	>
		{{showText}}
	</view>
</template>

<script>
	/**
	 * badge 角标
	 * @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
	 * @tutorial https://www.uviewui.com/components/badge.html
	 * @property {String Number} count 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为0且show-zero为false时隐藏
	 * @property {Boolean} is-dot 不展示数字，只有一个小点（默认false）
	 * @property {Boolean} absolute 组件是否绝对定位，为true时，offset参数才有效（默认true）
	 * @property {String Number} overflow-count 展示封顶的数字值（默认99）
	 * @property {String} type 使用预设的背景颜色（默认error）
	 * @property {Boolean} show-zero 当数值为 0 时，是否展示 Badge（默认false）
	 * @property {String} size Badge的尺寸，设为mini会得到小一号的Badge（默认default）
	 * @property {Array} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx。absolute为true时有效（默认[20, 20]）
	 * @property {String} color 字体颜色（默认#ffffff）
	 * @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效
	 * @property {Boolean} is-center 组件中心点是否和父组件右上角重合，优先级比offset高，如设置，offset参数会失效（默认false）
	 * @example <u-badge type="error" count="7"></u-badge>
	 */
	export default {
		name: 'u-badge',
		props: {
			// primary,warning,success,error,info
			type: {
				type: String,
				default: 'error'
			},
			// default, mini
			size: {
				type: String,
				default: 'default'
			},
			//是否是圆点
			isDot: {
				type: Boolean,
				default: false
			},
			// 显示的数值内容
			count: {
				type: [Number, String],
			},
			// 展示封顶的数字值
			overflowCount: {