VUE里实现通过点击显示多行或单行文本的需求(类似查看更新评论)

1.给文本与图片展开与隐藏的两种样式

<span :class="set == 2 ? 'words' : 'word'">我的简介:{{content}}</span>
  <img v-if="arrow" @click="allget(set)" :class="set == 1 ? '' : 'changeIMG'" src="../../assets/tools/arrow.png" alt />
//展开时的样式 
 .words {
        line-height: 40px;
      }
    //默认样式
 .word {
        max-width: 100%;
        word-break: break-all;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
//默认样式
  img {
        margin-left: 5px;
        margin-top: 5px;
        width: 33px;
        height: 19px;
      }
      //图片旋转180度
  .changeIMG {
        transform: rotate(180deg);
    }

2在data里定义一个判断图片隐藏的arrow变量默认为false,定义一个设置的字段set变量默认为1,以及内容content:'' 3.先通过JS获取字符串实际长度(包含汉字) replace(/[u0391-uFFE5]/g, "aa").length

getSet() {
      var room = {};
      room.GetLength = function(str) {
        return str.replace(/[\u0391-\uFFE5]/g, "aa").length; //先把中文替换成两个字节的英文,在计算长度
      };
      let contentLength = room.GetLength(this.content);
      if (contentLength > 45) {
        this.arrow = true;
      }
      // console.log(room.GetLength(this.content));
    },

4通过点击传递不同的变量来实现显示隐藏

allget(e) {
      console.log(e);
      if (e == 1) {
        this.set = 2;
      } else {
        this.set = 1;
      }
   }

OK,就这样

原文链接:segmentfault.com

上一篇:杂谈: Vue3.0 Pre-Alpha 源码导读
下一篇:如何写一个漂亮的toolbar

相关推荐

官方社区

扫码加入 JavaScript 社区