chenhaodong / mew-iview

Commit 9cd69375d84f39ba18532ec99153ef311c065a06

Authored by Rijn
1 parent 8738f4d3

added height props

Showing 4 changed files with 48 additions and 33 deletions   Show diff stats
Inline Side-by-side
src/components/carousel/carousel-item.vue
  Show/Hide comments   View file @9cd6937
... ... @@ -11,6 +11,7 @@
11 11 return {
12 12 prefixCls: prefixCls,
13 13 width: 0,
  14 + height: 'auto',
14 15 left: 0
15 16 };
16 17 },
... ... @@ -18,6 +19,7 @@
18 19 styles () {
19 20 return {
20 21 width: `${this.width}px`,
  22 + height: `${this.height}`,
21 23 left: `${this.left}px`
22 24 }
23 25 }
... ...
src/components/carousel/carousel.vue
  Show/Hide comments   View file @9cd6937
... ... @@ -5,7 +5,6 @@
5 5 </button>
6 6 <div :class="[prefixCls + '-list']">
7 7 <div :class="[prefixCls + '-track']" :style="trackStyles" v-el:slides>
8   - <!-- opacity: 1; width: 4480px; transform: translate3d(-1120px, 0px, 0px); -->
9 8 <slot></slot>
10 9 </div>
11 10 </div>
... ... @@ -56,13 +55,13 @@
56 55 type: String,
57 56 default: 'click'
58 57 },
59   - vertical: {
60   - type: Boolean,
61   - default: false
62   - },
63 58 currentIndex: {
64 59 type: Number,
65 60 default: 0
  61 + },
  62 + height: {
  63 + type: [String, Number],
  64 + default: 'auto'
66 65 }
67 66 },
68 67 data () {
... ... @@ -70,25 +69,23 @@
70 69 prefixCls: prefixCls,
71 70 listWidth: 0,
72 71 trackWidth: 0,
73   - trackLeft: 0,
  72 + trackOffset: 0,
74 73 slides: [],
75 74 slideInstances: [],
76   - timer: null
  75 + timer: null,
  76 + ready: false
77 77 }
78 78 },
79 79 computed: {
80 80 classes () {
81 81 return [
82   - `${prefixCls}`,
83   - {
84   - [`${prefixCls}-vertical`]: this.vertical
85   - }
  82 + `${prefixCls}`
86 83 ];
87 84 },
88 85 trackStyles () {
89 86 return {
90 87 width: `${this.trackWidth}px`,
91   - transform: `translate3d(-${this.trackLeft}px, 0px, 0px)`,
  88 + transform: `translate3d(-${this.trackOffset}px, 0px, 0px)`,
92 89 transition: `transform 500ms ${this.easing}`
93 90 };
94 91 },
... ... @@ -103,11 +100,6 @@
103 100 `${prefixCls}-dots`,
104 101 `${prefixCls}-dots-${this.dots}`
105 102 ]
106   - },
107   - activeDot (n) {
108   - return {
109   - [`${prefixCls}-vertical`]: this.currentIndex === n
110   - }
111 103 }
112 104 },
113 105 methods: {
... ... @@ -125,7 +117,7 @@
125 117 }
126 118 };
127 119  
128   - if (this.slideInstances.length) {
  120 + if (this.slideInstances.length || !this.$children) {
129 121 this.slideInstances.forEach((child) => {
130 122 find(child);
131 123 });
... ... @@ -157,6 +149,7 @@
157 149 updatePos () {
158 150 this.findChild((child) => {
159 151 child.width = this.listWidth;
  152 + child.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
160 153 });
161 154  
162 155 this.trackWidth = (this.slides.length || 0) * this.listWidth;
... ... @@ -172,10 +165,8 @@
172 165 });
173 166 },
174 167 handleResize () {
175   - this.$nextTick(() => {
176   - this.listWidth = parseInt(getStyle(this.$el, 'width'));
177   - this.updatePos();
178   - });
  168 + this.listWidth = parseInt(getStyle(this.$el, 'width'));
  169 + this.updatePos();
179 170 },
180 171 add (offset) {
181 172 let index = this.currentIndex;
... ... @@ -198,6 +189,12 @@
198 189 this.add(1);
199 190 }, this.autoplaySpeed);
200 191 }
  192 + },
  193 + updateOffset () {
  194 + this.$nextTick(() => {
  195 + this.handleResize();
  196 + this.trackOffset = this.currentIndex * this.listWidth;
  197 + });
201 198 }
202 199 },
203 200 compiled () {
... ... @@ -211,10 +208,10 @@
211 208 this.setAutoplay();
212 209 },
213 210 currentIndex (val, oldVal) {
214   - this.$emit('on-change', oldVal, val);
215   - this.$nextTick(() => {
216   - this.trackLeft = this.currentIndex * this.listWidth;
217   - });
  211 + this.updateOffset();
  212 + },
  213 + height () {
  214 + this.updatePos();
218 215 }
219 216 },
220 217 ready () {
... ...
src/styles/components/carousel.less
  Show/Hide comments   View file @9cd6937
... ... @@ -103,23 +103,24 @@
103 103 }
104 104  
105 105 &-dots {
  106 + z-index: 10;
  107 +
106 108 @padding: 7px;
107 109  
  110 + display: none;
  111 +
108 112 position: relative;
109 113 &-inside {
  114 + display: block;
110 115 position: absolute;
111 116 bottom: 10px - @padding;
112 117 }
113 118  
114 119 &-outside {
  120 + display: block;
115 121 margin-top: 10px - @padding;
116 122 }
117 123  
118   - display: block;
119   - &-none {
120   - display: none;
121   - }
122   -
123 124 list-style: none;
124 125  
125 126 text-align: center;
... ...
test/routers/carousel.vue
  Show/Hide comments   View file @9cd6937
... ... @@ -23,6 +23,8 @@
23 23 <i-button @click="push">Push</i-button>
24 24 <i-button @click="remove = true">Remove Front</i-button>
25 25 </i-col>
  26 + </Row>
  27 + <Row>
26 28 <i-col span="4">
27 29 <p>Dots</p>
28 30 <Button-group>
... ... @@ -46,14 +48,21 @@
46 48 <i-button @click="arrow = 'never'">Never</i-button>
47 49 </Button-group>
48 50 </i-col>
  51 + <i-col span="4">
  52 + Height
  53 + <i-button @click="height = 'auto'">Auto</i-button>
  54 + <i-button @click="height = 80">Manual</i-button>
  55 + <Slider v-if="height !== 'auto'" :value.sync="height" :min="50" :max="200"></Slider>
  56 + </i-col>
49 57 </Row>
50   - <Carousel style="width: 50%; border: solid 1px #000"
  58 + <Carousel style="width: 50%; border: solid 1px #000; margin-top: 20px;"
51 59 :current-index.sync="currentIndex"
52 60 :autoplay="autoplay"
53 61 :autoplay-speed="autoplaySpeed"
54 62 :dots="dots"
55 63 :trigger="trigger"
56 64 :arrow="arrow"
  65 + :height="height"
57 66 @on-change="slideChange"
58 67 easing="linear">
59 68 <Carousel-item v-if="!remove">
... ... @@ -64,6 +73,11 @@
64 73 </template>
65 74 </Alert>
66 75 </Carousel-item>
  76 + <Carousel-item>
  77 + <div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
  78 + <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>
  79 + </div>
  80 + </Carousel-item>
67 81 <Carousel-item style="text-align: center">
68 82 <Icon type="checkmark" style="font-size: 5em"></Icon>
69 83 </Carousel-item>
... ... @@ -73,7 +87,7 @@
73 87 </Carousel-item>
74 88 </Carousel>
75 89 <div>
76   - <p v-for="item in log">{{item}}</p>
  90 + <p v-for="item in log" track-by="$index">{{item}}</p>
77 91 </div>
78 92 </template>
79 93 <script>
... ... @@ -88,6 +102,7 @@
88 102 arrow: 'hover',
89 103 trigger: 'click',
90 104 dots: 'inside',
  105 + height: 'auto',
91 106 log: []
92 107 }
93 108 },
... ...