You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

CustomHeader.vue 1.1KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <!-- <view class="custom-header" :style="{'background-color':backgroundColors}"> -->
  3. <view class="custom-header">
  4. <image v-show="back" @click="goBack()" class="header-left" src="../static/image/icon-back.png">
  5. </image>
  6. <view :style="back?'margin-right: 30px;':''" class="header-title">
  7. {{ title }}
  8. </view>
  9. <view class="header-right">
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. props: {
  16. title: {
  17. type: String,
  18. default: '',
  19. },
  20. back: {
  21. type: Boolean,
  22. default: true,
  23. },
  24. backgroundColors: {
  25. type: String,
  26. default: '#FFF',
  27. },
  28. },
  29. // 其他配置和逻辑
  30. methods: {
  31. goBack() {
  32. window.history.back(); // 返回上一级页面
  33. },
  34. },
  35. }
  36. </script>
  37. <style scoped>
  38. .custom-header {
  39. display: flex;
  40. flex-direction: row;
  41. justify-content: space-between;
  42. align-items: center;
  43. z-index: 999;
  44. height: 45px;
  45. }
  46. .header-left {
  47. width: 35px;
  48. height: 35px;
  49. }
  50. .header-title {
  51. text-align: center;
  52. width: 100%;
  53. font-size: 32rpx;
  54. font-weight: bold;
  55. position: relative;
  56. }
  57. /* 其他样式 */
  58. </style>