docs_vue2/one/docs/demo/drawer/modal.vue
2021-09-15 20:03:51 +08:00

65 lines
1.1 KiB
Vue

<template>
<article>
<veui-button @click="modalOpen = true">
Modal
</veui-button>
<veui-button @click="nonModalOpen = true">
Non-modal
</veui-button>
<veui-drawer
title="System"
:open.sync="modalOpen"
@ok="handleModalClose(true)"
@cancel="handleModalClose"
>
Do you want to refresh the page?
</veui-drawer>
<veui-drawer
title="System"
:open.sync="nonModalOpen"
:modal="false"
@ok="handleModalClose(true)"
@cancel="handleModalClose"
>
Do you want to refresh the page?
</veui-drawer>
</article>
</template>
<script>
import { Drawer, Button } from 'veui'
export default {
components: {
'veui-drawer': Drawer,
'veui-button': Button
},
data () {
return {
modalOpen: false,
nonModalOpen: false
}
},
methods: {
handleModalClose (ok) {
this.modalOpen = false
if (ok) {
location.reload()
}
},
handleNonModalClose (ok) {
this.nonModalOpen = false
if (ok) {
location.reload()
}
}
}
}
</script>
<style lang="less" scoped>
.veui-button {
margin-right: 20px;
}
</style>