QXTstore/QXTfront/uni_modules/lime-badge/components/l-badge/l-badge.uvue

<template>
	<view class="l-badge__wrapper" v-if="$slots['default'] != null">
		<slot></slot>
		<text v-if="hasContent || dot" class="l-badge" ref="textRef" :class="classes" :style="[styles]">
			<slot name="content">{{renderContent}}</slot>
		</text>
		<!-- #ifdef APP-HARMONY -->
		<text v-if="hasContent || dot" class="l-badge l-badge--offscreen" ref="offscreenRef" >
			<slot name="content">{{renderContent}}</slot>
		</text>
		<!-- #endif -->
	</view>
	<text v-else-if="hasContent || dot" class="l-badge" :class="classes" :style="[styles]">
		<slot name="content">{{renderContent}}</slot>
	</text>
</template>
<script lang="uts" setup>
	/**
	 * Badge 徽标组件
	 * @description 用于展示状态标记、消息数量等提示信息，支持多种形态和定位方式
	 * <br> 插件类型：LBadgeComponentPublicInstance 
	 * @tutorial https://ext.dcloud.net.cn/plugin?name=lime-badge
	 * 
	 * @property {string} [color] 徽标背景色（支持CSS颜色值）
	 * @property {number | string | any} content 显示内容（数字/文字）
	 * @property {boolean} dot 是否显示为小红点（优先级高于content）
	 * @property {number} max 数字最大值（超出显示为${max}+）
	 * @property {Array<string | number> | any[]} offset 位置偏移量（[x, y]）
	 * @property {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'} position 定位位置
	 * @property {'circle' | 'square' | 'bubble' | 'ribbon'} [shape] 形状（当前版本未实现）
	 * @property {boolean} showZero 数值为0时是否显示
	 * @property {'medium' | 'large'} [size] 尺寸（当前版本未实现）
	 * @property {string | number} [content] 支持字符串模板（例：'${count}条'）
	 * @property {Array<string | number>} offset 支持单位（例：['-10rpx', '20px']）
	 */
	
	import { isNumeric } from '@/uni_modules/lime-shared/isNumeric'
	import { isNumber } from '@/uni_modules/lime-shared/isNumber'
	import { addUnit } from '@/uni_modules/lime-shared/addUnit'
	import { toBoolean } from '@/uni_modules/lime-shared/toBoolean'
	import { getOffsetWithMinusString } from './utils'
	import { BadgeProps } from './type'
	const name = 'l-badge'
	const props = withDefaults(defineProps<BadgeProps>(), {
		dot: false,
		max: 99,
		showZero: false,
		// #ifdef APP-ANDROID
		// offset: [] as any[],
		// #endif
		// #ifndef APP-ANDROID
		// offset: [] as (string | number)[],
		// #endif
		position: 'top-right'
	})
	
	
	
	const context = getCurrentInstance()!
	const classes = computed(():Map<string, boolean>=>{
		const cls = new Map<string, boolean>()
		cls.set(`${name}--fixed`, toBoolean(context.slots['default']));
		cls.set(`${name}--dot`, props.dot);
		cls.set(`${name}--${props.position}`, context.slots['default'] != null);
		return cls
	})
	const styles = computed(():Map<string, any|null>=>{
		const style = new Map<string, any|null>()
		if(toBoolean(props.color)) {
			style.set('background-color', props.color!)
		}
		const positions = props.position.split('-');
		const offset = props.offset;
		if(offset != null && offset.length == 2) {
			const x = offset[0];
			const y = offset[1];
			if(context.slots['default'] != null) {
				if(positions.length == 2) {
					const offsetY = positions[0], offsetX = positions[1];
					if(isNumber(y)) {
						const _y = y as number
						style.set(offsetY, addUnit(offsetY == 'top' ? _y : -_y))
					} else {
						style.set(offsetY, offsetY == 'top' ? addUnit(y) : getOffsetWithMinusString(`${y}`))
					}
					if(isNumber(x)) {
						const _x = x as number
						style.set(offsetX, addUnit(offsetX == 'left' ? _x : -_x))
					} else {
						style.set(offsetY, offsetY == 'left' ? addUnit(x) : getOffsetWithMinusString(`${x}`))
					}
				}
			} else {
				style.set('margin-top', addUnit(y))
				style.set('margin-left', addUnit(x))
			}
		}
		return style
	});
	const hasContent = computed<boolean>(():boolean => {
		if(toBoolean(context.slots['content'])) {
			return true
		}
		const content = props.content;
		return (content != '' && content != null && (props.showZero || content !== '0'));
	});
	const renderContent = computed<string>(():string=>{
		const dot = props.dot
		const max = props.max
		const content = props.content
		if(!dot && hasContent.value) {
			if(max != 0 && isNumeric(content) && parseFloat(content.toString()) > max) {
				return `${max}+`
			}
		}
		if(dot) {
			return ''
		}
		
		return `${content ?? ""}`
	})
	// #ifdef APP-HARMONY
	// 鸿蒙BUG 显示不存
	// 暂时先绕一下
	const textRef = ref<UniTextElement|null>(null)
	const offscreenRef = ref<UniTextElement|null>(null)
	const resizeObserver = new UniResizeObserver((entries : Array<UniResizeObserverEntry>) => {
		offscreenRef.value?.getBoundingClientRectAsync()?.then(res=>{
			// const width = entries[0].target.getBoundingClientRect().width
			textRef.value!.style.setProperty('width', res.width*1.05)
		})
		
	}) 
	
	const stopWatch = watch(offscreenRef, (el:UniElement|null) => {
		if(el== null) return
		resizeObserver.observe(el)
	})
	
	onUnmounted(()=>{
		stopWatch()
		resizeObserver.disconnect()
	})
	// #endif
</script>
<style lang="scss">
	@import './index-u';
</style>