element-plus项目开发中常见问题记录

element-plus项目开发中常问题记录, 持续更新中...

组件按需加载

element-plus组件：按需加载组件可以大大减少项目打包的体积，通过插件配置也不用手动注册导入

element-plus图标：每次单独引入图标非常的不方便，也可以自动注入图标

安装插件

npm i unplugin-auto-import unplugin-icons unplugin-vue-components unplugin-vue-components unplugin-element-plus -D

配置插件

import Icons from 'unplugin-icons/vite' // 图标处理
import AutoImport from 'unplugin-auto-import/vite' // 自动导入配置的模块
import Components from 'unplugin-vue-components/vite' // 自动导入组件的模块
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 自动导入 Element Plus 的 Api
import ElementPlus from 'unplugin-element-plus/vite' // 自动导入 Element Plus 的 style
export default defineConfig({
    plugins: [
        AutoImport({
          resolvers: [
              ElementPlusResolver()
              IconsResolver({
                  prefix: 'icon',
              })
          ]
        }),
        Components({
          resolvers: [
              ElementPlusResolver()
              IconsResolver({
                  enabledCollections: ['ep'],
              })
         ]
        }),
        ElementPlus({}),
        Icons({
          autoInstall: true,
        })
  ],
})

在项目中使用图标

 <el-icon><i-ep-refresh /></el-icon>

动态加载图标

动态权限菜单如果有用到element-plus的icon图标，同样也是需要动态加载显示的，有如下两种方法可以实现。

全局注册

1. 全局注册icon图标

   使用插件的形式在main.js中全局注册，这样会导致不被用到的图标也会被打包，实际中用到的图标可能不会很多，有点不太合适。

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const userIcon = (app) => {
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }
}
export default userIcon

2. 遍历菜单时动态显示图标

menu.meta.icon为配置的图标标识, 如: Menu

{
    id: '100',
    path: '/home',
    name: 'Home',
    url: 'Home',
    meta: {
        title: '首页',
        keepAlive: true,
        icon: 'Menu'
    },
},

以组件名称作为标识显示

<el-icon>
  <component :is="menu.meta.icon"></component>
</el-icon>

按需配置

此方法不用全局注册图标，在模块中动态绑定图标，使用驼峰命名并加上 IconEp 前缀（具体实现上面有描述），显示动态图标传入的是一个对象，而不是字符串。

<template>
  <el-icon v-for="(item, index) in menu" :key="index">
    <component :is="item.icon" />
  </el-icon>
</template>
<script setup lang="ts">
const menu = [
  {
    icon: IconEpPlus
  },
  {
    icon: IconEpEditPen
  },
  {
    icon: IconEpDelete
  }
]
</script>

动态配置菜单信息以及图标标识，填写的时候肯定是字符串，那么在前端显示的时候需要把图标字符串映射到对象上，所以需要本地有一份映射表

{
    id: '100',
    path: '/home',
    name: 'Home',
    url: 'Home',
    meta: {
        title: '首页',
        keepAlive: true,
        icon: 'IconEpMenu'
    },
},

本地维护一份映射表，把需要用到的图标统一存在映射表里

const iconList = {
    IconEpMenu: IconEpMenu,
    IconEpEdit: IconEpEdit
    ...
}

渲染菜单通过映射表匹配到对象

<el-icon>
    <component :is="iconList[menu.meta.icon]"></component>
</el-icon>

element-plus主题更换

安装color

cnpm i color -S

自定义主题配置

<script setup>
import { ref } from 'vue'
const themeColor = ref('#409eff') // 主题色
const predefineColors = ref(['#409eff', '#f47983', '#0c8918', '#ae7000']) // 预设主题
const changeTheme = () => {
  const el = document.documentElement
  el.style.setProperty('--el-color-primary', themeColor.value)
  el.style.setProperty('--el-color-primary-dark-2', themeColor.value)
  for (let i = 1; i < 10; i++) {
    el.style.setProperty(
      `--el-color-primary-light-${i}`,
      Color(themeColor.value).alpha(`${(1 - i * 0.1).toFixed(1)}`)
    )
  }
}
</script>
<template>
    <el-color-picker
      v-model="themeColor"
      show-alpha
      size="small"
      :predefine="predefineColors"
      @change="changeTheme"
    />
</templat>

DropdownMenu组件出现黑框

使用el-dropdown-menu下拉组件时，鼠标放上去有时会出现不规则的环绕黑边框，看着非常不舒服，是由下面的样式类导致

.focus:visible {
    outline: -webkit-focus-ring-color auto 1px
}

解决办法

:deep(.el-tooltip__trigger:focus-visible) {
    outline: unset;
}