devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue---展示内容超过指定行数后展开收起功能_vue 多行 数据 展开 收起

作者：我家自动化 | 2024-02-11 20:14:16

赞

踩

vue 多行 数据 展开 收起

问题描述

实现功能要求如下图

 解决方法

思路：假设展示区域每行高度为a，当内容超出1行高度a时需要设置展开/收起功能。

变量如下：

  1.  list: [], //列表数据
  2.  listId: "", //当前选择的id
  3.  listHeight: null, //列表区域的显示高度
  4.  listOpenFlag: false, //为true时，展开；为false时，收起
  5.  showListBtnFlag: false, //为true时，出现展开-收起；为false,不出行展开-收起

给展示区域动态绑定样式max-height，listHeight=a,为一行的高度，也可根据现实行数，更改为2a或3a等等。

  1.  <div
  2.       class="list"
  3.       ref="list"
  4.       :style="{ 'max-height': listOpenFlag ? listHeight : '' }"
  5.     >
  6.       <li
  7.         v-for="item in list"
  8.         :key="'list_' + item.id"
  9.         :class="listId == item.id ? 'active' : ''"
  10.         :label="item.id"
  11.         @click="handleChange('list', item)"
  12.       >
  13.         <template> {{ item.name }}</template>
  14.       </li>
  15.       <li
  16.         v-if="showListBtnFlag"
  17.         @click="listOpenFlag = !listOpenFlag"
  18.         class="btn"
  19.       >
  20.         {{ listOpenFlag ? "展开" : "收起" }}
  21.       </li>
  22.     </div>
  1.  mounted() {
  2.     this.$nextTick(() => {
  3.       setTimeout(() => {    
  4.         this.calculateList();
  5.       }, 300);
  6.     });
  7.   },
  8.   methods: {
  9.        calculateList() {
  10.           // 这是默认一行数据的高度
  11.           let oneHeight = 49;
  12.           this.listHeight = `${oneHeight}px`;
  13.           let curHeight = this.$refs.list.offsetHeight;
  14.           if (curHeight > oneHeight) {
  15.             this.listOpenFlag = true;
  16.             this.showListBtnFlag = true;
  17.           } else {
  18.             this.listOpenFlag = false;
  19.             this.showListBtnFlag = false;
  20.           }
  21.         },
  22.   }

当内容大于1行时，【this.listOpenFlag=true; this.showListBtnFlag = true;】,则【max-height:'a ’】,只显示一行内容，且显示展开按钮;点击展开按钮【 @click="listOpenFlag = !listOpenFlag"】，将listOpenFlag置为false,此时展示收起按钮，且【max-height:' ’】，所有内容都被展示出来。

完整代码

  1. <template>
  2.   <div class="fold">
  3.     <h2>1.文本展开/收起</h2>
  4.     <div class="text">
  5.       <span
  6.         :style="{ 'max-height': textOpenFlag ? textHeight : '' }"
  7.         :class="{ unfoldText: textOpenFlag }"
  8.         class="titleText"
  9.         ref="desc"
  10.       >
  11.         {{ name }}
  12.       </span>
  13.       <span
  14.         v-if="showBtnFlag"
  15.         @click="textOpenFlag = !textOpenFlag"
  16.         class="btn"
  17.         >{{ textOpenFlag ? "展开" : "收起" }}</span
  18.       >
  19.     </div>
  20.     <h2>2.根据选项数量动态展开/收起</h2>
  21.     <div
  22.       class="list"
  23.       ref="list"
  24.       :style="{ 'max-height': listOpenFlag ? listHeight : '' }"
  25.     >
  26.       <li
  27.         v-for="item in list"
  28.         :key="'list_' + item.id"
  29.         :class="listId == item.id ? 'active' : ''"
  30.         :label="item.id"
  31.         @click="handleChange('list', item)"
  32.       >
  33.         <template> {{ item.name }}</template>
  34.       </li>
  35.       <li
  36.         v-if="showListBtnFlag"
  37.         @click="listOpenFlag = !listOpenFlag"
  38.         class="btn"
  39.       >
  40.         {{ listOpenFlag ? "展开" : "收起" }}
  41.       </li>
  42.     </div>
  43.     <div
  44.       class="subList"
  45.       ref="subList"
  46.       :style="{ 'max-height': subListOpenFlag ? subListHeight : '' }"
  47.     >
  48.       <li
  49.         v-for="item in subList"
  50.         :key="'subList_' + item.id"
  51.         :class="subListId == item.id ? 'active' : ''"
  52.         :label="item.id"
  53.         @click="handleChange('subList', item)"
  54.       >
  55.         <template> {{ item.name }}</template>
  56.       </li>
  57.       <li
  58.         v-if="showSubListBtnFlag"
  59.         @click="subListOpenFlag = !subListOpenFlag"
  60.         class="btn"
  61.       >
  62.         {{ subListOpenFlag ? "展开" : "收起" }}
  63.       </li>
  64.     </div>
  65.   </div>
  66. </template>
  67. <script>
  68. export default {
  69.   data() {
  70.     return {
  71.       name:
  72.         "这是一个测试的标题的例子，这是一个测试的标题的例子，这是一个测试的标题的例子，这是一个测试的标题的例子，这是一个测试的标题的例子，这是一个测试的标题的例子这是一个测试的标题的例子，这是一个测试的标题的例子，这是一个测试的标题的例子这是一个测试的标题的例子，这是一个测试的标题的例子，这是一个测试的标题的例子",
  73.       textHeight: null,
  74.       textOpenFlag: false,
  75.       showBtnFlag: false,
  76.       list: [], //列表数据
  77.       listId: "", //当前选择的id
  78.       listHeight: null, //列表区域的显示高度
  79.       listOpenFlag: false, //为true时，展开；为false时，收起
  80.       showListBtnFlag: false, //为true时，出现展开-收起；为false,不出行展开-收起
  81.       subList: [],
  82.       AllSubList: [],
  83.       subListId: "",
  84.       subListHeight: null,
  85.       subListOpenFlag: false,
  86.       showSubListBtnFlag: false
  87.     };
  88.   },
  89.   created() {
  90.     this.getList();
  91.   },
  92.   mounted() {
  93.     this.$nextTick(() => {
  94.       setTimeout(() => {
  95.         this.calculateText();
  96.         this.calculateList();
  97.         this.calculateSubList();
  98.       }, 300);
  99.     });
  100.   },
  101.   methods: {
  102.     getList() {
  103.       var list = [
  104.         {
  105.           id: 1,
  106.           name: "水果",
  107.           childrenList: [
  108.             { id: 1, name: "苹果" },
  109.             { id: 2, name: "香蕉" },
  110.             { id: 3, name: "橘子" },
  111.             { id: 4, name: "西瓜" },
  112.             { id: 5, name: "菠萝" },
  113.             { id: 6, name: "榴莲" },
  114.             { id: 7, name: "龙眼" },
  115.             { id: 8, name: "菠萝蜜" },
  116.             { id: 9, name: "荔枝" },
  117.             { id: 10, name: "山竹" },
  118.             { id: 11, name: "葡萄" },
  119.             { id: 12, name: "提子" },
  120.             { id: 13, name: "猕猴桃" },
  121.             { id: 14, name: "圣女果" },
  122.             { id: 15, name: "水蜜桃" },
  123.             { id: 16, name: "柿子" },
  124.             { id: 17, name: "李子" },
  125.             { id: 18, name: "鸭梨" }
  126.           ]
  127.         },
  128.         {
  129.           id: 2,
  130.           name: "动物",
  131.           childrenList: [
  132.             { id: 19, name: "猴子" },
  133.             { id: 20, name: "大象" },
  134.             { id: 21, name: "小猪" },
  135.             { id: 22, name: "熊猫" },
  136.             { id: 23, name: "金毛" },
  137.             { id: 24, name: "猫咪" },
  138.             { id: 25, name: "狮子" },
  139.             { id: 26, name: "老虎" },
  140.             { id: 27, name: "长颈鹿" }
  141.           ]
  142.         },
  143.         {
  144.           id: 3,
  145.           name: "植物",
  146.           childrenList: [
  147.             { id: 28, name: "吊兰" },
  148.             { id: 29, name: "绿萝" },
  149.             { id: 30, name: "绿萝" },
  150.             { id: 31, name: "发财树" },
  151.             { id: 32, name: "虎皮兰" },
  152.             { id: 33, name: "大蒜" },
  153.             { id: 34, name: "果树" },
  154.             { id: 35, name: "花朵" },
  155.             { id: 36, name: "芦苇" },
  156.             { id: 37, name: "仙人掌" }
  157.           ]
  158.         },
  159.         {
  160.           id: 4,
  161.           name: "交通工具",
  162.           childrenList: [
  163.             { id: 38, name: "汽车" },
  164.             { id: 39, name: "自行车" },
  165.             { id: 40, name: "卡车" },
  166.             { id: 41, name: "摩托车" },
  167.             { id: 42, name: "火车" },
  168.             { id: 43, name: "动车" },
  169.             { id: 44, name: "高铁" },
  170.             { id: 45, name: "轿车" }
  171.           ]
  172.         }
  173.       ];
  174.       this.list = [{ name: "全部", id: "" }].concat(list);
  175.       let subList = [{ name: "全部", id: "" }];
  176.       list.forEach(item => {
  177.         if (item.childrenList) {
  178.           subList = subList.concat(item.childrenList);
  179.         }
  180.       });
  181.       this.subList = subList;
  182.       this.AllSubList = subList;
  183.     },
  184.     handleChange(type, item) {
  185.       if (type == "list") {
  186.         if (this.listId != item.id) {
  187.           //this.listId != item.id防止多次点击同一个选项，出现重复执行以下代码
  188.           this.listId = item.id;
  189.           if (item.id == "") {
  190.             this.subList = this.AllSubList;
  191.           }
  192.           if (item.childrenList) {
  193.             this.subList = [{ name: "全部", id: "" }].concat(item.childrenList);
  194.           }
  195.           this.$nextTick(() => {
  196.             this.calculateSubList();
  197.           });
  198.         }
  199.       } else {
  200.         this.subListId = item.id;
  201.       }
  202.     },
  203.     calculateText() {
  204.       // 这是默认两行数据的高度，一行的高度可以自定义 可以*3 *4达到三行或者四行显示展示和收起的效果
  205.       let twoHeight = 26 * 2;
  206.       this.textHeight = `${twoHeight}px`;
  207.       let curHeight = this.$refs.desc.offsetHeight;
  208.       if (curHeight > twoHeight) {
  209.         this.textOpenFlag = true;
  210.         this.showBtnFlag = true;
  211.       } else {
  212.         this.textOpenFlag = false;
  213.         this.showBtnFlag = false;
  214.       }
  215.     },
  216.     calculateList() {
  217.       // 这是默认一行数据的高度
  218.       let oneHeight = 49;
  219.       this.listHeight = `${oneHeight}px`;
  220.       let curHeight = this.$refs.list.offsetHeight;
  221.       if (curHeight > oneHeight) {
  222.         this.listOpenFlag = true;
  223.         this.showListBtnFlag = true;
  224.       } else {
  225.         this.listOpenFlag = false;
  226.         this.showListBtnFlag = false;
  227.       }
  228.     },
  229.     calculateSubList() {
  230.       // 这是默认两行数据的高度
  231.       let twoHeight = 48 * 2;
  232.       this.subListHeight = `${twoHeight}px`;
  233.       let curHeight = this.$refs.subList.offsetHeight;
  234.       if (curHeight > twoHeight) {
  235.         this.subListOpenFlag = true;
  236.         this.showSubListBtnFlag = true;
  237.       } else {
  238.         this.subListOpenFlag = false;
  239.         this.showSubListBtnFlag = false;
  240.       }
  241.     }
  242.   }
  243. };
  244. </script>
  245. <style lang="less" scoped>
  246. @mainColor: #5864ff;
  247. .fold {
  248.   padding: 22px;
  249.   margin: 20px;
  250.   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.26);
  251.   border-radius: 10px;
  252.   // 1.文字收缩
  253.   .text {
  254.     position: relative;
  255.     margin-bottom: 20px;
  256.     .titleText {
  257.       font-size: 18px;
  258.     }
  259.     .unfoldText {
  260.       overflow: hidden;
  261.       display: block;
  262.     }
  263.     .unfoldText:after {
  264.       z-index: 3;
  265.       content: "...";
  266.       position: absolute;
  267.       bottom: 0px;
  268.       right: 80px;
  269.       width: 48px;
  270.       padding-left: 30px;
  271.       background: linear-gradient(to right, rgba(255, 255, 255, 0.1), #fff 45%);
  272.     }
  273.   }
  274.   .btn {
  275.     font-size: 14px;
  276.     color: @mainColor;
  277.     position: absolute;
  278.     right: 0px;
  279.     bottom: 2px;
  280.     background-color: #fff;
  281.     padding-left: 60px;
  282.     padding-right: 10px;
  283.     &:hover {
  284.       color: orange;
  285.     }
  286.   }
  287.   .list {
  288.     display: flex;
  289.     flex-wrap: wrap;
  290.     position: relative;
  291.     margin-top: 10px;
  292.     li {
  293.       background-color: #f5f6fa;
  294.       padding: 8px 15px 8px 10px;
  295.       margin-bottom: 15px;
  296.       margin-right: 10px;
  297.       white-space: nowrap;
  298.       &:hover {
  299.         background-color: @mainColor;
  300.         color: #fff;
  301.       }
  302.     }
  303.     .active {
  304.       background-color: @mainColor;
  305.       color: #fff;
  306.     }
  307.     .btn {
  308.       font-size: 14px;
  309.       position: absolute;
  310.       right: -10px;
  311.       background-color: #fff;
  312.       bottom: 0px;
  313.       &:hover {
  314.         color: orange;
  315.         background-color: #fff;
  316.       }
  317.     }
  318.   }
  319.  
  320.   .subList {
  321.     background-color: #f5f6fa;
  322.     display: flex;
  323.     flex-wrap: wrap;
  324.     position: relative;
  325.     overflow: hidden;
  326.     li {
  327.       margin: 15px;
  328.       white-space: nowrap;
  329.       &:hover {
  330.         color: @mainColor;
  331.       }
  332.     }
  333.     .active {
  334.       color: @mainColor;
  335.     }
  336.     .btn {
  337.       background-color: #f5f6fa;
  338.       position: absolute;
  339.       right: -20px;
  340.       bottom: 0px;
  341.       padding: 0px 20px;
  342.       &:hover {
  343.         color: orange;
  344.       }
  345.     }
  346.   }
  347. }
  348. </style>

参考：https://www.cnblogs.com/yhhBKY/p/14102687.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/76797
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号