一、组件封装
< template> < view class = "multiline" > < view class = "info" > < view : class = "{hide:!iSinfo}" : style= "!iSinfo?computedStyle:''" > < view : style= "{ color: textColor,fontWeight:fontWeight,fontSize:fontSize + 'rpx'}" > { { content} } < / view> < / view> < text @tap= "showinfo" v- if = "!iSinfo" : style= "{ color: showinfotextColor,fontWeight:showinfoFontWeight,fontSize:showinfoSize + 'rpx'}" > 展开< / text> < / view> < text @tap= "showinfo" v- if = "iSinfo" class = "hidebtn" : style= "{ color: showinfotextColor,fontWeight:showinfoFontWeight,fontSize:showinfoSize + 'rpx'}" > 收起< / text> < / view>
< / template> < script> export default { props : { content : { type : String, default : "" } , linesCount : { type : [ Number, String] , default : 2 } , textColor : { type : String, default : "#333333" } , fontWeight : { type : [ Number, String] , default : 400 } , fontSize : { type : [ Number, String] , default : 24 } , showinfoSize : { type : [ Number, String] , default : 24 } , showinfotextColor : { type : String, default : "#333333" } , showinfoFontWeight : { type : [ Number, String] , default : 400 } , } , data ( ) { return { iSinfo : false , } ; } , mounted ( ) { } , computed : { computedStyle ( ) { const style = ` -webkit-line-clamp: ${ this . linesCount} ; ` ; return style; } } , methods : { showinfo ( ) { this . iSinfo = ! this . iSinfo} } , } ;
< / script> < style lang= "scss" scoped> . multiline{ display : flex; flex- direction: column; background- color: #fff; position : relative; . info { display : flex; flex- direction: column; view { text- align: justify; word- break : break - word; background- color: #fff; } text { width : 70px; 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 : #0078FF; position : absolute; bottom : 0rpx; right : 0rpx; } } } . hidebtn { display : flex; flex : 1 ; justify- content: flex- end; } . hide { word- break : break - word; overflow : hidden; text- overflow: ellipsis; display : - webkit- box; - webkit- box- orient: vertical; }
< / style>
二、使用
< multiline- expansion content= "uniapp实现多行文本溢出超过指定行数 展开 收起uniapp实现多行文本溢出超过指定行数 展开 收起uniapp实现多行文本溢出超过指定行数 展开 收起uniapp实现多行文本溢出超过指定行数 展开 收起" > < / multiline- expansion>