diff --git a/packages/swipe-item/index.vue b/packages/swipe-item/index.vue
index 764e559ce..8c4202551 100644
--- a/packages/swipe-item/index.vue
+++ b/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',
- height: vertical ? height + 'px' : '100%',
+ width: computedWidth + 'px',
+ height: vertical ? computedHeight + 'px' : '100%',
transform: `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`
};
}
diff --git a/packages/swipe/demo/index.vue b/packages/swipe/demo/index.vue
index 37d0218ee..a11e23670 100644
--- a/packages/swipe/demo/index.vue
+++ b/packages/swipe/demo/index.vue
@@ -34,6 +34,15 @@
4
+
+
+
+ 1
+ 2
+ 3
+ 4
+
+
@@ -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:'
}
},
diff --git a/packages/swipe/en-US.md b/packages/swipe/en-US.md
index 9d31625d3..7afa67fc7 100644
--- a/packages/swipe/en-US.md
+++ b/packages/swipe/en-US.md
@@ -77,6 +77,17 @@ export default {
```
+#### Set Swiper Item Size
+
+```html
+
+ 1
+ 2
+ 3
+ 4
+
+```
+
### 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
diff --git a/packages/swipe/index.vue b/packages/swipe/index.vue
index f798a3a7a..885311289 100644
--- a/packages/swipe/index.vue
+++ b/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,
- height: 0,
+ computedWidth: 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.height = rect.height;
+ this.computedWidth = this.width || rect.width;
+ this.computedHeight = this.height || rect.height;
}
this.swiping = true;
this.active = active;
diff --git a/packages/swipe/test/__snapshots__/demo.spec.js.snap b/packages/swipe/test/__snapshots__/demo.spec.js.snap
index 24d205cc4..527eead47 100644
--- a/packages/swipe/test/__snapshots__/demo.spec.js.snap
+++ b/packages/swipe/test/__snapshots__/demo.spec.js.snap
@@ -54,5 +54,16 @@ exports[`renders demo correctly 1`] = `
+
`;
diff --git a/packages/swipe/zh-CN.md b/packages/swipe/zh-CN.md
index dd15e7089..041c3cd91 100644
--- a/packages/swipe/zh-CN.md
+++ b/packages/swipe/zh-CN.md
@@ -77,6 +77,17 @@ export default {
```
+#### 控制滑块大小
+
+```html
+
+ 1
+ 2
+ 3
+ 4
+
+```
+
### 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` |
### 事件