auth-web/src/pages/layout/components/navbar.vue

<!--
    头部区域
    @Author: tangDM
    @Date: 2019-03-12
-->
<template>
    <div class="l-main-header" style="position: relative">
        <div class="l-main-header__left">
            <div class="l-main-header__box">
                <img
                    style="width: 40px; height: 40px"
                    class="l-main-header__logo"
                    src="@/assets/images/layout/logo.png"
                />
            </div>
            <p class="l-main-header__title">警务云统一授权管理中心</p>
        </div>
        <div class="l-main-header__center"></div>
        <div class="l-main-header__right">
            <div class="l-search" @click.stop="handleClickSearch">
                <span class="el-icon-search"></span>
                <input
                    v-model="searchValue"
                    type="text"
                    v-bind:class="{ 'is-active-search-show': activeShow, 'is-active-search-hide': activeHide }"
                />
            </div>
            <div style="display: inline-block; vertical-align: top">
                <!--<el-tooltip :content="$t('navbar.screenfull')" effect="dark" placement="bottom">-->
                <!--<screenfull class="l-screen-full" />-->
                <!--</el-tooltip>-->
                <!-- 换肤组件 -->
                <dui-skins :options="skinOption" :currentSkin="'theme-default'" isCookie></dui-skins>
                <!-- 用户操作区域 -->
                <div class="l-avatar-box">
                    <i class="icon icon-user2"></i>
                    <span class="l-avatar-box__user">{{ name }}</span>
                    <i class="icon icon-close" title="退出登录" @click="logout"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import Breadcrumb from "@/components/layout/breadcrumb";
import Screenfull from "@/components/layout/screenfull";
import LangSelect from "@/components/layout/lang-select";
import DuiSkins from "@/components/layout/skins/index";

export default {
    data() {
        return {
            searchValue: "",
            skinOption: [
                {
                    name: "浅色系",
                    fileName: "theme-default",
                    background: "#2991d9"
                },
                {
                    name: "暗色系",
                    fileName: "theme-black",
                    background: "#222222"
                }
            ],
            activeShow: false,
            activeHide: false
        };
    },
    components: {
        Breadcrumb,
        Screenfull,
        LangSelect,
        DuiSkins
    },
    computed: {
        ...mapGetters(["sidebar", "name", "avatar", "device"])
    },
    methods: {
        toggleSideBar() {
            this.$store.dispatch("toggleSideBar");
        },
        logout() {
            this.$confirm("是否确定退出系统").then(() => {
                if (process.env.NEED_LOGIN) {
                    this.$confirm("是否确定退出系统").then(() => {
                        window.loginUtil.logout(this);
                    });
                } else {
                    window.location.href = `https://login.iam.com/apphub/logout`;
                }
            });
        },
        handleClickSearch() {
            this.activeShow = true;
            this.activeHide = false;
        }
    },
    mounted() {
        this.bodyListener = () => {
            this.activeShow = false;
            this.activeHide = true;
        };
        document.body.addEventListener("click", this.bodyListener, false);
    },
    beforeDestroy() {
        //销毁body事件
        document.body.removeEventListener("click", this.bodyListener);
    }
};
</script>