效果:超过两行,点击箭头显示全部内容,再次点击图片显示部分内容。
1.shopObj.skuName是全部商品名称(换成你自己的字段),判断超过42个字符就显示向下箭头,
<!-- {{ shopObj.skuName }} -->
{{ shopObj.skuName.length > 42 ? skuName : shopObj.skuName }}
<image
v-if="!isShowAll && isRoll"
@click="toDown"
class="shopname-hide"
src="../../static/products/zkicon.png"
></image>
<image
v-if="!isShowAll && !isRoll"
@click="toUp"
class="shopname-hide"
src="../../static/products/sqicon.png"
></image>
2.data中定义字段
3.watch中监听名称字段是否发生变化,超过42长度就截取到42显示,不超过就全部显示
watch: {
'shopObj.skuName': function () {
console.log(this.shopObj.skuName.length,"商品名称的长度======")
if (this.shopObj.skuName.length > 42) {
this.skuName = this.shopObj.skuName.substr(0, 42)
this.isShowAll = false
} else {
this.isShowAll = true
}
}
},
4.在图片点击方法中判断
// 点击按钮展开
toDown() {
this.skuName = this.shopObj.skuName
console.log(this.shopObj.skuName, '点击之后数据=====')
this.isRoll = false
},
// 点击按钮收起
toUp() {
this.skuName = this.shopObj.skuName.slice(0, 42)
console.log(this.shopObj.skuName, '收起之后数据=====')
this.isRoll = true
}
图片或按钮的css自己根据实际情况开发,最后就完成啦