全局悬浮框

src/App.vue

 <script setup>
+import Fab from '@/Components/fab/fab.vue';
+import { createApp } from 'vue';
 onLaunch(() => {});
 
 onShow(() => {
   console.log('App Show');
 });
+onMounted(() => {
+  const globalComponentContainer = document.createElement('div');
+  globalComponentContainer.id = 'global-component-container';
 
+  // 将这个元素插入到 body 中
+  document.body.appendChild(globalComponentContainer);
+
+  // 使用 Vue 创建一个新的应用实例并挂载到新创建的 DOM 元素中
+  createApp(Fab).mount('#global-component-container');
+});
 onHide(() => {
   console.log('App Hide');
 });

src/Components/fab/fab.vue

@@ -8,11 +8,11 @@
     inactiveIcon="a-controlplatform"
   >
     <view class="custom-button" @click="go('/pages/ticket/ticket')">
-      <image class="fab-icon" src="@/static/index/coupon.png"></image>
+      <image class="fab-icon" src="../../static/index/coupon.png"></image>
       <text class="fab-text">优惠券</text>
     </view>
     <view class="custom-button" @click="go('/pages/order/order')">
-      <image class="fab-icon" src="@/static/index/order.png"></image>
+      <image class="fab-icon" src="../../static/index/order.png"></image>
       <text class="fab-text">订单</text>
     </view>
   </wd-fab>