mirror of https://gitee.com/xiaonuobase/snowy
【更新】新增XnFormContainer组件和使用demo
parent
df8482e4a7
commit
e42c4ddc3a
|
@ -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>
|
|
@ -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>
|
Loading…
Reference in New Issue