From 6c4e0dbbd1b62fcbb8af3413bed67c77ece9ea0e Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Sat, 01 Apr 2023 10:49:42 +0800
Subject: [PATCH] 创建列表卡片组件

---
 layout/h5Page/CNavBar.vue |   49 ++++++++++++++++++++++++++++++++++++++-----------
 1 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/layout/h5Page/CNavBar.vue b/layout/h5Page/CNavBar.vue
index b5dbf3e..4bd2986 100644
--- a/layout/h5Page/CNavBar.vue
+++ b/layout/h5Page/CNavBar.vue
@@ -2,11 +2,17 @@
     <view class="c-nav-bar">
         <AtNavBar
             :title="title"
-            leftIconType="chevron-left"
-            :onClickLeftIcon="evt=>goBack()"
+            :leftIconType="iconType"
+            :onClickLeftIcon="evt => onGoBack()"
             :rightFirstIconType="dropNav ? 'bullet-list' : ''"
-            :onClickRgIconSt="evt=>dropMenu()"
+            :onClickRgIconSt="evt => onDropMenu()"
         />
+        <view
+            class="c-nav-bar-right"
+            v-if="!dropNav"
+        >
+            <slot />
+        </view>
         <view
             class="c-nav-bar-drop"
             v-show="dropShow"
@@ -18,7 +24,7 @@
                         class="c-nav-bar-drop-item item"
                         v-for="(nav,index) in dropNav"
                         :key="index"
-                        @tap="evt=>goNav(nav)"
+                        @tap="evt=>onGoNav(nav)"
                     >{{nav.title}}</view>
                 </view>
             </view>
@@ -37,7 +43,16 @@
         AtNavBar,
     },
     props: {
+        // H5页面导航标题
         title: String,
+        // H5页面导航左侧图标
+        iconType: {
+            type: String,
+            default: 'chevron-left',
+        },
+        // H5页面导航左侧图点击事件
+        onClickIcon: Function,
+        // H5页面导航右侧下拉菜单配置
         dropNav: Array,
     },
     data() {
@@ -48,10 +63,18 @@
         };
     },
     methods: {
-        goBack() {
-            window.history.go(-1);
+        onGoBack() {
+            if (this.onClickIcon) {
+                const needBack = this.onClickIcon();
+                // 返回 true 时继续跳回上一页
+                if (needBack) {
+                    Taro.navigateBack();
+                }
+            } else {
+                Taro.navigateBack();
+            }
         },
-        goNav(nav) {
+        onGoNav(nav) {
             if (!nav.url) {
                 return;
             }
@@ -60,7 +83,7 @@
                 Taro.navigateTo({ url: nav.url });
             }, 0);
         },
-        dropMenu() {
+        onDropMenu() {
             this.dropShow = !this.dropShow;
             this.dropActive = true;
             clearTimeout(this.dropTimer);
@@ -69,7 +92,7 @@
             }, 500);
         },
         outCloseMenu(evt) {
-            (() => {
+            setTimeout(() => {
                 // 未打开时，忽略
                 if (!this.dropShow) {
                     return;
@@ -79,12 +102,16 @@
                     return;
                 }
                 // 点击了菜单项，忽略
-                if (evt.target.className.indexOf('c-nav-bar-drop-item') >= 0) {
+                const className = evt.target.className;
+                if (
+                    className.indexOf('c-nav-bar-drop-item') >= 0 ||
+                    className.indexOf('at-nav-bar__container') >= 0
+                ) {
                     return;
                 }
                 // 执行关闭
                 this.dropShow = false;
-            })();
+            }, 0);
         },
     },
     mounted() {

--
Gitblit v1.9.1