Blame view

src/components/carousel/carousel.vue 6.06 KB
6c9acb08   Rijn   initialize carousel
1
  <template>
41f83010   Rijn   update props and ...
2
      <div :class="classes">
90f77e40   Rijn   updated carousel ...
3
4
5
6
          <div :class="[prefixCls + '-arrow', 'left']">
              <div class='placeholder'></div>
              <Icon type="arrow-left-b"></Icon>
          </div>
65c64ce9   Rijn   carousel basic po...
7
8
9
10
11
12
          <div :class="[prefixCls + '-list']">
              <div :class="[prefixCls + '-track']" :style="trackStyles" v-el:slides>
                  <!-- opacity: 1; width: 4480px; transform: translate3d(-1120px, 0px, 0px); -->
                  <slot></slot>
              </div>
          </div>
90f77e40   Rijn   updated carousel ...
13
14
15
16
17
          <div :class="[prefixCls + '-arrow', 'right']">
              <div class='placeholder'></div>
              <Icon type="arrow-right-b"></Icon>
          </div>
          <!-- dots -->
6c9acb08   Rijn   initialize carousel
18
19
20
      </div>
  </template>
  <script>
41f83010   Rijn   update props and ...
21
      import Icon from '../icon/icon.vue';
65c64ce9   Rijn   carousel basic po...
22
      import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist';
41f83010   Rijn   update props and ...
23
24
  
      const prefixCls = 'ivu-carousel';
6c9acb08   Rijn   initialize carousel
25
26
  
      export default {
41f83010   Rijn   update props and ...
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
          name: 'Carousel',
          props: {
              arrows: {
                  type: Boolean,
                  default: false
              },
              autoplay: {
                  type: Boolean,
                  default: true
              },
              autoplaySpeed: {
                  type: Number,
                  default: 2000
              },
              easing: {
                  type: String,
                  default: 'ease'
              },
              dots: {
                  type: Boolean,
                  default: true
              },
41f83010   Rijn   update props and ...
49
50
51
              vertical: {
                  type: Boolean,
                  default: false
3e6d6356   Rijn   implement basic t...
52
53
54
55
              },
              currentIndex: {
                  type: Number,
                  default: 0
41f83010   Rijn   update props and ...
56
57
              }
          },
65c64ce9   Rijn   carousel basic po...
58
59
60
61
62
          data () {
              return {
                  prefixCls: prefixCls,
                  listWidth: 0,
                  trackWidth: 0,
3e6d6356   Rijn   implement basic t...
63
                  trackLeft: 0,
65c64ce9   Rijn   carousel basic po...
64
                  slides: [],
3e6d6356   Rijn   implement basic t...
65
66
                  slideInstances: [],
                  timer: null
65c64ce9   Rijn   carousel basic po...
67
68
              }
          },
41f83010   Rijn   update props and ...
69
70
71
72
73
74
75
76
77
          // events: before-change(from, to), after-change(current, from)
          computed: {
              classes () {
                  return [
                      `${prefixCls}`,
                      {
                          [`${prefixCls}-vertical`]: this.vertical
                      }
                  ];
65c64ce9   Rijn   carousel basic po...
78
79
80
              },
              trackStyles () {
                  return {
3e6d6356   Rijn   implement basic t...
81
82
83
                      width: `${this.trackWidth}px`,
                      transform: `translate3d(-${this.trackLeft}px, 0px, 0px)`,
                      transition: `transform 500ms ${this.easing}`
65c64ce9   Rijn   carousel basic po...
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
                  };
              }
          },
          methods: {
              // find option component
              findChild (cb) {
                  const find = function (child) {
                      const name = child.$options.componentName;
  
                      if (name) {
                          cb(child);
                      } else if (child.$children.length) {
                          child.$children.forEach((innerChild) => {
                              find(innerChild, cb);
                          });
                      }
                  };
  
                  if (this.slideInstances.length) {
                      this.slideInstances.forEach((child) => {
                          find(child);
                      });
                  } else {
                      this.$children.forEach((child) => {
                          find(child);
                      });
                  }
              },
              updateSlides (init, slot = false) {
                  let slides = [];
                  let index = 1;
  
                  this.findChild((child) => {
                      slides.push({
                          $el: child.$el
                      });
                      child.index = index++;
  
                      if (init) {
                          this.slideInstances.push(child);
                      }
                  });
  
                  this.slides = slides;
65c64ce9   Rijn   carousel basic po...
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
              },
              updatePos () {
                  this.findChild((child) => {
                      child.width = this.listWidth;
                  });
  
                  this.trackWidth = (this.slides.length || 0) * this.listWidth;
              },
              // use when slot changed
              slotChange () {
                  this.slides = [];
                  this.slideInstances = [];
              },
              handleResize () {
                  this.$nextTick(() => {
                      this.listWidth = parseInt(getStyle(this.$el, 'width'));
                      this.updatePos();
                  });
3e6d6356   Rijn   implement basic t...
146
              },
bfc11079   Rijn   updated autoplay ...
147
148
149
              slide () {
                  this.trackLeft = this.currentIndex * this.listWidth;
              },
3e6d6356   Rijn   implement basic t...
150
              setAutoplay () {
bfc11079   Rijn   updated autoplay ...
151
                  window.clearInterval(this.timer);
3e6d6356   Rijn   implement basic t...
152
153
                  if (this.autoplay) {
                      this.timer = window.setInterval(() => {
bfc11079   Rijn   updated autoplay ...
154
155
156
157
                          let index = this.currentIndex;
                          index ++;
                          if (index === this.slides.length) index = 0;
                          this.currentIndex = index;
3e6d6356   Rijn   implement basic t...
158
                      }, this.autoplaySpeed);
3e6d6356   Rijn   implement basic t...
159
                  }
41f83010   Rijn   update props and ...
160
              }
65c64ce9   Rijn   carousel basic po...
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
          },
          compiled () {
              this.updateSlides(true);
  
              // watch slot changed
              if (MutationObserver) {
                  this.observer = new MutationObserver(() => {
                      this.slotChange();
                      this.updateSlides(true, true);
                  });
  
                  this.observer.observe(this.$els.slides, {
                      childList: true,
                      characterData: true,
                      subtree: true
                  });
              }
          },
3e6d6356   Rijn   implement basic t...
179
180
181
182
          watch: {
              autoplay () {
                  this.setAutoplay();
              },
bfc11079   Rijn   updated autoplay ...
183
184
185
186
187
188
189
              autoplaySpeed () {
                  this.setAutoplay();
              },
              currentIndex () {
                  this.$nextTick(() => {
                      this.slide();
                  });
3e6d6356   Rijn   implement basic t...
190
191
              }
          },
65c64ce9   Rijn   carousel basic po...
192
193
          ready () {
              this.handleResize();
bfc11079   Rijn   updated autoplay ...
194
              this.setAutoplay();
65c64ce9   Rijn   carousel basic po...
195
196
197
198
              window.addEventListener('resize', this.handleResize, false);
          },
          beforeDestroy () {
              window.removeEventListener('resize', this.handleResize, false);
41f83010   Rijn   update props and ...
199
          }
6c9acb08   Rijn   initialize carousel
200
201
      };
  </script>