Vue3项目—顶栏Dropdown 下拉菜单

默认情况下，只需要悬停在触发菜单的元素上即可，无需点击也会显示下拉菜单。

示例

<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      Dropdown List
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>Action 1</el-dropdown-item>
        <el-dropdown-item>Action 2</el-dropdown-item>
        <el-dropdown-item>Action 3</el-dropdown-item>
        <el-dropdown-item disabled>Action 4</el-dropdown-item>
        <el-dropdown-item divided>Action 5</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons-vue'
</script>
<style scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>

效果：

项目实例

顶栏子组件：

<!-- layout/header/index.vue -->
<template class="pm-header">
  <div
    class="flex justify-between items-center mt-2 cursor-pointer"
  >
    <el-image
      v-if="!isPC"
      class="pm-sider__icon mt-2"
      src="/img/program/operation-sider-collapse-icon.png"
      @click="toggleCollapse"
    />
    <div
      v-if="isPC"
      class="flex justify-start items-center"
    >
      <el-image
        src="/img/common/logo@2x.png"
        fit="cover"
        class="mr-4 pm-header__logo"
      />
      <div class="pm-header__title text-light-50">
        运营后台
      </div>
    </div>
    <el-space>
      <div class="text-light-50">
        {{ name }}
      </div>
      <el-dropdown>
        <el-avatar :icon="UserFilled" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              用户id: {{ id }}
            </el-dropdown-item>
            <el-dropdown-item>
              性别: {{ gender }}
            </el-dropdown-item>
            <el-dropdown-item @click="userLogOut">
              退出系统
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-space>
  </div>
</template>

<script setup lang='ts'>
import { UserFilled } from '@element-plus/icons-vue';
import { logOut } from '~/core/api';
import { redirect } from '~/core/utils';
import * as API from '~/core/types';
import { useAccountStore, useMenuStore } from '~/store';
import { ref, watchEffect } from 'vue';
import { storeToRefs } from 'pinia';
const { userInfo: { name, gender, id } } = useAccountStore();
const store = useMenuStore();
const { toggleCollapse } = store;
const { userAgent } = storeToRefs(store);
const isPC = ref(false);

watchEffect(() => {
  isPC.value = userAgent.value === 'PC';
});
const userLogOut = async () => {
  await logOut();
  redirect('/login');
};

</script>

<style lang="scss">
@import '~/styles/var.scss';
.pm-header {
  &__logo {
    width: 40px;
    height: 28px;
  }
  &__title {
    font-size: $pm-font-size-md;
    line-height: 40px;
  }
}
</style>

效果：