From 1e61215b48e59e94c1ed98e4ef956227d689d6bc Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Mon, 06 Nov 2023 08:48:39 +0800 Subject: [PATCH] fix:小程序订阅消息 --- uni_modules/uview-ui/components/u-navbar/u-navbar.vue | 186 ++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 186 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-navbar/u-navbar.vue b/uni_modules/uview-ui/components/u-navbar/u-navbar.vue new file mode 100644 index 0000000..2b206b7 --- /dev/null +++ b/uni_modules/uview-ui/components/u-navbar/u-navbar.vue @@ -0,0 +1,186 @@ +<template> + <view class="u-navbar"> + <view + class="u-navbar__placeholder" + v-if="fixed && placeholder" + :style="{ + height: $u.addUnit($u.getPx(height) + $u.sys().statusBarHeight,'px'), + }" + ></view> + <view :class="[fixed && 'u-navbar--fixed']"> + <u-status-bar + v-if="safeAreaInsetTop" + :bgColor="bgColor" + ></u-status-bar> + <view + class="u-navbar__content" + :class="[border && 'u-border-bottom']" + :style="{ + height: $u.addUnit(height), + backgroundColor: bgColor, + }" + > + <view + class="u-navbar__content__left" + hover-class="u-navbar__content__left--hover" + hover-start-time="150" + @tap="leftClick" + > + <slot name="left"> + <u-icon + v-if="leftIcon" + :name="leftIcon" + :size="leftIconSize" + :color="leftIconColor" + ></u-icon> + <text + v-if="leftText" + :style="{ + color: leftIconColor + }" + class="u-navbar__content__left__text" + >{{ leftText }}</text> + </slot> + </view> + <slot name="center"> + <text + class="u-line-1 u-navbar__content__title" + :style="[{ + width: $u.addUnit(titleWidth), + }, $u.addStyle(titleStyle)]" + >{{ title }}</text> + </slot> + <view + class="u-navbar__content__right" + v-if="$slots.right || rightIcon || rightText" + @tap="rightClick" + > + <slot name="right"> + <u-icon + v-if="rightIcon" + :name="rightIcon" + size="20" + ></u-icon> + <text + v-if="rightText" + class="u-navbar__content__right__text" + >{{ rightText }}</text> + </slot> + </view> + </view> + </view> + </view> +</template> + +<script> + import props from './props.js'; + /** + * Navbar ������������������ + * @description ������������������������������������������������������������������������������������������������������uni-app������������������ + * @tutorial https://www.uviewui.com/components/navbar.html + * @property {Boolean} safeAreaInsetTop ��������������������������������� ��������� true ��� + * @property {Boolean} placeholder ��������������������������������������������������������������������� ��������� false ��� + * @property {Boolean} fixed ������������������������������ ��������� false ��� + * @property {Boolean} border ������������������������������������ ��������� false ��� + * @property {String} leftIcon ���������������������������������������uView��������������� ��������� 'arrow-left' ��� + * @property {String} leftText ��������������������� + * @property {String} rightText ��������������������� + * @property {String} rightIcon ���������������������������������������uView��������������� + * @property {String} title ������������������������������������������������������������������������ + * @property {String} bgColor ��������������������� ��������� '#ffffff' ��� + * @property {String | Number} titleWidth ������������������������������������������������������������������ ��������� '400rpx' ��� + * @property {String | Number} height ���������������(���������������������������������������������������)��������� '44px' ��� + * @property {String | Number} leftIconSize ������������������������������������ 20px ��� + * @property {String | Number} leftIconColor ������������������������������������ #303133 ��� + * @property {Boolean} autoBack ������������������(������������)��������������������������������������� false ��� + * @property {Object | String} titleStyle ������������������������������������ + * @event {Function} leftClick ������������������ + * @event {Function} rightClick ������������������ + * @example <u-navbar title="���������������������������������" left-text="������" right-text="������" @click-left="onClickBack" @click-right="onClickRight"></u-navbar> + */ + export default { + name: 'u-navbar', + mixins: [uni.$u.mpMixin, uni.$u.mixin, props], + data() { + return { + + } + }, + methods: { + // ������������������ + leftClick() { + // ���������������autoBack������������������������ + this.$emit('leftClick') + if(this.autoBack) { + uni.navigateBack() + } + }, + // ������������������ + rightClick() { + this.$emit('rightClick') + }, + } + } +</script> + +<style lang="scss" scoped> + @import "../../libs/css/components.scss"; + + .u-navbar { + + &--fixed { + position: fixed; + left: 0; + right: 0; + top: 0; + z-index: 11; + } + + &__content { + @include flex(row); + align-items: center; + height: 44px; + background-color: #9acafc; + position: relative; + justify-content: center; + + &__left, + &__right { + padding: 0 13px; + position: absolute; + top: 0; + bottom: 0; + @include flex(row); + align-items: center; + } + + &__left { + left: 0; + + &--hover { + opacity: 0.7; + } + + &__text { + font-size: 15px; + margin-left: 3px; + } + } + + &__title { + text-align: center; + font-size: 16px; + color: $u-main-color; + } + + &__right { + right: 0; + + &__text { + font-size: 15px; + margin-left: 3px; + } + } + } + } +</style> -- Gitblit v1.8.0