子组件:
Html
<template>
<div>
<div class="demo_text">
{{textLength}}
</div>
<div v-show="this.data.length>this.length">
<div class="show" v-show="fold" @click="expand()">展开</div>
<div class="show" v-show="!fold" @click="noexpand()">收起</div>
</div>
</div>
</template>
Css
<style lang="scss" scoped>
body{
/*只显示五行*/
.demo_text{
/*强制换行*/
word-wrap:break-word;
width: 100%;
}
.show{
font-size: 13px;
color:cornflowerblue;
}
}
</style>
JS
<script>
export default {
name: "text-flow",
data(){
return {
fold : true,
datas : this.data,
lengths : this.length,
reallength : 0
}
},
props:{
data : {
type : String,
default : ''
},
length : {
type : Number,
default : 0
},
},
computed :{
textLength: function ()
{
if ( this.datas.length>this.lengths) {
this.fold == true;
return this.datas.trim().substring(0,this.lengths)+"...";
}else {
this.fold == false;
return this.datas
}
}
},
methods:{
expand(){
this.reallength = this.lengths;
this.lengths = this.datas.length;
this.fold = !this.fold;
},
noexpand(){
this.lengths = this.reallength;
this.fold = !this.fold;
},
}
}
</script>
父组件调用封装好的子组件
需要传的参数:data=》文本内容;length=》规定的字数限制
html
<template>
<div>
<Itext :data="data" :length="length"></Itext>
<Itext :data="data1" :length="length"></Itext>
</div>
</template>
JS
<script>
import Itext from './text-flow'
export default {
name: "instanceClass",
data(){
return {
data : "HelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorld" +
"HelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorld" +
"HelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorld" +
"HelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorld",
data1 : "Javascript",
length : 20,
}
},
components : {
Itext
}
}
</script>
至此OK,是不是很简单哈哈,效果如下
由于JavaScript没有达到规定字数限制,故没有展开隐藏botton-group
样式我没做具体处理,到时候根据需求设计即可!