123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179 |
- <template>
- <view class="">
- <view class="u-content" :class="[elId]" :style="{
- height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto',
- textIndent: textIndent
- }">
- <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>
-
- export default {
- name: "u-read-more",
- props: {
-
- showHeight: {
- type: [Number, String],
- default: 400
- },
-
- toggle: {
- type: Boolean,
- default: false
- },
-
- closeText: {
- type: String,
- default: '展开阅读全文'
- },
-
- openText: {
- type: String,
- default: '收起'
- },
-
- color: {
- type: String,
- default: '#2979ff'
- },
-
- fontSize: {
- type: [String, Number],
- default: 28
- },
-
- shadowStyle: {
- type: Object,
- default () {
- return {
- backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
- paddingTop: "300rpx",
- marginTop: "-300rpx"
- }
- }
- },
-
- textIndent: {
- type: String,
- default: '2em'
- },
-
- index: {
- type: [Number, String],
- default: ''
- }
- },
- watch: {
- paramsChange(val) {
- this.init();
- }
- },
- computed: {
- paramsChange() {
- return `${this.toggle}-${this.showHeight}`;
- },
-
- innerShadowStyle() {
- if (this.showMore) return {};
- else return this.shadowStyle
- }
- },
- data() {
- return {
- isLongContent: false,
- showMore: false,
- elId: this.$u.guid(),
- };
- },
- mounted() {
- this.$nextTick(() => {
- this.init();
- })
- },
- methods: {
- init() {
- this.$uGetRect('.' + this.elId).then(res => {
-
- if (res.height > uni.upx2px(this.showHeight)) {
- this.isLongContent = true;
- this.showMore = false;
- }
- })
- },
-
- toggleReadMore() {
- this.showMore = !this.showMore;
-
- if (this.toggle == false) this.isLongContent = false;
-
- this.$emit(this.showMore ? 'open' : 'close', this.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>
|