navigation-bar.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <template>
  2. <view style="display: none;" />
  3. </template>
  4. <script>
  5. const attrs = [
  6. 'titleIcon',
  7. 'titleIconRadius',
  8. 'subtitleText',
  9. 'subtitleSize',
  10. 'subtitleColor',
  11. 'subtitleOverflow',
  12. 'titleAlign',
  13. 'backgroundImage',
  14. 'backgroundRepeat',
  15. 'blurEffect'
  16. ]
  17. export default {
  18. props: {
  19. title: {
  20. type: String,
  21. default: ''
  22. },
  23. titleIcon: {
  24. type: String,
  25. default: ''
  26. },
  27. titleIconRadius: {
  28. type: String,
  29. default: ''
  30. },
  31. subtitleText: {
  32. type: String,
  33. default: ''
  34. },
  35. subtitleSize: {
  36. type: String,
  37. default: ''
  38. },
  39. subtitleColor: {
  40. type: String,
  41. default: ''
  42. },
  43. subtitleOverflow: {
  44. type: String,
  45. default: ''
  46. },
  47. titleAlign: {
  48. type: String,
  49. default: ''
  50. },
  51. backgroundImage: {
  52. type: String,
  53. default: ''
  54. },
  55. backgroundRepeat: {
  56. type: String,
  57. default: ''
  58. },
  59. blurEffect: {
  60. type: String,
  61. default: ''
  62. },
  63. loading: {
  64. type: Boolean,
  65. default: false
  66. },
  67. frontColor: {
  68. type: String,
  69. default: '#ffffff'
  70. },
  71. backgroundColor: {
  72. type: String,
  73. default: '#000000'
  74. },
  75. colorAnimationDuration: {
  76. type: Number,
  77. default: 0
  78. },
  79. colorAnimationTimingFunc: {
  80. type: String,
  81. default: 'linear'
  82. }
  83. },
  84. created () {
  85. const pages = getCurrentPages()
  86. const page = pages[pages.length - 1]
  87. this.__$page = page
  88. this.$watch('title', () => {
  89. this.setNavigationBarTitle()
  90. })
  91. this.$watch('loading', () => {
  92. this.setNavigationBarLoading()
  93. })
  94. this.$watch(() => [
  95. this.frontColor,
  96. this.backgroundColor,
  97. this.colorAnimationDuration,
  98. this.colorAnimationTimingFunc
  99. ],
  100. () => {
  101. this.setNavigationBarColor()
  102. })
  103. // #ifdef APP-PLUS
  104. this.__$webview = page.$getAppWebview()
  105. attrs.forEach(key => {
  106. const titleNView = {}
  107. if (this[key] || this[key].length > 0) {
  108. titleNView[key] = this[key]
  109. }
  110. this.setTitleNView(titleNView)
  111. this.$watch(key, (val) => {
  112. const titleStyle = {}
  113. titleStyle[key] = val
  114. this.setTitleNView(titleStyle)
  115. })
  116. })
  117. // #endif
  118. },
  119. beforeMount () {
  120. this.title && this.setNavigationBarTitle()
  121. this.setNavigationBarLoading()
  122. this.setNavigationBarColor()
  123. },
  124. methods: {
  125. setNavigationBarTitle () {
  126. uni.setNavigationBarTitle({
  127. __page__: this.__$page,
  128. title: this.title
  129. })
  130. },
  131. setNavigationBarLoading () {
  132. uni[(this.loading ? 'show' : 'hide') + 'NavigationBarLoading']({
  133. __page__: this.__$page
  134. })
  135. },
  136. setNavigationBarColor () {
  137. uni.setNavigationBarColor({
  138. __page__: this.__$page,
  139. frontColor: this.frontColor,
  140. backgroundColor: this.backgroundColor,
  141. animation: {
  142. duration: this.colorAnimationDuration,
  143. timingFunc: this.colorAnimationTimingFunc
  144. }
  145. })
  146. },
  147. setTitleNView (titleNView) {
  148. const webview = this.__$webview
  149. const style = webview.getStyle()
  150. if (style && style.titleNView) {
  151. webview.setStyle({
  152. titleNView: titleNView
  153. })
  154. }
  155. }
  156. }
  157. }
  158. </script>