vue3 + Element-plus 开发后台管理系统（9）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

搭建登录架构解决方案与实现

Icon 图标处理方案：SvgIcon

在整个项目中，我们肯定还会使用到 icon 图标，使用的情况有两类：

1、使用 element-plus 的图标

2、自定义的 svg 图标

对于 element-plus 中的图标，我们可以直接通过 el-icon 来进行显示，但是自定义图标我们就没有显示的办法了，所以我们需要一个自定义的组件，来处理这种情况

这个可以说是对于 icon 问题的通用解决方法

而我们这个组件需要满足两种情况：

1、显示外部 svg 图标

2、显示项目内的 svg 图标

处理外部 svg 图标

我们在 components 下创建 SvgIcon/index.vue 文件

<template>
  <div
    v-if="isExternal"
    :style="styleExternalIcon"
    class="svg-external-icon svg-icon"
    :class="className"
  />
  <svg v-else class="svg-icon" :class="className" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup>
import { isExternal as external } from '@/utils/validate'
import { defineProps, computed } from 'vue'
const props = defineProps({
  // icon 图标
  icon: {
    type: String,
    required: true
  },
  // 图标类名
  className: {
    type: String,
    default: ''
  }
})

/**
 * 判断是否为外部图标
 */
const isExternal = computed(() => external(props.icon))
/**
 * 外部图标样式
 */
const styleExternalIcon = computed(() => ({
  mask: `url(${props.icon}) no-repeat 50% 50%`,
  '-webkit-mask': `url(${props.icon}) no-repeat 50% 50%`
}))
/**
 * 项目内图标
 */
const iconName = computed(() => `#icon-${props.icon}`)
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>

创建 utils/validate.js

/**
 * 判断是否为外部资源
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

我们使用外部 svg 图标试一试

<span class="svg-container">
  <svg-icon icon="https://res.lgdsunday.club/user.svg"></svg-icon>
</span>

在项目中可以看到图标图标已经正常显示了

处理内部 svg 图标

我们先在 src 下创建一个 icons 文件夹，再在其中创建一个 index.js 文件，这个文件主要作两件事：

1、导入所有 svg 图标

2、全局注册 SvgIcon

具体代码如下

import SvgIcon from '@/components/SvgIcon'

// https://webpack.docschina.org/guides/dependency-management/#requirecontext
// 通过 require.context() 函数来创建自己的 context
const svgRequire = require.context('./svg', false, /\.svg$/)
// 此时返回一个 require 的函数，可以接受一个 request 的参数，用于 require 的导入。
// 该函数提供了三个属性，可以通过 require.keys() 获取到所有的 svg 图标
// 遍历图标，把图标作为 request 传入到 require 导入函数中，完成本地 svg 图标的导入
svgRequire.keys().forEach(svgIcon => svgRequire(svgIcon))

export default app => {
  app.component('svg-icon', SvgIcon)
}

在 main.js 中引入该文件

// 导入 svgIcon
import installIcons from '@/icons'
installIcons(app)

我们在 login/index.vue 中使用 SvgIcon 看看效果，会发现图标没有显示出来，主要是因为我们没有 loader 去处理他，所以我们还需要一个 loader 处理 svg 图标

使用 svg-sprite-loader 处理 svg 图标

安装 svg-sprite-loader ，执行 npm i --save-dev svg-sprite-loader

修改 vue.config.js 文件

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  chainWebpack(config) {
    // 设置 svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

修改完后重启项目，发现我们的图标可以正常显示了