elementPlus——图标引入+批量注册全局组件——基础积累

因为我们要根据路由配置对应的图标,也要为了后续方便更改。因此我们将所有的图标注册为全局组件。(使用之前将分页器以及矢量图注册全局组件的自定义插件)(所有图标全局注册的方法element-plus文档中已给出)

全局注册elementPlus图标

在这里插入图片描述
经过上面的步骤,就可以把elementPlus自带的icon图标全局注册了。

路由使用elementPlus图标

给路由元信息添加属性:icon
layout和其子组件为例:首先在element-puls找到你要使用的图标的名字。将它添加到路由元信息的icon属性上

{//登录成功以后展示数据的路由path: '/',component: () => import('@/layout/index.vue'),name: 'layout',meta: {title: 'layout',hidden: false,icon: 'Avatar',//elementPlus中的图标},children: [{path: '/home',component: () => import('@/views/home/index.vue'),meta: {title: '首页',hidden: false,icon: 'HomeFilled',//elementPlus中的图标},},],
},

外部引入的svg图标——vite.config.js中批量引入

在这里插入图片描述

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
export default defineConfig(({command,mode})=>{const env = loadEnv(mode,process.cwd())return {plugins:[vue(),AutoImport({resolvers: [ElementPlusResolver(),IconsResolver({prefix: 'Icon',}),],}),Components({resolvers: [ElementPlusResolver(),IconsResolver({enabledCollections: ['ep'],}),],}),Icons({autoInstall: true,}),createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// Specify symbolId formatsymbolId: 'icon-[dir]-[name]',}),]}
})

然后svg图标的使用,例如全屏图标:

<el-button icon="FullScreen" circle @click="fullScreen" />

顺道写下全屏功能的实现:

<script lang="ts" setup>
import {reactive,ref} from 'vue';
//全屏功能
const fullScreen = ()=>{//用来判断是不是全屏,返回布尔值const full = document.fullscreenElement//有兼容问题if(full){document.exitFullscreen();}else{document.documentElement.requestFullscreen();}
}
</script>

在这里插入图片描述

components中的组件全局批量注册——避免使用时多次引入

在这里插入图片描述

步骤一:在components文件夹中新建index.ts文件

步骤二:在index.ts文件中引入各个组件

import SvgIcon from './SvgIcon/index.vue'
import Category from '@/components/Category/index.vue'

步骤三:使用vue中的AppComponent

import type { App, Component } from 'vue'
const allGlobalComponent: Component = { SvgIcon, Category }

步骤四:使用install方法来处理

export default {install(app: App) {Object.keys(allGlobalComponent).forEach((key: string) => {// 注册为全局组件app.component(key, allGlobalComponent[key])})},
}

结合文章中第一步的全局引入elementPlus图标,也可以放在此文件中:
完整代码如下:

import SvgIcon from './SvgIcon/index.vue'
import Category from '@/components/Category/index.vue'
import type { App, Component } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const allGlobalComponent: Component = { SvgIcon, Category }
export default {install(app: App) {Object.keys(allGlobalComponent).forEach((key: string) => {// 注册为全局组件app.component(key, allGlobalComponent[key])})// 将 element-plus 的图标注册为全局组件for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}},
}

main.ts中引入components

import globalComponent from './components/index'
const app = createApp(App)
app.use(globalComponent)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/45814.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker-compose详解和LNMP搭建实战

目录 一、Docker-compose简介 1.前言 2.概述 二、Docker-compose安装 安装源获取 安装包下载 三、YAML文件格式及编写注意事项 1.简介 2.使用方法 四、Docker Compose 常用命令 五、Docker Compose 配置常用字段 六、Docker-compose搭建LNMP实战 一、Docker-compose…

MySQL的安装以及卸载

下载官网 https://www.mysql.com/ 切到下载tab页 找到 MySQL Community Server 或者 MySQL Community (GPL) Downloads --> MySQL Community Server 点击download按钮&#xff1a; 点击download进入下载页面选择No thanks, just start my download就可以开始下载了。 下…

【ARM】Day5 uart总线, LED点亮实验(C语言实现)

1. 思维导图 2. LED点灯实验&#xff08;C语言实现&#xff09; gpio.h #ifndef _LED_H__ //防止头文件重复包含_ #define _LED_H__//RCC_MP_AHB4ENSETR寄存器封装 #define RCC_MP_AHB4ENSETR (*(volatile unsigned int*)0x50000A28)//GPIO使用封装结构体 typedef struct{v…

【Linux】进程优先级

一、基本概念 Hello&#xff0c;大家好。本文我们要来介绍的是有关Linux下【进程优先级】&#xff0c;首先我们要了解的是其基本概念 在 Linux基础篇之权限 一文中我们有谈到过什么是权限&#xff0c;在Linux下有权限和无权限的区别在哪里。那现在的话我们就要来对比一下【权限…

js 的正则表达式(二)

1.正则表达式分类&#xff1a; 正则表达式分为普通字符和元字符。 普通字符&#xff1a; 仅能够描述它们本身&#xff0c;这些字符称作普通字符&#xff0c;例如所有的字母和数字。也就是说普通字符只能够匹配字符串中与它们相同的字符。 元字符&#xff1a; 是一些具有特殊含…

一文科普,配资门户网是什么?

配资门户网是一个为投资者提供配资服务的平台。配资是指通过借用他人资金进行投资交易的一种金融操作方式。配资门户网作为一个线上平台&#xff0c;为投资者提供了方便、快捷的配资服务。 配资门户网提供了多种不同的配资方案&#xff0c;以满足不同投资者的需求。投资者可以…

通过Git使用GitHub

目录 一、建立个人仓库 二、配置SSH密钥 三、克隆仓库代码 四、推送代码到个人仓库 五、代码拉取 一、建立个人仓库 1.建立GitHub个人仓库&#xff0c;首先注册GitHub用户。注册好了之后&#xff0c;打开用户的界面 然后就是配置问题 配置好后拉到最下方点击create repos…

opencv进阶07-支持向量机cv2.ml.SVM_create()简介及示例

支持向量机&#xff08;Support Vector Machine&#xff0c;SVM&#xff09;是一种二分类模型&#xff0c;目标是寻找一个标准&#xff08;称为超平面&#xff09;对样本数据进行分割&#xff0c;分割的原则是确保分类最优化&#xff08;类别之间的间隔最大&#xff09;。当数据…

next.js 创建 react ant design ts 项目

环境说明&#xff1a;next.js 官方文档要求node版本在16.8以上。笔者使用的 node版本是16.20.1&#xff0c;不要使用16.13.0&#xff0c;笔者在使用 node16.13.0环境时创建的 react 项目点击事件无效 next.js官网截图 next.js 官网&#xff1a;https://nextjs.org/ react 官网…

【UniApp开发小程序】商品详情展示+评论、评论展示、评论点赞+商品收藏【后端基于若依管理系统开发】

文章目录 界面效果界面实现工具js页面日期格式化 后端收藏ControllerServicemapper 评论ControllerServiceMapper 商品Controller 阅读Service 界面效果 【说明】 界面中商品的图片来源于闲鱼&#xff0c;若侵权请联系删除 【商品详情】 【评论】 界面实现 工具js 该工…

uniapp 微信小程序 绘制海报,长按图片分享,保存海报

uView UI 2.0 dcloud 插件市场地址 弹窗海报源码 <template><!-- 推荐商品弹窗 --><u-popup :show"haibaoShow" mode"center" round26rpx z-index10076 bgColortransparent safeAreaInsetTop close"goodsclose"><image …

WPF入门到精通:1.新建项目及项目结构

WPF&#xff08;Windows Presentation Foundation&#xff09;是一种用于创建 Windows 应用程序的技术&#xff0c;它可以通过 XAML&#xff08;Extensible Application Markup Language&#xff09;和 C# 或其他 .NET 语言来实现。WPF 提供了许多强大的 UI 控件和样式&#xf…

Azure虚拟网络对等互连

什么是Azure虚拟网络对等互联 Azure虚拟网络对等互联&#xff08;Azure Virtual Network peering&#xff09;是一种连接两个虚拟网络的方法&#xff0c;使得这两个虚拟网络能够在同一地理区域内进行通信。它通过私有IP地址在虚拟网络之间建立网络连接&#xff0c;不论是在同一…

星际争霸之小霸王之小蜜蜂(四)--事件监听-让小蜜蜂动起来

目录 前言 一、监听按键并作出判断 二、持续移动 三、左右移动 总结&#xff1a; 前言 今天开始正式操控我们的小蜜蜂了&#xff0c;之前学java的时候是有一个函数监听鼠标和键盘的操作&#xff0c;我们通过传过来不同的值进行判断&#xff0c;现在来看看python是否一样的实现…

SpringMVC之异常处理

SpringMVC之异常处理 异常分为编译时异常和运行时异常&#xff0c;编译时异常我们trycatch捕获&#xff0c;捕获后自行处理&#xff0c;而运行时异常是不可预期的&#xff0c;就需要规范编码来避免&#xff0c;在SpringMVC中&#xff0c;不管是编译异常还是运行时异常&#xff…

2023面试八股文 ——Java基础知识

Java基础知识 一.Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性&#xff1f;原理是什么Java语言有哪些特点什么是字节码&#xff1f;采用字节码的大好处是什么什么是Java程序的主类&#xff1f;应用程序和小程序的主类有何不同&#xff1f…

漏洞指北-VulFocus靶场专栏-初级01

漏洞指北-VulFocus靶场专栏-初级 初级001 &#x1f338;海洋CMS代码执行&#xff08;CNVD-2020-22721&#x1f338;step1&#xff1a;进入后台页面 账号密码&#xff1a;admin amdinstep2&#xff1a;点击系统&#xff0c;点击后台IP安全设置,关闭step3 启动burpsuite&#xff…

一百五十九、Kettle——Kettle9.2通过配置Hadoop clusters连接Hadoop3.1.3(踩坑亲测、附流程截图)

一、目的 由于kettle的任务需要用到Hadoop&#xff08;HDFS&#xff09;&#xff0c;所以就要连接Hadoop服务。 之前使用的是kettle9.3&#xff0c;由于在kettle新官网以及博客百度等渠道实在找不到shims的驱动包&#xff0c;无奈换成了kettle9.2&#xff0c;kettle9.2的安装…

设计模式之迭代器模式(Iterator)的C++实现

1、迭代器模式的提出 在软件开发过程中&#xff0c;操作的集合对象内部结构常常变化&#xff0c;在访问这些对象元素的同时&#xff0c;也要保证对象内部的封装性。迭代器模式提供了一种利用面向对象的遍历方法来遍历对象元素。迭代器模式通过抽象一个迭代器类&#xff0c;不同…

16----公式

本节我们来学习如何在markdown中打印公式 Markdown是一种轻量级标记语言&#xff0c;常用于撰写文档、博客和论坛帖子。虽然Markdown本身并不支持数学公式&#xff0c;但可以使用一些扩展来实现公式的显示。在支持公式扩展的 Markdown 解析器中&#xff0c;我们可以使用 Katex …