nav-bar.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <template>
  2. <uni-nav-bar :title="title" :left-text='leftText' :right-text='rightText' :left-icon="goBack ? leftIcon : ''"
  3. :right-icon="rightIcon" :color="color" :backgroundColor="backgroundColor" :fixed="fixed" :statusBar="statusBar"
  4. :border="border" :shadow="shadow" :height="height" :dark="dark" :leftWidth="leftWidth" :rightWidth="rightWidth"
  5. :stat="stat" @clickRight="onClickRight" @clickLeft="onClickLeft" @clickTitle="onClickTitle">
  6. <template v-slot:default>
  7. <slot name="default" />
  8. </template>
  9. <template v-slot:left>
  10. <slot name="left" />
  11. </template>
  12. <template v-slot:right>
  13. <slot name="right" />
  14. </template>
  15. </uni-nav-bar>
  16. </template>
  17. <script>
  18. // https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html
  19. const app = getApp().globalData;
  20. export default {
  21. name: "nav-bar",
  22. props: {
  23. // 是否显示返回按钮
  24. goBack: {
  25. type: Boolean,
  26. default: false
  27. },
  28. title: {
  29. type: String,
  30. default: ''
  31. },
  32. leftText: {
  33. type: String,
  34. default: ''
  35. },
  36. rightText: {
  37. type: String,
  38. default: ''
  39. },
  40. leftIcon: {
  41. type: String,
  42. default: 'back'
  43. },
  44. rightIcon: {
  45. type: String,
  46. default: ''
  47. },
  48. color: {
  49. type: String,
  50. default: app.navBarFsColor || '#000000',
  51. },
  52. backgroundColor: {
  53. type: String,
  54. default: app.navBarBgColor || '#FFFFFF'
  55. },
  56. fixed: {
  57. type: Boolean,
  58. default: true
  59. },
  60. statusBar: {
  61. type: Boolean,
  62. default: true
  63. },
  64. shadow: {
  65. type: Boolean,
  66. default: false
  67. },
  68. border: {
  69. type: Boolean,
  70. default: false
  71. },
  72. height: {
  73. type: [Number, String],
  74. default: app.navBarHeight || 44,
  75. },
  76. dark: {
  77. type: Boolean,
  78. default: false
  79. },
  80. leftWidth: {
  81. type: [Number, String],
  82. default: "120rpx",
  83. },
  84. rightWidth: {
  85. type: [Number, String],
  86. default: "120rpx",
  87. },
  88. stat: {
  89. type: Boolean,
  90. default: false,
  91. },
  92. // 返回配置
  93. backCallBack: {
  94. type: Function,
  95. default: null,
  96. },
  97. // tab 页面
  98. backTabPage: {
  99. type: String,
  100. default: '',
  101. },
  102. // 需要返回的普通页面
  103. backPage: {
  104. type: String,
  105. default: '',
  106. },
  107. },
  108. // :backgroundColor="navBarBgColor" :color="navBarFsColor"
  109. data() {
  110. return {
  111. };
  112. },
  113. methods: {
  114. onClickLeft() {
  115. if (!this.goBack) return
  116. console.log('点击 nav 左侧')
  117. try {
  118. const pages = getCurrentPages();
  119. const path = pages[pages.length - 1].route;
  120. // 自定义返回事件
  121. if (this.backCallBack) {
  122. this.backCallBack()
  123. } else if (this.backTabPage) {
  124. // 需要返回的 Tab 页面
  125. uni.switchTab({
  126. url: this.backTabPage,
  127. fail: () => {
  128. throw new Error()
  129. }
  130. });
  131. } else if (this.backPage) {
  132. // 需要返回的 普通 页面
  133. uni.redirectTo({
  134. url: this.backPage,
  135. fail: () => {
  136. throw new Error()
  137. }
  138. });
  139. } else if (path === 'pages/login/index') {
  140. // 如果是登录页面,直接返回首页
  141. throw new Error()
  142. } else if (pages.length > 1) {
  143. // 返回上一页
  144. uni.navigateBack({
  145. fail: () => {
  146. throw new Error()
  147. }
  148. });
  149. } else {
  150. // #ifdef H5
  151. history.back();
  152. // #endif
  153. throw new Error()
  154. }
  155. } catch (e) {
  156. // 返回过程中出错,直接返回首页
  157. uni.reLaunch({
  158. url: '/pages/home'
  159. });
  160. }
  161. },
  162. onClickRight() {
  163. console.log('点击 nav 右侧')
  164. this.$emit("clickRight");
  165. },
  166. onClickTitle() {
  167. this.$emit("clickTitle");
  168. }
  169. }
  170. }
  171. </script>
  172. <style lang="scss" scoped>
  173. ::v-deep .uni-navbar__content{
  174. // background-color: red ;
  175. // background: url("@/static/images/page-bg.png") no-repeat center center;
  176. // background-size: 100% 100%;
  177. }
  178. </style>