1
2
3
4
5
6
7

...
  <VueCollapse>
    <VueCollapseItem title="标题1">内容1</VueCollapseItem>
    <VueCollapseItem title="标题2">内容2</VueCollapseItem>
    <VueCollapseItem title="标题3">内容3</VueCollapseItem>
  </VueCollapse>
...

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<template>
  <div class="collapse">
    <slot>
      <!--占位-->
      <VueCollapseItem v-for="(item, index) in itemsData"
                       :title="item.title"
                       :isOpen="item.isOpen"
                       :key="index">
      </VueCollapseItem>
    </slot>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import VueCollapseItem from './VueCollapseItem.vue';

@Component({
  components: {VueCollapseItem}
})
export default class VueCollapse extends Vue {
  name = 'VueCollapse';
  // 占位数据
  @Prop({
    type: Array,
    default() {return [];}
  }) itemsData!: [];
  
}
</script>

<style lang="scss" scoped>
$grey: #999;
$border-radius: 4px;
.collapse {
  border: 1px solid $grey;
  border-radius: $border-radius;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
</style>

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103

<template>
  <div class="collapse-item">
    <header
      class="title"
      :class="{ 'title-show': isOpen}"
      @click="toggle">
      {{ title }}
    </header>
    <article
      class="content"
      :class="{ 'content-show': isOpen}"
      v-show="isOpen && !isDisabled">
      <slot>
        VueCollapseItem
      </slot>
    </article>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';

@Component
export default class VueCollapseItem extends Vue {
  name = 'VueCollapseItem';
  isOpen = false;

  @Prop({
    type: String,
    default: '',
    required: true
  }) title!: string;

  toggle() {
    this.isOpen = !this.isOpen;
  }
  
}
</script>

<style lang="scss" scoped>
$grey: #999;
$border-radius: 4px;

@mixin border-bottom-radius($radius: 0px) {
  border-bottom-left-radius: $radius;
  border-bottom-right-radius: $radius;
}

.collapse-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  border-bottom: 1px solid $grey;

  > .title {
    width: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 0 8px;
  }

  > .content {
    width: 100%;
    padding: 18px;

    &.content-show {
      border-top: 1px solid $grey;
    }
  }

  // .collapse-item
  &:first-child {

    > .title {
      // v-show = true
      &.title-show {
        border-top: none;
      }
    }
  }

  // .collapse-item
  &:last-child {
    border-bottom: none; //  覆盖 border-bottom: 1px solid $grey;

    > .title {
      // v-show = true
      &.title-show {
        @include border-bottom-radius;
      }
    }

    > .content {
      @include border-bottom-radius($border-radius);
    }
  }

}
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<template>
  <div>
    <form>
      <fieldset>
        <legend>Collapse 折叠面板</legend>
        <details open>
          <summary>基本样式</summary>
          <VueCollapse>
            <VueCollapseItem title="标题1">内容1</VueCollapseItem>
            <VueCollapseItem title="标题2">内容2</VueCollapseItem>
            <VueCollapseItem title="标题3">内容3</VueCollapseItem>
          </VueCollapse>
        </details>
      </fieldset>
    </form>
    
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import VueCollapse from './collapse/VueCollapse.vue';
import VueCollapseItem from './collapse/VueCollapseItem.vue';

@Component({
  components: {VueCollapseItem, VueCollapse}
})
export default class Collapses extends Vue {
  name = 'Collapses';
}
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<template>
  <div class="collapse-item">
    <header
      class="title"
      :class="{ 'title-show': isOpen && !isDisabled,
                'disabled': isDisabled}"
      @click="toggle">
      {{ title }}
    </header>
    <article
      class="content"
      :class="{ 'content-show': isOpen && !isDisabled}"
      v-show="isOpen && !isDisabled">
      <slot>
        VueCollapseItem
      </slot>
    </article>
  </div>
</template>

<script lang="ts">
import {Component, Inject, Prop, Vue} from 'vue-property-decorator';

@Component
export default class VueCollapseItem extends Vue {
  name = 'VueCollapseItem';
  isOpen = false;

  @Prop({
    type: String,
    default: '',
    required: true
  }) title!: string;
  @Prop({
    type: Boolean,
    default: false
  }) isDisabled!: boolean;

  @Inject() readonly eventBus!: Vue;
  @Inject() readonly isAllShowSingle!: boolean;

  toggle() {
    if (this.isOpen) {
      this.eventBus.$emit('remove:selected', this.title);
    } else {
      this.eventBus.$emit('add:selected', this.title);
    }
  }

  // listen to parent
  addBusListener() {
    this.eventBus?.$on('update:selected', (titleList: Array<string>) => {
      if (titleList.includes(this.title)) {
        this.isOpen = true;
      } else {
        this.isOpen = false;
      }
    });

  }

  initShow() {
    this.eventBus.$once('update:selected', (titleList: Array<string>) => {
      if (titleList.includes(this.title)) {
        this.isOpen = true;
      }
    });
  }

  mounted() {
    // listen to parent once
    this.initShow();
    // listen to parent
    this.addBusListener();
  }
}
</script>

<style lang="scss" scoped>...</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<template>
  <div class="collapse">
    <slot>
      <VueCollapseItem v-for="(item, index) in itemsData"
                       :title="item.title"
                       :disabled="item.disabled"
                       :key="index">
      </VueCollapseItem>
    </slot>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Provide, Vue} from 'vue-property-decorator';
import VueCollapseItem from './VueCollapseItem.vue';
@Component({
  components: {VueCollapseItem}
})
export default class VueCollapse extends Vue {
  name = 'VueCollapse';
  @Prop({
    type: Array,
    default() {return [];}
  }) itemsData!: [];
  @Provide() eventBus = new Vue();
}
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<template>
  <div class="collapse-item"
       :class="{ 'title-show': isOpen && !isDisabled}">
    <header
      class="title"
      :class="{ 'title-show': isOpen && !isDisabled,
                'disabled': isDisabled}"
      @click="toggle">
      {{ title }}
    </header>
    <article
      class="content"
      v-show="isOpen && !isDisabled">
      <slot>
        VueCollapseItem
      </slot>
    </article>
  </div>
</template>

<script lang="ts">
import {Component, Inject, Prop, Vue} from 'vue-property-decorator';
@Component
export default class VueCollapseItem extends Vue {
  name = 'VueCollapseItem';
  isOpen = false;
  @Prop({
    type: String,
    default: '',
    required: true
  }) title!: string;
  @Prop({
    type: Boolean,
    default: false
  }) isDisabled!: boolean;
  @Inject() readonly eventBus!: Vue;
  toggle() {
    if (this.isOpen) {
      this.isOpen = false;
    } else {
      this.isOpen = true;
      this.eventBus.$emit('update:selected', this);
    }
  }
  close() {
    this.isOpen = false;
  }
  addBusListener() {
    this.eventBus.$on('update:selected', (vm: Vue) => {
      if (vm !== this) {
        this.close();
      }
    });
  }
  mounted() {
    this.addBusListener();
  }
}
</script>