modal

vite-demo/src/components/modal/index.vue

+<template>
+    <a-modal
+            :width="800"
+            :title="title"
+            :visible="isShow"
+            :maskClosable="false"
+            :confirmLoading="confirmLoading"
+            @ok="handleOk"
+            @cancel="handleCancel"
+    >
+        <slot></slot>
+    </a-modal>
+
+</template>
+
+<script>
+    import {ref} from 'vue'
+
+    export default {
+        name: "modalIndex",
+        props: {
+            title: {
+                type: String,
+                default: '模态框'
+            },
+            isShow: {
+                type: Boolean,
+                default: false
+            },
+        },
+        setup(props, content) {
+            let confirmLoading = ref(false)
+            const handleOk = (e) => {
+                confirmLoading.value = true
+                content.emit('modalOk');
+                handleCancel()
+                setTimeout(() => {
+                    confirmLoading.value = false
+                }, 300)
+            }
+
+            const handleCancel = () => {
+                content.emit('modalCancel');
+                content.emit('update:isShow', false);
+            }
+
+            return {
+                handleOk,
+                handleCancel,
+                confirmLoading
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

vite-demo/src/hook/useModal.js

@@ -2,15 +2,26 @@ import {ref, reactive, computed} from 'vue'
 
 // 设置模态框
 export function useModal() {
+    const isShow = ref(false)
+    const isModalLoading = ref(false)
+
+    const onModalShow = () => {
+        isShow.value = true
+    }
+
     const modalOk = () => {
         console.log('确认')
     }
+
     const modalCancel = () => {
         console.log('取消')
     }
+
     return {
         modalOk,
-        modalCancel
+        modalCancel,
+        onModalShow,
+        isShow
     }
 };
 

vite-demo/src/views/antd/index.vue

 <template>
     <div>antd封装</div>
-    <modal v-model:show="show" title="新增" @modalOk="modalOk">
+    <modal v-model:isShow="isShow" title="新增" @modalOk="modalOk">
         <div>1232</div>
     </modal>
-    <a-button @click="show = true">modal</a-button>
+    <a-button @click="onModalShow">modal</a-button>
 </template>
 
 <script>
@@ -17,18 +17,13 @@
             modal
         },
         setup() {
-            const {modalOk, modalCancel} = useModal()
-            const show = ref(false)
-            const onShow = () => {
-                show.value = true
-            }
-            const defaultObj = {
-                show,
-                onShow
-            }
-            return Object.assign(defaultObj, {
-                modalOk, modalCancel
-            })
+            const resModal = useModal()
+            // const resModal = {
+            //     onModalShow, isShow, modalOk, modalCancel
+            // }
+
+            const defaultObj = {}
+            return Object.assign(defaultObj, resModal)
         }
     }
 </script>

vite-demo/src/views/antd/modal/index.vue

@@ -2,7 +2,7 @@
     <a-modal
             :width="800"
             :title="title"
-            :visible="show"
+            :visible="isShow"
             :maskClosable="false"
             :confirmLoading="confirmLoading"
             @ok="handleOk"
@@ -23,7 +23,7 @@
                 type: String,
                 default: '模态框'
             },
-            show: {
+            isShow: {
                 type: Boolean,
                 default: false
             },
@@ -41,7 +41,7 @@
 
             const handleCancel = () => {
                 content.emit('modalCancel');
-                content.emit('update:show', false);
+                content.emit('update:isShow', false);
             }
 
             return {

vite-demo/src/views/antd/table/components/fromModal.vue

+<template>
+    <modal >
+        <div>1232</div>
+    </modal>
+</template>
+
+<script>
+    import modal from '@c/modal/index.vue'
+
+    export default {
+        name: "fromModal",
+        components: {
+            modal
+        },
+        setup() {
+
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

vite-demo/src/views/antd/table/index.vue

 <template>
-    <a-button>新增</a-button>
-    <a-table :columns="columns" :data-source="data">
-        <template #name="{ text }">{{ text }}</template>
-        <!--        <span #customTitle="{}" slot="customTitle"><a-icon type="smile-o"/> Name</span>-->
-        <template #customTitle>
-              <span>
-                <smile-outlined/>
-                Name
-              </span>
-        </template>
-        <template #tags="{ text: tags }">
-            <div>123</div>
-            <div>
-                <a-tag
-                        v-for="tag in tags"
-                        :key="tag"
-                        :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
-                >
-                    {{ tag.toUpperCase() }}
-                </a-tag>
-                <a-tag color="pink">pink</a-tag>
-            </div>
-        </template>
-        <template #action={record}>
-            11111111
-            <!--            <a>Invite 一 {{ record.name }}</a>-->
-            <!--            <a-divider type="vertical"/>-->
-            <!--            <a>Delete</a>-->
-            <!--            <a-divider type="vertical"/>-->
-            <!--            <a class="ant-dropdown-link"> More actions-->
-            <!--                <a-icon type="down"/>-->
-            <!--            </a>-->
-        </template>
-    </a-table>
+    <a-space direction="vertical" style="width: 100%">
+        <a-button @click="onModalShow">新增</a-button>
+        <a-table :columns="columns" :data-source="data">
+            <template #name="{ text }">{{ text }}</template>
+            <!--设置表头信息-->
+            <template #customTitle>
+                      <span>
+                        <smile-outlined/>
+                        Name
+                      </span>
+            </template>
+            <template #tags="{ text: tags }">
+                <div>
+                    <a-tag
+                            v-for="tag in tags"
+                            :key="tag"
+                            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
+                    >
+                        {{ tag.toUpperCase() }}
+                    </a-tag>
+                </div>
+            </template>
+            <template #action="{ record }">
+                <div>
+                    <a>修改</a>
+                    <a-divider type="vertical"/>
+                    <a>删除</a>
+                    <a-divider type="vertical"/>
+                    <a>查看</a>
+                </div>
+            </template>
+        </a-table>
+    </a-space>
+    <fromModal v-model:isShow="isShow" :title="13"></fromModal>
 </template>
 
 <script>
@@ -40,8 +40,10 @@
         {
             dataIndex: 'name',
             key: 'name',
-            slots: {title: 'customTitle'},
-            scopedSlots: {customRender: 'name'},
+            slots: {
+                title: 'customTitle',
+                customRender: 'name'
+            },
         },
         {
             title: 'Age',
@@ -57,12 +59,12 @@
             title: 'Tags',
             key: 'tags',
             dataIndex: 'tags',
-            scopedSlots: {customRender: 'tags'},
+            slots: {customRender: 'tags'},
         },
         {
             title: 'Action',
             key: 'action',
-            scopedSlots: {customRender: 'action'},
+            slots: {customRender: 'action'},
         },
     ];
     const data = [
@@ -88,14 +90,34 @@
             tags: ['cool', 'teacher'],
         },
     ];
+    import {SmileOutlined, DownOutlined} from '@ant-design/icons-vue';
+    import {useModal} from "@/hook/useModal";
+    import fromModal from './components/fromModal.vue'
+
     export default {
-        name: "index",
+        name: "tableIndex",
         setup() {
+            const {
+                modalOk,
+                modalCancel,
+                onModalShow,
+                isShow
+            } = useModal()
+
             return {
                 data,
                 columns,
+                modalOk,
+                modalCancel,
+                onModalShow,
+                isShow
             };
-        }
+        },
+        components: {
+            SmileOutlined,
+            DownOutlined,
+            fromModal
+        },
     }
 </script>
 

vite-demo/vite.config.js

@@ -14,6 +14,7 @@ export default defineConfig({
     resolve: {
         alias: {
             '@': resolve(__dirname, 'src'),  // 配置组件
+            '@c': resolve(__dirname, 'src/components'),  // 配置组件
             '@img': './src/assets'  // 配置图片
         }
     }