Commit 9d07eb46 authored by wlxuqu's avatar wlxuqu

新增read-more组件控制字符缩进的text-indent参数

parent c6f6818d
<template> <template>
<view class=""> <view class="">
<view class="u-content" :class="[elId]" :style="{ height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto' }"> <view class="u-content" :class="[elId]" :style="{
height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto',
textIndent: this.textIndent
}">
<slot></slot> <slot></slot>
</view> </view>
<view @tap="toggleReadMore" v-if="isLongContent" class="u-showmore-wrap" <view @tap="toggleReadMore" v-if="isLongContent" class="u-content__showmore-wrap"
:class="{ 'u-show-more': showMore }" :class="{ 'u-content__show-more': showMore }"
:style="[innerShadowStyle]" :style="[innerShadowStyle]">
> <text class="u-content__showmore-wrap__readmore-btn" :style="{
<text class="u-readmore-btn" :style="{
fontSize: fontSize + 'rpx', fontSize: fontSize + 'rpx',
color: color color: color
}"> }">
{{ showMore ? openText : closeText }} {{ showMore ? openText : closeText }}
</text> </text>
<u-icon :color="color" :size="fontSize" class="u-icon" :name="showMore ? 'arrow-up' : 'arrow-down'"></u-icon> <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>
</view> </view>
</template> </template>
...@@ -27,6 +31,7 @@ ...@@ -27,6 +31,7 @@
* @property {Boolean} toggle 展开后是否显示收起按钮(默认false) * @property {Boolean} toggle 展开后是否显示收起按钮(默认false)
* @property {String} close-text 关闭时的提示文字(默认“展开阅读全文”) * @property {String} close-text 关闭时的提示文字(默认“展开阅读全文”)
* @property {String Number} font-size 提示文字的大小,单位rpx(默认28) * @property {String Number} font-size 提示文字的大小,单位rpx(默认28)
* @property {String} text-indent 段落首行缩进的字符个数(默认2em)
* @property {String} open-text 展开时的提示文字(默认“收起”) * @property {String} open-text 展开时的提示文字(默认“收起”)
* @property {String} color 提示文字的颜色(默认#2979ff) * @property {String} color 提示文字的颜色(默认#2979ff)
* @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more> * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
...@@ -67,13 +72,18 @@ ...@@ -67,13 +72,18 @@
// 是否显示阴影 // 是否显示阴影
shadowStyle: { shadowStyle: {
type: Object, type: Object,
default() { default () {
return { return {
backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)", backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
paddingTop: "300rpx", paddingTop: "300rpx",
marginTop: "-300rpx" marginTop: "-300rpx"
} }
} }
},
// 段落首行缩进的字符个数
textIndent: {
type: String,
default: '2em'
} }
}, },
watch: { watch: {
...@@ -87,7 +97,7 @@ ...@@ -87,7 +97,7 @@
}, },
// 展开后无需阴影,收起时才需要阴影样式 // 展开后无需阴影,收起时才需要阴影样式
innerShadowStyle() { innerShadowStyle() {
if(this.showMore) return {}; if (this.showMore) return {};
else return this.shadowStyle else return this.shadowStyle
} }
}, },
...@@ -99,7 +109,7 @@ ...@@ -99,7 +109,7 @@
}; };
}, },
mounted() { mounted() {
this.$nextTick(function(){ this.$nextTick(function() {
this.init(); this.init();
}) })
}, },
...@@ -131,33 +141,32 @@ ...@@ -131,33 +141,32 @@
color: $u-content-color; color: $u-content-color;
line-height: 1.8; line-height: 1.8;
text-align: left; text-align: left;
text-indent: 2em;
overflow: hidden; overflow: hidden;
&__show-more {
padding-top: 0;
background: none;
margin-top: 20rpx;
} }
.u-showmore-wrap { &__showmore-wrap {
position: relative; position: relative;
width: 100%; width: 100%;
padding-bottom: 26rpx; padding-bottom: 26rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
}
.u-show-more { &__readmore-btn {
padding-top: 0;
background: none;
margin-top: 20rpx;
}
.u-readmore-btn {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
line-height: 1; line-height: 1;
}
.u-icon { &__icon {
margin-left: 14rpx; margin-left: 14rpx;
} }
}
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment