W250511/14.uniapp小程序/project2/components/desc.vue

<template>
	<view>
		{{wordStr}}
		<text v-if="isShow" @click.stop="getShow" style="color: black;">...展开</text>
		<text v-if="isStop" @click.stop="getStop" style="color: black;margin-left: 5rpx;">收起</text>
	</view>
</template>

<script>
	export default {
		name: "desc",
		props: ['val'],
		created() {
			this.formatHtml(this.val);
		},
		data() {
			return {
				isShow: false,
				wordStr: '',
				isStop: false
			};
		},
		methods: {
			formatHtml(str) {
				console.log(str.length, '形参')
				if (str.length > 50) {
					this.wordStr = str.substr(0, 50);
					console.log(this.wordStr, '处理后')
					this.isShow = true;
				} else {
					this.wordStr = str;
					this.isShow = false;
				}
			},
			getShow() {
				this.wordStr = this.val;
				this.isShow = false;
				this.isStop = true;
			},
			getStop() {
				this.formatHtml(this.wordStr);
				this.isStop = false;
				this.isShow = true;
				
			}
		}
	}
</script>

<style>

</style>