naive-ui/demo/documentation/components/modal/zhCN/mask-closable.demo.md

41 lines
735 B
Markdown
Raw Normal View History

2020-02-04 14:55:55 +08:00
# 遮罩关闭
2020-12-12 14:44:44 +08:00
使用 `mask-closable=false` 使点击遮罩层不发出关闭事件。
2020-12-12 14:44:44 +08:00
2020-02-04 14:55:55 +08:00
```html
2020-12-12 14:44:44 +08:00
<n-button @click="showModal = true"> 来吧 </n-button>
2020-02-04 14:55:55 +08:00
<n-modal
2020-12-12 14:44:44 +08:00
:show="showModal"
2020-02-04 14:55:55 +08:00
:mask-closable="false"
2020-09-13 19:08:54 +08:00
preset="confirm"
2020-02-04 14:55:55 +08:00
title="确认"
2020-12-12 14:44:44 +08:00
content="你确认"
2020-02-04 14:55:55 +08:00
:closable="false"
positive-text="确认"
2020-09-13 19:08:54 +08:00
@positive-click="onPositiveClick"
@negative-click="onNegativeClick"
2020-02-04 14:55:55 +08:00
negative-text="算了"
/>
```
2020-12-12 14:44:44 +08:00
2020-02-04 14:55:55 +08:00
```js
export default {
2020-10-08 00:13:35 +08:00
inject: ['message'],
2020-12-12 14:44:44 +08:00
data() {
2020-02-04 14:55:55 +08:00
return {
2020-12-12 14:44:44 +08:00
showModal: false
2020-02-04 14:55:55 +08:00
}
},
methods: {
2020-12-12 14:44:44 +08:00
onNegativeClick() {
2020-10-08 00:13:35 +08:00
this.message.success('算了')
2020-09-13 19:08:54 +08:00
this.showModal = false
2020-02-04 14:55:55 +08:00
},
2020-12-12 14:44:44 +08:00
onPositiveClick() {
2020-10-08 00:13:35 +08:00
this.message.success('确认')
2020-09-13 19:08:54 +08:00
this.showModal = false
2020-02-04 14:55:55 +08:00
}
}
}
2020-12-12 14:44:44 +08:00
```