60 lines
1.6 KiB
Plaintext
60 lines
1.6 KiB
Plaintext
<template>
|
||
<!-- 提示条：内部统一由组件库 xAlert 渲染（thin 浅色模式） -->
|
||
<x-alert :status="status" :icon="resolvedIcon" :show-close="false" skin="thin" font-size="25.8rpx"
|
||
:round="alertRound" :padding="alertPadding" :margin="emptyMargin">
|
||
<text class="hr-tip-tx">{{ text }}</text>
|
||
<slot></slot>
|
||
</x-alert>
|
||
</template>
|
||
|
||
<script lang="uts" setup>
|
||
import { computed } from 'vue'
|
||
import { toRemixIcon } from '@/utils/icon.uts'
|
||
|
||
/**
|
||
* 提示条
|
||
* theme：info / warn / err / ok —— 映射到 xAlert 的 status
|
||
*/
|
||
const props = defineProps({
|
||
theme : { type: String, default: 'info' },
|
||
icon : { type: String, default: '' },
|
||
text : { type: String, default: '' }
|
||
})
|
||
|
||
const status = computed(() : string => {
|
||
if (props.theme == 'warn') { return 'warn' }
|
||
if (props.theme == 'err') { return 'error' }
|
||
if (props.theme == 'ok') { return 'success' }
|
||
return 'info'
|
||
})
|
||
|
||
/** 未传图标时交给 xAlert 按 status 取默认图标 */
|
||
const resolvedIcon = computed(() : string => {
|
||
return props.icon == '' ? '' : toRemixIcon(props.icon)
|
||
})
|
||
|
||
/**
|
||
* xAlert 的 round / margin / padding 都是「数组」prop，
|
||
* 传字符串会在内部 val.map 处抛 `val.map is not a function`，务必用数组。
|
||
*/
|
||
const alertRound = computed(() : string[] => {
|
||
return ['22rpx']
|
||
})
|
||
|
||
/** 两元素约定 = [左右, 上下]（内部按 CSS 上右下左 重排） */
|
||
const alertPadding = computed(() : string[] => {
|
||
return ['24rpx', '20rpx']
|
||
})
|
||
|
||
const emptyMargin = computed(() : string[] => {
|
||
return ['0', '0']
|
||
})
|
||
</script>
|
||
|
||
<style>
|
||
.hr-tip-tx {
|
||
font-size: 25.8rpx;
|
||
line-height: 1.55;
|
||
}
|
||
</style>
|