114 lines
2.2 KiB
Vue
114 lines
2.2 KiB
Vue
<template>
|
||
<!-- readMore 组件 -->
|
||
<view class="qaBox">
|
||
<view class="content-box">
|
||
<view :class="[{ watchMoreContent: isWatchMore }, {contentt:isLongContent} ,'xzj']" :style="[zxy]" ><slot></slot></view>
|
||
<view class="watchMore" v-if="isLongContent" @click="watchMore">{{ isWatchMore ? '收起' : '展开' }}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
isWatchMore: false,
|
||
isLongContent: false,
|
||
zxy:{
|
||
'-webkit-line-clamp':'', /* 行数*/
|
||
lineClamp: '', /*行数*/
|
||
}
|
||
};
|
||
},
|
||
props: {
|
||
// 默认的显示占位高度，单位为rpx
|
||
showHeight: { //文本本身高度超出 showHeight 才会显示 查看更多
|
||
type: [Number, String],
|
||
default: 120,
|
||
// 这里是rpx
|
||
},
|
||
hideLineNum:{
|
||
type:[Number,String],
|
||
default:3,
|
||
// 3行
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(function() {
|
||
this.init();
|
||
});
|
||
},
|
||
created(){
|
||
for (let key in this.zxy) {
|
||
this.zxy[key]=this.hideLineNum
|
||
}
|
||
}
|
||
,
|
||
methods: {
|
||
watchMore() {
|
||
this.isWatchMore = !this.isWatchMore;
|
||
},
|
||
init() {
|
||
this.getHeight('.xzj').then(res => {
|
||
// 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
|
||
if (res.height > uni.upx2px(this.showHeight)) {
|
||
this.isLongContent = true;
|
||
}
|
||
});
|
||
},
|
||
getHeight(selector, all) {
|
||
return new Promise(resolve => {
|
||
uni.createSelectorQuery()
|
||
.in(this)
|
||
[all ? 'selectAll' : 'select'](selector)
|
||
.boundingClientRect(rect => {
|
||
if (all && Array.isArray(rect) && rect.length) {
|
||
resolve(rect);
|
||
}
|
||
if (!all && rect) {
|
||
resolve(rect);
|
||
}
|
||
})
|
||
.exec();
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.qaBox {
|
||
text-align: right;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #4f6aff;
|
||
display: flex;
|
||
}
|
||
.content-box {
|
||
width: 100%;
|
||
}
|
||
.contentt {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis; /*超出则...代替*/
|
||
display: -webkit-box;
|
||
// -webkit-line-clamp: 4; /* 行数*/
|
||
// line-clamp: 4; /*行数*/
|
||
-webkit-box-orient: vertical;
|
||
// line-height: 56rpx;
|
||
}
|
||
.xzj{
|
||
color: #666666;
|
||
font-size: 24rpx;
|
||
// text-align;
|
||
text-align: left;
|
||
word-break: break-all;
|
||
}
|
||
.watchMoreContent {
|
||
display: inline-block ;
|
||
width: 100%;
|
||
}
|
||
|
||
.watchMore {
|
||
margin-top: 10rpx;
|
||
}
|
||
</style>
|