背景

Vue3

import {AuditTools} from '../../../../src/index';
// 创建 Vue 应用实例
// 挂载 AuditTools 组件到 DOM
export const mountAuditTools = (createApp, KwaiUI) => {
  const app = createApp(AuditTools);
  app.use(KwaiUI);
  const el = document.createElement('div');
  document.body.appendChild(el);
  app.mount(el); // 将应用实例挂载到新创建的 div 元素上
};

Vue2

import { AuditTools } from '../../../../src/index'

// 挂载到dom上
export const mountAuditTools = (vueInstance) => {
    const el = document.createElement('div');
    document.body.appendChild(el);
    const AuditToolsConstructor = vueInstance.extend({
        render: h => h(AuditTools)
    });
    new AuditToolsConstructor().$mount(el);
}

使用要集成到Vue组件中，方便调用

<template>
    <div class="ad-components-audit-tools" v-show="toolsVisible" ref="toolsRef">
        <div class="title">
            审核小工具
        </div>
        <ks-tooltip size="mini" class="item" effect="dark" content="关闭后，刷新页面可以再次出现" placement="top">
            <i class="sys-icon-close-circle-fill" @click="close"></i>
        </ks-tooltip>
        <ks-divider></ks-divider>
        <div class="tool-box">
            <html-preview />
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, isVue3, CreateAppFunction } from 'vue-demi';
import HtmlPreview from './components/html-preview/index.vue';
const com = defineComponent({
    name: 'audit-tools',
    components: {
        HtmlPreview
    },
    props: {},
    setup: function (props) {
        const toolsVisible = ref(true);
        const toolsRef = ref(null);
        const close = function () {
            toolsVisible.value = false;
        };
        // 鼠标拖动 .ad-components-audit-tools ，移动整个组件
        
        return {
            toolsRef,
            close,
            toolsVisible
        };
    }
});
// 附加挂载函数，区分 vue2 和 vue3
com._$mountTools = () => {
    if(isVue3) {
        return (createApp: CreateAppFunction<any>, KwaiUI: any) => {
            const app = createApp(com);
            app.use(KwaiUI);
            const el = document.createElement('div');
            document.body.appendChild(el);
            app.mount(el); // 将应用实例挂载到新创建的 div 元素上
        }
    } else {
        // @vueInstance Vue2构造函数
        return (vueInstance:any) => {
            const el = document.createElement('div');
            document.body.appendChild(el);
            const AuditToolsConstructor = vueInstance.extend({
                render: (h:any) => h(com)
            });
            new AuditToolsConstructor().$mount(el);
        }
    }
};

export default com;
</script>