forked from jd-opensource/nutui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(dialog): add international desc
- Loading branch information
1 parent
ca10678
commit 7e385c3
Showing
7 changed files
with
287 additions
and
60 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,226 @@ | ||
| # Dialog | ||
|
|
||
|
|
||
| ### Intro | ||
|
|
||
| Modal dialog box is displayed in the floating layer to guide users to carry out relevant operations. It is often used for message prompt, message confirmation, or completing specific interactive operations in the current page. | ||
|
|
||
| The popup box component supports function call and component call. | ||
|
|
||
| ### Install | ||
|
|
||
| ```javascript | ||
| import { createApp } from 'vue'; | ||
| import { Dialog,Popup,OverLay } from '@nutui/nutui'; | ||
|
|
||
| const app = createApp(); | ||
| app.use(Dialog).use(Popup).use(OverLay) | ||
| ``` | ||
|
|
||
|
|
||
| ## Function use | ||
|
|
||
| :::demo | ||
| ```html | ||
| <template> | ||
| <nut-cell-group title="Function Use"> | ||
| <nut-cell title="Title" @click="baseClick"></nut-cell> | ||
| <nut-cell title="Title" @click="noTitleClick"></nut-cell> | ||
| <nut-cell title="Title" @click="tipsClick"></nut-cell> | ||
| <nut-cell title="Title" @click="verticalClick"></nut-cell> | ||
| </nut-cell-group> | ||
| </template> | ||
| <script lang="ts"> | ||
| import { ref } from 'vue'; | ||
| import { Dialog } from '@nutui/nutui'; | ||
| export default { | ||
| setup() { | ||
| const onCancel = () => { | ||
| console.log('event cancel'); | ||
| }; | ||
| const onOk = () => { | ||
| console.log('event ok'); | ||
| }; | ||
| const baseClick = (): void => { | ||
| Dialog({ | ||
| title: 'Basic spring frame', | ||
| content: 'Function call and component call are supported.', | ||
| onCancel, | ||
| onOk | ||
| }); | ||
| }; | ||
| const noTitleClick = () => { | ||
| Dialog({ | ||
| content: 'Content', | ||
| onCancel, | ||
| onOk | ||
| }); | ||
| }; | ||
| const tipsClick = () => { | ||
| Dialog({ | ||
| title: 'Title', | ||
| content: 'Function call and component call are supported.', | ||
| noCancelBtn: true, | ||
| onCancel, | ||
| onOk | ||
| }); | ||
| }; | ||
| const verticalClick = () => { | ||
| Dialog({ | ||
| title: 'Title', | ||
| content: 'Support vertical arrangement of bottom buttons.', | ||
| footerDirection: 'vertical', | ||
| onCancel, | ||
| onOk | ||
| }); | ||
| }; | ||
| return { | ||
| baseClick, | ||
| noTitleClick, | ||
| tipsClick, | ||
| verticalClick | ||
| }; | ||
| } | ||
| } | ||
| </script> | ||
| ``` | ||
| ::: | ||
|
|
||
| ## Teleport use, mount to the specified element node | ||
|
|
||
| ``` html | ||
| <nut-dialog teleport="#app" ... /> | ||
| ``` | ||
|
|
||
| ``` javascript | ||
| Dialog({ | ||
| teleport: '#app', | ||
| ... | ||
| }); | ||
| Dialog({ | ||
| teleport: '.demo', | ||
| ... | ||
| }); | ||
| ``` | ||
|
|
||
| ## Function use proxy.&dialog(...) | ||
|
|
||
| ```javascript | ||
| import { ref } from 'vue'; | ||
| import { Dialog } from '@nutui/nutui'; | ||
| import { getCurrentInstance } from 'vue'; | ||
|
|
||
| export default { | ||
| setup() { | ||
| const { proxy } = getCurrentInstance(); | ||
| proxy.$dialog({ | ||
| title: 'Basic spring frame', | ||
| content: 'Function call and component call are supported.' | ||
| }); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
|
|
||
| ## Template use | ||
|
|
||
|
|
||
| :::demo | ||
| ```html | ||
| <template> | ||
| <nut-cell-group title="Template use"> | ||
| <nut-cell title="Template use" @click="componentClick"></nut-cell> | ||
| <nut-dialog | ||
| teleport="#app" | ||
| title="Template use" | ||
| content="Function call and template call are supported." | ||
| v-model:visible="visible" | ||
| > | ||
| </nut-dialog> | ||
| <nut-cell title="Bottom button vertical use" @click="componentvVrticalClick"></nut-cell> | ||
| <nut-dialog | ||
| footer-direction="vertical" | ||
| teleport="#app" | ||
| title="Template use" | ||
| content="Function call and template call are supported." | ||
| v-model:visible="visible1" | ||
| > | ||
| </nut-dialog> | ||
| </nut-cell-group> | ||
| </template> | ||
| <script lang="ts"> | ||
| import { ref } from 'vue'; | ||
| export default { | ||
| setup() { | ||
| const visible = ref(false); | ||
| const visible1 = ref(false); | ||
| const componentClick = () => { | ||
| visible.value = true; | ||
| }; | ||
| const componentvVrticalClick = () => { | ||
| visible1.value = true; | ||
| }; | ||
| return { visible,visible1,componentClick,componentvVrticalClick }; | ||
| } | ||
| } | ||
| </script> | ||
| ``` | ||
| ::: | ||
|
|
||
| ## API | ||
| | Attribute | Description | Type | Default | | ||
| |---------------------|--------------------------------------------------------------------------------|------------------|----------------------| | ||
| | title | Title | String | - | | ||
| | id | Identifier, share one instance at the same time, default to multiple instances | String or Number | new Date().getTime() | | ||
| | content | Content, support HTML | String | - | | ||
| | teleport | Specifies a target element where Dialog will be mounted | String | "body" | | ||
| | closeOnClickOverlay | Whether to close when overlay is clicked | Boolean | false | | ||
| | noFooter | Hide bottom button bar | Boolean | false | | ||
| | noOkBtn | Hide OK button | Boolean | false | | ||
| | noCancelBtn | Hide cancel button | Boolean | false | | ||
| | cancelText | Cancel button text | String | "Cancel" | | ||
| | okText | OK button text | String | "Confirm" | | ||
| | cancelAutoClose | Click Cancel to close the popup | Boolean | true | | ||
| | textAlign | Text alignment direction, the optional value is the same as css text-align | String | "center" | | ||
| | closeOnPopstate | Whether to close when popstate | Boolean | false | | ||
| | onUpdate | Update | Boolean | false | | ||
| | onOk | Emitted when the confirm button is clicked | Function | - | | ||
| | onCancel | Emitted when the cancel button is clicked | Function | - | | ||
| | onClosed | Emitted when Dialog is closed | Function | - | | ||
|
|
||
|
|
||
| ## Props | ||
|
|
||
| | Attribute | Description | Type | Default | | ||
| |------------------------|-----------------------------------------------------------------------------------------------------------|---------|------------| | ||
| | title | Title | String | - | | ||
| | content | Content, support HTML | String | - | | ||
| | teleport | Specifies a target element where Dialog will be mounted | String | "body" | | ||
| | close-on-click-overlay | Whether to close when overlay is clicked | Boolean | false | | ||
| | no-footer | Hide bottom button bar | Boolean | false | | ||
| | no-ok-btn | Hide OK button | Boolean | false | | ||
| | no-cancel-btn | Hide cancel button | Boolean | false | | ||
| | cancel-text | Cancel button text | String | "Cancel" | | ||
| | ok-text | OK button text | String | "Confirm" | | ||
| | cancel-auto-close | Click Cancel to close the popup | Boolean | true | | ||
| | text-align | Text alignment direction, the optional value is the same as css text-align | String | "center" | | ||
| | close-on-popstate | Whether to close when popstate | Boolean | false | | ||
| | lock-scroll | Whether to lock background scroll | Boolean | false | | ||
| | footer-direction | The bottom button uses the horizontal and vertical directions. Optional values are horizontal and vertical. | string | horizontal | | ||
|
|
||
| ## Events | ||
|
|
||
| | Event | Description | Type | Default | | ||
| |--------|--------------------------------------------|----------|---------| | ||
| | ok | Emitted when the confirm button is clicked | Function | - | | ||
| | cancel | Emitted when the cancel button is clicked | Function | - | | ||
| | closed | Emitted when Dialog is closed | Function | - | | ||
|
|
||
|
|
||
| ## Slots | ||
|
|
||
| | Name | Description | | ||
| |---------|----------------| | ||
| | header | Custom title | | ||
| | default | Custom default | | ||
| | footer | Custom footer | |
Oops, something went wrong.