page-top-bar.wpy 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <style lang="less">
  2. .component-container {
  3. position: fixed;
  4. top: 0;
  5. left: 0;
  6. width: 100%;
  7. z-index: 444;
  8. .page-top-bar {
  9. position: relative;
  10. .title {
  11. position: absolute;
  12. width: 100%;
  13. bottom: 0;
  14. display: flex;
  15. align-items: center;
  16. justify-content: center;
  17. font-size: 18px;
  18. color: #ffffff;
  19. }
  20. .icon {
  21. position: absolute;
  22. left: 17px;
  23. bottom: 0;
  24. line-height: 17px;
  25. width: 87px;
  26. .icon_define {
  27. width: 9px;
  28. height: 17px;
  29. }
  30. }
  31. }
  32. }
  33. </style>
  34. <template>
  35. <div class="component-container"
  36. :style="{'padding-top': pageTopBarTop + 'px','padding-bottom': pageTopBarBottom + 'px', 'height': pageTopBarHeight + 'px', 'background-color': bgColor}">
  37. <div class="page-top-bar"
  38. :style="{height: pageTopBarHeight + 'px'}">
  39. <div class="title"
  40. :style="{'color': titleColor, height: pageTopBarHeight + 'px'}">
  41. <span v-show="title">{{title}}</span>
  42. </div>
  43. <div v-if="icon"
  44. class="icon"
  45. v-on:click="emitIconClick"
  46. :style="{bottom: bottom+'px'}"
  47. :class="{'white': iconBg === 'white'}">
  48. <image class="icon_define"
  49. src="{{icon}}" />
  50. </div>
  51. </div>
  52. </div>
  53. </template>
  54. <script>
  55. import wepy from '@wepy/core';
  56. import config from '@/config';
  57. wepy.component({
  58. props: {
  59. title: String,
  60. iconType: String,
  61. icon: {
  62. type: String,
  63. default: config.h5StaticPath + '/page-top-bar/return-icon.svg'
  64. },
  65. // white
  66. iconBg: String,
  67. bgColor: {
  68. type: String,
  69. default: 'transparent'
  70. },
  71. titleColor: {
  72. type: String,
  73. default: '#fff'
  74. },
  75. pageTopBarBottom: {
  76. type: Number,
  77. default: 0
  78. },
  79. iconClickedEmitId: String
  80. },
  81. ready() {
  82. let menuButtonBoundingClientRect = wx.getMenuButtonBoundingClientRect();
  83. this.pageTopBarHeight = menuButtonBoundingClientRect.height;
  84. // 加上右上角胶囊按钮的边框2
  85. this.pageTopBarTop = menuButtonBoundingClientRect.top;
  86. if (!this.iconBg) {
  87. this.bottom = (this.pageTopBarHeight - 17) / 2;
  88. }
  89. },
  90. data: {
  91. pageTopBarTop: 0,
  92. pageTopBarHeight: 48,
  93. bottom: 0,
  94. h5StaticPath: config.h5StaticPath
  95. },
  96. methods: {
  97. emitIconClick(e) {
  98. if (this.iconClickedEmitId) {
  99. this.$emit(this.iconClickedEmitId);
  100. } else {
  101. wx.navigateBack();
  102. }
  103. }
  104. }
  105. });
  106. </script>