mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
docs(modal): vue3
This commit is contained in:
07akioni
parent
a21453802f
commit
0a50059a63
@ -6,7 +6,7 @@ Basic usage of modal. You can put anything in modal, a card for example.
|
||||
>
|
||||
Start Me up
|
||||
</n-button>
|
||||
<n-modal v-model="modalActive">
|
||||
<n-modal v-model:show="modalActive">
|
||||
<n-card
|
||||
style="width: 600px;"
|
||||
title="Modal"
|
||||
|
||||
@ -10,20 +10,18 @@ preset-card
|
||||
preset-confirm
|
||||
preset-confirm-slot
|
||||
```
|
||||
## V-model
|
||||
|Prop|Event|
|
||||
|-|-|
|
||||
|show|hide|
|
||||
|
||||
## Props
|
||||
### Modal
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|
||||
|show|`boolean`|`false`||
|
||||
|display-directive|`'if' \| 'show'`|`'if'`|Use which directive to control the rendering of modal body.|
|
||||
|mask-closable|`boolean`|`true`|Whether to emit `hide` event when click mask.|
|
||||
|body-style|`Object`|`null`||
|
||||
|preset|`'card' \| 'confirm'`|`null`||
|
||||
|overlay-style|`Object`|`null`|The content style when use `preset`.|
|
||||
|show|`boolean`|`false`|Whether to show modal.|
|
||||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|
||||
|on-update:show|`(value: boolean) => any`||Callback when modal's display status is changed.|
|
||||
|
||||
### Modal with Preset Card
|
||||
See [Card props](n-card#Props)
|
||||
@ -40,14 +38,3 @@ See [Dialog props](n-dialog#Props)
|
||||
See [Card slots](n-card#Slots)
|
||||
### Modal with Preset Dialog
|
||||
See [Dialog slots](n-dialog#Slots)
|
||||
|
||||
## Events
|
||||
### Modal
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|hide|`(show: false)`||
|
||||
|
||||
### Modal with Preset Card
|
||||
See [Card events](n-card#Events)
|
||||
### Modal with Preset Dialog
|
||||
See [Dialog events](n-dialog#Events)
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# Mask Closable
|
||||
You can make mask click not to close modal when using v-model on modal.
|
||||
Use `mask-closable=false` to make modal not emit the event which may close the modal.
|
||||
```html
|
||||
<n-button
|
||||
@click="modalActive = true"
|
||||
@ -7,7 +7,7 @@ You can make mask click not to close modal when using v-model on modal.
|
||||
Start Me up
|
||||
</n-button>
|
||||
<n-modal
|
||||
v-model="modalActive"
|
||||
v-model:show="modalActive"
|
||||
:mask-closable="false"
|
||||
preset="confirm"
|
||||
title="Confirm"
|
||||
@ -21,6 +21,7 @@ You can make mask click not to close modal when using v-model on modal.
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
inject: ['message'],
|
||||
data () {
|
||||
return {
|
||||
modalActive: false,
|
||||
@ -28,11 +29,11 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
cancelCallback () {
|
||||
this.$NMessage.success('Cancel')
|
||||
this.message.success('Cancel')
|
||||
this.modalActive = false
|
||||
},
|
||||
submitCallback () {
|
||||
this.$NMessage.success('Submit')
|
||||
this.message.success('Submit')
|
||||
this.modalActive = false
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,9 +7,9 @@ Modal has some presets, which means you can use props & slots of the preset afte
|
||||
Start Me up
|
||||
</n-button>
|
||||
<n-modal
|
||||
v-model="modalActive"
|
||||
v-model:show="modalActive"
|
||||
preset="card"
|
||||
overlay-style="width: 600px;"
|
||||
:body-style="bodyStyle"
|
||||
title="Modal"
|
||||
:bordered="false"
|
||||
size="huge"
|
||||
@ -31,6 +31,9 @@ Modal has some presets, which means you can use props & slots of the preset afte
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
bodyStyle: {
|
||||
width: '600px'
|
||||
},
|
||||
modalActive: false,
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@ Slots are also related to preset.
|
||||
>
|
||||
Start Me up
|
||||
</n-button>
|
||||
<n-modal v-model="modalActive"
|
||||
<n-modal v-model:show="modalActive"
|
||||
preset="confirm"
|
||||
title="Confirm"
|
||||
>
|
||||
|
||||
@ -6,7 +6,7 @@ An example of preset `confirm`.
|
||||
>
|
||||
Start Me up
|
||||
</n-button>
|
||||
<n-modal v-model="modalActive"
|
||||
<n-modal v-model:show="modalActive"
|
||||
preset="confirm"
|
||||
title="Confirm"
|
||||
content="Are you sure?"
|
||||
@ -19,6 +19,7 @@ An example of preset `confirm`.
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
inject: ['message'],
|
||||
data () {
|
||||
return {
|
||||
modalActive: false,
|
||||
@ -26,11 +27,11 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
cancelCallback () {
|
||||
this.$NMessage.success('Cancel')
|
||||
this.message.success('Cancel')
|
||||
this.modalActive = false
|
||||
},
|
||||
submitCallback () {
|
||||
this.$NMessage.success('Submit')
|
||||
this.message.success('Submit')
|
||||
this.modalActive = false
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ drawer-debug
|
||||
|-|-|-|-|
|
||||
|display-directive|`'if' \| 'show'`|`'if'`|使用何种指令控制模态框主体的条件渲染|
|
||||
|mask-closable|`boolean`|`true`|点击遮罩时是否发出 `update:show` 事件|
|
||||
|body-style|`Object \| null`|`null`|当使用 `preset` 时候主体的样式|
|
||||
|body-style|`Object \| null`|`null`||
|
||||
|preset|`'card' \| 'dialog' \| null`|`null`|模态框使用何种预设|
|
||||
|show|`boolean`|`false`|是否展示 Modal|
|
||||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
preset="card"
|
||||
|
||||
:body-style="bodyStyle"
|
||||
title="卡片预设"
|
||||
size="huge"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user