| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <script lang="ts" setup> |
| H | 2 | import { PropType } from 'vue' |
| 3 | import { useDesign } from '@/hooks/web/useDesign' | |
| 4 | import { propTypes } from '@/utils/propTypes' | |
| 5 | import { TipSchema } from '@/types/infoTip' | |
| 6 | ||
| 7 | defineOptions({ name: 'InfoTip' }) | |
| 8 | ||
| 9 | const { getPrefixCls } = useDesign() | |
| 10 | ||
| 11 | const prefixCls = getPrefixCls('infotip') | |
| 12 | ||
| 13 | defineProps({ | |
| 14 | title: propTypes.string.def(''), | |
| 15 | schema: { | |
| 16 | type: Array as PropType<Array<string | TipSchema>>, | |
| 17 | required: true, | |
| 18 | default: () => [] | |
| 19 | }, | |
| 20 | showIndex: propTypes.bool.def(true), | |
| 21 | highlightColor: propTypes.string.def('var(--el-color-primary)') | |
| 22 | }) | |
| 23 | ||
| 24 | const emit = defineEmits(['click']) | |
| 25 | ||
| 26 | const keyClick = (key: string) => { | |
| 27 | emit('click', key) | |
| 28 | } | |
| 29 | </script> | |
| 30 | ||
| 31 | <template> | |
| 32 | <div | |
| 33 | :class="[ | |
| 34 | prefixCls, | |
| 35 | 'p-20px mb-20px border-1px border-solid border-[var(--el-color-primary)] bg-[var(--el-color-primary-light-9)]' | |
| 36 | ]" | |
| 37 | > | |
| 38 | <div v-if="title" :class="[`${prefixCls}__header`, 'flex items-center']"> | |
| 39 | <Icon :size="22" color="var(--el-color-primary)" icon="ep:warning-filled" /> | |
| 40 | <span :class="[`${prefixCls}__title`, 'pl-5px text-16px font-bold']">{{ title }}</span> | |
| 41 | </div> | |
| 42 | <div :class="`${prefixCls}__content`"> | |
| 43 | <p v-for="(item, $index) in schema" :key="$index" class="mt-15px text-14px"> | |
| 44 | <Highlight | |
| 45 | :color="highlightColor" | |
| 46 | :keys="typeof item === 'string' ? [] : item.keys" | |
| 47 | @click="keyClick" | |
| 48 | > | |
| 49 | {{ showIndex ? `${$index + 1}、` : '' }}{{ typeof item === 'string' ? item : item.label }} | |
| 50 | </Highlight> | |
| 51 | </p> | |
| 52 | </div> | |
| 53 | </div> | |
| 54 | </template> | |
