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

41 lines
750 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
size="small"
@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"
title="Confirm modal"
content="Are you sure ?"
:closable="false"
positive-text="submit"
@positive-click="cancelCallback"
@negative-click="submitCallback"
negative-text="cancel"
/>
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 () {
this.$NMessage.success('cancel')
this.isActive = false
},
submitCallback () {
this.$NMessage.success('submit')
this.isActive = false
2019-09-29 00:13:01 +08:00
}
}
}
```