vue3通过函数方式调用组件

   由于项目中有个小需求，双击数据库表格数据变为输入框修改or点击选中删除数据后需要弹窗显示要执行的SQL，点击执行后方可修改数据库数据（出于二次确认以及有时是需要把SQL拷贝出来提工单到生产环境执行等）。原本使用的是ElementPlus的ElMessageBox.prompt()函数进行弹框显示sql内容，但是该方式不好控制弹框大小，以及sql关键字美化等。故而就想通过类似的方式实现一个函数来弹出自定义的对话框，对话框内容通过codemirror组件来美化sql内容。

   项目地址: https://gitee.com/objs/mayfly-go 一个web版linux（ssh、脚本、文件、进程），数据库，redis操作平台。

   1. 定义SqlExecDialogSql弹框组件

<template>
    <div>
        <el-dialog title="待执行SQL" v-model="dialogVisible" :show-close="false" width="600px">
            <codemirror height="350px" class="codesql" ref="cmEditor" language="sql" v-model="sql" :options="cmOptions" />
            <div class="footer mt10">
                <el-button @click="runSql" type="primary" :loading="btnLoading">执 行</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent } from 'vue';
import { dbApi } from './api';
import { ElDialog, ElButton } from 'element-plus';
// import base style
import 'codemirror/lib/codemirror.css';
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/base16-light.css';
import 'codemirror/addon/selection/active-line';
import { codemirror } from '@/components/codemirror';
import { format as sqlFormatter } from 'sql-formatter';

import { SqlExecProps } from './SqlExecBox';

export default defineComponent({
    name: 'SqlExecDialog',
    components: {
        codemirror,
        ElButton,
        ElDialog,
    },
    props: {
        visible: {
            type: Boolean,
        },
        dbId: {
            type: [Number],
        },
        sql: {
            type: String,
        },
    },
    setup(props: any) {
        const state = reactive({
            dialogVisible: false,
            sql: '',
            dbId: 0,
            btnLoading: false,
            cmOptions: {
                tabSize: 4,
                mode: 'text/x-sql',
                lineNumbers: true,
                line: true,
                indentWithTabs: true,
                smartIndent: true,
                matchBrackets: true,
                theme: 'base16-light',
                autofocus: true,
                extraKeys: { Tab: 'autocomplete' }, // 自定义快捷键
            },
        });

        let runSuccessCallback: any;
        let cancelCallback: any;
        let runSuccess: boolean = false;

        /**
         * 执行sql
         */
        const runSql = async () => {
            try {
                state.btnLoading = true;
                await dbApi.sqlExec.request({
                    id: state.dbId,
                    sql: state.sql.trim(),
                });
                runSuccess = true;
            } catch (e) {
                runSuccess = false;
            }
            if (runSuccessCallback) {
                runSuccessCallback();
            }
            state.btnLoading = false;
            cancel();
        };

        const cancel = () => {
            state.dialogVisible = false;
            // 没有执行成功，并且取消回调函数存在，则执行
            if (!runSuccess && cancelCallback) {
                cancelCallback();
            }
            setTimeout(() => {
                state.dbId = 0;
                state.sql = '';
                runSuccessCallback = null;
                cancelCallback = null;
                runSuccess = false;
            }, 200);
        };

        const open = (props: SqlExecProps) => {
            runSuccessCallback = props.runSuccessCallback;
            cancelCallback = props.cancelCallback;
            state.sql = sqlFormatter(props.sql);
            state.dbId = props.dbId;
            state.dialogVisible = true;
        };

        return {
            ...toRefs(state),
            open,
            runSql,
            cancel,
        };
    },
});
</script>
<style lang="scss">
.codesql {
    font-size: 9pt;
    font-weight: 600;
}
.footer {
    float: right;
}
</style>

   2. 定义SqlExecBox函数

import { h, render, VNode } from 'vue'
import SqlExecDialog from './SqlExecDialog.vue'

// 定义弹窗需要的参数
export type SqlExecProps = {
    // 需要执行的sql
    sql: string
    // 执行该sql的数据库id
    dbId: number,
    // 执行成功时的回调函数（如删除sql则需要删除对应的行数据or刷新数据列表等）
    runSuccessCallback?: Function,
    // 取消执行sql的回调函数
    cancelCallback?: Function
}

const boxId = 'sql-exec-id'

const renderBox = (): VNode => {
    const props: SqlExecProps = {
        sql: '',
        dbId: 0,
    } as any
    const container = document.createElement('div')
    container.id = boxId
    // 创建 虚拟dom
    const boxVNode = h(SqlExecDialog, props)
    // 将虚拟dom渲染到 container dom 上
    render(boxVNode, container)
    // 最后将 container 追加到 body 上
    document.body.appendChild(container)

    return boxVNode
}

let boxInstance: any

const SqlExecBox = (props: SqlExecProps): void => {
    if (boxInstance) {
        const boxVue = boxInstance.component
        // 调用上述组件中定义的open方法显示弹框
        // 注意不能使用boxVue.ctx来调用组件函数（build打包后ctx会获取不到）
        boxVue.proxy.open(props);
    } else {
        boxInstance = renderBox()
        SqlExecBox(props)
    }
}

export default SqlExecBox;

   3. 当双击修改数据or点击删除数据时，在SqlExec组件中调用SqlExecBox函数进行弹框提示执行。

import SqlExecBox from './SqlExecBox';

/**
 * 弹框提示是否执行sql
 */
const promptExeSql = (sql: string, cancelFunc: any = null, successFunc: any = null) => {
    // 调用SqlExecBox函数进行调用显示
    SqlExecBox({
        sql: sql,
        dbId: state.dbId as any,
        runSuccessCallback: successFunc,
        cancelCallback: cancelFunc,
    });
};

   执行效果

执行效果.gif