<template>
	<view class="clip-text">
		<text>{{showText}}</text>
		<view v-if="clip == true" class="all" @click="toggleShow()">{{toggle ? `全文` : `收起`}}</view>
	</view>
</template>

<script>
	export default {
		props: {
			text: {
				type: String,
				default: ""
			},
			limit: {
				type: Number || String,
				default: 56
			}
		},
		data() {
			return {
				showText: "",
				clip: false,
				toggle: true
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.clipText()
			})
		},
		methods: {
			clipText() {
				if (this.text.length >= this.limit) {
					this.clip = true
					this.showText = this.text.substring(0, this.limit)
				}else{
					this.showText = this.text
				}
			},
			allText() {
				this.showText = this.text
			},
			toggleShow() {
				if(this.toggle == true) {
					this.toggle = false
					this.allText()
				}else{
					this.toggle = true
					this.clipText()
				}
			}
		},
		computed: {
			
		}
	}
</script>

<style>
	.clip-text {
		display: inline;
	}
	.clip-text>text {
		font-size: 28rpx;
		white-space: pre-wrap;
		word-wrap: break-word;
		word-break: break-all;
	}
	.clip-text .all {
		color: #0f49b1;
		font-size: 28rpx;
		display: inline-block;
		margin-left: 0.5em;
	}
</style>
