bar-title.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <template>
  2. <view class="zaiui-bar-title-box" :style="isWechatBrowser ? 'display: none;' : ''">
  3. <view class="cu-bar" :class="[fixed?'fixed':'', shadow?'':'no-shadow', bgColor]">
  4. <view class="action" @tap="BackPage" v-if="isBack">
  5. <text class="cuIcon-back"/>
  6. <text>{{backText}}</text>
  7. </view>
  8. <view class="action" @tap="leftTap" v-if="!isBack">
  9. <slot name="left"/>
  10. </view>
  11. <view class="content" @tap="contentTap">
  12. <slot name="content"/>
  13. </view>
  14. <view class="action" @tap="rightTap">
  15. <!--小程序端不显示-->
  16. <!-- #ifndef MP -->
  17. <slot name="right"/>
  18. <!-- #endif -->
  19. </view>
  20. </view>
  21. <!--占位的-->
  22. <view class="zaiui-seat-height" v-if="fixed"/>
  23. </view>
  24. </template>
  25. <script>
  26. export default {
  27. name: 'bar-title',
  28. props: {
  29. bgColor: {
  30. type: String,
  31. default: ''
  32. },
  33. isBack: {
  34. type: Boolean,
  35. default: true
  36. },
  37. backText: {
  38. type: String,
  39. default: ""
  40. },
  41. fixed: {
  42. type: Boolean,
  43. default: true
  44. },
  45. shadow: {
  46. type: Boolean,
  47. default: false
  48. },
  49. title: {
  50. type: String,
  51. default: ''
  52. }
  53. },
  54. data() {
  55. return {
  56. isWechatBrowser: false
  57. }
  58. },
  59. methods: {
  60. BackPage() {
  61. uni.navigateBack();
  62. },
  63. leftTap() {
  64. this.$emit('leftTap');
  65. },
  66. contentTap() {
  67. this.$emit('contentTap');
  68. },
  69. rightTap() {
  70. this.$emit('rightTap');
  71. }
  72. },
  73. created() {
  74. uni.setNavigationBarTitle({
  75. title: this.title
  76. })
  77. this.isWechatBrowser = navigator.userAgent.toLocaleLowerCase().indexOf('micromessenger') > 0
  78. }
  79. }
  80. </script>
  81. <style lang="scss" scoped>
  82. .zaiui-bar-title-box {
  83. .cu-bar {
  84. padding-top: var(--status-bar-height);
  85. min-height: calc(var(--status-bar-height) + 101upx);
  86. .content {
  87. top: var(--status-bar-height);
  88. .cu-tag {
  89. position: relative;
  90. top: -2.72upx;
  91. padding: 0 5.45upx;
  92. text {
  93. position: relative;
  94. top: 2upx;
  95. }
  96. }
  97. }
  98. }
  99. .cu-bar.fixed.no-shadow {
  100. box-shadow: inherit;
  101. }
  102. .cu-bar.bg-white {
  103. color: #333333;
  104. }
  105. .zaiui-seat-height {
  106. width: 100%;
  107. height: calc(var(--status-bar-height) + 101upx);
  108. }
  109. }
  110. </style>