uni-nav-bar.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. <template>
  2. <view class="uni-navbar">
  3. <view :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }" :style="{ 'background-color': backgroundColor }" class="uni-navbar__content">
  4. <uni-status-bar v-if="statusBar" />
  5. <view :style="{ color: color,backgroundColor: backgroundColor }" class="uni-navbar__header uni-navbar__content_view">
  6. <view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left uni-navbar__content_view">
  7. <view class="uni-navbar__content_view" v-if="leftIcon.length">
  8. <uni-icons :color="color" :type="leftIcon" size="24" />
  9. </view>
  10. <view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length }" class="uni-navbar-btn-text uni-navbar__content_view" v-if="leftText.length">
  11. <text :style="{ color: color, fontSize: '14px' }">{{ leftText }}</text>
  12. </view>
  13. <slot name="left" />
  14. </view>
  15. <view class="uni-navbar__header-container uni-navbar__content_view" @tap="onClickTitle">
  16. <view class="uni-navbar__header-container-inner uni-navbar__content_view" v-if="title.length">
  17. <text class="uni-nav-bar-text" :style="{color: color }">{{ title }}</text>
  18. </view>
  19. <!-- 标题插槽 -->
  20. <slot />
  21. </view>
  22. <view :class="title.length ? 'uni-navbar__header-btns-right' : ''" @tap="onClickRight" class="uni-navbar__header-btns uni-navbar__content_view">
  23. <view class="uni-navbar__content_view" v-if="rightIcon.length">
  24. <uni-icons :color="color" :type="rightIcon" size="24" />
  25. </view>
  26. <!-- 优先显示图标 -->
  27. <view class="uni-navbar-btn-text uni-navbar__content_view" v-if="rightText.length && !rightIcon.length">
  28. <text class="uni-nav-bar-right-text">{{ rightText }}</text>
  29. </view>
  30. <slot name="right" />
  31. </view>
  32. </view>
  33. </view>
  34. <view class="uni-navbar__placeholder" v-if="fixed">
  35. <uni-status-bar v-if="statusBar" />
  36. <view class="uni-navbar__placeholder-view" />
  37. </view>
  38. </view>
  39. </template>
  40. <script>
  41. import uniStatusBar from "../uni-status-bar/uni-status-bar.vue";
  42. import uniIcons from "../uni-icons/uni-icons.vue";
  43. /**
  44. * NavBar 自定义导航栏
  45. * @description 导航栏组件,主要用于头部导航
  46. * @tutorial https://ext.dcloud.net.cn/plugin?id=52
  47. * @property {String} title 标题文字
  48. * @property {String} leftText 左侧按钮文本
  49. * @property {String} rightText 右侧按钮文本
  50. * @property {String} leftIcon 左侧按钮图标(图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性)
  51. * @property {String} rightIcon 右侧按钮图标(图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性)
  52. * @property {String} color 图标和文字颜色
  53. * @property {String} backgroundColor 导航栏背景颜色
  54. * @property {Boolean} fixed = [true|false] 是否固定顶部
  55. * @property {Boolean} statusBar = [true|false] 是否包含状态栏
  56. * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
  57. * @event {Function} clickLeft 左侧按钮点击时触发
  58. * @event {Function} clickRight 右侧按钮点击时触发
  59. * @event {Function} clickTitle 中间标题点击时触发
  60. */
  61. export default {
  62. name: "UniNavBar",
  63. components: {
  64. uniStatusBar,
  65. uniIcons
  66. },
  67. props: {
  68. title: {
  69. type: String,
  70. default: ""
  71. },
  72. leftText: {
  73. type: String,
  74. default: ""
  75. },
  76. rightText: {
  77. type: String,
  78. default: ""
  79. },
  80. leftIcon: {
  81. type: String,
  82. default: ""
  83. },
  84. rightIcon: {
  85. type: String,
  86. default: ""
  87. },
  88. fixed: {
  89. type: [Boolean, String],
  90. default: false
  91. },
  92. color: {
  93. type: String,
  94. default: "#000000"
  95. },
  96. backgroundColor: {
  97. type: String,
  98. default: "#FFFFFF"
  99. },
  100. statusBar: {
  101. type: [Boolean, String],
  102. default: false
  103. },
  104. shadow: {
  105. type: [Boolean, String],
  106. default: false
  107. },
  108. border: {
  109. type: [Boolean, String],
  110. default: true
  111. }
  112. },
  113. mounted() {
  114. if (uni.report && this.title !== '') {
  115. uni.report('title', this.title)
  116. }
  117. },
  118. methods: {
  119. onClickLeft() {
  120. this.$emit("clickLeft");
  121. },
  122. onClickRight() {
  123. this.$emit("clickRight");
  124. },
  125. onClickTitle() {
  126. this.$emit("clickTitle");
  127. }
  128. }
  129. };
  130. </script>
  131. <style scoped>
  132. .uni-nav-bar-text {
  133. /* #ifdef APP-PLUS */
  134. font-size: 34rpx;
  135. /* #endif */
  136. /* #ifndef APP-PLUS */
  137. font-size: 16px;
  138. /* #endif */
  139. }
  140. .uni-nav-bar-right-text {
  141. font-size: 14px;
  142. }
  143. .uni-navbar__content {
  144. position: relative;
  145. background-color: #ffffff;
  146. overflow: hidden;
  147. width: 750rpx;
  148. }
  149. .uni-navbar__content_view {
  150. /* #ifndef APP-NVUE */
  151. display: flex;
  152. /* #endif */
  153. align-items: center;
  154. flex-direction: row;
  155. }
  156. .uni-navbar__header {
  157. /* #ifndef APP-NVUE */
  158. display: flex;
  159. /* #endif */
  160. flex-direction: row;
  161. height: 44px;
  162. line-height: 44px;
  163. font-size: 16px;
  164. }
  165. .uni-navbar__header-btns {
  166. /* #ifndef APP-NVUE */
  167. display: flex;
  168. /* #endif */
  169. flex-wrap: nowrap;
  170. width: 120rpx;
  171. padding: 0 6px;
  172. justify-content: center;
  173. align-items: center;
  174. }
  175. .uni-navbar__header-btns-left {
  176. /* #ifndef APP-NVUE */
  177. display: flex;
  178. /* #endif */
  179. width: 150rpx;
  180. justify-content: flex-start;
  181. }
  182. .uni-navbar__header-btns-right {
  183. /* #ifndef APP-NVUE */
  184. display: flex;
  185. /* #endif */
  186. width: 150rpx;
  187. padding-right: 30rpx;
  188. justify-content: flex-end;
  189. }
  190. .uni-navbar__header-container {
  191. flex: 1;
  192. }
  193. .uni-navbar__header-container-inner {
  194. /* #ifndef APP-NVUE */
  195. display: flex;
  196. /* #endif */
  197. flex: 1;
  198. align-items: center;
  199. justify-content: center;
  200. font-size: 14px;
  201. }
  202. .uni-navbar__placeholder-view {
  203. height: 44px;
  204. }
  205. .uni-navbar--fixed {
  206. position: fixed;
  207. z-index: 998;
  208. }
  209. .uni-navbar--shadow {
  210. /* #ifndef APP-NVUE */
  211. box-shadow: 0 1px 6px #ccc;
  212. /* #endif */
  213. }
  214. .uni-navbar--border {
  215. border-bottom-width: 1rpx;
  216. border-bottom-style: solid;
  217. border-bottom-color: #e5e5e5;
  218. }
  219. </style>