@@ -1,6 +1,11 @@ | |||
<template> | |||
<n-modal v-bind="getModalOptions" preset="dialog"> | |||
<n-card> | |||
<n-modal | |||
v-bind="getModalOptions" | |||
:style="`width:${getModalOptions.width}px`" | |||
preset="card" | |||
@update:show="handleClose" | |||
> | |||
<n-card :bordered="false"> | |||
<slot name="Context" /> | |||
</n-card> | |||
</n-modal> | |||
@@ -10,7 +15,7 @@ | |||
import { defineComponent, computed, unref } from 'vue' | |||
export default defineComponent({ | |||
name: 'ModalModules', | |||
name: 'CardModal', | |||
props: { | |||
options: { | |||
type: Object, | |||
@@ -25,19 +30,21 @@ export default defineComponent({ | |||
}, | |||
setup(props, { emit }) { | |||
const getModalOptions = computed(() => { | |||
return unref(props.options) | |||
return { | |||
...props.options, | |||
width: props.options.width || 600 | |||
} | |||
}) | |||
console.log(getModalOptions) | |||
const handleClick = function() { | |||
emit('click') | |||
} | |||
const handleCancel = function() { | |||
const handleClose = function() { | |||
emit('onClose', true) | |||
} | |||
return { | |||
getModalOptions, | |||
handleClick, | |||
handleCancel | |||
handleClose | |||
} | |||
} | |||
}) |
@@ -1,5 +1,5 @@ | |||
<template> | |||
<Modal :options="getModalOptions"> | |||
<Modal :options="getModalOptions" @on-close="handleClose"> | |||
<template #Context> | |||
111 | |||
</template> | |||
@@ -8,7 +8,7 @@ | |||
<script> | |||
import { defineComponent, computed } from 'vue' | |||
import Modal from '@/components/Modal/index.vue' | |||
import Modal from '@/components/CardModal/index.vue' | |||
export default defineComponent({ | |||
name: 'MenuModal', | |||
components: { Modal }, | |||
@@ -30,18 +30,18 @@ export default defineComponent({ | |||
setup(props, { emit }) { | |||
const getModalOptions = computed(() => { | |||
return { | |||
visible: props.visible | |||
show: props.visible | |||
} | |||
}) | |||
/* 关闭弹窗 */ | |||
const handleClose = () => { | |||
// vodModal.value.handleUploadCancel() | |||
emit('update:visible', false) | |||
} | |||
return { | |||
getModalOptions | |||
getModalOptions, | |||
handleClose | |||
} | |||
} | |||
}) |
@@ -4,19 +4,19 @@ | |||
<data-table :columns="data.columns" :pagination="false" :data="data.data" size="large"> | |||
<template #tableTitle> | |||
<n-button type="primary" @click="handlleRoleAdd"> | |||
添加角色 | |||
添加菜单 | |||
</n-button> | |||
</template> | |||
</data-table> | |||
</n-card> | |||
</div> | |||
<RoleModal :visible="data.modalShow" /> | |||
<RoleModal v-model:visible="data.modalShow" /> | |||
</template> | |||
<script> | |||
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 { getMenuList } from '@/api/system/index.js' | |||
import { h, onMounted } from 'vue' |