@opendesign-plus/components 0.0.1-rc.16

package/src/components/OHeaderMoblie.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OIcon, OIconArrowLeft } from '@opensig/opendesign';
+
+import ContentWrapper from './common/ContentWrapper.vue';
+import HeaderNavMoblie from './common/HeaderNavMoblie.vue';
+
+import IconClose from '~icons/components/icon-close.svg';
+import IconMenu from '~icons/components/icon-header-menu.svg';
+
+export interface OHeaderT {
+  (e: 'go-back'): void;
+  (e: 'go-home'): void;
+}
+
+const emit = defineEmits<OHeaderT>();
+
+const props = defineProps({
+  logo: undefined,
+  navData: undefined,
+  codeData: undefined,
+  isSimpleHeader: undefined,
+  headerTitle: undefined,
+});
+
+const goBack = () => {
+  emit('go-back');
+};
+const goHome = () => {
+  emit('go-home');
+};
+
+const menuShow = ref(false);
+const menuPanel = () => {
+  setTimeout(() => {
+    menuShow.value = !menuShow.value;
+    document.body.style.overflow = menuShow.value ? 'hidden' : '';
+  }, 200);
+};
+
+const mobileClick = () => {
+  menuPanel();
+};
+</script>
+
+<template>
+  <div class="header">
+    <ContentWrapper class="header-wrap">
+      <!-- 二级路由简单头部 -->
+      <div v-if="isSimpleHeader" class="header-simple">
+        <div class="simple-header-left">
+          <OIcon @click="goBack">
+            <OIconArrowLeft />
+          </OIcon>
+          <div v-if="headerTitle" class="header-title">
+            {{ headerTitle }}
+          </div>
+        </div>
+        <div v-if="$slots.rightConfig" class="simple-header-right">
+          <slot name="rightConfig"></slot>
+        </div>
+      </div>
+      <template v-else>
+        <div class="header-left">
+          <OIcon @click="menuPanel">
+            <IconMenu v-if="!menuShow" />
+            <IconClose v-else />
+          </OIcon>
+        </div>
+        <HeaderNavMoblie ref="mobileNav" :nav-data="navData" :code-data="codeData" :menu-show="menuShow" @link-click="mobileClick">
+          <template #tool>
+            <slot name="tool"></slot>
+          </template>
+        </HeaderNavMoblie>
+        <div class="header-center">
+          <div class="header-logo" @click="goHome">
+            <slot name="logo">
+              <img v-if="props.logo" class="logo" alt="logo" :src="props.logo" />
+            </slot>
+          </div>
+        </div>
+        <div class="header-right">
+          <slot name="toolbar"></slot>
+        </div>
+      </template>
+    </ContentWrapper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header {
+  background-color: var(--o-color-fill2);
+  position: relative;
+  z-index: 999;
+  box-shadow: 0 3px 9px 0 rgba(0, 18, 85, 0.08);
+  backdrop-filter: blur(5px);
+  --o-header-height: 56px;
+}
+.header-wrap {
+  display: flex;
+  align-items: center;
+  height: var(--o-header-height);
+  justify-content: space-between;
+  position: relative;
+}
+.header-simple {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .o-icon {
+    font-size: 24px;
+  }
+  .simple-header-left {
+    display: flex;
+    gap: 16px;
+    color: var(--o-color-info1);
+    overflow: hidden;
+    flex-grow: 1;
+    .header-title {
+      color: var(--o-color-info1);
+      font-weight: 500;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      @include text2;
+    }
+  }
+  .simple-header-right {
+    flex-shrink: 0;
+    color: var(--o-color-info1);
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+  }
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  .o-icon {
+    --icon-size: 24px;
+  }
+}
+.logo {
+  height: 24px;
+  width: auto;
+}
+</style>