naive-ui/demo/documentation/components/modal/enUS/maskClosable.md

40 lines
729 B
Markdown
Raw Normal View History

2019-09-29 00:13:01 +08:00
# Mask Closable
2020-01-30 22:45:44 +08:00
You can make mask click not to close modal when using v-model on modal.
2019-09-29 00:13:01 +08:00
```html
<n-button
@click="isActive = true"
>
Start Me up
</n-button>
2020-01-30 22:45:44 +08:00
<n-modal
v-model="isActive"
2019-11-15 17:44:43 +08:00
:mask-closable="false"
preset="confirm"
2020-02-04 14:55:55 +08:00
title="Confirm"
content="Are you sure?"
2019-11-15 17:44:43 +08:00
:closable="false"
2020-02-04 14:55:55 +08:00
positive-text="Confirm"
@positive-click="submitCallback"
@negative-click="cancelCallback"
negative-text="Cancel"
2019-11-15 17:44:43 +08:00
/>
2019-09-29 00:13:01 +08:00
```
```js
export default {
data () {
return {
isActive: false,
2019-11-15 17:44:43 +08:00
}
},
methods: {
cancelCallback () {
2020-02-04 14:55:55 +08:00
this.$NMessage.success('Cancel')
2019-11-15 17:44:43 +08:00
this.isActive = false
},
submitCallback () {
2020-02-04 14:55:55 +08:00
this.$NMessage.success('Submit')
2019-11-15 17:44:43 +08:00
this.isActive = false
2019-09-29 00:13:01 +08:00
}
}
}
```