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

最新推荐文章于 2024-05-29 15:56:25 发布

小桃子~

最新推荐文章于 2024-05-29 15:56:25 发布

阅读量1.2k

点赞数 3

文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/m0_61692295/article/details/137341553

版权

文章介绍了如何使用Vue.js编写一个组件，当文本内容超过40个字符时，自动显示...并可以点击查看或收起全文。展示了HTML模板、JavaScript逻辑和CSS样式。

摘要由CSDN通过智能技术生成

效果图：

在这里插入图片描述

代码：

<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>