feat(Swipe): some props can be string

This commit is contained in:
陈嘉涵 2020-01-31 10:04:41 +08:00
parent 21a0d4e877
commit e9f96393f9
3 changed files with 24 additions and 24 deletions

View File

@ -148,17 +148,17 @@ export default {
| Attribute | Description | Type | Default |
|------|------|------|------|
| autoplay | Autoplay interval (ms) | *number* | - |
| duration | Animation duration (ms) | *number* | `500` |
| 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` |
| autoplay | Autoplay interval (ms) | *number \| string* | - |
| duration | Animation duration (ms) | *number \| string* | `500` |
| initial-swipe | Index of initial swipe, start from 0 | *number \| string* | `0` |
| width | Set Swiper Item Width | *number \| string* | `0` |
| height | Set Swiper Item Height | *number \| string* | `0` |
| loop | Whether to enable loop | *boolean* | `true` |
| show-indicators | Whether to show indicators | *boolean* | `true` |
| indicator-color | Indicator color | *string* | `#1989fa` |
| vertical | Whether to be vertical Scrolling | *boolean* | `false` |
| touchable | Whether to allow swipe by touch gesture | *boolean* | `true` |
| stop-propagation `v2.1.0` | Whether to stop touchmove event propagation | *boolean* | `false` |
| indicator-color | Indicator color | *string* | `#1989fa` |
### Swipe Events

View File

@ -154,17 +154,17 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| autoplay | 自动轮播间隔,单位为 ms | *number* | - |
| duration | 动画时长,单位为 ms | *number* | `500` |
| initial-swipe | 初始位置索引值 | *number* | `0` |
| width | 滑块宽度 | *number* | `auto` |
| height | 滑块高度 | *number* | `auto` |
| autoplay | 自动轮播间隔,单位为 ms | *number \| string* | - |
| duration | 动画时长,单位为 ms | *number \| string* | `500` |
| initial-swipe | 初始位置索引值 | *number \| string* | `0` |
| width | 滑块宽度,单位为`px` | *number \| string* | `auto` |
| height | 滑块高度,单位为`px` | *number \| string* | `auto` |
| loop | 是否开启循环播放 | *boolean* | `true` |
| show-indicators | 是否显示指示器 | *boolean* | `true` |
| indicator-color | 指示器颜色 | *string* | `#1989fa` |
| vertical | 是否为纵向滚动 | *boolean* | `false` |
| touchable | 是否可以通过手势滑动 | *boolean* | `true` |
| stop-propagation `v2.2.13` | 是否阻止滑动事件冒泡 | *boolean* | `true` |
| indicator-color | 指示器颜色 | *string* | `#1989fa` |
### Swipe Events

View File

@ -26,9 +26,9 @@ export default createComponent({
],
props: {
width: Number,
height: Number,
autoplay: Number,
width: [Number, String],
height: [Number, String],
autoplay: [Number, String],
vertical: Boolean,
indicatorColor: String,
loop: {
@ -36,7 +36,7 @@ export default createComponent({
default: true,
},
duration: {
type: Number,
type: [Number, String],
default: 500,
},
touchable: {
@ -44,7 +44,7 @@ export default createComponent({
default: true,
},
initialSwipe: {
type: Number,
type: [Number, String],
default: 0,
},
showIndicators: {
@ -80,10 +80,10 @@ export default createComponent({
},
autoplay(autoplay) {
if (!autoplay) {
this.clear();
} else {
if (autoplay > 0) {
this.autoPlay();
} else {
this.clear();
}
},
},
@ -146,13 +146,13 @@ export default createComponent({
methods: {
// initialize swipe position
initialize(active = this.initialSwipe) {
initialize(active = +this.initialSwipe) {
clearTimeout(this.timer);
if (this.$el) {
const rect = this.$el.getBoundingClientRect();
this.computedWidth = this.width || rect.width;
this.computedHeight = this.height || rect.height;
this.computedWidth = +this.width || rect.width;
this.computedHeight = +this.height || rect.height;
}
this.swiping = true;
@ -345,7 +345,7 @@ export default createComponent({
autoPlay() {
const { autoplay } = this;
if (autoplay && this.count > 1) {
if (autoplay > 0 && this.count > 1) {
this.clear();
this.timer = setTimeout(() => {
this.next();