|
@@ -56,32 +56,16 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- <view class="mesItem" @click="goToMesDetail(2)">
|
|
|
- <view class="leftBox">
|
|
|
- <view class="mesImg">
|
|
|
- <image src="../../static/message/system.svg" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="mesBrief">
|
|
|
- <view class="tit">系统通知</view>
|
|
|
- <view class="newMessage">已加入xxxxxx教研室</view>
|
|
|
- </view>
|
|
|
+ <view class="content">
|
|
|
+ <view ref="p" class="p">
|
|
|
+ 这是一段需要展开收起的文字,可以有很多很多的字,可能会占据很多的空间。因此,在默认情况下,我们只会显示部分文字,而把其余的部分折叠起
|
|
|
+ 来。如果需要查看全部内容,可以点击“查看更多按钮,文字内容就会展开显示了。
|
|
|
</view>
|
|
|
- <view class="mesTime">07-12</view>
|
|
|
- <view class="newMessage"></view>
|
|
|
+ <text class-="btn-more" @click="qqq">
|
|
|
+ {{isAll?'收起':'更多'}}
|
|
|
+ </text>
|
|
|
</view>
|
|
|
- <view class="mesItem" @click="goToMesDetail(3)">
|
|
|
- <view class="leftBox">
|
|
|
- <view class="mesImg">
|
|
|
- <image src="../../static/message/subscribe.svg" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="mesBrief">
|
|
|
- <view class="tit">订阅消息</view>
|
|
|
- <view class="newMessage">xxx教研室更新了课程</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="mesTime">07-12</view>
|
|
|
- <view class="newMessage"></view>
|
|
|
- </view> -->
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -91,7 +75,9 @@
|
|
|
return {
|
|
|
navbarData:{
|
|
|
title:'消息'
|
|
|
- }
|
|
|
+ },
|
|
|
+ isAll:false,
|
|
|
+ aaa:'rerererererererere'
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -100,11 +86,37 @@
|
|
|
url: '/pages/hdxx/hdxx'
|
|
|
});
|
|
|
},
|
|
|
- },
|
|
|
+ qqq(){
|
|
|
+ this.isAll=!this.isAll
|
|
|
+ if(this.isAll){
|
|
|
+ this.$refs.p.$el.classList.add('is-expanded')
|
|
|
+ console.log(this.$refs.p.$el.classList);
|
|
|
+ }else{
|
|
|
+ this.$refs.p.$el.classList.remove('is-expanded')
|
|
|
+ console.log(this.$refs.p.$el.classList);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
+
|
|
|
+ .content .p{
|
|
|
+ display:block;
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ /*设置文字溢出时显示省略号*/
|
|
|
+
|
|
|
+ }
|
|
|
+ .content .p.is-expanded{
|
|
|
+ overflow:visible;
|
|
|
+ white-space:normal;
|
|
|
+ /*文字溢出时不再显示省略号*/
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
.messBox {
|
|
|
background: #fff;
|
|
|
display: flex;
|