my-nav.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <template>
  2. <view>
  3. <view class="cu-custom" :style="[{height:CustomBar + 'px',zIndex:zIndex}]">
  4. <view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
  5. <view class="action" @tap="BackPage" v-if="isBack">
  6. <text class="cuIcon-back"></text>
  7. <slot name="backText"></slot>
  8. </view>
  9. <view class="content" :style="[{top:StatusBar + 'px'}]">
  10. <slot name="content"></slot>
  11. </view>
  12. <view class="action">
  13. <slot name="right"></slot>
  14. </view>
  15. </view>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. StatusBar: this.StatusBar,
  24. CustomBar: this.CustomBar
  25. };
  26. },
  27. name: 'cu-custom',
  28. computed: {
  29. style() {
  30. var StatusBar= this.StatusBar;
  31. var CustomBar= this.CustomBar;
  32. var bgImage = this.bgImage;
  33. var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
  34. if (this.bgImage) {
  35. style = `${style}background-image:url(${bgImage});`;
  36. }
  37. return style
  38. }
  39. },
  40. props: {
  41. bgColor: {
  42. type: String,
  43. default: ''
  44. },
  45. isBack: {
  46. type: [Boolean, String],
  47. default: false
  48. },
  49. bgImage: {
  50. type: String,
  51. default: ''
  52. },
  53. zIndex:{
  54. type: String,
  55. default: '10'
  56. },
  57. backRouterName:{
  58. type: String,
  59. default: ''
  60. }
  61. },
  62. methods: {
  63. BackPage() {
  64. if(!this.backRouterName){
  65. uni.navigateBack({
  66. delta: 1
  67. });
  68. }else{
  69. this.$Router.replace({name:this.backRouterName})
  70. }
  71. }
  72. }
  73. }
  74. </script>
  75. <style>
  76. </style>