modal

src/components/Modal/index.vue → src/components/CardModal/index.vue

@@ -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
     }
   }
 })

src/views/system/menu/components/RoleModal.vue → src/views/system/menu/components/MenuModal.vue

@@ -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
     }
   }
 })

src/views/system/menu/index.vue

@@ -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'