王明 / Recruitment

  <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>

  	/**
  	 * readMore 阅读更多
  	 * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
  	 * @tutorial https://www.uviewui.com/components/readMore.html

  	 * @property {String Number} show-height 内容超出此高度才会显示展开全文按钮，单位rpx（默认400）
  	 * @property {Boolean} toggle 展开后是否显示收起按钮（默认false）
  	 * @property {String} close-text 关闭时的提示文字（默认“展开阅读全文”）
  	 * @property {String Number} font-size 提示文字的大小，单位rpx（默认28）
  	 * @property {String} text-indent 段落首行缩进的字符个数（默认2em）
  	 * @property {String} open-text 展开时的提示文字（默认“收起”）
  	 * @property {String} color 提示文字的颜色（默认#2979ff）

  	 * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
  	 */
  	export default {

  		name: "u-read-more",
  		props: {
  			// 默认的显示占位高度，单位为rpx
  			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'
  			},
  			// open和close事件时，将此参数返回在回调参数中
  			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, // 当前隐藏与显示的状态，true-显示，false-收起
  				elId: this.$u.guid(), // 生成唯一class
  			};
  		},

  		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;

  				// 如果toggle为false，隐藏"收起"部分的内容

  				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>