hCustom.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <!-- 自定义头部 -->
  3. <div class="">
  4. <div v-if="is_status_bar" :style="'height:'+StatusBar+'px'"></div>
  5. <view v-else :style="'height:'+CustomBar+'px'" >
  6. <view class="cu-custom title-size fixed fixed-top" :style="style" :class="[bgImage!=''?' text-white bg-img':'','']">
  7. <view
  8. class=" box flew flew-between w-100"
  9. :style="[{height:CustomBar-StatusBar+'px',top:StatusBar+'px'}]"
  10. >
  11. <view class="action flew-column flew flew-center " @tap="BackPage" v-if="isBack">
  12. <!-- <text class="cuIcon-back"></text>-->
  13. <slot name="backText"></slot>
  14. </view>
  15. <view class="content">
  16. <slot name="content"></slot>
  17. </view>
  18. <view class="right ">
  19. <slot name="right"></slot>
  20. </view>
  21. </view>
  22. </view>
  23. </view>
  24. </div>
  25. </template>
  26. <script>
  27. export default {
  28. name: "h_custom",
  29. data() {
  30. return {
  31. CustomBar: '',// 头部标题高度
  32. StatusBar: ''//标题内容距离顶部的距离
  33. }
  34. },
  35. computed: {
  36. style() {
  37. var StatusBar= this.StatusBar;
  38. var CustomBar= this.CustomBar;
  39. var bgImage = this.bgImage;
  40. var bgColor = this.bgColor;
  41. var textColor = this.textColor;
  42. var bgLinear = this.bgLinear;
  43. var style = `height:${CustomBar}px;color:${textColor};`;
  44. if (bgImage) {
  45. style = `${style}background-image:url(${bgImage});`;
  46. }
  47. if(bgColor){
  48. style = `${style}background-color:${bgColor};`;
  49. }
  50. if(bgLinear){
  51. style = `${style}background-image:${bgLinear};`;
  52. }
  53. return style
  54. }
  55. },
  56. props: {
  57. bgColor: {
  58. type: String,
  59. default: '#fff'
  60. },
  61. textColor: {
  62. type: String,
  63. default: '#000000'
  64. },
  65. isBack: {
  66. type: [Boolean, String],
  67. default: false
  68. },
  69. is_status_bar: {
  70. type: [Boolean, String],
  71. default: false
  72. },
  73. bgImage: {
  74. type: String,
  75. default: ''
  76. },
  77. circle: {
  78. type: [Boolean, String],
  79. default: false
  80. },
  81. bgLinear: {
  82. type: [ String],
  83. default: ''
  84. },
  85. },
  86. methods: {
  87. BackPage() {
  88. uni.navigateBack()
  89. },
  90. initTitleBar() {
  91. let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  92. this.StatusBar = statusBarHeight;
  93. this.CustomBar = statusBarHeight+45;
  94. }
  95. },
  96. mounted() {
  97. // let custom = uni.getMenuButtonBoundingClientRect();
  98. this.initTitleBar()
  99. }
  100. }
  101. </script>
  102. <style>
  103. </style>