【更新】新增XnFormContainer组件和使用demo

pull/95/head
xlzy 2023-03-20 21:42:15 +08:00
parent df8482e4a7
commit e42c4ddc3a
2 changed files with 141 additions and 0 deletions

View File

@ -0,0 +1,84 @@
<template>
<div>
<button @click="showDrawer">Show Drawer</button>
<button @click="showModal">Show Modal</button>
<xn-form-container
v-model:visible="drawerVisible"
:type="drawerType"
title="Drawer Title"
placement="right"
width="300px"
:destroyOnClose="false"
@ok="onOkDrawer"
@close="onCloseDrawer"
>
<p>Drawer Content</p>
<template #footer>
<div>Drawer footer</div>
</template>
<template #title>
<div>Drawer title</div>
</template>
</xn-form-container>
<xn-form-container
v-model:visible="modalVisible"
:type="modalType"
title="Modal Title"
:width="800"
:destroyOnClose="false"
@ok="onOkModal"
@close="onCloseModal"
>
<p>Modal Content</p>
<template #footer>
<div>Modal footer</div>
</template>
<template #title>
<div>Modal title</div>
</template>
</xn-form-container>
</div>
</template>
<script>
import XnFormContainer from './XnFormContainer'
export default {
name: 'Example',
components: {
XnFormContainer
},
data() {
return {
drawerVisible: false,
drawerType: 'drawer',
modalVisible: false,
modalType: 'modal'
}
},
methods: {
showDrawer() {
this.drawerVisible = true
},
showModal() {
this.modalVisible = true
},
onOkDrawer() {
this.$message.success('onOkDrawer')
this.drawerVisible = false
},
onCloseModal() {
this.$message.success('onCloseModal')
this.modalVisible = false
},
onCloseDrawer() {
this.$message.success('onCloseDrawer')
this.drawerVisible = false
},
onOkModal() {
this.$message.success('onOkModal')
this.modalVisible = false
}
}
}
</script>

View File

@ -0,0 +1,57 @@
<template>
<Modal v-if="isModal" :visible="visible" @cancel="cancel" v-bind="$attrs">
<template v-for="slotKey in slotKeys" #[slotKey]>
<slot :name="slotKey" />
</template>
</Modal>
<Drawer v-else :visible="visible" v-bind="$attrs">
<template v-for="slotKey in slotKeys" #[slotKey]>
<slot :name="slotKey" />
</template>
</Drawer>
</template>
<script>
import { Drawer, Modal } from 'ant-design-vue'
import { modalProps } from 'ant-design-vue/es/modal/Modal'
import { drawerProps } from 'ant-design-vue/es/drawer'
const FormContainerTypeEnum = {
DRAWER: 'drawer',
MODAL: 'modal'
}
export default {
name: 'XnFormContainer',
components: {
Drawer,
Modal
},
inheritAttrs: false,
props: {
type: {
type: String,
default: FormContainerTypeEnum.MODAL
},
visible: {
type: Boolean,
default: false,
required: true
},
...modalProps,
...drawerProps
},
computed: {
slotKeys() {
return Object.keys(this.$slots)
},
isModal() {
return this.type === FormContainerTypeEnum.MODAL
}
},
methods: {
cancel() {
this.$emit('close')
}
}
}
</script>