王明 / Recruitment

  <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: {
  				type: Number,
  				default: 99
  			},
  			// 当数值为 0 时，是否展示 Badge
  			showZero: {
  				type: Boolean,
  				default: false
  			},
  			// 位置偏移
  			offset: {
  				type: Array,
  				default: () => {
  					return [20, 20]
  				}
  			},
  			// 是否开启绝对定位，开启了offset才会起作用
  			absolute: {
  				type: Boolean,
  				default: true
  			},
  			// 字体大小
  			fontSize: {
  				type: [String, Number],
  				default: '24'
  			},
  			// 字体演示
  			color: {
  				type: String,
  				default: '#ffffff'
  			},
  			// badge的背景颜色
  			bgColor: {
  				type: String,
  				default: ''
  			},
  			// 是否让badge组件的中心点和父组件右上角重合，配置的话，offset将会失效
  			isCenter: {
  				type: Boolean,
  				default: false
  			}
  		},

  		computed: {
  			// 是否将badge中心与父组件右上角重合
  			boxStyle() {
  				let style = {};

  				if(this.isCenter) {
  					style.top = 0;
  					style.right = 0;
  					// Y轴-50%，意味着badge向上移动了badge自身高度一半，X轴50%，意味着向右移动了自身宽度一半
  					style.transform = "translateY(-50%) translateX(50%)";
  				} else {
  					style.top = this.offset[0] + 'rpx';
  					style.right = this.offset[1] + 'rpx';
  					style.transform = "translateY(0) translateX(0)";

  				}

  				// 如果尺寸为mini，后接上scal()
  				if(this.size == 'mini') {
  					style.transform = style.transform + " scale(0.8)";

  				}

  				return style;

  			},

  			// isDot类型时，不显示文字
  			showText() {
  				if(this.isDot) return '';
  				else {
  					if(this.count > this.overflowCount) return `${this.overflowCount}+`;
  					else return this.count;

  				}
  			},

  			// 是否显示组件
  			show() {
  				// 如果count的值为0，并且showZero设置为false，不显示组件
  				if(this.count == 0 && this.showZero == false) return false;
  				else return true;
  			}

  		}
  	}
  </script>
  
  <style lang="scss" scoped>

  	@import "../../libs/css/style.components.scss";
  	

  	.u-badge {

  		/* #ifndef APP-NVUE */
  		display: inline-flex;
  		/* #endif */
  		justify-content: center;
  		align-items: center;
  		line-height: 24rpx;
  		padding: 4rpx 8rpx;
  		border-radius: 100rpx;
  		z-index: 9;

  		&--bg--primary {
  			background-color: $u-type-primary;

  		}
  		

  		&--bg--error {
  			background-color: $u-type-error;

  		}
  		

  		&--bg--success {
  			background-color: $u-type-success;

  		}
  		

  		&--bg--info {
  			background-color: $u-type-info;

  		}
  		

  		&--bg--warning {
  			background-color: $u-type-warning;

  		}
  	}

  	
  	.u-badge-dot {
  		height: 16rpx;
  		width: 16rpx;
  		border-radius: 100rpx;
  		line-height: 1;
  	}
  	
  	.u-badge-mini {
  		transform: scale(0.8);
  		transform-origin: center center;
  	}
  	
  	// .u-primary {
  	// 	background: $u-type-primary;
  	// 	color: #fff;
  	// }
  	
  	// .u-error {
  	// 	background: $u-type-error;
  	// 	color: #fff;
  	// }
  	
  	// .u-warning {
  	// 	background: $u-type-warning;
  	// 	color: #fff;
  	// }
  	
  	// .u-success {
  	// 	background: $u-type-success;
  	// 	color: #fff;
  	// }
  	
  	// .u-black {
  	// 	background: #585858;
  	// 	color: #fff;
  	// }
  	
  	.u-info {
  		background-color: $u-type-info;
  		color: #fff;
  	}
  </style>