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`] = ` +
+
+
+
1
+
2
+
3
+
4
+
+ +
+
`; 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` | ### 事件