uniapp,文字超出几行显示省略号...,展开显示更多

效果图:


代码:

复制代码
<template>
	<view class="text-container">
			<text class="text-content" @click="showDetail">{{ text }}</text>
			<text v-if="showMore" class="view-detail" @click="showDetail" style="color: #457AE6;">查看详情</text>
			<text v-if="showText&&!showMore" class="view-detail" @click="showShrink" style="color: #457AE6;">收起</text>
	</view>
</template>

<script>
	export default {
		mounted() {
			this.text = '这里是一段很长的文本内容,我们需要对超出一定长度的见到过伤筋动骨几十个地级市的世界观的几十个地级市高端就是给大家圣诞节后视镜的呼声结婚的结婚建设大街的好时机回到家';
			this.textyl = this.text
			this.checkTextLength();
		},
		data() {
			return {
				text: '',//剪切之后的文字
				textyl:'',//原来的字符
				showMore: false,//判断显示查看或者收起   小于40字不展示
				textlength: false,//判断是否点击详情 true为点击详情 false为点击收起
				showText:false//收起文字的显示隐藏
			};
		},
		computed: {
		
		},
		methods: {
			checkTextLength() {
				if (this.text.length > 40 && !this.textlength) {
					this.showMore = true;
					this.showText = false
					this.text = this.text.substring(0, 40) + '...';
				} else {
					this.showText= true
					this.showMore = false;
					this.textlength = false
					this.text = this.textyl
				}
			},
			showDetail() {
				if (this.showMore) {
					this.textlength = true
					this.checkTextLength()
				}
			},
			showShrink() {
				if (this.showText) {
					this.textlength = false
					this.checkTextLength()
				}
			},
		}
	};
</script>

<style>
	.clamp-text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	view {
		color: #007aff;
	}
</style>
相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js