noob-components/packages/manage/head/head.vue

<template>
    <el-button v-if="closeAble" class="close-aside-btn" :icon="isClose ? 'CaretRight' : 'CaretLeft'" circle
        :size="state.size.size" @click="close"></el-button>
    <div class="head">
        <div class="head-left">
            <div class="title">
                <el-image class="logo" v-if="logo" :src="logo" fit="fit" />
                {{ title || t('title') }}
            </div>
            <slot name="left"></slot>
        </div>
        <div class="head-right">
            <slot></slot>
            <span class="username" v-if="username">{{ username }}</span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
const { t } = useI18n();

const { state, commit, dispatch } = useStore();

const props = defineProps({
    closeAble: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: null,
    },
    logo: {
        type: String,
        default: null,
    },
    username: {
        type: String,
        default: null,
    },
})

const isClose = ref(false)
const close = () => {
    isClose.value = !isClose.value;
    if (isClose.value) {
        state.size.asideWidth = '0px';
        commit("initSize");
    } else {
        state.size.asideWidth = state.size.aside + 'px';
        commit("initSize");
    }
}

onMounted(() => { });
</script>
<style lang="scss">
//@import url(); 引入公共css类
.close-aside-btn {
    position: absolute;
    z-index: 99;
    top: v-bind('state.size.closeTop');
    left: -5px;
    color: red;
    background: transparent;
}

.title {
    height: v-bind('state.size.headHeight');
    // width: v-bind('state.size.asideWidth');
    text-align: center;
    float: left;
    font-size: v-bind('state.size.titleSize');
    line-height: v-bind('state.size.headHeight');
    font-weight: bold;
    color: v-bind('state.style.titleColor');
}

.head-left {
    float: left;
    line-height: v-bind('state.size.headHeight');
    width: v-bind('state.size.headLeftWidth');
    align-items: center;
    justify-content: center;
}

.head-right {
    float: right;
    line-height: v-bind('state.size.headHeight');
    width: v-bind('state.size.headRightWidth');
    padding-right: 10px;

    align-items: center;
    justify-content: center;

    .head-icon {
        float: right;
        cursor: pointer;
        height: v-bind('state.size.headHeight');
        margin-right: 20px;
        font-size: v-bind('state.size.headIconSize');
        align-items: center;
        color: v-bind('state.style.color');
    }

    .username {
        float: right;
        height: v-bind('state.size.headHeight');
        margin-right: 20px;
        font-size: v-bind('state.size.titleSize');
        font-weight: bold;
        color: v-bind('state.style.color');
    }

}
</style>