Kaynağa Gözat

主页Header添加弹出式二维码

344080Wuyunfeng 2 yıl önce
ebeveyn
işleme
537a5693c7

BIN
src/assets/images/QRcodeExample.png


+ 10 - 0
src/layout/components/Header/QRcodePopover.vue

@@ -0,0 +1,10 @@
+<template>
+  <el-popover placement="bottom" trigger="hover">
+    <template #reference> 扫描二维码 </template>
+    <img src="~@/assets/images/QRcodeExample.png" />
+  </el-popover>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped></style>

+ 5 - 0
src/layout/components/Header/index.vue

@@ -123,6 +123,10 @@
           </el-icon>
         </el-tooltip>
       </div>
+      <!-- 弹出式二维码 -->
+      <div class="layout-header-trigger layout-header-trigger-min">
+        <QRcodePopover />
+      </div>
       <!--消息-->
       <div class="layout-header-trigger layout-header-trigger-min notifier-plus">
         <NotifierProPlus />
@@ -189,6 +193,7 @@
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import { AppSearch } from '@/components/Application/index';
   import ProjectSetting from './ProjectSetting.vue';
+  import QRcodePopover from './QRcodePopover.vue';
   import NotifierProPlus from './NotifierProPlus.vue';
   import Sider from '../Sider/Sider.vue';
   import AmendPwd from './AmendPwd.vue';