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>
相关推荐
WTSolutions9 分钟前
Excel 转 JSON by WTSolutions API 文档
javascript
AverageJoe19919 分钟前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平11 分钟前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
普宁彭于晏11 分钟前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
bitbitDown13 分钟前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易17 分钟前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
ma7721 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在21 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
tianchang24 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻26 分钟前
前端面试十一之TS
前端