【VUE学习】权限管理系统前端vue实现4-自定义icon实现

这篇具有很好参考价值的文章主要介绍了【VUE学习】权限管理系统前端vue实现4-自定义icon实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.component下新建SvgIcon目录,再新建index.vue 定义svg-icon组件

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({
  icon: {
    type: String,
    required: true
  }
})

const iconName = computed(() => {
  return `#icon-${props.icon}`
})
</script>

<style lang="scss" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
  • <template> 部分:定义了组件的模板内容。在这里,使用了 <svg> 标签来创建一个 SVG 图标元素,并添加了一个 use 元素来引用具体的图标。:xlink:href 属性使用了绑定语法,将 iconName 绑定为 use 元素的 xlink:href 属性的值。

  • <script setup> 部分:使用了 Vue 3 的 <script setup> 语法,用于编写组件的逻辑部分。在这里,使用了 defineProps 函数定义了一个 props 对象,其中包含了一个名为 icon 的属性。icon 属性的类型为字符串,并且设置为必需的。然后,使用 computed 函数创建了一个名为 iconName 的计算属性。计算属性的值是根据 props.icon 来拼接出一个具体的图标名称,用于在 <use> 元素的 xlink:href 属性中引用。

  • <style lang="scss" scoped> 部分:定义了组件的样式规则。在这里,.svg-icon 选择器设置了 SVG 图标元素的样式。它的宽度和高度都是 1em,相对于当前的字体大小进行缩放。vertical-align 属性设置垂直对齐方式为 -0.15em,使图标能够与相邻的文本垂直对齐。fill 属性设置图标的填充颜色为当前文本颜色。overflow 属性设置为 hidden,以防止图标的内容溢出。

2.新建icons文件夹,放一个svg文件的文件夹目录,以及新建index.js,全局定义组件

svg里面 假如 svg 图片

import SvgIcon from '@/components/SvgIcon'

const svgRequired = require.context('./svg', false, /\.svg$/)
svgRequired.keys().forEach((item) => svgRequired(item))

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

export default (app) => { ... }:通过导出一个函数作为插件的形式,使得该插件可以被 Vue 应用实例使用。该函数接收一个名为 app 的参数,表示 Vue 应用实例。

这个插件的作用是将 SVG 图标组件注册为全局组件,同时动态导入 SVG 图标文件,以便在整个应用中使用该组件来显示各种 SVG 图标。使用者只需在需要显示 SVG 图标的地方使用 <svg-icon> 标签,并通过属性指定具体的图标名称,插件会自动根据图标名称来加载相应的 SVG 图标文件并显示出来。

3.添加webpack  和 svg-sprite-loader  依赖 

4.修改vue.config

const webpack = require('webpack');

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  lintOnSave: false,

  chainWebpack(config) {
    // 设置 svg-sprite-loader
    // config 为 webpack 配置对象
    // config.module 表示创建一个具名规则,以后用来修改规则
    config.module
        // 规则
        .rule('svg')
        // 忽略
        .exclude.add(resolve('src/icons'))
        // 结束
        .end()
    // config.module 表示创建一个具名规则,以后用来修改规则
    config.module
        // 规则
        .rule('icons')
        // 正则,解析 .svg 格式文件
        .test(/\.svg$/)
        // 解析的文件
        .include.add(resolve('src/icons'))
        // 结束
        .end()
        // 新增了一个解析的loader
        .use('svg-sprite-loader')
        // 具体的loader
        .loader('svg-sprite-loader')
        // loader 的配置
        .options({
          symbolId: 'icon-[name]'
        })
        // 结束
        .end()
    config
        .plugin('ignore')
        .use(
            new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/)
        )
    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()
  }
}

        这段代码主要是在 Vue CLI 的配置文件中,通过 webpack 的链式配置方法 chainWebpack 来修改 webpack 的处理规则。其中包括了对 SVG 文件的处理,将其转换为 SVG sprite 图标,并设置了一些插件和选项。这样,项目在构建时可以自动处理 SVG 图标,并生成 SVG sprite,以便在应用中使用。同时,也通过插件来优化构建结果,减少打包体积。

5.main.js修改

import SvgIcon from '@/icons'

const app=createApp(App)
SvgIcon(app);

app.use(store)

app.use(router)

app.use(ElementPlus)
app.mount('#app')
  • import SvgIcon from '@/icons':导入了一个名为 SvgIcon 的插件,该插件用于注册全局的 SVG 图标组件。

  • const app = createApp(App):创建了一个 Vue 应用实例,使用 createApp 函数传入根组件 App

  • SvgIcon(app):将 app 作为参数传递给 SvgIcon 插件函数,用于在应用中注册全局的 SVG 图标组件。文章来源地址https://www.toymoban.com/news/detail-541217.html

6.使用语法

<el-form-item prop="username">

  <el-input

      type="text"
      size="large"
      auto-complete="off"
      placeholder="账号"
  >
  <template #prefix><svg-icon icon="user" /></template>
  </el-input>
</el-form-item>

到了这里,关于【VUE学习】权限管理系统前端vue实现4-自定义icon实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包