493 lines
16 KiB
Vue
493 lines
16 KiB
Vue
|
<template>
|
|||
|
|
<view class="zh-readMore">
|
|||
|
|
<view class="zh-readMore-wrapper" :style="[textStyle]">
|
|||
|
|
<view
|
|||
|
|
class="zh-text"
|
|||
|
|
:class="textClass"
|
|||
|
|
:style="[textStyleObject, { '--unfold_packup_line': `${unfold_packup_line}px` }, { '--duration': `${duration}s` }]"
|
|||
|
|
>
|
|||
|
|
<view class="zh-open" :style="[unfoldTextStyle]" v-if="!showall && is_open" @click.stop="open">
|
|||
|
|
<text class="zh-ellipsis">...</text>
|
|||
|
|
<text class="zh-open-text">{{ unfoldText }}</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="" :style="[lineBreakStyles]">
|
|||
|
|
<text v-if="title" :style="[titleStyle]">{{ title }}</text>
|
|||
|
|
{{ text }}
|
|||
|
|
</text>
|
|||
|
|
<text class="zh-fewer" v-if="is_open && showall" @click.stop="open">
|
|||
|
|
<text class="zh-fewer-text" :style="[packupTextStyle]">{{ packupText }}</text>
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="zh-overflowcont" id="zh-overflowcont" :style="[textStyle, lineStyle]">
|
|||
|
|
<text class="zh-overflowcont-text" :style="[lineBreakStyle]">
|
|||
|
|
<text v-if="title" :style="[titleStyle]">{{ title }}</text>
|
|||
|
|
{{ text }}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="zh-overflowcont" id="zh-overflowcontline" :style="[textStyle]">
|
|||
|
|
<text class="" :style="[lineBreakStyle]">{{ text }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="zh-overflowcont">
|
|||
|
|
<view class="" :style="[unfoldTextStyle]" id="zh-open">
|
|||
|
|
<text class="zh-ellipsis">...</text>
|
|||
|
|
<text class="zh-overflowcont-open">{{ unfoldText }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- #ifdef VUE3 -->
|
|||
|
|
<!-- vue3 -->
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
/*
|
|||
|
|
* @param {text,String} 需要展示的文本
|
|||
|
|
* @param {textStyle,Object} 需要展示的文本样式
|
|||
|
|
* @param {rows,Number} 文本容器中超出多行后显示省略号
|
|||
|
|
* @param {lineBreak,Boolean} 保留空白字符序列，同时允许正常换行
|
|||
|
|
* @param {packupLineBreak,Boolean} 只在收起时，忽略空白字符；展开时，保留空白字符序列，同时允许正常换行
|
|||
|
|
* @param {unfoldText,String} 展开操作的文案
|
|||
|
|
* @param {unfoldTextStyle,Object} 展开操作的样式
|
|||
|
|
* @param {packupText,String} 收起操作的文案
|
|||
|
|
* @param {packupTextStyle,Object} 收起操作的样式
|
|||
|
|
* @param {duration,Number || String} 展示动画过度时间(单位s)
|
|||
|
|
*/
|
|||
|
|
import { computed, nextTick, ref, watch, getCurrentInstance } from 'vue'
|
|||
|
|
const props = defineProps({
|
|||
|
|
title: {
|
|||
|
|
type: String,
|
|||
|
|
default: () => '',
|
|||
|
|
},
|
|||
|
|
titleStyle: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => ({
|
|||
|
|
'font-weight': '600',
|
|||
|
|
'margin-right': '10rpx',
|
|||
|
|
}),
|
|||
|
|
},
|
|||
|
|
text: {
|
|||
|
|
type: String,
|
|||
|
|
default: () => '',
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => ({
|
|||
|
|
color: '#000',
|
|||
|
|
'font-size': '28rpx',
|
|||
|
|
'font-weight': '400',
|
|||
|
|
}),
|
|||
|
|
},
|
|||
|
|
rows: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 3,
|
|||
|
|
},
|
|||
|
|
lineBreak: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true,
|
|||
|
|
},
|
|||
|
|
packupLineBreak: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false,
|
|||
|
|
},
|
|||
|
|
unfoldText: {
|
|||
|
|
type: String,
|
|||
|
|
default: () => '展开',
|
|||
|
|
},
|
|||
|
|
unfoldTextStyle: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => ({
|
|||
|
|
color: '#206ef7',
|
|||
|
|
'font-size': '28rpx',
|
|||
|
|
'font-weight': '400',
|
|||
|
|
}),
|
|||
|
|
},
|
|||
|
|
packupText: {
|
|||
|
|
type: String,
|
|||
|
|
default: () => '收起',
|
|||
|
|
},
|
|||
|
|
packupTextStyle: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => ({
|
|||
|
|
color: '#206ef7',
|
|||
|
|
'font-size': '28rpx',
|
|||
|
|
'font-weight': '400',
|
|||
|
|
}),
|
|||
|
|
},
|
|||
|
|
duration: {
|
|||
|
|
type: [Number, String],
|
|||
|
|
default: () => 0,
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const box_h = ref(0) //展开后的高度
|
|||
|
|
const showall = ref(false) //是否展开
|
|||
|
|
const is_open = ref(false) //是否显示展开/收起按钮
|
|||
|
|
const unfold_packup_line = ref(22) //展开收起宽度
|
|||
|
|
const settime = ref(null) //定时器标识
|
|||
|
|
|
|||
|
|
const instance = getCurrentInstance()
|
|||
|
|
const selectQuery = uni.createSelectorQuery().in(instance.proxy)
|
|||
|
|
|
|||
|
|
//导出自定义事件
|
|||
|
|
const emit = defineEmits(['click'])
|
|||
|
|
|
|||
|
|
//事件
|
|||
|
|
//展开收起事件
|
|||
|
|
const open = () => {
|
|||
|
|
showall.value = !showall.value
|
|||
|
|
emit('click', showall.value) //展开true 关闭false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//计算属性
|
|||
|
|
|
|||
|
|
const textStyleObject = computed(() => {
|
|||
|
|
const { rows } = props
|
|||
|
|
return {
|
|||
|
|
'max-height': showall.value ? `${1.5 * box_h.value}em` : `${1.5 * rows}em`,
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const textClass = computed(() => {
|
|||
|
|
return showall.value ? 'showall' : ''
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const lineStyle = computed(() => {
|
|||
|
|
const { rows } = props
|
|||
|
|
return {
|
|||
|
|
display: '-webkit-box',
|
|||
|
|
'-webkit-box-orient': 'vertical',
|
|||
|
|
'-webkit-line-clamp': rows,
|
|||
|
|
overflow: 'hidden',
|
|||
|
|
'word-break': 'break-all',
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const lineBreakStyles = computed(() => {
|
|||
|
|
const { lineBreak, packupLineBreak } = props
|
|||
|
|
if (!lineBreak) {
|
|||
|
|
return {
|
|||
|
|
'white-space': 'normal',
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (packupLineBreak) {
|
|||
|
|
return {
|
|||
|
|
'white-space': showall.value ? 'pre-wrap' : 'normal',
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
return {
|
|||
|
|
'white-space': 'pre-wrap',
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const lineBreakStyle = computed(() => {
|
|||
|
|
const { lineBreak } = props
|
|||
|
|
return {
|
|||
|
|
'white-space': lineBreak ? 'pre-wrap' : 'normal',
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 监听
|
|||
|
|
watch(
|
|||
|
|
() => props.text,
|
|||
|
|
(newValue, oldValue) => {
|
|||
|
|
const { rows } = props
|
|||
|
|
nextTick(() => {
|
|||
|
|
clearTimeout(settime.value)
|
|||
|
|
settime.value = setTimeout(() => {
|
|||
|
|
selectQuery.select(`#zh-overflowcont`).boundingClientRect()
|
|||
|
|
selectQuery.select('#zh-overflowcontline').boundingClientRect()
|
|||
|
|
selectQuery.select('#zh-open').boundingClientRect()
|
|||
|
|
selectQuery.exec(res => {
|
|||
|
|
if (res && res[0] && res[1]) {
|
|||
|
|
const h1 = res[0].height // 收起时高度
|
|||
|
|
const h2 = res[1].height // 展开时高度
|
|||
|
|
const lineCount = rows
|
|||
|
|
const lineHeight = h1 / lineCount
|
|||
|
|
|
|||
|
|
// 计算实际行数（考虑空行）
|
|||
|
|
const actualLines = Math.ceil(h2 / lineHeight)
|
|||
|
|
|
|||
|
|
// 如果实际行数超过限制行数，或者高度差超过0.1行，才显示展开/收起按钮
|
|||
|
|
if (actualLines > lineCount || h2 > h1 + lineHeight * 0.1) {
|
|||
|
|
is_open.value = true
|
|||
|
|
} else {
|
|||
|
|
is_open.value = false
|
|||
|
|
}
|
|||
|
|
box_h.value = Math.ceil(h2 / lineHeight) + 1
|
|||
|
|
showall.value = false
|
|||
|
|
}
|
|||
|
|
if (res && res[2]) {
|
|||
|
|
let unfold_packup_width = res[2].height - 1.5 || 22
|
|||
|
|
unfold_packup_line.value = unfold_packup_width
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}, 100)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
deep: true,
|
|||
|
|
immediate: true,
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- #endif -->
|
|||
|
|
|
|||
|
|
<!-- #ifdef VUE2 -->
|
|||
|
|
<!-- vue2 -->
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/*
|
|||
|
|
* @param {text,String} 需要展示的文本
|
|||
|
|
* @param {textStyle,Object} 需要展示的文本样式
|
|||
|
|
* @param {rows,Number} 文本容器中超出多行后显示省略号
|
|||
|
|
* @param {lineBreak,Boolean} 保留空白字符序列，同时允许正常换行
|
|||
|
|
* @param {packupLineBreak,Boolean} 只在收起时，忽略空白字符；展开时，保留空白字符序列，同时允许正常换行
|
|||
|
|
* @param {unfoldText,String} 展开操作的文案
|
|||
|
|
* @param {unfoldTextStyle,Object} 展开操作的样式
|
|||
|
|
* @param {packupText,String} 收起操作的文案
|
|||
|
|
* @param {packupTextStyle,Object} 收起操作的样式
|
|||
|
|
* @param {duration,Number || String} 展示动画过度时间(单位s)
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'zh-readMore',
|
|||
|
|
props: {
|
|||
|
|
title: {
|
|||
|
|
type: String,
|
|||
|
|
default: () => '',
|
|||
|
|
},
|
|||
|
|
titleStyle: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => ({
|
|||
|
|
'font-weight': '600',
|
|||
|
|
'margin-right': '10rpx',
|
|||
|
|
}),
|
|||
|
|
},
|
|||
|
|
text: {
|
|||
|
|
type: String,
|
|||
|
|
default: () => '',
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => ({
|
|||
|
|
color: '#000',
|
|||
|
|
'font-size': '28rpx',
|
|||
|
|
'font-weight': '400',
|
|||
|
|
}),
|
|||
|
|
},
|
|||
|
|
rows: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 3,
|
|||
|
|
},
|
|||
|
|
lineBreak: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true,
|
|||
|
|
},
|
|||
|
|
packupLineBreak: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false,
|
|||
|
|
},
|
|||
|
|
unfoldText: {
|
|||
|
|
type: String,
|
|||
|
|
default: () => '展开',
|
|||
|
|
},
|
|||
|
|
unfoldTextStyle: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => ({
|
|||
|
|
color: '#206ef7',
|
|||
|
|
'font-size': '28rpx',
|
|||
|
|
'font-weight': '400',
|
|||
|
|
}),
|
|||
|
|
},
|
|||
|
|
packupText: {
|
|||
|
|
type: String,
|
|||
|
|
default: () => '收起',
|
|||
|
|
},
|
|||
|
|
packupTextStyle: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => ({
|
|||
|
|
color: '#206ef7',
|
|||
|
|
'font-size': '28rpx',
|
|||
|
|
'font-weight': '400',
|
|||
|
|
}),
|
|||
|
|
},
|
|||
|
|
duration: {
|
|||
|
|
type: Number || String,
|
|||
|
|
default: () => 0,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
box_h: 0, //展开后的高度
|
|||
|
|
showall: false, //是否展开
|
|||
|
|
is_open: false, //是否显示展开/收起按钮
|
|||
|
|
unfold_packup_line: 22, //展开收起宽度
|
|||
|
|
settime: null, //定时器标识
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//展开收起事件
|
|||
|
|
open() {
|
|||
|
|
this.showall = !this.showall
|
|||
|
|
this.$emit('click', this.showall) //展开true 关闭false
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
mounted() {},
|
|||
|
|
computed: {
|
|||
|
|
textStyleObject() {
|
|||
|
|
return {
|
|||
|
|
'max-height': this.showall ? `${1.5 * this.box_h}em` : `${1.5 * this.rows}em`,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
textClass() {
|
|||
|
|
return this.showall ? 'showall' : ''
|
|||
|
|
},
|
|||
|
|
lineStyle() {
|
|||
|
|
return {
|
|||
|
|
display: '-webkit-box',
|
|||
|
|
'-webkit-box-orient': 'vertical',
|
|||
|
|
'-webkit-line-clamp': this.rows,
|
|||
|
|
overflow: 'hidden',
|
|||
|
|
'word-break': 'break-all',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
lineBreakStyles() {
|
|||
|
|
if (!this.lineBreak) {
|
|||
|
|
return {
|
|||
|
|
'white-space': 'normal',
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (this.packupLineBreak) {
|
|||
|
|
return {
|
|||
|
|
'white-space': this.showall ? 'pre-wrap' : 'normal',
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
return {
|
|||
|
|
'white-space': 'pre-wrap',
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
lineBreakStyle() {
|
|||
|
|
return {
|
|||
|
|
'white-space': this.lineBreak ? 'pre-wrap' : 'normal',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
text: {
|
|||
|
|
handler(newValue, oldValue) {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
clearTimeout(this.settime)
|
|||
|
|
this.settime = setTimeout(() => {
|
|||
|
|
const selectQuery = uni.createSelectorQuery().in(this)
|
|||
|
|
selectQuery.select(`#zh-overflowcont`).boundingClientRect()
|
|||
|
|
selectQuery.select('#zh-overflowcontline').boundingClientRect()
|
|||
|
|
selectQuery.select('#zh-open').boundingClientRect()
|
|||
|
|
selectQuery.exec(res => {
|
|||
|
|
if (res && res[0] && res[1]) {
|
|||
|
|
const h1 = res[0].height // 收起时高度
|
|||
|
|
const h2 = res[1].height // 展开时高度
|
|||
|
|
const lineCount = this.rows
|
|||
|
|
const lineHeight = h1 / lineCount
|
|||
|
|
|
|||
|
|
// 计算实际行数（考虑空行）
|
|||
|
|
const actualLines = Math.ceil(h2 / lineHeight)
|
|||
|
|
|
|||
|
|
// 如果实际行数超过限制行数，或者高度差超过0.1行，才显示展开/收起按钮
|
|||
|
|
if (actualLines > lineCount || h2 > h1 + lineHeight * 0.1) {
|
|||
|
|
this.is_open = true
|
|||
|
|
} else {
|
|||
|
|
this.is_open = false
|
|||
|
|
}
|
|||
|
|
this.box_h = Math.ceil(h2 / lineHeight) + 1
|
|||
|
|
this.showall = false
|
|||
|
|
}
|
|||
|
|
if (res && res[2]) {
|
|||
|
|
let unfold_packup_width = res[2].height - 1.5 || 22
|
|||
|
|
this.unfold_packup_line = unfold_packup_width
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}, 100)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
deep: true,
|
|||
|
|
immediate: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- #endif -->
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.zh-readMore {
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.zh-readMore-wrapper {
|
|||
|
|
overflow: hidden;
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.zh-text {
|
|||
|
|
position: relative;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
text-align: justify;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
word-break: break-all;
|
|||
|
|
transition: var(--duration) max-height linear;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.zh-text::before {
|
|||
|
|
float: right;
|
|||
|
|
height: calc(100% - var(--unfold_packup_line));
|
|||
|
|
content: '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.zh-open {
|
|||
|
|
position: relative;
|
|||
|
|
float: right;
|
|||
|
|
clear: both;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
z-index: 2;
|
|||
|
|
|
|||
|
|
.zh-open-text {
|
|||
|
|
margin-left: 6rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.zh-fewer {
|
|||
|
|
display: inline-block;
|
|||
|
|
|
|||
|
|
.zh-fewer-text {
|
|||
|
|
margin-left: 6rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.zh-ellipsis {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #434343;
|
|||
|
|
}
|
|||
|
|
.zh-overflowcont {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -10000px;
|
|||
|
|
left: -10000px;
|
|||
|
|
width: 100%;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
text-align: justify;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
word-break: break-all;
|
|||
|
|
|
|||
|
|
.zh-overflowcont-text {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.zh-overflowcont-open {
|
|||
|
|
margin-left: 6rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|