Commit 90f77e4060a4bd137d10c86ddfc03d29620d821d
1 parent
538b964b
updated carousel style
Showing
3 changed files
with
55 additions
and
11 deletions
Show diff stats
src/components/carousel/carousel.vue
| 1 | 1 | <template> |
| 2 | 2 | <div :class="classes"> |
| 3 | - <!-- button --> | |
| 3 | + <div :class="[prefixCls + '-arrow', 'left']"> | |
| 4 | + <div class='placeholder'></div> | |
| 5 | + <Icon type="arrow-left-b"></Icon> | |
| 6 | + </div> | |
| 4 | 7 | <div :class="[prefixCls + '-list']"> |
| 5 | 8 | <div :class="[prefixCls + '-track']" :style="trackStyles" v-el:slides> |
| 6 | 9 | <!-- opacity: 1; width: 4480px; transform: translate3d(-1120px, 0px, 0px); --> |
| 7 | 10 | <slot></slot> |
| 8 | 11 | </div> |
| 9 | 12 | </div> |
| 10 | - <!-- button --> | |
| 13 | + <div :class="[prefixCls + '-arrow', 'right']"> | |
| 14 | + <div class='placeholder'></div> | |
| 15 | + <Icon type="arrow-right-b"></Icon> | |
| 16 | + </div> | |
| 17 | + <!-- dots --> | |
| 11 | 18 | </div> |
| 12 | 19 | </template> |
| 13 | 20 | <script> |
| ... | ... | @@ -39,10 +46,6 @@ |
| 39 | 46 | type: Boolean, |
| 40 | 47 | default: true |
| 41 | 48 | }, |
| 42 | - fade: { | |
| 43 | - type: Boolean, | |
| 44 | - default: false | |
| 45 | - }, | |
| 46 | 49 | vertical: { |
| 47 | 50 | type: Boolean, |
| 48 | 51 | default: false |
| ... | ... | @@ -122,8 +125,6 @@ |
| 122 | 125 | }); |
| 123 | 126 | |
| 124 | 127 | this.slides = slides; |
| 125 | - | |
| 126 | - // this.updateSlideWidth(); | |
| 127 | 128 | }, |
| 128 | 129 | updatePos () { |
| 129 | 130 | this.findChild((child) => { | ... | ... |
src/styles/components/carousel.less
| ... | ... | @@ -29,6 +29,8 @@ |
| 29 | 29 | display: block; |
| 30 | 30 | |
| 31 | 31 | overflow: hidden; |
| 32 | + | |
| 33 | + z-index: 1; | |
| 32 | 34 | } |
| 33 | 35 | |
| 34 | 36 | &-item { |
| ... | ... | @@ -37,4 +39,42 @@ |
| 37 | 39 | min-height: 1px; |
| 38 | 40 | display: block; |
| 39 | 41 | } |
| 42 | + | |
| 43 | + &-arrow { | |
| 44 | + position: absolute; | |
| 45 | + top: 0; | |
| 46 | + bottom: 0; | |
| 47 | + height: 100%; | |
| 48 | + | |
| 49 | + text-align: center; | |
| 50 | + | |
| 51 | + & > * { | |
| 52 | + display: inline-block; | |
| 53 | + vertical-align: middle; | |
| 54 | + } | |
| 55 | + | |
| 56 | + .placeholder{ | |
| 57 | + overflow: hidden; | |
| 58 | + width: 0; | |
| 59 | + min-height: inherit; | |
| 60 | + height: inherit; | |
| 61 | + } | |
| 62 | + | |
| 63 | + z-index: 3; | |
| 64 | + | |
| 65 | + &.left { | |
| 66 | + left: 0; | |
| 67 | + } | |
| 68 | + &.right { | |
| 69 | + right: 0; | |
| 70 | + } | |
| 71 | + | |
| 72 | + width: 10%; | |
| 73 | + | |
| 74 | + cursor: pointer; | |
| 75 | + | |
| 76 | + &:hover { | |
| 77 | + background: fade(#000, 30%); | |
| 78 | + } | |
| 79 | + } | |
| 40 | 80 | } | ... | ... |
test/routers/carousel.vue
| ... | ... | @@ -12,10 +12,11 @@ |
| 12 | 12 | Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider> |
| 13 | 13 | </i-col> |
| 14 | 14 | </Row> |
| 15 | - <Carousel style="width: 400px" | |
| 15 | + <Carousel style="width: 50%; border: solid 1px #000" | |
| 16 | 16 | :current-index.sync="currentIndex" |
| 17 | 17 | :autoplay="autoplay" |
| 18 | - :autoplay-speed="autoplaySpeed"> | |
| 18 | + :autoplay-speed="autoplaySpeed" | |
| 19 | + easing="linear"> | |
| 19 | 20 | <Carousel-item> |
| 20 | 21 | <Alert type="warning" show-icon> |
| 21 | 22 | 警告提示文案 |
| ... | ... | @@ -24,7 +25,9 @@ |
| 24 | 25 | </template> |
| 25 | 26 | </Alert> |
| 26 | 27 | </Carousel-item> |
| 27 | - <Carousel-item>test2</Carousel-item> | |
| 28 | + <Carousel-item style="text-align: center"> | |
| 29 | + <Icon type="checkmark" style="font-size: 5em"></Icon> | |
| 30 | + </Carousel-item> | |
| 28 | 31 | <Carousel-item>test3</Carousel-item> |
| 29 | 32 | </Carousel> |
| 30 | 33 | </template> | ... | ... |