vue实现点击图片显示全部内容，再次点击隐藏部分内容

最新推荐文章于 2024-04-01 09:12:29 发布

Julyued

最新推荐文章于 2024-04-01 09:12:29 发布

阅读量1.2k

点赞数 1

分类专栏： vue uni-app 文章标签： vue.js javascript 前端小程序

本文链接：https://blog.csdn.net/weixin_42166279/article/details/126260962

版权

vue 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

uni-app

3 篇文章 0 订阅

订阅专栏

效果：超过两行，点击箭头显示全部内容，再次点击图片显示部分内容。

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自己根据实际情况开发，最后就完成啦