Browse Source

feat(layout): 添加点击 logo 的事件处理函数

在 BasicLayout 组件中添加了 clickLogo 事件处理函数,并通过 emit 方法触发 clickLogo 事件。同时,在 basic.vue 中实现了 handleClickLogo 函数,用于处理 logo 点击事件。
jinmao88 4 days ago
parent
commit
46491d8dc9
2 changed files with 14 additions and 2 deletions
  1. 6 1
      packages/effects/layouts/src/basic/layout.vue
  2. 8 1
      playground/src/layouts/basic.vue

+ 6 - 1
packages/effects/layouts/src/basic/layout.vue

@@ -34,7 +34,7 @@ import { LayoutTabbar } from './tabbar';
 
 defineOptions({ name: 'BasicLayout' });
 
-const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
+const emit = defineEmits<{ clearPreferencesAndLogout: []; clickLogo: [] }>();
 
 const {
   isDark,
@@ -149,6 +149,10 @@ function clearPreferencesAndLogout() {
   emit('clearPreferencesAndLogout');
 }
 
+function clickLogo() {
+  emit('clickLogo');
+}
+
 watch(
   () => preferences.app.layout,
   async (val) => {
@@ -221,6 +225,7 @@ const headerSlots = computed(() => {
         :src="preferences.logo.source"
         :text="preferences.app.name"
         :theme="showHeaderNav ? headerTheme : theme"
+        @click="clickLogo"
       />
     </template>
     <!-- 头部区域 -->

+ 8 - 1
playground/src/layouts/basic.vue

@@ -106,6 +106,10 @@ function handleMakeAll() {
   notifications.value.forEach((item) => (item.isRead = true));
 }
 
+function handleClickLogo() {
+  console.log('=>(basic.vue:111) handleClickLogo');
+}
+
 watch(
   () => preferences.app.watermark,
   async (enable) => {
@@ -124,7 +128,10 @@ watch(
 </script>
 
 <template>
-  <BasicLayout @clear-preferences-and-logout="handleLogout">
+  <BasicLayout
+    @clear-preferences-and-logout="handleLogout"
+    @click-logo="handleClickLogo"
+  >
     <template #user-dropdown>
       <UserDropdown
         :avatar