This commit is contained in:
余菲 2022-05-24 10:12:17 +08:00
commit 73f49847bf
3 changed files with 21 additions and 14 deletions

View File

@ -1,6 +1,11 @@
<template> <template>
<n-modal v-bind="getModalOptions" preset="dialog"> <n-modal
<n-card> v-bind="getModalOptions"
:style="`width:${getModalOptions.width}px`"
preset="card"
@update:show="handleClose"
>
<n-card :bordered="false">
<slot name="Context" /> <slot name="Context" />
</n-card> </n-card>
</n-modal> </n-modal>
@ -10,7 +15,7 @@
import { defineComponent, computed, unref } from 'vue' import { defineComponent, computed, unref } from 'vue'
export default defineComponent({ export default defineComponent({
name: 'ModalModules', name: 'CardModal',
props: { props: {
options: { options: {
type: Object, type: Object,
@ -25,19 +30,21 @@ export default defineComponent({
}, },
setup(props, { emit }) { setup(props, { emit }) {
const getModalOptions = computed(() => { const getModalOptions = computed(() => {
return unref(props.options) return {
...props.options,
width: props.options.width || 600
}
}) })
console.log(getModalOptions)
const handleClick = function() { const handleClick = function() {
emit('click') emit('click')
} }
const handleCancel = function() { const handleClose = function() {
emit('onClose', true) emit('onClose', true)
} }
return { return {
getModalOptions, getModalOptions,
handleClick, handleClick,
handleCancel handleClose
} }
} }
}) })

View File

@ -1,5 +1,5 @@
<template> <template>
<Modal :options="getModalOptions"> <Modal :options="getModalOptions" @on-close="handleClose">
<template #Context> <template #Context>
111 111
</template> </template>
@ -8,7 +8,7 @@
<script> <script>
import { defineComponent, computed } from 'vue' import { defineComponent, computed } from 'vue'
import Modal from '@/components/Modal/index.vue' import Modal from '@/components/CardModal/index.vue'
export default defineComponent({ export default defineComponent({
name: 'MenuModal', name: 'MenuModal',
components: { Modal }, components: { Modal },
@ -30,18 +30,18 @@ export default defineComponent({
setup(props, { emit }) { setup(props, { emit }) {
const getModalOptions = computed(() => { const getModalOptions = computed(() => {
return { return {
visible: props.visible show: props.visible
} }
}) })
/* 关闭弹窗 */ /* 关闭弹窗 */
const handleClose = () => { const handleClose = () => {
// vodModal.value.handleUploadCancel()
emit('update:visible', false) emit('update:visible', false)
} }
return { return {
getModalOptions getModalOptions,
handleClose
} }
} }
}) })

View File

@ -11,12 +11,12 @@
</n-card> </n-card>
</div> </div>
<RoleModal :visible="data.modalShow" /> <RoleModal v-model:visible="data.modalShow" />
</template> </template>
<script> <script>
import dataTable from '@/components/DataTable/index.vue' import dataTable from '@/components/DataTable/index.vue'
import RoleModal from './components/RoleModal.vue' import RoleModal from './components/MenuModal.vue'
import Action from '@/components/DataTable/tools/Action.vue' import Action from '@/components/DataTable/tools/Action.vue'
import { getMenuList } from '@/api/system/index.js' import { getMenuList } from '@/api/system/index.js'
import { h, onMounted } from 'vue' import { h, onMounted } from 'vue'