fs-uni-template/components/fs-text/fs-text.vue

<template>
	<text :class="[colorType, decoration, { block }]" :style="styleStr" @click="handleClick">{{ formatText(text) }}</text>
</template>

<script>
/**
 * 文本组件
 * @description 文本组件
 * @property {String} text 显示的内容文本
 * @property {String} mode = [price | phone | name] 文本处理的匹配模式
 * @property {String} color 文本颜色
 * @property {String} colorType = [primary | danger | warning | info | success | default] 文本亮颜色类型
 * @property {String} link 跳转地址
 * @property {String} linkType 跳转类型
 * @property {Boolean} bolck 块状
 * @property {Boolean} encrypt 是否加密(仅对mode=phone有效)
 * @property {String} decoration = [underline | line-through] 文字装饰
 
 */
export default {
	name: 'fs-text'
}
</script>

<script setup>
import { computed } from 'vue'

const props = defineProps({
	text: String,
	mode: {
		type: String,
		validator(value) {
			return ['price', 'phone', 'name'].includes(value)
		}
	},
	colorType: {
		type: String,
		validator(value) {
			return ['primary', 'success', 'info', 'warning', 'danger'].includes(value)
		}
	},
	color: String,
	link: String,
	linkType: {
		type: String,
		default: 'navigateTo'
	},
	block: Boolean,
	encrypt: Boolean,
	decoration: {
		type: String,
		validator(value) {
			return ['underline', 'line-through'].includes(value)
		}
	}
})
const emits = defineEmits(['click'])

const styleStr = computed(() => {
	return props.color ? `color: ${props.color};` : ''
})

const formatText = text => {
	if (props.mode === 'price') {
		return '¥' + text
	} else if (props.mode === 'name') {
		return text[0] + '**'
	} else if (props.mode === 'phone' && props.encrypt) {
		return text.slice(0, 3) + '****' + text.slice(-4)
	}
	return text
}
const handleClick = () => {
	if (props.mode === 'phone') {
		uni.makePhoneCall({
			phoneNumber: props.text
		})
	} else if (props.link) {
		uni[props.linkType]({
			url: props.link
		})
	}
	emits('click')
}
</script>

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