[new feature] Swipe: support custom item width & height (#1664)

packages/swipe-item/index.vue

@@ -18,10 +18,11 @@ export default create({
 
   computed: {
     style() {
-      const { vertical, width, height } = this.$parent;
+      const { vertical, computedWidth, computedHeight } = this.$parent;
+
       return {
-        width: width + 'px',
+        width: computedWidth + 'px',
-        height: vertical ? height + 'px' : '100%',
+        height: vertical ? computedHeight + 'px' : '100%',
         transform: `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`
       };
     }

packages/swipe/demo/index.vue

@@ -34,6 +34,15 @@
         <van-swipe-item>4</van-swipe-item>
       </van-swipe>
     </demo-block>
+
+    <demo-block :title="$t('title5')">
+      <van-swipe :autoplay="3000" :width="300" :loop="false">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -44,12 +53,14 @@ export default {
       title2: '图片懒加载',
       title3: '监听 change 事件',
       title4: '纵向滚动',
+      title5: '设置滑块大小',
       message: '当前 Swipe 索引：'
     },
     'en-US': {
       title2: 'Image Lazyload',
       title3: 'Change Event',
       title4: 'Vertical Scrolling',
+      title5: 'Set Swiper Item Size',
       message: 'Current Swipe index:'
     }
   },

packages/swipe/en-US.md

@@ -77,6 +77,17 @@ export default {
 </van-swipe>
 ```
 
+#### Set Swiper Item Size
+
+```html
+<van-swipe :autoplay="3000" :width="300">
+  <van-swipe-item>1</van-swipe-item>
+  <van-swipe-item>2</van-swipe-item>
+  <van-swipe-item>3</van-swipe-item>
+  <van-swipe-item>4</van-swipe-item>
+</van-swipe>
+```
+
 ### API
 
 | Attribute | Description | Type | Default |
@@ -88,6 +99,8 @@ export default {
 | touchable | Whether touchable | `Boolean` | `true` |
 | show-indicators | Whether to show indocators | `Boolean` | `true` |
 | initial-swipe | Index of initial swipe, start from 0 | `Number` | `0` |
+| width | Set Swiper Item Width | `Number` | `0` |
+| height | Set Swiper Item Height | `Number` | `0` |
 
 ### Event
 

packages/swipe/index.vue

@@ -36,6 +36,14 @@ export default create({
   props: {
     autoplay: Number,
     vertical: Boolean,
+    width: {
+      type: Number,
+      default: 0
+    },
+    height: {
+      type: Number,
+      default: 0
+    },
     loop: {
       type: Boolean,
       default: true
@@ -60,8 +68,8 @@ export default create({
 
   data() {
     return {
-      width: 0,
+      computedWidth: 0,
-      height: 0,
+      computedHeight: 0,
       offset: 0,
       active: 0,
       deltaX: 0,
@@ -115,7 +123,7 @@ export default create({
     },
 
     size() {
-      return this[this.vertical ? 'height' : 'width'];
+      return this[this.vertical ? 'computedHeight' : 'computedWidth'];
     },
 
     trackSize() {
@@ -141,8 +149,8 @@ export default create({
       clearTimeout(this.timer);
       if (this.$el) {
         const rect = this.$el.getBoundingClientRect();
-        this.width = rect.width;
+        this.computedWidth = this.width || rect.width;
-        this.height = rect.height;
+        this.computedHeight = this.height || rect.height;
       }
       this.swiping = true;
       this.active = active;

packages/swipe/test/__snapshots__/demo.spec.js.snap

@@ -54,5 +54,16 @@ exports[`renders demo correctly 1`] = `
       <!---->
     </div>
   </div>
+  <div>
+    <div class="van-swipe">
+      <div class="van-swipe__track" style="width:0px;transition-duration:500ms;transform:translateX(0px);">
+        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">1</div>
+        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">2</div>
+        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">3</div>
+        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">4</div>
+      </div>
+      <!---->
+    </div>
+  </div>
 </div>
 `;

packages/swipe/zh-CN.md

@@ -77,6 +77,17 @@ export default {
 </van-swipe>
 ```
 
+#### 控制滑块大小
+
+```html
+<van-swipe :autoplay="3000" :width="300">
+  <van-swipe-item>1</van-swipe-item>
+  <van-swipe-item>2</van-swipe-item>
+  <van-swipe-item>3</van-swipe-item>
+  <van-swipe-item>4</van-swipe-item>
+</van-swipe>
+```
+
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 |
@@ -88,6 +99,8 @@ export default {
 | touchable | 是否可以通过手势滑动 | `Boolean` | `true` |
 | show-indicators | 是否显示指示器 | `Boolean` | `true` |
 | initial-swipe | 初始位置，从 0 开始算 | `Number` | `0` |
+| width | 设置滑块宽度 | `Number` | `0` |
+| height | 设置滑块高度 | `Number` | `0` |
 
 ### 事件