mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Swipe): add resize method (#5070)
This commit is contained in:
parent
f6650aa1cd
commit
659eb3eefc
@ -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
|
||||||
|
|
||||||
|
@ -166,7 +166,8 @@ export default {
|
|||||||
|
|
||||||
| 方法名 | 说明 | 参数 | 返回值 |
|
| 方法名 | 说明 | 参数 | 返回值 |
|
||||||
|------|------|------|------|
|
|------|------|------|------|
|
||||||
| swipeTo | 滚动到目标位置 | index: 目标位置的索引, options: 选项 | void |
|
| swipeTo | 滚动到目标位置 | index: number, options: Options | void |
|
||||||
|
| resize | 外层元素大小变化后,可以调用此方法来触发重绘 | - | void |
|
||||||
|
|
||||||
### swipeTo Options 格式
|
### swipeTo Options 格式
|
||||||
|
|
||||||
|
@ -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();
|
||||||
|
@ -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: {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user