123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222 |
- <template>
- <view class="uni-navbar">
- <view
- :class="{'uni-navbar--fixed': fixed,'uni-navbar--shadow':border,'uni-navbar--border':border}"
- :style="{'background-color':backgroundColor}"
- class="uni-navbar__content">
- <uni-status-bar v-if="statusBar"/>
- <view
- :style="{color:color}"
- class="uni-navbar__header uni-navbar__content_view">
- <view
- class="uni-navbar__header-btns uni-navbar__content_view"
- @tap="onClickLeft">
- <view
- v-if="leftIcon.length"
- class="uni-navbar__content_view">
- <uni-icons
- :type="leftIcon"
- :color="color"
- size="24"/>
- </view>
- <view
- v-if="leftText.length"
- :class="{'uni-navbar-btn-icon-left':!leftIcon.length}"
- class="uni-navbar-btn-text uni-navbar__content_view">{{ leftText }}</view>
- <slot name="left"/>
- </view>
- <view class="uni-navbar__header-container uni-navbar__content_view">
- <view
- v-if="title.length"
- class="uni-navbar__header-container-inner uni-navbar__content_view">{{ title }}</view>
- <!-- 标题插槽 -->
- <slot/>
- </view>
- <view
- :class="title.length?'uni-navbar__header-btns-right':''"
- class="uni-navbar__header-btns uni-navbar__content_view"
- @tap="onClickRight">
- <view
- v-if="rightIcon.length"
- class="uni-navbar__content_view">
- <uni-icons
- :type="rightIcon"
- :color="color"
- size="24"/>
- </view>
- <!-- 优先显示图标 -->
- <view
- v-if="rightText.length&&!rightIcon.length"
- class="uni-navbar-btn-text uni-navbar__content_view">{{ rightText }}</view>
- <slot name="right"/>
- </view>
- </view>
- </view>
- <view
- v-if="fixed"
- class="uni-navbar__placeholder">
- <uni-status-bar v-if="statusBar"/>
- <view class="uni-navbar__placeholder-view"/>
- </view>
- </view>
- </template>
- <script>
- import uniStatusBar from '../uni-status-bar/uni-status-bar.vue'
- import uniIcons from '../uni-icons/uni-icons.vue'
- export default {
- name: 'UniNavBar',
- components: {
- uniStatusBar,
- uniIcons
- },
- props: {
- title: {
- type: String,
- default: ''
- },
- leftText: {
- type: String,
- default: ''
- },
- rightText: {
- type: String,
- default: ''
- },
- leftIcon: {
- type: String,
- default: 'left-nav'
- },
- rightIcon: {
- type: String,
- default: ''
- },
- fixed: {
- type: [Boolean, String],
- default: false
- },
- color: {
- type: String,
- default: '#000000'
- },
- backgroundColor: {
- type: String,
- default: '#FFFFFF'
- },
- statusBar: {
- type: [Boolean, String],
- default: false
- },
- shadow: {
- type: [String, Boolean],
- default: true
- },
- border: {
- type: [String, Boolean],
- default: true
- }
- },
- methods: {
- onClickLeft () {
- this.$emit('click-left')
- },
- onClickRight () {
- this.$emit('click-right')
- }
- }
- }
- </script>
- <style lang="scss">
- $nav-height:44px;
- .uni-navbar {
- &__content {
- display: block;
- position: relative;
- width: 100%;
- background-color: $uni-bg-color;
- overflow: hidden;
- .uni-navbar__content_view {
- // line-height: $nav-height;
- display: flex;
- align-items: center;
- }
- }
- &__header {
- display: flex;
- flex-direction: row;
- width: 100%;
- height: $nav-height;
- line-height: $nav-height;
- font-size: 16px;
- &-btns {
- display: inline-flex;
- flex-wrap: nowrap;
- flex-shrink: 0;
- width: 120upx;
- padding: 0 12upx;
- &:first-child {
- padding-left: 0;
- }
- &:last-child {
- width: 60upx;
- }
- &-right:last-child{
- width: 120rpx;
- text-align: right;
- flex-direction: row-reverse;
- }
- }
- &-container {
- width: 100%;
- margin: 0 10upx;
- &-inner {
- width: 100%;
- display: flex;
- justify-content: center;
- font-size: 30upx;
- // padding-right: 60upx;
- }
- }
- }
- &__placeholder {
- &-view {
- height: $nav-height;
- }
- }
- &--fixed {
- position: fixed;
- z-index: 998;
- }
- &--shadow {
- // box-shadow: 0 1px 6px #ccc;
- }
- &--border:after {
- position: absolute;
- z-index: 3;
- bottom: 0;
- left: 0;
- right: 0;
- height: 1px;
- content: '';
- -webkit-transform: scaleY(.5);
- transform: scaleY(.5);
- background-color: $uni-border-color;
- }
- }
- </style>
|