foldingPanel

功能描述

折叠面板，菜单折叠显示隐藏,用例见 index.html。

效果图

foldingPanel - 图1

依赖的模块

./libs/vue.main.js

快速使用

见代码

  2.         var vm = new Vue({
  3.             el: "#app",
  4.             data: {
  5.                 list: [{
  6.                     name: '测试标题1',
  7.                     content: "测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容"
  8.                 }, {
  9.                     name: '测试标题2',
  10.                     content: "测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容"
  11.                 }, {
  12.                     name: '测试标题3',
  13.                     content: "测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容"
  14.                 }, {
  15.                     name: '测试标题4',
  16.                     content: "测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容"
  17.                 }, {
  18.                     name: '测试标题5',
  19.                     content: "测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容"
  20.                 }, {
  21.                     name: '测试标题6',
  22.                     content: "测试内容测试内容测试内容测试内容测试内容测试内容"
  23.                 }, {
  24.                     name: '测试标题7',
  25.                     content: "测试内容测试内容测试内容测试内容测试内容测试内容"
  26.                 }]
  27.             },
  28.             methods: {
  29.                 handelSwitch(index) {
  30.                     var arr = this.list;
  31.                     for (var i = 0; i < arr.length; i++) {
  32.                         if (i != index) {
  33.                             let obj = arr[i];
  34.                             obj.show = false;
  35.                             vm.$set(vm.list, i, obj)
  36.                         } else if(i == index) {
  37.                             let obj = arr[i];
  38.                             obj.show = !obj.show;
  39.                             vm.$set(vm.list, i, obj)
  40.                         } else {
  41.                             let obj = arr[i];
  42.                             obj.show = true;
  43.                             vm.$set(vm.list, i, obj)
  44.                         }
  45.                     }
  47.                 }
  48.             }
  49.         })

特别说明

样式修改，见用例 index.html。