uni-nav-bar.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <template>
  2. <view class="uni-navbar">
  3. <view
  4. :class="{'uni-navbar--fixed': fixed,'uni-navbar--shadow':border,'uni-navbar--border':border}"
  5. :style="{'background-color':backgroundColor}"
  6. class="uni-navbar__content">
  7. <uni-status-bar v-if="statusBar"/>
  8. <view
  9. :style="{color:color}"
  10. class="uni-navbar__header uni-navbar__content_view">
  11. <view
  12. class="uni-navbar__header-btns uni-navbar__content_view"
  13. @tap="onClickLeft">
  14. <view
  15. v-if="leftIcon.length"
  16. class="uni-navbar__content_view">
  17. <uni-icons
  18. :type="leftIcon"
  19. :color="color"
  20. size="24"/>
  21. </view>
  22. <view
  23. v-if="leftText.length"
  24. :class="{'uni-navbar-btn-icon-left':!leftIcon.length}"
  25. class="uni-navbar-btn-text uni-navbar__content_view">{{ leftText }}</view>
  26. <slot name="left"/>
  27. </view>
  28. <view class="uni-navbar__header-container uni-navbar__content_view">
  29. <view
  30. v-if="title.length"
  31. class="uni-navbar__header-container-inner uni-navbar__content_view">{{ title }}</view>
  32. <!-- 标题插槽 -->
  33. <slot/>
  34. </view>
  35. <view
  36. :class="title.length?'uni-navbar__header-btns-right':''"
  37. class="uni-navbar__header-btns uni-navbar__content_view"
  38. @tap="onClickRight">
  39. <view
  40. v-if="rightIcon.length"
  41. class="uni-navbar__content_view">
  42. <uni-icons
  43. :type="rightIcon"
  44. :color="color"
  45. size="24"/>
  46. </view>
  47. <!-- 优先显示图标 -->
  48. <view
  49. v-if="rightText.length&&!rightIcon.length"
  50. class="uni-navbar-btn-text uni-navbar__content_view">{{ rightText }}</view>
  51. <slot name="right"/>
  52. </view>
  53. </view>
  54. </view>
  55. <view
  56. v-if="fixed"
  57. class="uni-navbar__placeholder">
  58. <uni-status-bar v-if="statusBar"/>
  59. <view class="uni-navbar__placeholder-view"/>
  60. </view>
  61. </view>
  62. </template>
  63. <script>
  64. import uniStatusBar from '../uni-status-bar/uni-status-bar.vue'
  65. import uniIcons from '../uni-icons/uni-icons.vue'
  66. export default {
  67. name: 'UniNavBar',
  68. components: {
  69. uniStatusBar,
  70. uniIcons
  71. },
  72. props: {
  73. title: {
  74. type: String,
  75. default: ''
  76. },
  77. leftText: {
  78. type: String,
  79. default: ''
  80. },
  81. rightText: {
  82. type: String,
  83. default: ''
  84. },
  85. leftIcon: {
  86. type: String,
  87. default: ''
  88. },
  89. rightIcon: {
  90. type: String,
  91. default: ''
  92. },
  93. fixed: {
  94. type: [Boolean, String],
  95. default: false
  96. },
  97. color: {
  98. type: String,
  99. default: '#000000'
  100. },
  101. backgroundColor: {
  102. type: String,
  103. default: '#FFFFFF'
  104. },
  105. statusBar: {
  106. type: [Boolean, String],
  107. default: false
  108. },
  109. shadow: {
  110. type: [String, Boolean],
  111. default: true
  112. },
  113. border: {
  114. type: [String, Boolean],
  115. default: true
  116. }
  117. },
  118. methods: {
  119. onClickLeft () {
  120. this.$emit('click-left')
  121. },
  122. onClickRight () {
  123. this.$emit('click-right')
  124. }
  125. }
  126. }
  127. </script>
  128. <style lang="scss">
  129. $nav-height:44px;
  130. .uni-navbar {
  131. &__content {
  132. display: block;
  133. position: relative;
  134. width: 100%;
  135. background-color: $uni-bg-color;
  136. overflow: hidden;
  137. .uni-navbar__content_view {
  138. // line-height: $nav-height;
  139. display: flex;
  140. align-items: center;
  141. }
  142. }
  143. &__header {
  144. display: flex;
  145. flex-direction: row;
  146. width: 100%;
  147. height: $nav-height;
  148. line-height: $nav-height;
  149. font-size: 16px;
  150. &-btns {
  151. display: inline-flex;
  152. flex-wrap: nowrap;
  153. flex-shrink: 0;
  154. width: 120upx;
  155. padding: 0 12upx;
  156. &:first-child {
  157. padding-left: 0;
  158. }
  159. &:last-child {
  160. width: 60upx;
  161. }
  162. &-right:last-child{
  163. width: 120rpx;
  164. text-align: right;
  165. flex-direction: row-reverse;
  166. }
  167. }
  168. &-container {
  169. width: 100%;
  170. margin: 0 10upx;
  171. &-inner {
  172. width: 100%;
  173. display: flex;
  174. justify-content: center;
  175. font-size: 30upx;
  176. // padding-right: 60upx;
  177. }
  178. }
  179. }
  180. &__placeholder {
  181. &-view {
  182. height: $nav-height;
  183. }
  184. }
  185. &--fixed {
  186. position: fixed;
  187. z-index: 998;
  188. }
  189. &--shadow {
  190. box-shadow: 0 1px 6px #ccc;
  191. }
  192. &--border:after {
  193. position: absolute;
  194. z-index: 3;
  195. bottom: 0;
  196. left: 0;
  197. right: 0;
  198. height: 1px;
  199. content: '';
  200. -webkit-transform: scaleY(.5);
  201. transform: scaleY(.5);
  202. background-color: $uni-border-color;
  203. }
  204. }
  205. </style>