docs(dialog): fix translation Error and keep the sample code the same (#12465)

This commit is contained in:
阿菜 Cai 2023-11-22 20:14:26 +08:00 committed by GitHub
parent 941f92dbf2
commit 3410b1c74f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 16 deletions

View File

@ -25,7 +25,7 @@ For example, calling the `showDialog` function will render a Dialog directly in
```js ```js
import { showDialog } from 'vant'; import { showDialog } from 'vant';
showDialog({ message: 'Content' }); showDialog({ message: 'Alert' });
``` ```
## Usage ## Usage
@ -35,15 +35,18 @@ showDialog({ message: 'Content' });
Used to prompt for some messages, only including one confirm button by default. Used to prompt for some messages, only including one confirm button by default.
```js ```js
import { showDialog } from 'vant';
showDialog({ showDialog({
title: 'Title', title: 'Title',
message: 'Content', message: 'The code is written for people to see and can be run on a machine.',
}).then(() => { }).then(() => {
// on close // on close
}); });
showDialog({ showDialog({
message: 'Content', message:
'Life is far more than just spinning and being busy to the limit, and human experiences are much broader and richer than this.',
}).then(() => { }).then(() => {
// on close // on close
}); });
@ -54,9 +57,12 @@ showDialog({
Used to confirm some messages, including a confirm button and a cancel button by default. Used to confirm some messages, including a confirm button and a cancel button by default.
```js ```js
import { showConfirmDialog } from 'vant';
showConfirmDialog({ showConfirmDialog({
title: 'Title', title: 'Title',
message: 'Content', message:
'If the solution is ugly, then there must be a better solution, but it has not been discovered yet.',
}) })
.then(() => { .then(() => {
// on confirm // on confirm
@ -71,16 +77,19 @@ showConfirmDialog({
Setting the `theme` option to `round-button` will display the Dialog with a rounded button style. Setting the `theme` option to `round-button` will display the Dialog with a rounded button style.
```js ```js
import { showDialog } from 'vant';
showDialog({ showDialog({
title: 'Title', title: 'Title',
message: 'Content', message: 'The code is written for people to see and can be run on a machine.',
theme: 'round-button', theme: 'round-button',
}).then(() => { }).then(() => {
// on close // on close
}); });
showDialog({ showDialog({
message: 'Content', message:
'Life is far more than just spinning and being busy to the limit, and human experiences are much broader and richer than this.',
theme: 'round-button', theme: 'round-button',
}).then(() => { }).then(() => {
// on close // on close
@ -92,16 +101,20 @@ showDialog({
You can pass a callback function through the `beforeClose` option to perform specific operations before closing the Dialog. You can pass a callback function through the `beforeClose` option to perform specific operations before closing the Dialog.
```js ```js
import { showConfirmDialog } from 'vant';
const beforeClose = (action) => const beforeClose = (action) =>
new Promise((resolve) => { new Promise((resolve) => {
setTimeout(() => { setTimeout(() => {
// action !== 'confirm' Interception cancellation operation
resolve(action === 'confirm'); resolve(action === 'confirm');
}, 1000); }, 1000);
}); });
showConfirmDialog({ showConfirmDialog({
title: 'Title', title: 'Title',
message: 'Content', message:
'If the solution is ugly, then there must be a better solution, but it has not been discovered yet.',
beforeClose, beforeClose,
}); });
``` ```

View File

@ -104,12 +104,8 @@ import { showConfirmDialog } from 'vant';
const beforeClose = (action) => const beforeClose = (action) =>
new Promise((resolve) => { new Promise((resolve) => {
setTimeout(() => { setTimeout(() => {
if (action === 'confirm') { // action !== 'confirm' 拦截取消操作
resolve(true); resolve(action === 'confirm');
} else {
// 拦截取消操作
resolve(false);
}
}, 1000); }, 1000);
}); });

View File

@ -24,9 +24,12 @@ const t = useTranslate({
alert1: 'Alert', alert1: 'Alert',
alert2: 'Alert without title', alert2: 'Alert without title',
confirm: 'Confirm dialog', confirm: 'Confirm dialog',
content1: 'Content', content1:
content2: 'Content', 'The frequency of people swearing during code reading is the only measure of code quality.',
content3: 'Content', content2:
'Life is far more than just spinning and busy to the limit, and human experiences are much broader and richer than this.',
content3:
'If the solution is ugly, then there must be a better solution, but it has not been discovered yet.',
beforeClose: 'Before Close', beforeClose: 'Before Close',
roundButton: 'Round Button Style', roundButton: 'Round Button Style',
useComponent: 'Use Dialog Component', useComponent: 'Use Dialog Component',