current position:Home>Front end CSS style expand and collapse

Front end CSS style expand and collapse

2022-06-24 09:43:35You are far from it.

Use vue The style of writing
 Insert picture description here
 Insert picture description here

<template>
	<view :class="isShowAllData? 'content text-box close-style' : 'text-ellipsis-3 content text-box '">
		<block>
			<text @click="changeShowAllData" :class="isShowAllData? 'show-text-style' : 'close-text-style'">{
    {
    isShowAllData? ' Retract ': ' an '}}
			</text> </block> <text> Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay? Are you okay </text> </view> </template> <script> import {
    
		mapState,
		mapActions
	} from 'vuex' export default {
    
		components: {
    }, computed: {
    
			...mapState({
    })
		}, watch: {
    }, data() {
    
			return {
    
				isShowAllData: false,
			}
		}, onLoad(param) {
    

		}, onShow() {
    }, methods: {
    
			changeShowAllData() {
    
				this.isShowAllData = !this.isShowAllData
			},
			...mapActions([])
		}
	}
</script> <style lang="less" scoped> .text-ellipsis-3 {
    
		height: 124rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	.close-style {
    
		color: red;

		.show-text-style {
    
			color: #0046E6;
			float: right;
			clear: both;
			margin-right: 10rpx;
			position: absolute;
			    bottom: -25rpx;
			right: -4rpx;
			padding: 13rpx;
			z-index: 22;		}
	}

	.text-box {
    
		color: #0046E6;
		margin-top: 200px;

		&::before {
    
			content: '';
			float: right;
			height: 100%;
			margin-bottom: -10rpx;
		}

		.close-text-style {
    
			color: #0046E6;
			float: right;
			clear: both;
			margin-right: 8rpx;
			padding: 13rpx;
			bottom: 18rpx;
		}
	}

	.content {
    
		padding: 20rpx 0;
		font-size: 26rpx;
		color: #62656A;
		flex-direction: row;
		flex-wrap: wrap;

	}
</style>

copyright notice
author[You are far from it.],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/175/202206240824353364.html

Random recommended