上传文件

src/layout/index.vue

@@ -13,6 +13,7 @@
                 <TopMenu />
             </div>
             <div class="header-content-bar">
+                <HcGlobalUpload />
                 <HcRefresh />
                 <HcColor />
                 <HcTheme />
@@ -49,6 +50,7 @@ const store = useAppStore()
 import TopMenu from './modules/TopMenu.vue'
 import MenuBar from './modules/MenuBar.vue'
 import HcRefresh from './modules/Refresh.vue'
+import HcGlobalUpload from './modules/Upload.vue'
 import HcColor from './modules/Color.vue'
 import HcTheme from './modules/Theme.vue'
 import UserInfoBar from './modules/UserInfoBar.vue'

src/layout/modules/Upload.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="header-icon-bar" @click="uploadClick">
+        <el-tooltip content="全局文件上传" placement="top">
+            <hc-icon name="upload-cloud" class="header-icon" />
+        </el-tooltip>
+
+        <!-- 上传文件 -->
+        <hc-upload-file ref="uploadRef" :echo-params="params" :options="options" @success="success" />
+    </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue'
+import { emitter, getHeader } from 'hc-vue3-ui'
+
+//页面渲染
+onMounted(() => {
+    //注册监听事件
+    emitter.on('hc-global-upload-file', (data) => {
+        console.log('微型事件测试：', data)
+    })
+})
+
+//上传文件
+const uploadRef = ref(null)
+const params = ref({})
+const options = ref({
+    headers: getHeader(),
+})
+
+//上传成功
+const success = () => {
+
+}
+
+//展开上传文件
+const uploadClick = () => {
+    
+}
+
+//页面被注销，关闭监听事件
+onUnmounted(() => {
+    emitter.off('hc-global-upload-file')
+})
+</script>
+
+<style lang="scss" scoped>
+
+</style>