docs(SwipeCell): use composition api

This commit is contained in:
chenjiahan 2020-12-13 13:05:52 +08:00
parent d1f637afc7
commit 75f8e36923
3 changed files with 60 additions and 54 deletions

View File

@ -71,9 +71,11 @@ app.use(SwipeCell);
```
```js
import { Dialog } from 'vant';
export default {
methods: {
beforeClose({ position, instance }) {
setup() {
const beforeClose = ({ position }) => {
switch (position) {
case 'left':
case 'cell':
@ -81,14 +83,14 @@ export default {
return true;
case 'right':
return new Promise((resolve) => {
this.$dialog
.confirm({
message: 'Are you sure to delete?',
})
.then(resolve);
Dialog.confirm({
title: 'Are you sure to delete?',
}).then(resolve);
});
}
},
};
return { beforeClose };
},
};
```

View File

@ -81,10 +81,12 @@ app.use(SwipeCell);
```
```js
import { Dialog } from 'vant';
export default {
methods: {
setup() {
// position 为关闭时点击的位置
beforeClose({ position }) {
const beforeClose = ({ position }) => {
switch (position) {
case 'left':
case 'cell':
@ -92,14 +94,14 @@ export default {
return true;
case 'right':
return new Promise((resolve) => {
this.$dialog
.confirm({
message: '确定删除吗?',
})
.then(resolve);
Dialog.confirm({
title: '确定删除吗?',
}).then(resolve);
});
}
},
};
return { beforeClose };
},
};
```

View File

@ -45,39 +45,37 @@
</demo-block>
</template>
<script>
<script lang="ts">
import { useTranslate } from '@demo/use-translate';
import Dialog from '../../dialog';
const i18n = {
'zh-CN': {
select: '选择',
delete: '删除',
collect: '收藏',
title: '单元格',
confirm: '确定删除吗?',
cardTitle: '商品标题',
beforeClose: '异步关闭',
customContent: '自定义内容',
},
'en-US': {
select: 'Select',
delete: 'Delete',
collect: 'Collect',
title: 'Cell',
confirm: 'Are you sure to delete?',
cardTitle: 'Title',
beforeClose: 'Before Close',
customContent: 'Custom Content',
},
};
export default {
i18n: {
'zh-CN': {
select: '选择',
delete: '删除',
collect: '收藏',
title: '单元格',
confirm: '确定删除吗?',
cardTitle: '商品标题',
beforeClose: '异步关闭',
customContent: '自定义内容',
},
'en-US': {
select: 'Select',
delete: 'Delete',
collect: 'Collect',
title: 'Cell',
confirm: 'Are you sure to delete?',
cardTitle: 'Title',
beforeClose: 'Before Close',
customContent: 'Custom Content',
},
},
data() {
return {
imageURL: 'https://img.yzcdn.cn/vant/ipad.jpeg',
};
},
methods: {
beforeClose({ position }) {
setup() {
const t = useTranslate(i18n);
const beforeClose = ({ position }: { position: string }) => {
switch (position) {
case 'left':
case 'cell':
@ -85,14 +83,18 @@ export default {
return true;
case 'right':
return new Promise((resolve) => {
this.$dialog
.confirm({
message: this.t('confirm'),
})
.then(resolve);
Dialog.confirm({
title: t('confirm'),
}).then(resolve);
});
}
},
};
return {
t,
imageURL: 'https://img.yzcdn.cn/vant/ipad.jpeg',
beforeClose,
};
},
};
</script>