style:checkBox-非弹窗模式下-无数据样式微调

‘chensiAb’

7 days ago 4154c2779a6a033f57dde2743dc1c48e60d6def3

 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"
@@ -15,10 +21,10 @@
                <view class="arrow"></view>
                <view class="box">
                    <view
                        class="item"
                        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,33 +43,84 @@
        AtNavBar,
    },
    props: {
        // H5页面导航标题
        title: String,
        // H5页面导航左侧图标
        iconType: {
            type: String,
            default: 'chevron-left',
        },
        // H5页面导航左侧图点击事件
        onClickIcon: Function,
        // H5页面导航右侧下拉菜单配置
        dropNav: Array,
    },
    data() {
        return {
            dropShow: false,
            dropTimer: -1,
            dropActive: false,
        };
    },
    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;
            }
            this.dropShow = false;
            let method = 'navigateTo';
            if (/navigate|redirect/.test(nav.method)) {
                method = nav.method + 'To';
            }
            Taro[method]({ url: nav.url });
            setTimeout(() => {
                Taro.navigateTo({ url: nav.url });
            }, 0);
        },
        dropMenu() {
        onDropMenu() {
            this.dropShow = !this.dropShow;
            this.dropActive = true;
            clearTimeout(this.dropTimer);
            this.dropTimer = setTimeout(() => {
                this.dropActive = false;
            }, 500);
        },
        outCloseMenu(evt) {
            setTimeout(() => {
                // 未打开时，忽略
                if (!this.dropShow) {
                    return;
                }
                // 刚刚打开的一段时间内，忽略
                if (this.dropActive) {
                    return;
                }
                // 点击了菜单项，忽略
                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() {},
    mounted() {
        Taro.eventCenter.on('pageTouchstart', this.outCloseMenu);
        Taro.eventCenter.on('pageClick', this.outCloseMenu);
    },
    beforeDestroy() {
        Taro.eventCenter.off('pageTouchstart', this.outCloseMenu);
        Taro.eventCenter.off('pageClick', this.outCloseMenu);
    },
};
</script>