collapse-list.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <template>
  2. <div class="com-collapse">
  3. <div class="collapse-box" v-for="(menu, i) in list" :key="menu" :class="{ active: menuIndex == i }">
  4. <div class="box-text" @click="menuClick(i)">
  5. {{ menu.text }}
  6. </div>
  7. <div class="collapse-items">
  8. <div class="item" v-for="(item, j) in menu.children" :key="item" @click="itemClick(j)" :class="{ active: itemIndex == j }">
  9. <span class="dot" :class="'bg-' + item.color"></span>
  10. <span class="value"> {{ item.text }}</span>
  11. </div>
  12. </div>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. export default {
  18. // 名称
  19. name: "List",
  20. // 使用组件
  21. components: {},
  22. // 传入参数
  23. props: {
  24. // 标题 ""不显示
  25. title: {
  26. type: String,
  27. default: "",
  28. },
  29. // 列表面板高度 fill auto 27.778vh
  30. height: {
  31. type: String,
  32. default: "fill",
  33. },
  34. /**
  35. {
  36. id:'',
  37. text: "某某风电场",
  38. children: [{
  39. id:'',
  40. text:'2E01',
  41. color:'green'
  42. }]
  43. }
  44. */
  45. list: {
  46. type: Array,
  47. default: () => [
  48. {
  49. id: "1",
  50. text: "某某风电场",
  51. children: [
  52. {
  53. id: "1",
  54. text: "2E01",
  55. color: "green",
  56. },
  57. {
  58. id: "2",
  59. text: "2E01",
  60. color: "green",
  61. },
  62. {
  63. id: "3",
  64. text: "2E01",
  65. color: "green",
  66. },
  67. ],
  68. },
  69. {
  70. id: "2",
  71. text: "某某风电场",
  72. children: [
  73. {
  74. id: "1",
  75. text: "2E01",
  76. color: "green",
  77. },
  78. {
  79. id: "2",
  80. text: "2E01",
  81. color: "green",
  82. },
  83. {
  84. id: "3",
  85. text: "2E01",
  86. color: "green",
  87. },
  88. ],
  89. },
  90. ],
  91. },
  92. },
  93. // 自定义事件
  94. emits: {
  95. // 选中事件
  96. select: null,
  97. },
  98. computed: {},
  99. // 数据
  100. data() {
  101. return {
  102. menuIndex: 0,
  103. itemIndex: 0,
  104. };
  105. },
  106. // 函数
  107. methods: {
  108. menuClick: function(index) {
  109. this.menuIndex = index;
  110. this.itemIndex = 0;
  111. },
  112. itemClick(index) {
  113. this.itemIndex = index;
  114. },
  115. },
  116. // 生命周期钩子
  117. beforeCreate() {
  118. // 创建前
  119. },
  120. created() {
  121. // 创建后
  122. },
  123. beforeMount() {
  124. // 渲染前
  125. },
  126. mounted() {},
  127. beforeUpdate() {
  128. // 数据更新前
  129. },
  130. updated() {
  131. // 数据更新后
  132. },
  133. };
  134. </script>
  135. <style lang="less">
  136. .com-collapse {
  137. .collapse-box {
  138. cursor: pointer;
  139. .box-text {
  140. padding: 0.741vh 1.481vh;
  141. background: fade(@white, 10);
  142. &:hover {
  143. color: #fff;
  144. background: fade(@purple, 60);
  145. }
  146. }
  147. .collapse-items {
  148. display: none;
  149. .item {
  150. padding: 0.741vh 1.481vh;
  151. display: flex;
  152. align-items: center;
  153. .dot {
  154. display: inline-block;
  155. width: 0.741vh;
  156. height: 0.741vh;
  157. margin-right: 1.111vh;
  158. }
  159. .value {
  160. flex: auto;
  161. }
  162. &.active {
  163. color: #fff;
  164. cursor: pointer;
  165. }
  166. }
  167. }
  168. &.active {
  169. .box-text {
  170. color: @white;
  171. background: fade(@purple, 60);
  172. }
  173. & > .collapse-items {
  174. display: block;
  175. }
  176. }
  177. }
  178. }
  179. </style>