Cold_putoutstorage_web/src/views/layout/popover.vue

<!--  -->
<template>
    <div class="demo-ico__desc">
        <div class="demo-ico__desc_item" @click="exitFun(1)">
            <el-popover :width="300"
                popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
                <template #reference>
                    <el-avatar :size="30" :src="require('@/assets/img/userInfo.gif')" />
                </template>
                <template #default>
                    <div class="demo-rich-conent" style="display: flex; gap: 16px; flex-direction: column">
                        <el-avatar :size="50" :src="require('@/assets/img/userInfo.gif')" style="margin-bottom: 8px" />
                        <div>
                            <p class="demo-rich-content__name" style="margin: 0; font-weight: 500">
                                账号：{{ data.username }}
                            </p>
                            <p class="demo-rich-content__name" style="margin: 0; font-size: 14px;">
                                公司：{{ data.company }}
                            </p>
                        </div>
                        <p class="demo-rich-content__desc" style="margin: 0">
                            <el-collapse v-model="data.activeNames" accordion>
                                <el-collapse-item title="重置密码" name="1">
                                   <div style="display: flex;">
                                        <el-input v-model="data.input" type="password" placeholder="请输入新密码" style="flex: 1;" show-password />
                                        <el-button type="primary" style="margin-left: 20px;">修改</el-button>
                                   </div>
                                </el-collapse-item>
                                <el-collapse-item title="设置展开/关闭" name="2">
                                    <el-switch v-model="data.switchValue" @change="changeSwiper" :inactive-value="true"
                                        :active-value="false" width="60" inline-prompt active-text="展开"
                                        inactive-text="收起" />
                                </el-collapse-item>
                            </el-collapse>
                        </p>
                    </div>
                </template>
            </el-popover>
            <p class="demo-ico__desc_item_p" style="margin-left: 5px;">{{ data.username }}，你好</p>
        </div>

        <el-divider direction="vertical" />
        <div class="demo-ico__desc_item demo-ico__desc_hover" @click="exitFun(2)">
            <el-icon size="16">
                <Bell />
            </el-icon>
            <p class="demo-ico__desc_item_p">消息</p>
        </div>
        <el-divider direction="vertical" />
        <div class="demo-ico__desc_item demo-ico__desc_hover" @click="exitFun(3)">
            <el-icon size="16">
                <FullScreen />
            </el-icon>
            <p class="demo-ico__desc_item_p">全屏</p>
        </div>
        <el-divider direction="vertical" />
        <div class="demo-ico__desc_item demo-ico__desc_hover" @click="exitFun(4)">
            <el-icon size="16">
                <SwitchButton />
            </el-icon>
            <p class="demo-ico__desc_item_p">退出</p>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { exitFun } from "@/plugins/setFun";
import { reactive, watch } from "vue";
import { useStore } from "vuex";
const store = useStore()
const data = reactive({
    username: '',
    company: '',
    activeNames: '',
    switchValue: null,
    input:''
})
watch(() => store.state.switchValue, (toPath: any) => {
    data.switchValue = store.state.switchValue
}, { immediate: true, deep: true })
//函数
const changeSwiper = async () => {
    store.commit('setswitchValue', data.switchValue) //存储导航状态
}
data.username = !store.state.userInfo.form.username ? '游客' : store.state.userInfo.form.username
watch(() => store.state.company, () => {
    data.company = store.state.company == '' ? '未进入其他公司' : store.state.company
}, { deep: true, immediate: true })
</script>
<style lang="scss">
.demo-ico__desc {
    user-select: none;
    display: flex;
    align-items: center;

    &_item {
        padding: 10px 0;
        border-radius: 2px;
        cursor: pointer;
        display: flex;
        align-items: center;

        &_p {
            font-size: 12px;
            padding-left: 5px;
        }
    }

    &_hover:hover {
        color: var(--el-color-primary);
        ;
    }

}
</style>