You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.3 KiB
Vue
64 lines
1.3 KiB
Vue
3 months ago
|
<template>
|
||
|
|
<view class="g-components-chat-message g_fs_17 g_flex_row_start" >
|
||
|
|
<div class="g_flex_column_center">
|
||
|
|
{{displayedMessage}}
|
||
|
|
</div>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
cusMessage: {
|
||
|
|
type: String,
|
||
|
|
default: () => {
|
||
|
|
return '';
|
||
|
|
},
|
||
|
|
},
|
||
|
|
isRender:{
|
||
|
|
default: () => {
|
||
|
|
return 0;
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
isShow:0,
|
||
|
|
displayedMessage: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
cusMessage: {
|
||
|
|
handler(newVal) {
|
||
|
|
const hasDot = newVal.endsWith('。');
|
||
|
|
const messageWithoutDot = hasDot ? newVal.slice(0, -1) : newVal;
|
||
|
|
this.displayedMessage = messageWithoutDot;
|
||
|
|
if (this.isShow) {
|
||
|
|
this.displayedMessage = messageWithoutDot + '...';
|
||
|
|
} else {
|
||
|
|
this.displayedMessage = hasDot ? messageWithoutDot + '。' : messageWithoutDot;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
immediate: true
|
||
|
|
},
|
||
|
|
'isRender': {
|
||
|
|
handler(newVal) {
|
||
|
|
this.isShow = newVal;
|
||
|
|
const hasDot = this.cusMessage.endsWith('。');
|
||
|
|
const messageWithoutDot = hasDot ? this.cusMessage.slice(0, -1) : this.cusMessage;
|
||
|
|
this.displayedMessage = this.isShow ? messageWithoutDot + '...' : (hasDot ? messageWithoutDot + '。' : messageWithoutDot);
|
||
|
|
},
|
||
|
|
immediate: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created(){
|
||
|
|
this.isShow = this.isRender;
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
</style>
|