vue实现排他功能 - 项目需求

骑猪看日落 2021-08-26 12:37 641阅读 0赞

先看原来的鸟样  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]  
我也不知道当时人家做的时候，是怎么想的，显示不了完整的，用省略号代替正常，但是人家想看详细信息，却死活点不开，是什么鬼？  
所以 给我提了一个需求，就是点击详细信息，当前的展开，当点击下一个详细信息，上一条信息关闭，当前的展开，这…不就是排他效果吗？

1.  之所以内容显示两行，超出部分隐藏，是因为用了如下代码

text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:2;

*  \-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
 *  为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
 *  display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
 *  \-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
 *  text-overflow，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本

1.  那现在解决的问题就是，点击一条内容，`展示`详细信息  
    首先需要一个点击事件，顺道传一个索引进去，为后面信息的唯一性做铺垫

初始化变量currentSort，将每循环的index的值，赋值给i

data () {
          return {
            informList: [],
            content: false,
            currentSort: 0
          }
        },

add (index) {
            this.currentSort = index
            this.content = !this.content
          }

1.  然后怎么做到展开当前信息，高度正好呢？ 其实只需要添加一个active(激活状态)，高度就不管了。随实际的大小变化

.right .content {
          font-size: 26rpx;
          color: #999999;
          font-weight: 400;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:2;
          padding-bottom: 7rpx;
        }
         .content.active {  //点击了查看更多，就高度就不管了。随实际的大小变化
            height: auto;
            background: #fff;
            min-height: 160rpx;
            display: flex;
            padding-bottom: 8rpx;
        }

然后就是该判断，点击当前展开，其他关闭这个效果

现在的效果  
![在这里插入图片描述][20200224110438239.gif]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210813/3e97bfb3c4c34ea19a7426577788002b.png
[20200224110438239.gif]: /images/20210813/c80ac1cf0a864948ba05b6c520772fe5.png