123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- <style lang="less">
- .component-container {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- z-index: 444;
- .page-top-bar {
- position: relative;
- .title {
- position: absolute;
- width: 100%;
- bottom: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 18px;
- color: #ffffff;
- }
- .icon {
- position: absolute;
- left: 17px;
- bottom: 0;
- line-height: 17px;
- width: 87px;
- .icon_define {
- width: 9px;
- height: 17px;
- }
- }
- }
- }
- </style>
- <template>
- <div class="component-container"
- :style="{'padding-top': pageTopBarTop + 'px','padding-bottom': pageTopBarBottom + 'px', 'height': pageTopBarHeight + 'px', 'background-color': bgColor}">
- <div class="page-top-bar"
- :style="{height: pageTopBarHeight + 'px'}">
- <div class="title"
- :style="{'color': titleColor, height: pageTopBarHeight + 'px'}">
- <span v-show="title">{{title}}</span>
- </div>
- <div v-if="icon"
- class="icon"
- v-on:click="emitIconClick"
- :style="{bottom: bottom+'px'}"
- :class="{'white': iconBg === 'white'}">
- <image class="icon_define"
- src="{{icon}}" />
- </div>
- </div>
- </div>
- </template>
- <script>
- import wepy from '@wepy/core';
- import config from '@/config';
- wepy.component({
- props: {
- title: String,
- iconType: String,
- icon: {
- type: String,
- default: config.h5StaticPath + '/page-top-bar/return-icon.svg'
- },
- // white
- iconBg: String,
- bgColor: {
- type: String,
- default: 'transparent'
- },
- titleColor: {
- type: String,
- default: '#fff'
- },
- pageTopBarBottom: {
- type: Number,
- default: 0
- },
- iconClickedEmitId: String
- },
- ready() {
- let menuButtonBoundingClientRect = wx.getMenuButtonBoundingClientRect();
- this.pageTopBarHeight = menuButtonBoundingClientRect.height;
- // 加上右上角胶囊按钮的边框2
- this.pageTopBarTop = menuButtonBoundingClientRect.top;
- if (!this.iconBg) {
- this.bottom = (this.pageTopBarHeight - 17) / 2;
- }
- },
- data: {
- pageTopBarTop: 0,
- pageTopBarHeight: 48,
- bottom: 0,
- h5StaticPath: config.h5StaticPath
- },
- methods: {
- emitIconClick(e) {
- if (this.iconClickedEmitId) {
- this.$emit(this.iconClickedEmitId);
- } else {
- wx.navigateBack();
- }
- }
- }
- });
- </script>
|