vue长文本点击展开收起

以你之姓@ 2022-12-05 12:18 210阅读 0赞

点击展开收起  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 1]

<template>
     	<view class="c">
     		<view class="Cmain">
     			<view class="home" v-cloak>
    				<view class="home-title">常见疾病</view>
     			    <view class="menu" v-for="(item, index) in medicalList" :key="index"  >
     			        <view class="main" >
    						
     			            <view class="title" @click="getShow(item)">
    							<image src="../../static/icon/ill.png" mode="widthFix"></image>
    							{ { item.title}}
    						</view>
    						
     			            <view class="dropdown" v-show = "item.show"> 
     								 <view class="text">症状：<view class="tt">{ { item.symptom}}</view></view>
     								 <view class="text">原因：<view class="tt">{ { item.reason}}</view></view>
     								 <view class="text">基本处理方法：<view class="tt">{ { item.processingMethod}}</view></view>
     			            </view>
     			        </view>
     			    </view>
     			</view>
     		</view>
     	</view>
     </template>
     
     <script>
    	export default { 
    	    data() { 
    	        return { 
    	            show:false,
    	 			medicalList:[
    	 			 	{ 
    	 			 		title:'1.腹泻',
    	 					symptom:'小肠腹泻的表现是粪便量增多以及排便频率轻微增加，每天大概有3到5次，宠物排便毫不费力。狗狗可能还会出现呕吐以及体重减轻的问题。通常还伴有气体产生过多，有时我们甚至还可以听到气在肚子里的隆隆声。如果粪便里有血，说明它经过肠道消化并呈黑色。因为腹泻，狗狗无法正常吸收营养物质，所以就会导致它们的体重会减轻，毛发干枯易断。动物体内有一种微小的蛋白叫做白蛋白，它的作用就像海绵，能够使正常量的水分保存在血管中。当发生腹泻时，白蛋白随着粪便排出体外而大量丢失，血中的白蛋白减少，使水分从血管中渗出而积聚在其他部位，那么就会发展成腿部水肿，胸水以及腹水。大肠腹泻包括结肠和直肠疾病，能引起宠物每天都有少量的软便排出，通常每天超过5次，宠物排便有些困难。如果粪便中有血，颜色为红色。大便可能有粘糊糊的粘液。宠物不常呕吐而且体重也不会减轻。',
    	 					reason:'消化不良，着凉，菌群不平衡，感染病毒，暴饮暴食、换粮这些情况都可能导致狗狗腹泻，尤其是幼犬',
    	 					processingMethod:'禁食12-24小时，给予肠道充分休息;用益生菌调节肠道的菌群平衡;到药房买思密达喂食，起到物理性的止泻作用;注意保暖，防止受寒。若做了以上处理后，狗狗还没好转，须立即送医。',
    						show:false
    					},
    	 			 	{ 
    	 			 		title:'2.异食癖',
    	 					symptom:'狗狗吃一些异常的物品，如泥土，墙皮，石头等统称为异食癖',
    	 					reason:'一般来说异食癖只要由于缺乏微量元素一起',
    	 			 		processingMethod:'可通过营养补充来调节。',
    						show:false
    	 			 	},
    	 			 	{ 
    	 			 		title:'3.感冒',
    	 					symptom:'精神不好，打蔫，喜欢趴着;有流水样的鼻涕，打喷嚏和咳嗽;眼结膜充血，流泪，食欲不振;体温升高，一般为39-40℃',
    	 					reason:'受凉，多见于洗澡后，天气变化，长期吹空调;病毒感染;被传染感冒病毒',
    	 					processingMethod:'抗病毒滴剂、紫雏菊花粉、免疫多糖膏、抗病毒冲剂、板蓝根;促进血液循环，保暖，热敷肚子。若不见好妆，及时就医。',
    						show:false
    	 			 	},
    	 			 	{ 
    	 			 		title:'4.严重掉毛',
    	 					symptom:'大量掉毛',
    	 					reason:'幼犬更换胎毛会引起掉毛，季节性换毛时也会掉毛，怀孕生产因为激素分泌，可能会引起母狗的大量掉毛',
    	 					processingMethod:'有些不正常的情况也会导致大量掉毛。同时，皮肤过于干燥，如饮食不均衡，未摄入足够的油脂，洗浴方式、洗浴用品不当等均会导致狗狗皮肤干燥，掉皮屑，甚至掉毛。患有皮肤病，如感染了细菌、真菌以及螨虫，也会引起掉毛，这种掉毛需要送医院检查确诊皮肤病。',
    						show:false
    					 },
    	 				{ 
    	 					title:'5.呕吐',
    	 					symptom:'狗狗容易呕吐跟其身体特点有关系：胃部与地面平行，没有重力的束缚，很容易呕。',
    	 					reason:'剧烈的运动后或者情绪激动时，会因食物刺激(吃太快、过凉、过硬、采食过多)后呕吐，属于正常生理现象。犬肠道的益生菌数量、种类与人类相比较少，不能适应食物变化，也容易引起食物不适用导致的呕吐。生病状态(如患有胃肠炎、寄生虫)也会引发呕吐。',
    	 					processingMethod:'少吃多餐，饭后不能剧烈运动，及时补充益生菌，不喝牛奶，及时驱虫，对照症状找到呕吐的病因及时用药或就医。',
    						show:false
    					},
    	 			]
    	        };
    	    },
    	    methods:{ 
    			// 点击标题下拉展示
    			getShow(item){ 
    				// console.log(item)
    				item.show=!item.show;
    			},
    			goPage(url){ 
    				uni.navigateTo({ 
    					url
    				})
    			},
    	 	},
    	}
     </script>
     
     <style lang="scss">
     	/* body, main::before{ background: url("https://lupic.cdn.bcebos.com/20191203/3016047015_14.jpg") 0 / cover fixed; } */
     	body,.Cmain::before{ 
     	    background: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1818218419,1317735897&fm=26&gp=0.jpg")  0 / cover fixed;
     	}
     	.Cmain{ 
     	    width: 90%;
    		min-height: 90vh;
     	    line-height: 2;
     	    position: relative;
     		margin:30upx 5% ;
     		padding:30upx 0;
     	    border-radius: 20upx;
     	    background: rgba(184, 170, 163, .7);
     	    box-shadow: 3upx 3upx 6upx 3upx rgba(0, 0, 0, .3);
     	    overflow: hidden;
    		.home { 
    			.home-title { 
    				display: flex;
    				align-items: center;
    				justify-content: center;
    				color: #fff;
    				line-height: 50upx;
    				font-size: 35upx;
    				font-weight: 500;
    				padding-bottom: 15upx;
    			}
    			.menu{ 
    				border-radius:80upx;
    				border: 1px solid #e8e6e1;
    				padding:30upx;
    				margin: 50upx 30upx;
    				.title { 
    					display: flex;
    					flex-direction: row;
    					color: #fff;
    					line-height: 50upx;
    					font-size: 33upx;
    					image { 
    						width:50upx;
    						padding-right: 30upx;
    					}
    				}
    				.dropdown{ 
    					.text{ 
    						margin: 10upx auto;
    						color: #707070;
    						.tt { 
    							color: #333;
    							font-size: 28upx;
    							text-indent: 2em;
    							margin:5upx auto;
    						}
    					}
    				} 
    			}
    		}
     	}
     	.Cmain::before{ 
     	    content: '';
     	    position: absolute;
     	    top: 0; bottom: 0;
     	    left: 0; right: 0;
     	    filter: blur(20upx);
     	    z-index: -1;
     	    margin: -30upx;
     	}
    
     		
     </style>

另一种是：  
!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/2020091014343891.png\#pic\_center  
![在这里插入图片描述][2020091014343890.png_pic_center]  
![在这里插入图片描述][20200910143452498.png_pic_center]

<template>
     	<view>
     		<view class="Express" >
     			<view class="info">
     				<view :class="{hide:!iSinfo}">
     					{ { text}}
    					<text @tap="showinfo" v-if="iSinfo" class="hidebtn">收起</text>				
     				</view>
    				<text @tap="showinfo" v-if="!iSinfo">展开</text>
     			</view>
     			
     		</view>
     	</view>
     </template>
     
     <script>
     	export default { 
     		data() { 
     			return { 
     				iSinfo: false,
    				text:'禁食12-24小时，给予肠道充分休息;用益生菌调节肠道的菌群平衡;到药房买思密达喂食，起到物理性的止泻作用;注意保暖，防止受寒。若做了以上处理后，狗狗还没好转，须立即送医。'
     			}
     		},
     		methods: { 
     			showinfo() { 
     				this.iSinfo = !this.iSinfo
     			}
     		}
     	}
     </script>
     
     <style lang="scss">
     	page { 
     		background-color: #fff;
     	}
     
     	.Express { 
     		display: flex;
     		flex-direction: column;
     		background-color: #fff;
     		padding: 30upx;
     		position: relative;
     
     		.info { 
     			display: flex;
     			flex-direction: column;
     
     			view { 
     				text-align:justify ;
     				font-size: 14px;
     				font-family: PingFangSC-Regular, PingFang SC;
     				font-weight: 400;
     				color: rgba(102, 102, 102, 1);
     				word-break: break-word; //换行模式
     				background-color: #fff;
     			}
     
     			text { 
     				width: 70px;
     				font-size: 14px;
     				display: flex;
     				justify-content: flex-end;
     				align-items: center;
     				background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
     				color: #000000;
     				position: absolute;
     				bottom: 30upx;
     				right: 30upx;
     			}
     		}
     
     	}
     
     	.hidebtn { 
     		display: flex;
     		flex: 1;
     		justify-content: flex-end;
     		color: #000000;
     		font-size: 14px;
     	}
     
     	.hide { 
     		word-break: break-word; //换行模式
     		overflow: hidden;
     		text-overflow: ellipsis; //修剪文字
     		display: -webkit-box;
     		-webkit-line-clamp: 1; //此处为上限行数
     		-webkit-box-orient: vertical;
     	}
     </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/7f1c3f659eb249d4a81dfe79fbd76db5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/b0239b5a05a24103a9b12e278f75e4cb.png
[2020091014343890.png_pic_center]: /images/20221123/0d8ef51ddf2f48e39e3e3b8cf7ea6c41.png
[20200910143452498.png_pic_center]: /images/20221123/9a22c4ff3e1440e793b73c8cc637eb61.png