效果：

 

思路：

1.根据文本显示的布局中，每行大致能显示的文字个数。（实例是大致每行26个文字）

2.首先加载页面时，根据文字总长度判断是否超出自定义行数，来处理相应的数据，多余自定义行数，截取对应的文字个数做显示

<template><view><text class="yd-content">{{tempContent}}</text><template v-if="txt_content !== null && txt_content.length > 52"><text class="yd-quanwen" v-if="isShowAllContent" @click="toggleDescription">全文</text><text class="yd-quanwen" v-else @click="toggleDescription">收起</text></template></view>
</template>
<script>export default {data() {return {tempContent:'',isShowAllContent:false,txt_content:"近年来极端天气频发，内容内容内容内容内容内容内容内容内容内容...."}},onLoad() {var _this = thisvar txtCntIndex = _this.txt_content.lengthif (txtCntIndex > 52) {_this.isShowAllContent = true_this.tempContent = _this.txt_content.substr(0, 51) + "..."} else {_this.isShowAllContent = false_this.tempContent = _this.txt_content}},methods:{// 全文与收起toggleDescription: function() {var _this = thisif (_this.isShowAllContent) {_this.isShowAllContent = false_this.tempContent = _this.txt_content} else {_this.isShowAllContent = true_this.tempContent = _this.txt_content.substring(0, 51) + "..."}},}}
</script>