feat(Swipe): add resize method (#5070)

This commit is contained in:
neverland 2019-11-21 17:11:56 +08:00 committed by GitHub
parent f6650aa1cd
commit 659eb3eefc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 12 deletions

View File

@ -161,6 +161,7 @@ Use ref to get swipe instance and call instance methods
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
|------|------|------|------| |------|------|------|------|
| swipeTo | Swipe to target index | index: target index, options: Options | void | | swipeTo | Swipe to target index | index: target index, options: Options | void |
| resize | Resize swipe when container element resized | - | void |
### swipeTo Options ### swipeTo Options

View File

@ -166,7 +166,8 @@ export default {
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------| |------|------|------|------|
| swipeTo | 滚动到目标位置 | index: 目标位置的索引, options: 选项 | void | | swipeTo | 滚动到目标位置 | index: number, options: Options | void |
| resize | 外层元素大小变化后,可以调用此方法来触发重绘 | - | void |
### swipeTo Options 格式 ### swipeTo Options 格式

View File

@ -11,7 +11,7 @@ export default createComponent({
mixins: [ mixins: [
TouchMixin, TouchMixin,
BindEventMixin(function(bind, isBind) { BindEventMixin(function(bind, isBind) {
bind(window, 'resize', this.onResize, true); bind(window, 'resize', this.resize, true);
if (isBind) { if (isBind) {
this.initialize(); this.initialize();
@ -154,7 +154,8 @@ export default createComponent({
this.autoPlay(); this.autoPlay();
}, },
onResize() { // @exposed-api
resize() {
this.initialize(this.activeIndicator); this.initialize(this.activeIndicator);
}, },
@ -252,6 +253,7 @@ export default createComponent({
} }
}, },
// @exposed-api
swipeTo(index, options = {}) { swipeTo(index, options = {}) {
this.swiping = true; this.swiping = true;
this.resetTouchStatus(); this.resetTouchStatus();

View File

@ -1,19 +1,19 @@
import Vue from 'vue';
import Swipe from '..'; import Swipe from '..';
import SwipeItem from '../../swipe-item'; import SwipeItem from '../../swipe-item';
import { mount, triggerDrag, later } from '../../../test'; import { mount, triggerDrag, later } from '../../../test';
Vue.use(Swipe);
Vue.use(SwipeItem);
const Component = { const Component = {
template: ` template: `
<swipe ref="swipe" v-bind="$props"> <van-swipe ref="swipe" v-bind="$props">
<swipe-item :style="style">1</swipe-item> <van-swipe-item :style="style">1</van-swipe-item>
<swipe-item :style="style">2</swipe-item> <van-swipe-item :style="style">2</van-swipe-item>
<swipe-item :style="style">3</swipe-item> <van-swipe-item :style="style">3</van-swipe-item>
</swipe> </van-swipe>
`, `,
components: {
Swipe,
SwipeItem
},
props: { props: {
vertical: Boolean, vertical: Boolean,
loop: { loop: {