feat(组件): 全局mount失效问题

src/app.scss

@@ -1,4 +1,6 @@
-@import "./components//basic/dialog/dialog.scss";
+@import "/@/assets/theme.editor.scss";
+@import "/@/components//basic/dialog/dialog.scss";
+@import "/@/components//basic/dialog/toast.scss";
 .tab-layer {
   width: 100%;
   text-align: center;

src/assets/theme.editor.scss

@@ -1,5 +1,5 @@
 // 资源图片目录地址(必要)
-// $img-base-path: '~@/global_components/assets/img/';
+$img-base-path: '/@/assets/images/';
 // @import '~@/global_components/assets/scss/theme-editor.scss';
 
 :root {

src/components/basic/dialog/index.ts

@@ -7,24 +7,24 @@ import Confirm from "./Confirm.vue";
 import DialogContent from "./Dialog-content.vue";
 import { createVNode, render } from 'vue'
 
-
 function mount(component, { props, children, element, app } = {}) {
-  let el = element;
-  let vNode = createVNode(component, props, children);
+  let el = element
+  let vNode = createVNode(component, props, children)
 
-  if (app && app._context) vNode.appContext = app._context;
-  if (el) render(vNode, el);
-  else if (typeof document !== "undefined") {
-    render(vNode, (el = document.createElement("div")));
+  if (app && app._context) vNode.appContext = app._context
+  if (el) render(vNode, el)
+  else if (typeof document !== 'undefined') {
+    render(vNode, (el = document.createElement('div')))
   }
 
   const destroy = () => {
-    if (el) render(null, el);
-    el = null;
-    vNode = null;
-  };
+    if (el) render(null, el)
+    el = null
+    vNode = null
+  }
+  
 
-  return { vNode, destroy, el };
+  return { vNode, destroy, el }
 }
 // const Dialog =window
 
@@ -39,10 +39,7 @@ Dialog.use = function use(app) {
 
     const { destroy, vNode, el } = mount(Toast, {
       app,
-      props: {
-        ...options,
-        destroy,
-      },
+      props: { ...options, destroy: () => destroy() },
     });
 
     if (!Dialog.toast._destroys) {

src/components/basic/dialog/toast.scss

@@ -0,0 +1,90 @@
+.ui-toast {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 30px;
+    left: 0;
+    right: 0;
+    min-width: 100px;
+    height: 100px;
+    overflow: hidden;
+    pointer-events:none;
+}
+.ui-toast__box {
+    color: #fff;
+    font-size: 14px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba($color: #1a1a1a, $alpha: 0.8);
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
+    border-radius: 4px;
+    border: 1px solid #000000;
+    padding: 8px 20px;
+    pointer-events: all;
+
+    &.fixed,
+    &.success,
+    &.error,
+    &.warn{
+        i{
+            display:inline-block;
+        }
+    }
+    &.success {
+        .icon {
+            background-image: url('#{$img-base-path}icons/toast-success.png');
+        }
+    }
+    &.error {
+        .icon {
+            background-image: url('#{$img-base-path}icons/toast-error.png');
+        }
+    }
+    &.warn {
+        .icon {
+            background-image: url('#{$img-base-path}icons/toast-warn.png');
+        }
+    }
+    &::after {
+        content: '';
+        position: absolute;
+        left: 1px;
+        right: 1px;
+        bottom: 1px;
+        top: 1px;
+        border: 1px solid rgba($color: #fff, $alpha: 0.1);
+        border-radius: 4px;
+        z-index: 0;
+        pointer-events: none;
+    }
+
+    // >i{
+    //     display: none;
+    // }
+
+    .icon{
+        margin-right: 10px;
+        font-size: 0;
+        width: 16px;
+        height: 16px;
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: contain;
+    }
+    .close{
+        cursor: pointer;
+        font-size: 14px;
+        margin-left: 20px;
+    }
+}
+.ui-toast__msg{
+  display: flex;
+  align-items: center;
+  img{
+    width:24px;
+    height: 24px;
+  }
+}

src/components/chatRoom/controls/actions.ts

@@ -77,7 +77,7 @@ async function handleUserPaint(open: boolean) {
             })
             Dialog.toast({ content: `主持人开启画笔` });
         } else {
-            // Dialog.toast({ content: `主持人关闭画笔` });
+            Dialog.toast({ content: `主持人关闭画笔` });
             app.Connect.paint.hide();
         }
     }

src/components/chatRoom/index.vue

@@ -84,7 +84,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, onUnmounted, ref, unref } from "vue";
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+  unref,
+  watchEffect,
+} from "vue";
 import { getApp, useApp } from "/@/hooks/userApp";
 import { initSocketEvent } from "./roomControl";
 import { createSocket } from "/@/hooks/userSocket";
@@ -147,9 +155,14 @@ const { createRTCSocket } = useRtcSdk();
 
 onMounted(async () => {
   const app = await useApp();
-  app.Connect.follow.start({ follow: !unref(isNativeLeader) });
-  app.Connect.follow.on("data", leaderSync);
-  app.Connect.paint.on("data", leaderPaint);
+  // app.Connect.follow.start({ follow: !unref(isNativeLeader) });
+  watchEffect(() => {
+    if (unref(isNativeLeader)) {
+      app.Connect.follow.start({ follow: false });
+      app.Connect.follow.on("data", leaderSync);
+      app.Connect.paint.on("data", leaderPaint);
+    }
+  });
 });
 onUnmounted(async () => {
   const app = await useApp();

src/components/registerComponent.ts

@@ -1,5 +1,6 @@
 
-import Dialog, { Toast, Alert } from '/@/components/basic/dialog'
+// import Dialog, { Toast, Alert } from '/@/components/basic/dialog'
+import Dialog, { Window, Toast, Alert, DialogContent } from '/@/components/basic/dialog'
 import type { App } from 'vue'
 
 function setup(...Components) {
@@ -11,8 +12,8 @@ function setup(...Components) {
     })
     return Components
 }
-
-const registerComponent = setup(Dialog, Toast, Alert)
+// 注册带install与use hook
+const registerComponent = setup(Dialog, Window, Toast, Alert, DialogContent)
 console.log('registerComponent', registerComponent)
 export default {
     install: (app: App) => {

src/main.ts

@@ -3,7 +3,7 @@ import 'virtual:windi-base.css';
 import 'virtual:windi-components.css';
 import './style.css'
 import 'virtual:windi-utilities.css';
-import "/@/assets/theme.editor.scss";
+// import "/@/assets/theme.editor.scss";
 import { setupStore } from '/@/store';
 import App from './App.vue'
 import registerComponent from '/@/components/registerComponent'