mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
breaking change(SwipeCell): adjust before-close usage
This commit is contained in:
chenjiahan
parent
89a39f05bc
commit
d61df0649f
@ -189,6 +189,7 @@ Vue 3.0 中增加了 `Teleport` 组件，提供将组件渲染到任意 DOM 位
|
||||
|
||||
- `open` 事件的 `detail` 参数重命名为 `name`
|
||||
- `on-close` 属性重命名为 `before-close`，并调整参数结构
|
||||
- `before-close` 属性不再传入组件实例
|
||||
|
||||
#### Toast
|
||||
|
||||
|
||||
@ -156,7 +156,7 @@ export default {
|
||||
| closeOnClickOverlay | Whether to close when click overlay | _boolean_ | `false` |
|
||||
| lockScroll | Whether to lock body scroll | _boolean_ | `true` |
|
||||
| allowHtml `v2.8.7` | Whether to allow HTML rendering in message | _boolean_ | `true` |
|
||||
| beforeClose | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - |
|
||||
| beforeClose | Callback function before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - |
|
||||
| transition | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - |
|
||||
| teleport | Return the mount node for Dialog | _string \| Element_ | `body` |
|
||||
|
||||
@ -184,7 +184,7 @@ export default {
|
||||
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
|
||||
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
|
||||
| allow-html `v2.8.7` | Whether to allow HTML rendering in message | _boolean_ | `true` |
|
||||
| before-close | Callback before close | _(action) => boolean \| Promise_ | - |
|
||||
| before-close | Callback function before close | _(action) => boolean \| Promise_ | - |
|
||||
| transition | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - |
|
||||
| teleport | Return the mount node for Dialog | _string \| Element_ | - |
|
||||
|
||||
|
||||
@ -123,7 +123,7 @@ export default {
|
||||
| onChange | Triggered when current image change | _Function_ | - |
|
||||
| onScale | Triggered when current image scale | _Function_ | - |
|
||||
| closeOnPopstate | Whether to close when popstate | _boolean_ | `true` |
|
||||
| beforeClose | Callback before close | _(action) => boolean \| Promise_ | - |
|
||||
| beforeClose | Callback function before close | _(action) => boolean \| Promise_ | - |
|
||||
| className | Custom className | _any_ | - |
|
||||
| maxZoom | Max zoom | _number \| string_ | `3` |
|
||||
| minZoom | Min zoom | _number \| string_ | `1/3` |
|
||||
@ -142,7 +142,7 @@ export default {
|
||||
| show-index | Whether to show index | _boolean_ | `true` |
|
||||
| show-indicators | Whether to show indicators | _boolean_ | `false` |
|
||||
| loop | Whether to enable loop | _boolean_ | `true` |
|
||||
| before-close | Callback before close | _(action) => boolean \| Promise_ | - |
|
||||
| before-close | Callback function before close | _(action) => boolean \| Promise_ | - |
|
||||
| close-on-popstate | Whether to close when popstate | _boolean_ | `true` |
|
||||
| class-name | Custom className | _any_ | - |
|
||||
| max-zoom | Max zoom | _number \| string_ | `3` |
|
||||
|
||||
@ -78,15 +78,15 @@ export default {
|
||||
case 'left':
|
||||
case 'cell':
|
||||
case 'outside':
|
||||
instance.close();
|
||||
break;
|
||||
return true;
|
||||
case 'right':
|
||||
Dialog.confirm({
|
||||
message: 'Are you sure to delete?',
|
||||
}).then(() => {
|
||||
instance.close();
|
||||
return new Promise((resolve) => {
|
||||
this.$dialog
|
||||
.confirm({
|
||||
message: 'Are you sure to delete?',
|
||||
})
|
||||
.then(resolve);
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -102,7 +102,7 @@ export default {
|
||||
| name | Identifier of SwipeCell | _number \| string_ | - |
|
||||
| left-width | Width of the left swipe area | _number \| string_ | `auto` |
|
||||
| right-width | Width of the right swipe area | _number \| string_ | `auto` |
|
||||
| before-close `v2.3.0` | Callback function before close | _Function_ | - |
|
||||
| before-close `v2.3.0` | Callback function before close | _(args) => boolean \| Promise_ | - |
|
||||
| disabled | Whether to disabled swipe | _boolean_ | `false` |
|
||||
| stop-propagation | Whether to stop touchmove event propagation | _boolean_ | `false` |
|
||||
|
||||
|
||||
@ -80,21 +80,20 @@ app.use(SwipeCell);
|
||||
export default {
|
||||
methods: {
|
||||
// position 为关闭时点击的位置
|
||||
// instance 为对应的 SwipeCell 实例
|
||||
beforeClose({ position, instance }) {
|
||||
beforeClose({ position }) {
|
||||
switch (position) {
|
||||
case 'left':
|
||||
case 'cell':
|
||||
case 'outside':
|
||||
instance.close();
|
||||
break;
|
||||
return true;
|
||||
case 'right':
|
||||
Dialog.confirm({
|
||||
message: '确定删除吗？',
|
||||
}).then(() => {
|
||||
instance.close();
|
||||
return new Promise((resolve) => {
|
||||
this.$dialog
|
||||
.confirm({
|
||||
message: '确定删除吗？',
|
||||
})
|
||||
.then(resolve);
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -110,7 +109,7 @@ export default {
|
||||
| name | 标识符，可以在事件参数中获取到 | _number \| string_ | - |
|
||||
| left-width | 指定左侧滑动区域宽度，单位为`px` | _number \| string_ | `auto` |
|
||||
| right-width | 指定右侧滑动区域宽度，单位为`px` | _number \| string_ | `auto` |
|
||||
| before-close `v2.3.0` | 关闭前的回调函数 | _Function_ | - |
|
||||
| before-close | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(args) => boolean \| Promise_ | - |
|
||||
| disabled | 是否禁用滑动 | _boolean_ | `false` |
|
||||
| stop-propagation | 是否阻止滑动事件冒泡 | _boolean_ | `false` |
|
||||
|
||||
@ -134,11 +133,10 @@ export default {
|
||||
|
||||
beforeClose 的第一个参数为对象，对象中包含以下属性：
|
||||
|
||||
| 参数名 | 说明 | 类型 |
|
||||
| -------- | -------------------------------------------------- | ----------- |
|
||||
| name | 标识符 | _string_ |
|
||||
| position | 关闭时的点击位置 (`left` `right` `cell` `outside`) | _string_ |
|
||||
| instance | SwipeCell 实例，用于调用实例方法 | _SwipeCell_ |
|
||||
| 参数名 | 说明 | 类型 |
|
||||
| -------- | -------------------------------------------------- | -------- |
|
||||
| name | 标识符 | _string_ |
|
||||
| position | 关闭时的点击位置 (`left` `right` `cell` `outside`) | _string_ |
|
||||
|
||||
### 方法
|
||||
|
||||
|
||||
@ -81,22 +81,20 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
beforeClose({ position, instance }) {
|
||||
beforeClose({ position }) {
|
||||
switch (position) {
|
||||
case 'left':
|
||||
case 'cell':
|
||||
case 'outside':
|
||||
instance.close();
|
||||
break;
|
||||
return true;
|
||||
case 'right':
|
||||
this.$dialog
|
||||
.confirm({
|
||||
message: this.t('confirm'),
|
||||
})
|
||||
.then(() => {
|
||||
instance.close();
|
||||
});
|
||||
break;
|
||||
return new Promise((resolve) => {
|
||||
this.$dialog
|
||||
.confirm({
|
||||
message: this.t('confirm'),
|
||||
})
|
||||
.then(resolve);
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { range } from '../utils/format/number';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import { callInterceptor } from '../utils/interceptor';
|
||||
|
||||
// Mixins
|
||||
import { TouchMixin } from '../mixins/touch';
|
||||
@ -167,15 +168,18 @@ export default createComponent({
|
||||
this.$emit('click', position);
|
||||
|
||||
if (this.opened && !this.lockClick) {
|
||||
if (this.beforeClose) {
|
||||
this.beforeClose({
|
||||
position,
|
||||
name: this.name,
|
||||
instance: this,
|
||||
});
|
||||
} else {
|
||||
this.close(position);
|
||||
}
|
||||
callInterceptor({
|
||||
interceptor: this.beforeClose,
|
||||
args: [
|
||||
{
|
||||
position,
|
||||
name: this.name,
|
||||
},
|
||||
],
|
||||
done: () => {
|
||||
this.close(position);
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user