uniapp 文字超出多少字,显示收起全文按钮效果demo(整理)

2024-01-07 18:00:02

收起展开

<template>
	<view class="font30 color000 mL30 mR30">
		<text :class="showFullText ? '' : 'clamp-text'">{{ text }}</text>
		<view v-if="showToggleBtn && text.length > 42" @click="toggleShowFullText">
			{{ showFullText ? '收起' : '全文' }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: '我与春风皆是客,你携秋水揽星河。我与春风皆是客,你携秋水揽星河。我与春风皆是客,你携秋水揽星河。我与春风皆是客我与春风皆是客我与春风皆是客我与春风皆是客我与春风皆是客我与春风皆是客我与春风皆是客我与春风皆是客我与春风皆是客我与春风皆是客我与春风皆是客我与春风皆是客我与春风皆是客我与春风皆是客,你携秋水揽星河。我与春风皆是客。',
				showFullText: false
			};
		},
		computed: {
			showToggleBtn() {
				return this.text.length > 42;
			}
		},
		methods: {
			toggleShowFullText() {
				this.showFullText = !this.showFullText;
			}
		}
	};
</script>

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

	view {
		color: #007aff;
	}
</style>

在这里插入图片描述

文章来源:https://blog.csdn.net/qq_38881495/article/details/135427922
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。