all files / src/collapse/ collapseItem.vue

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14×
 
 
 
 
14×
 
18×
 
 
 
 
3×
1×
 
 
2×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <div class="am-collapse-item">
    <div class="am-collapse-item-name" :data-name="name" :class="{'active': open}" @click="onToggle">
      <am-icon name="right" :class="['am-icon-animation',{'active': open}]" v-if="visibleIcon"></am-icon>
      <slot name="title">{{title}}</slot>
    </div>
    <am-collapse-transition>
      <div class="am-collapse-item-content" v-show="open">
        <div class="am-collapse-item-inner">
          <slot></slot>
        </div>
      </div>
    </am-collapse-transition>
  </div>
</template>
 
<script>
import AmCollapseTransition from "../collapseTransition";
import AmIcon from "../icon";
export default {
  name: "amCollapseItem",
  inject: ["eventBus"],
  components: { AmIcon, AmCollapseTransition },
  props: {
    title: {
      type: String
    },
    name: {
      type: String,
      required: true
    },
    visibleIcon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      open: false
    };
  },
  created() {
    this.eventBus &&
      this.eventBus.$on("update:selected", selected => {
        this.open = selected.indexOf(this.name) >= 0 ? true : false;
      });
  },
  methods: {
    onToggle() {
      if (this.open) {
        this.eventBus &&
          this.eventBus.$emit("update:removeSelected", this.name);
      } else {
        this.eventBus && this.eventBus.$emit("update:addSelected", this.name);
      }
    }
  }
};
</script>
 
<style lang="scss" scoped>
@import "var";
.am-collapse-item {
  &-name {
    font-size: $font-size;
    color: $color;
    line-height: 40px;
    cursor: pointer;
    border-bottom: 1px solid $border-color;
    transition: border-bottom-color 0.25s;
    &.active {
      border-bottom-color: transparent;
    }
    .am-icon-animation {
      margin-right: 0.3em;
      transition: transform 0.25s;
    }
    .active {
      transform: rotate(90deg);
    }
  }
  &-content {
    transition: all 0.25s;
    background-color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    border-bottom: 1px solid $border-color;
  }
  &-inner {
    padding: 4px 0;
    font-size: 15px;
  }
}
</style>