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