u-navbar.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <view class="u-navbar">
  3. <view
  4. class="u-navbar__placeholder"
  5. v-if="fixed && placeholder"
  6. :style="{
  7. height: $u.addUnit($u.getPx(height) + $u.sys().statusBarHeight),
  8. }"
  9. ></view>
  10. <view :class="[fixed && 'u-navbar--fixed']">
  11. <u-status-bar
  12. v-if="safeAreaInsetTop"
  13. :bgColor="bgColor"
  14. ></u-status-bar>
  15. <view
  16. class="u-navbar__content"
  17. :class="[border && 'u-border-bottom']"
  18. :style="{
  19. height: $u.addUnit(height),
  20. backgroundColor: bgColor,
  21. }"
  22. >
  23. <view
  24. class="u-navbar__content__left"
  25. hover-class="u-navbar__content__left--hover"
  26. hover-start-time="150"
  27. @tap="leftClick"
  28. >
  29. <slot name="left">
  30. <u-icon
  31. v-if="leftIcon"
  32. :name="leftIcon"
  33. :size="leftIconSize"
  34. :color="leftIconColor"
  35. ></u-icon>
  36. <text
  37. v-if="leftText"
  38. :style="{
  39. color: leftIconColor
  40. }"
  41. class="u-navbar__content__left__text"
  42. >{{ leftText }}
  43. </text>
  44. </slot>
  45. </view>
  46. <slot name="center">
  47. <text
  48. class="u-line-1 u-navbar__content__title"
  49. :style="{
  50. width: $u.addUnit(titleWidth)
  51. }"
  52. >{{ title }}
  53. </text>
  54. </slot>
  55. <view
  56. class="u-navbar__content__right"
  57. v-if="$slots.right || rightIcon || rightText"
  58. @tap="rightClick"
  59. >
  60. <slot name="right">
  61. <u-icon
  62. v-if="rightIcon"
  63. :name="rightIcon"
  64. size="20"
  65. ></u-icon>
  66. <text
  67. v-if="rightText"
  68. class="u-navbar__content__right__text"
  69. >{{ rightText }}
  70. </text>
  71. </slot>
  72. </view>
  73. </view>
  74. </view>
  75. </view>
  76. </template>
  77. <script>
  78. import props from './props.js';
  79. /**
  80. * Navbar 自定义导航栏
  81. * @description 此组件一般用于在特殊情况下,需要自定义导航栏的时候用到,一般建议使用uni-app带的导航栏。
  82. * @tutorial https://www.uviewui.com/components/navbar.html
  83. * @property {Boolean} safeAreaInsetTop 是否开启顶部安全区适配 (默认 true )
  84. * @property {Boolean} placeholder 固定在顶部时,是否生成一个等高元素,以防止塌陷 (默认 false )
  85. * @property {Boolean} fixed 导航栏是否固定在顶部 (默认 false )
  86. * @property {Boolean} border 导航栏底部是否显示下边框 (默认 false )
  87. * @property {String} leftIcon 左边返回图标的名称,只能为uView自带的图标 (默认 'arrow-left' )
  88. * @property {String} leftText 左边的提示文字
  89. * @property {String} rightText 右边的提示文字
  90. * @property {String} rightIcon 右边返回图标的名称,只能为uView自带的图标
  91. * @property {String} title 导航栏标题,如设置为空字符,将会隐藏标题占位区域
  92. * @property {String} bgColor 导航栏背景设置 (默认 '#ffffff' )
  93. * @property {String | Number} titleWidth 导航栏标题的最大宽度,内容超出会以省略号隐藏 (默认 '400rpx' )
  94. * @property {String | Number} height 导航栏高度(不包括状态栏高度在内,内部自动加上)(默认 '44px' )
  95. * @property {String | Number} leftIconSize 左侧返回图标的大小(默认 20px )
  96. * @property {String | Number} leftIconColor 左侧返回图标的颜色(默认 #303133 )
  97. * @property {Boolean} autoBack 点击左侧区域(返回图标),是否自动返回上一页(默认 false )
  98. * @event {Function} leftClick 点击左侧区域
  99. * @event {Function} rightClick 点击右侧区域
  100. * @example <u-navbar title="剑未配妥,出门已是江湖" left-text="返回" right-text="帮助" @click-left="onClickBack" @click-right="onClickRight"></u-navbar>
  101. */
  102. export default {
  103. name: 'u-navbar',
  104. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  105. data() {
  106. return {}
  107. },
  108. methods: {
  109. // 点击左侧区域
  110. leftClick() {
  111. // 如果配置了autoBack,自动返回上一页
  112. this.$emit('leftClick')
  113. if (this.autoBack) {
  114. uni.navigateBack()
  115. }
  116. },
  117. // 点击右侧区域
  118. rightClick() {
  119. this.$emit('rightClick')
  120. },
  121. }
  122. }
  123. </script>
  124. <style lang="scss" scoped>
  125. @import "../../libs/css/components.scss";
  126. .u-navbar {
  127. &--fixed {
  128. position: fixed;
  129. left: 0;
  130. right: 0;
  131. top: 0;
  132. z-index: 11;
  133. }
  134. &__content {
  135. @include flex(row);
  136. align-items: center;
  137. height: 44px;
  138. background-color: #9acafc;
  139. position: relative;
  140. justify-content: center;
  141. &__left,
  142. &__right {
  143. padding: 0 13px;
  144. position: absolute;
  145. top: 0;
  146. bottom: 0;
  147. @include flex(row);
  148. align-items: center;
  149. }
  150. &__left {
  151. left: 0;
  152. &--hover {
  153. opacity: 0.7;
  154. }
  155. &__text {
  156. font-size: 15px;
  157. margin-left: 3px;
  158. }
  159. }
  160. &__title {
  161. text-align: center;
  162. font-size: 16px;
  163. color: $u-main-color;
  164. }
  165. &__right {
  166. right: 0;
  167. &__txet {
  168. font-size: 15px;
  169. margin-left: 3px;
  170. }
  171. }
  172. }
  173. }
  174. </style>