123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- <template>
- <div class="com-collapse">
- <div class="collapse-box" v-for="(menu, i) in list" :key="menu" :class="{ active: menuIndex == i }">
- <div class="box-text" @click="menuClick(i)">
- {{ menu.text }}
- </div>
- <div class="collapse-items">
- <div class="item" v-for="(item, j) in menu.children" :key="item" @click="itemClick(j)" :class="{ active: itemIndex == j }">
- <span class="dot" :class="'bg-' + item.color"></span>
- <span class="value"> {{ item.text }}</span>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- // 名称
- name: "List",
- // 使用组件
- components: {},
- // 传入参数
- props: {
- // 标题 ""不显示
- title: {
- type: String,
- default: "",
- },
- // 列表面板高度 fill auto 27.778vh
- height: {
- type: String,
- default: "fill",
- },
- /**
- {
- id:'',
- text: "某某风电场",
- children: [{
- id:'',
- text:'2E01',
- color:'green'
- }]
- }
- */
- list: {
- type: Array,
- default: () => [
- {
- id: "1",
- text: "某某风电场",
- children: [
- {
- id: "1",
- text: "2E01",
- color: "green",
- },
- {
- id: "2",
- text: "2E01",
- color: "green",
- },
- {
- id: "3",
- text: "2E01",
- color: "green",
- },
- ],
- },
- {
- id: "2",
- text: "某某风电场",
- children: [
- {
- id: "1",
- text: "2E01",
- color: "green",
- },
- {
- id: "2",
- text: "2E01",
- color: "green",
- },
- {
- id: "3",
- text: "2E01",
- color: "green",
- },
- ],
- },
- ],
- },
- },
- // 自定义事件
- emits: {
- // 选中事件
- select: null,
- },
- computed: {},
- // 数据
- data() {
- return {
- menuIndex: 0,
- itemIndex: 0,
- };
- },
- // 函数
- methods: {
- menuClick: function(index) {
- this.menuIndex = index;
- this.itemIndex = 0;
- },
- itemClick(index) {
- this.itemIndex = index;
- },
- },
- // 生命周期钩子
- beforeCreate() {
- // 创建前
- },
- created() {
- // 创建后
- },
- beforeMount() {
- // 渲染前
- },
- mounted() {},
- beforeUpdate() {
- // 数据更新前
- },
- updated() {
- // 数据更新后
- },
- };
- </script>
- <style lang="less">
- .com-collapse {
- .collapse-box {
- cursor: pointer;
- .box-text {
- padding: 0.741vh 1.481vh;
- background: fade(@white, 10);
- &:hover {
- color: #fff;
- background: fade(@purple, 60);
- }
- }
- .collapse-items {
- display: none;
- .item {
- padding: 0.741vh 1.481vh;
- display: flex;
- align-items: center;
- .dot {
- display: inline-block;
- width: 0.741vh;
- height: 0.741vh;
- margin-right: 1.111vh;
- }
- .value {
- flex: auto;
- }
- &.active {
- color: #fff;
- cursor: pointer;
- }
- }
- }
- &.active {
- .box-text {
- color: @white;
- background: fade(@purple, 60);
- }
- & > .collapse-items {
- display: block;
- }
- }
- }
- }
- </style>
|