jiuyiUniapp/jiuyi/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-text.vue

94 lines
1.7 KiB
Vue
Raw Normal View History

2024-12-18 15:46:27 +08:00
<template>
<div
:class="[
'message-abstract-text',
`message-abstract-text-${highlightType}`,
`message-abstract-text-${displayType}`,
]"
>
<span
v-for="(contentItem, index) in contentText"
:key="index"
:class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
>
{{ transformTextWithKeysToEmojiNames(contentItem.text) }}
</span>
</div>
</template>
<script setup lang="ts">
import { ref, withDefaults } from '../../../../../adapter-vue';
import { transformTextWithKeysToEmojiNames } from '../../../../TUIChat/emoji-config';
import { IHighlightContent } from '../../../type';
interface IProps {
content: IHighlightContent[];
highlightType: 'font' | 'background';
displayType: 'info' | 'bubble';
}
const props = withDefaults(defineProps<IProps>(), {
content: () => ([]) as IHighlightContent[],
highlightType: 'font',
displayType: 'info',
});
const contentText = ref<Array<{ text: string; isHighlight: boolean }>>(props.content);
</script>
<style scoped lang="scss">
@import "../../../../../assets/styles/common";
.message-abstract-text {
justify-content: flex-start;
&-font {
color: #999;
.highlight {
color: #007aff;
}
.normal {
color: #999;
}
}
&-background {
color: #1f2329;
.highlight {
background-color: #007aff33;
}
.normal {
font-size: 14px;
}
}
&-info {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
.highlight {
font-size: 12px;
}
.normal {
font-size: 12px;
}
}
&-bubble {
font-size: 14px;
.highlight {
font-size: 14px;
}
.normal {
font-size: 14px;
}
}
}
</style>