因为我们要根据路由配置对应的图标,也要为了后续方便更改。因此我们将所有的图标注册为全局组件。(使用之前将分页器以及矢量图注册全局组件的自定义插件)(所有图标全局注册的方法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 cached
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// Specify symbolId format
symbolId: '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
中的App
和Component
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)
完成!!!多多积累,多多收获!!!
下面的内容跟文章相关不大,仅为了凑字数,可忽略!!!
Element Plus是一个基于Vue.js 3.0的UI库,是Element UI的升级版。它提供了一套漂亮、易于使用和自定义的组件,如按钮、输入框、表格、弹窗、日期选择器等。Element Plus的设计理念注重用户体验和响应式设计,所有组件都可以自适应不同屏幕大小以提供良好的用户体验。 Element Plus还有更好的性能和更好的 API 设计, 它遵循更好的 Reactivity 和 Function API, 并且使用了更符合 Vue.js 用户习惯的 Composition API。
Element Plus与Element UI相比有一些重要的变化,例如Element Plus使用Vue.js 3.0,废弃了依赖和拦截器,优化了性能和API设计,更新了主题和组件样式,并且去掉了有些过时的组件,增加了一些更实用和流行的组件(如Slider),支持多语言和自定义主题。
总之,Element Plus是一个功能强大、易于使用和定制的Vue.js UI库,提供了许多实用的组件和功能,并且可以按照自己的需求进行配置和扩展。它适用于各种类型的Web应用程序、移动应用程序和桌面应用程序。
一,何为Element UI 及 Element Plus?
它们是前端框架。它是包含很多有自己风格的组件库。
Element目前有两个版本:element-ui 及 element-plus两个版本。
它将HTML的基础控件进行了封装,用户只需要调用这些控件就可以了。而不需要用CSS去调整风格。
Element UI是一款基于Vue2.x 的界面框架;Element Plus是一款基于Vue3.x 的界面框架;
既然基于Vue,所以可以使用打包工具打包,例如 Vite或WePack
当然Element UI与有React及Angular的版本了。文章来源:https://www.toymoban.com/news/detail-658326.html
二、Element UI 与 Element Plus区别?
Element UI框架的升级版(3.x)是Element Plus;Element Plus 目前还处于快速开发迭代中
由于 Vue 3 不再支持 IE11,Element Plus 也不再支持 IE 浏览器
Element-Plus 已经把vue的版本锁定了3.x;而Element UI是基于Vue 2.文章来源地址https://www.toymoban.com/news/detail-658326.html
到了这里,关于elementPlus——图标引入+批量注册全局组件——基础积累的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!