Blame view

components/collapse/collapse.vue 2.69 KB
49306c7a   梁灏   add Collapse comp...
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
  <template>
      <div :class="classes">
          <slot></slot>
      </div>
  </template>
  <script>
      const prefixCls = 'ivu-collapse';
  
      export default {
          props: {
              accordion: {
                  type: Boolean,
                  default: false
              },
              activeKey: {
                  type: [Array, String]
              }
          },
          computed: {
              classes () {
                  return `${prefixCls}`;
              }
          },
          compiled () {
              this.setActive();
          },
          methods: {
              setActive () {
                  const activeKey = this.getActiveKey();
  
                  this.$children.forEach((child, index) => {
                      const key = child.key || index.toString();
                      let isActive = false;
  
                      if (self.accordion) {
                          isActive = activeKey === key;
                      } else {
                          isActive = activeKey.indexOf(key) > -1;
                      }
  
                      child.isActive = isActive;
                      child.index = index;
                  })
              },
              getActiveKey () {
                  let activeKey = this.activeKey || [];
                  const accordion = this.accordion;
  
                  if (!Array.isArray(activeKey)) {
                      activeKey = [activeKey];
                  }
  
                  if (accordion && activeKey.length > 1) {
                      activeKey = [activeKey[0]];
                  }
  
                  for (let i = 0; i < activeKey.length; i++) {
                      activeKey[i] = activeKey[i].toString();
                  }
  
                  return activeKey;
              },
              toggle (data) {
                  const key = data.key.toString();
                  let newActiveKey = [];
  
                  if (this.accordion) {
                      if (!data.isActive) {
                          newActiveKey.push(key);
                      }
                  } else {
                      let activeKey = this.getActiveKey();
                      const keyIndex = activeKey.indexOf(key);
  
                      if (data.isActive) {
                          if (keyIndex > -1) {
                              activeKey.splice(keyIndex, 1);
                          }
                      } else {
                          if (keyIndex < 0) {
                              activeKey.push(key);
                          }
                      }
  
                      newActiveKey = activeKey;
                  }
  
                  this.activeKey = newActiveKey;
                  this.$emit('on-change', newActiveKey);
              }
          },
          watch: {
              activeKey () {
                  this.setActive();
              }
          }
      }
  </script>