vite-demo/src/components/popups/drawer.vue

+<template>
+    <a-drawer
+            :title="drawerTitle"
+            :placement="drawerPlacement"
+            :closable="drawerClosable"
+            v-model:visible="isShow"
+            @close="onClose"
+    >
+        <slot></slot>
+    </a-drawer>
+</template>
+
+<script>
+    export default {
+        name: "drawerIndex",
+        props: {
+            isShow: {
+                type: Boolean,
+                default: false
+            },
+            // 标题
+            drawerTitle: {
+                type: String,
+                default: ''
+            },
+            // 方向
+            drawerPlacement: {
+                type: String,
+                default: 'right'
+            },
+            // 是否显示右上方按钮
+            drawerClosable: {
+                type: Boolean,
+                default: true
+            }
+        },
+        setup(props, {emit}) {
+            const onClose = () => {
+                emit('update:isShow', false)
+            }
+            return {
+                onClose
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

vite-demo/src/components/popups/modal.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, watch} from 'vue'
+
+    export default {
+        name: "modalIndex",
+        props: {
+            title: {
+                type: String,
+                default: '模态框'
+            },
+            isShow: {
+                type: Boolean,
+                default: false
+            },
+        },
+        setup(props, content) {
+            console.log('props - modal', props);
+            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/components/popups/popups.js

+import drawer from './drawer.vue'
+import modal from './modal.vue'
+import {h} from 'vue'
+
+export const renderPopups = function (props, {slots}) {
+    console.log('renderPopups',props);
+    return props.type === 'modal' ? h(modal, slots.default()) : h(drawer, slots.default())
+}
+

vite-demo/src/hook/useModal.js

@@ -8,7 +8,6 @@ export function useModal() {
     const onModalShow = () => {
         isShow.value = true
     }
-
     const modalOk = () => {
         console.log('确认')
     }
@@ -23,7 +22,8 @@ export function useModal() {
         onModalShow,
         isShow
     }
-};
+
+}
 
 
 // 设置select可以本地搜索

vite-demo/src/hook/useTableMdal.js

@@ -3,7 +3,7 @@
  * useTable 表格查询，分页， 删除
  * @modalMixin 弹窗新增，修改，详情
  */
-import {ref, reactive, computed, nextTick} from 'vue'
+import {ref, reactive, computed} from 'vue'
 import {message, confirm} from 'ant-design-vue'
 // import { postAction, putAction, deleteAction, httpAction } from 'api/commonApi/index';
 let postAction, putAction, deleteAction, httpAction;
@@ -346,7 +346,6 @@ export function useModal() {
         confirmLoading: false,
         form: this.$form.createForm(this)
     }
-
     const disableSubmit = computed({
         get: () => {
             if (type === 'detail') {
@@ -354,29 +353,33 @@ export function useModal() {
             }
             return false;
         },
+
         set: () => {
         }// 查看详情，禁用所有表单
-    })
+    }
 
     methods: {
         // 回填数据
-        const backfillData = () => {
-            resetScreenSize();
+        backfillData()
+        {
+            this.resetScreenSize();
             // 回填数据
-            nextTick().finally(() => {
+            this.$nextTick().finally(() => {
                 this.form.resetFields();
                 // 日期处理
-                if (type !== 'add') {
-                    data = parseDate(data);
+                if (this.type !== 'add') {
+                    this.data = parseDate(this.data);
                     setTimeout(() => {
-                            form.setFieldsValue(data);
+                            this.form.setFieldsValue(this.data);
                         }
                     )
                 }
-            });
+            })
+            ;
         }
-
-        const handleOk = (otherValues = {}, path, dateFormat = 'YYYY-MM-DD') => {
+    ,
+        handleOk(otherValues = {}, path, dateFormat = 'YYYY-MM-DD')
+        {
             this.confirmLoading = true;
             // 触发表单验证
             this.form.validateFields((err, values) => {
@@ -419,16 +422,18 @@ export function useModal() {
                 }
             })
         }
-
-        const close = () => {
+    ,
+        close()
+        {
             this.confirmLoading = false;
             this.disableSubmit = false;
-            emit('close');
-            emit('update:show', false);
+            this.$emit('close');
+            this.$emit('update:show', false);
         }
-
+    ,
         // 根据屏幕变化,设置抽屉尺寸
-        const resetScreenSize = () => {
+        resetScreenSize()
+        {
             const screenWidth = document.body.clientWidth;
             if (screenWidth < 500) {
                 this.drawerWidth = screenWidth;
@@ -436,6 +441,7 @@ export function useModal() {
                 this.drawerWidth = 700;
             }
         }
+    ,
 
     }
-}
+};

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

 <template>
-    <modal >
-        <div>1232</div>
-    </modal>
+    <!--    <modal >-->
+    <!--        <div>1232</div>-->
+    <!--    </modal>-->
+    <renderPopups :isShow="isShow" :type="2">
+        <template>
+            drawer
+        </template>
+    </renderPopups>
 </template>
 
 <script>
     import modal from '@c/modal/index.vue'
+    import {renderPopups} from '@c/popups/popups'
 
     export default {
         name: "fromModal",
+        props: {
+            isShow: Boolean
+        },
         components: {
-            modal
+            modal,
+            renderPopups
         },
         setup() {
 

vite-demo/src/views/skills/components/jsx/btn1.vue

 <template>
     <div>
-        这是btn1
-        <p>{{ num }}</p>
+        这是btn1组件
+        <p>组件内部值：{{ num }}</p>
+        <p>props - type:{{type}}</p>
         <slot></slot>
         <slot name="name"></slot>
     </div>
@@ -11,7 +12,9 @@
 
     export default defineComponent({
         name: 'btn1',
-        setup() {
+
+        setup(props) {
+            console.log('props - btn', props);
             const num = ref(1)
             return {num}
         }

vite-demo/src/views/skills/components/jsx/btn2.vue

 <template>
     <div>
-        这是btn2{{ num }}
+        <p>这是btn2</p>
+        <p>num: {{ num }}</p>
         <slot></slot>
     </div>
 </template>
 <script>
-    import { ref, defineComponent } from 'vue'
+    import {ref, defineComponent} from 'vue'
+
     export default defineComponent({
         name: 'btn2',
         setup() {
             const num = ref(2)
-            return { num }
+            return {num}
         }
     })
 </script>
\ No newline at end of file

vite-demo/src/views/skills/components/jsx/index.vue

 <template>
     <renderFn :type="1">
-        <p>默认插槽： 111111</p>
-        <template #name="{type}">
-            <span>具名插槽</span> name
-            <span>使用子组件属性{{type}}</span>
-        </template>
+        <div default="{text}">
+            <p> 默认插槽： 111111</p>
+        </div>
+        <!--        <template #name="{type}">-->
+        <!--            <span>具名插槽</span> name-->
+        <!--            <span>使用子组件属性{{type}}</span>-->
+        <!--        </template>-->
     </renderFn>
+
 </template>
 
 <script>
-    import {renderFn} from './renderFn.js'
+    import renderFn from './renderFn.js'
+    import vnode from "./vnode"
 
     export default {
         name: "index",
         components: {
             renderFn,
+            vnode
         },
     }
 </script>

vite-demo/src/views/skills/components/jsx/renderFn.js

@@ -2,14 +2,22 @@ import btn1 from './btn1.vue'
 import btn2 from './btn2.vue'
 import {h} from 'vue'
 
-export const renderFn = function (props, {slots}) {
-    console.log('renderFn', props);
-    console.log('renderFn', slots);
-    // 加载组件
-    // return props.type == 1 ? h(btn1) : h(btn2)
-    // 加载默认插槽 - 具名插槽
-    return props.type == 1 ? h(btn1, [slots.default(), slots.name({
-        type: props.type
-    })]) : h(btn2)
-}
+// export const renderFn = function (props, {slots}) {
+//
+//     // 加载组件
+//     // return props.type == 1 ? h(btn1) : h(btn2)
+//     // 加载默认插槽 - 具名插槽
+//     return props.type == 1 ? h(btn1, [slots.default(), slots.name()]) : h(btn2)
+//
+// }
 
+
+export default {
+    props: ['type'],
+    setup(props, { slots }) {
+            console.log('props',props);
+        return () => [
+            props.type === 1 ? h(btn1, slots.default()) : h(btn2)
+        ]
+    }
+}
\ No newline at end of file

vite-demo/src/views/skills/components/jsx/vnode.js

+import { ref, h } from 'vue'
+
+export default {
+    props: {
+        /* ... */
+    },
+    setup(props) {
+        const count = ref(1)
+
+        // 返回渲染函数
+        return () => [
+            h('div'),
+            h('div'),
+            h('div')
+        ]
+    }
+}
\ No newline at end of file

vite-demo/src/views/skills/components/jsx/vue2JSX.vue

+ <template>
+
+ </template>
+<script>
+    import { h } from 'vue'
+    export default {
+        name: "item",
+        setup(){
+
+        }
+    }
+</script>
\ No newline at end of file