177 lines
5.1 KiB
Vue
177 lines
5.1 KiB
Vue
<template>
|
||
<view>
|
||
<view
|
||
class="u-content"
|
||
:class="[elId, customClass]"
|
||
:style="
|
||
$u.toStyle(
|
||
{
|
||
height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto',
|
||
textIndent: textIndent
|
||
},
|
||
customStyle
|
||
)
|
||
"
|
||
>
|
||
<slot></slot>
|
||
</view>
|
||
<view
|
||
@tap="toggleReadMore"
|
||
v-if="isLongContent"
|
||
class="u-content__showmore-wrap"
|
||
:class="{ 'u-content__show-more': showMore }"
|
||
:style="[innerShadowStyle]"
|
||
>
|
||
<text
|
||
class="u-content__showmore-wrap__readmore-btn"
|
||
:style="{
|
||
fontSize: fontSize + 'rpx',
|
||
color: color
|
||
}"
|
||
>
|
||
{{ showMore ? openText : closeText }}
|
||
</text>
|
||
<view class="u-content__showmore-wrap__readmore-btn__icon u-flex">
|
||
<u-icon :color="color" :size="fontSize" :name="showMore ? 'arrow-up' : 'arrow-down'"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
export default {
|
||
name: 'u-read-more',
|
||
options: {
|
||
addGlobalClass: true,
|
||
// #ifndef MP-TOUTIAO
|
||
virtualHost: true,
|
||
// #endif
|
||
styleIsolation: 'shared'
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
|
||
import { $u } from '../..';
|
||
import { ReadMoreProps } from './types';
|
||
|
||
/**
|
||
* readMore 阅读更多
|
||
* @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
|
||
* @tutorial https://uviewpro.cn/zh/components/readMore.html
|
||
* @property {String|Number} showHeight 内容超出此高度才会显示展开全文按钮，单位rpx（默认400）
|
||
* @property {Boolean} toggle 展开后是否显示收起按钮（默认false）
|
||
* @property {String} closeText 关闭时的提示文字（默认“展开阅读全文”）
|
||
* @property {String|Number} fontSize 提示文字的大小，单位rpx（默认28）
|
||
* @property {String} textIndent 段落首行缩进的字符个数（默认2em）
|
||
* @property {String} openText 展开时的提示文字（默认“收起”）
|
||
* @property {String} color 提示文字的颜色（默认主题色primary）
|
||
* @property {Object} shadowStyle 是否显示阴影，样式对象
|
||
* @property {String|Number} index open和close事件时，将此参数返回在回调参数中
|
||
* @event open 展开时触发
|
||
* @event close 收起时触发
|
||
* @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
|
||
*/
|
||
|
||
const props = defineProps(ReadMoreProps);
|
||
|
||
const emit = defineEmits(['open', 'close']);
|
||
|
||
// 是否需要隐藏一部分内容
|
||
const isLongContent = ref(false);
|
||
// 当前隐藏与显示的状态，true-显示，false-收起
|
||
const showMore = ref(false);
|
||
// 生成唯一class
|
||
const elId = ref('');
|
||
const instance = getCurrentInstance();
|
||
|
||
// 展开后无需阴影，收起时才需要阴影样式
|
||
const innerShadowStyle = computed(() => {
|
||
return showMore.value ? {} : props.shadowStyle;
|
||
});
|
||
|
||
// 监听 toggle 和 showHeight 变化，重新初始化
|
||
watch(
|
||
() => `${props.toggle}-${props.showHeight}`,
|
||
() => {
|
||
init();
|
||
}
|
||
);
|
||
|
||
onMounted(() => {
|
||
elId.value = $u.guid();
|
||
nextTick(() => {
|
||
init();
|
||
});
|
||
});
|
||
|
||
/**
|
||
* 初始化内容高度判断
|
||
* @description 判断内容是否超出指定高度，决定是否显示展开/收起按钮
|
||
*/
|
||
function init() {
|
||
$u.getRect('.' + elId.value, instance).then((res: { height: number }) => {
|
||
// 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
|
||
if (res.height > uni.upx2px(Number(props.showHeight))) {
|
||
isLongContent.value = true;
|
||
showMore.value = false;
|
||
}
|
||
});
|
||
}
|
||
// 显式暴露init方法
|
||
defineExpose({
|
||
init
|
||
});
|
||
|
||
/**
|
||
* 展开或者收起内容
|
||
* @description 切换显示状态，发出 open/close 事件
|
||
*/
|
||
function toggleReadMore() {
|
||
showMore.value = !showMore.value;
|
||
// 如果toggle为false，隐藏"收起"部分的内容
|
||
if (props.toggle == false) isLongContent.value = false;
|
||
// 发出打开或者收齐的事件
|
||
emit(showMore.value ? 'open' : 'close', props.index);
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '../../libs/css/style.components.scss';
|
||
|
||
.u-content {
|
||
font-size: 30rpx;
|
||
color: $u-content-color;
|
||
line-height: 1.8;
|
||
text-align: left;
|
||
overflow: hidden;
|
||
|
||
&__show-more {
|
||
padding-top: 0;
|
||
background: none;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
&__showmore-wrap {
|
||
position: relative;
|
||
width: 100%;
|
||
padding-bottom: 26rpx;
|
||
@include vue-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&__readmore-btn {
|
||
@include vue-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
line-height: 1;
|
||
|
||
&__icon {
|
||
margin-left: 14rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|