Blame view

src/components/carousel/carousel-item.vue 1.06 KB
6c9acb08   Rijn   initialize carousel
1
  <template>
bb71140e   梁灏   support Carousel
2
      <div :class="prefixCls" :style="styles"><slot></slot></div>
6c9acb08   Rijn   initialize carousel
3
4
5
6
7
  </template>
  <script>
      const prefixCls = 'ivu-carousel-item';
  
      export default {
65c64ce9   Rijn   carousel basic po...
8
          componentName: 'carousel-item',
bb71140e   梁灏   support Carousel
9
          name: 'CarouselItem',
65c64ce9   Rijn   carousel basic po...
10
11
12
13
          data () {
              return {
                  prefixCls: prefixCls,
                  width: 0,
9cd69375   Rijn   added height props
14
                  height: 'auto',
65c64ce9   Rijn   carousel basic po...
15
16
17
18
19
20
21
                  left: 0
              };
          },
          computed: {
              styles () {
                  return {
                      width: `${this.width}px`,
9cd69375   Rijn   added height props
22
                      height: `${this.height}`,
65c64ce9   Rijn   carousel basic po...
23
                      left: `${this.left}px`
50f4ac70   Rijn   Merge branch 'mas...
24
                  };
65c64ce9   Rijn   carousel basic po...
25
26
              }
          },
bb71140e   梁灏   support Carousel
27
          mounted () {
373dfb3c   Rijn   removed observer
28
29
              this.$parent.slotChange();
          },
ccf544dc   houyl   Merge branch 'mas...
30
31
32
33
34
35
36
37
38
          watch: {
              width (val) {
                  if (val && this.$parent.loop) {
                      this.$nextTick(() => {
                          this.$parent.initCopyTrackDom();
                      });
                  }
              }
          },
373dfb3c   Rijn   removed observer
39
          beforeDestroy () {
373dfb3c   Rijn   removed observer
40
              this.$parent.slotChange();
8f4e2cf0   Rijn   update pos when s...
41
          }
6c9acb08   Rijn   initialize carousel
42
43
      };
  </script>