Blame view

src/components/layout/header-box.vue 2.43 KB
陈峰 authored
1
<template>
陈峰 authored
2 3 4 5 6 7 8 9 10 11
    <div class="layout-header-box">
        <div class="header-left">
            <slot name="left">
                <i class="icon icon-back go-back-btn" @click="goBack"></i>
            </slot>
        </div>
        <transition name="header-title">
            <div class="header-title brown-light" v-show="showTitle">
                <slot name="title">
                    {{yoho.title}}
陈峰 authored
12 13
                </slot>
            </div>
陈峰 authored
14 15 16
        </transition>
        <div class="header-right">
            <slot name="right"></slot>
陈峰 authored
17 18 19 20
        </div>
    </div>
</template>
<script>
陈峰 authored
21 22 23 24
import {mapState} from 'vuex';
export default {
    name: 'HeaderBox',
    props: {
陈峰 authored
25 26
        autoHide: Boolean,
        className: [String, Object, Array]
陈峰 authored
27 28 29 30 31 32
    },
    computed: {
        ...mapState(['yoho'])
    },
    data() {
        return {
陈峰 authored
33
            showTitle: !this.autoHide
陈峰 authored
34 35 36 37 38
        };
    },
    methods: {
        goBack() {
            this.$yoho.goBack({}, function() {}, function() {});
陈峰 authored
39
        },
陈峰 authored
40 41 42 43 44
        switchBase() {
            this.showTitle = false;
        },
        switchNormal() {
            this.showTitle = true;
陈峰 authored
45
        }
陈峰 authored
46 47
    }
};
陈峰 authored
48 49
</script>
<style lang="scss">
陈峰 authored
50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
@import "~scss/variable.scss";
.layout-header-box {
    position: relative;
    height: $header-height;
    font-size: $header-font-size;
    padding: 0px 20px;
    width: 100%;

    .icon {
        vertical-align: middle;
        display: inline-block;
        width: 80px;
        height: 100%;
        line-height: $header-height;
        font-size: $header-font-size;
陈峰 authored
65
陈峰 authored
66 67
        &.icon-back {
            font-size: 64px;
陈峰 authored
68 69
        }
    }
陈峰 authored
70 71 72 73
    .header-left, .header-right {
        z-index: 2;
        position: absolute;
        min-width: 80px;
陈峰 authored
74
    }
陈峰 authored
75 76 77
    .header-left {
        left: 20px;
        top: 0;
陈峰 authored
78
    }
陈峰 authored
79 80 81
    .header-right {
        text-align: right;
        right: 20px;
陈峰 authored
82
        top: 0;
陈峰 authored
83 84 85 86 87
    }
    .header-title {
        position: absolute;
        z-index: 1;
        background-color: #fff;
陈峰 authored
88
        left: 0;
陈峰 authored
89 90 91 92
        top: 0;
        right: 0;
        bottom: 0;
        text-align: center;
陈峰 authored
93
        line-height: $header-height;
陈峰 authored
94 95 96 97
        font-size: 17PX;
        color: #000000;
        letter-spacing: -0.41px;
        border-bottom: solid 1px #eee;
陈峰 authored
98
    }
陈峰 authored
99 100 101 102 103 104 105 106 107 108 109
}

.header-title-enter-active, .header-title-leave-active {
    transition: opacity 0.2s ease-in-out;
}
.header-title-enter, .header-title-leave-to {
    opacity: 0;
}
.header-title-enter-to, .header-title-leave {
    opacity: 1;
}
陈峰 authored
110
</style>