学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

186 lines
5.0 KiB

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