fix(components): add click event when click mask

soybeanjs · May 25, 2023 · dbda30a · dbda30a
1 parent ccc6bb6
commit dbda30a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/packages/vue/src/demos/admin-layout.vue b/packages/vue/src/demos/admin-layout.vue
@@ -22,6 +22,7 @@
       :fixed-footer="fixedFooter"
       :right-footer="rightFooter"
       class="bg-#f2f3f4"
+      @click-mobile-sider-mask="toggleSiderCollapse"
     >
       <template #header>
         <div class="h-full p-2px bg-white rd-12px">

diff --git a/packages/vue/src/libs/admin-layout/index.vue b/packages/vue/src/libs/admin-layout/index.vue
@@ -84,6 +84,7 @@
         <div
           v-show="!siderCollapse"
           :class="[':soy: absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,0.2)]', style['layout-mobile-sider-mask']]"
+          @click="handleClickMask"
         ></div>
       </template>
 
@@ -155,6 +156,13 @@ const props = withDefaults(defineProps<LayoutProps>(), {
   rightFooter: false
 });
 
+interface Emits {
+  /** 点击移动端模式下的蒙层 */
+  (e: 'click-mobile-sider-mask'): void;
+}
+
+const emit = defineEmits<Emits>();
+
 type SlotFn = (props?: Record<string, unknown>) => any;
 
 type Slots = {
@@ -228,6 +236,10 @@ const siderPaddingClass = computed(() => {
 
   return cls;
 });
+
+function handleClickMask() {
+  emit('click-mobile-sider-mask');
+}
 </script>
 
 <style scoped></style>