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

这篇具有很好参考价值的文章主要介绍了elementPlus——图标引入+批量注册全局组件——基础积累。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

全局注册elementPlus图标

elementPlus——图标引入+批量注册全局组件——基础积累,elementPlus,vue3+elementPlus+vite,前端基础知识,vue.js,javascript,前端
经过上面的步骤,就可以把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中批量引入

elementPlus——图标引入+批量注册全局组件——基础积累,elementPlus,vue3+elementPlus+vite,前端基础知识,vue.js,javascript,前端

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>

elementPlus——图标引入+批量注册全局组件——基础积累,elementPlus,vue3+elementPlus+vite,前端基础知识,vue.js,javascript,前端

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

elementPlus——图标引入+批量注册全局组件——基础积累,elementPlus,vue3+elementPlus+vite,前端基础知识,vue.js,javascript,前端

步骤一:在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)

完成!!!多多积累,多多收获!!!

下面的内容跟文章相关不大,仅为了凑字数,可忽略!!!

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的版本了。

二、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模板网!

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

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

相关文章

  • Vue2自己封装的基础组件库或基于Element-ui再次封装的基础组件库,如何发布到npm并使用(支持全局或按需引入使用),超详细

    以下我以 wocwin-admin-vue2 项目为例 修改目录结构,最终如下 1、导入组件,组件必须声明 name 2、定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册 3、导出的对象必须具有 install,才能被 Vue.use() 方法安装(全局使用) 4、按需引入 5、packa

    2024年02月08日
    浏览(82)
  • Vue全局组件和局部组件的注册

      组件的简介 : 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 组件的基本使用: 创建一个Vue实例需要创建后才能使用,组件也需要进行注册后才能使用。注册

    2023年04月23日
    浏览(50)
  • uniapp注册全局组件

    有一些组件可能会被很多个页面使用到,比如说,自定义的导航栏,如果在每一个页面都引用一次就很麻烦了,这个时候可以将该组件注册为全局组件了。 第一种方法:easycom组件模式 官方描述:https://uniapp.dcloud.io/collocation/pages?id=easycom 将组件安装在项目的components目录下,并

    2024年02月16日
    浏览(37)
  • vue3全局注册组件

    我们在封装组件的时候一般情况下都是在 components 文件夹下写自己的组件,然后再 views 下写对应的页面然后引入自己封装的组件,比如这样: views下的chooseArea的index.vue想要引入components下的chooseArea-src-index.vue就得这样写: 这只是个引入组件的例子,也就是说 每当我们在页面

    2024年02月12日
    浏览(42)
  • Vue3---组件全局注册

    1. 组件封装成插件 2. 引用注册 3. 使用组件

    2024年02月13日
    浏览(38)
  • 【解决】uniapp的全局公共组件(不用在每个页面引入组件标签),各平台均可使用!!!!

    感谢滚动君大佬提供的思路,但是此方法只适用于微信小程序 app端之所以不能用的关键原因在于不能找到resourcePath原始路径,不像小程序会提供一个路径区分哪些文件来自组件哪些文件来自页面,如果不做区分,那么页面栈就会超载,无法显示。 既然它自身不能提供路径,

    2024年02月12日
    浏览(51)
  • Element组件完整引入、按需引入、样式修改(全局、局部)、简单安装less以及npm命令证书过期等

    npm i element-ui -S 在 main.js 中写入以下内容: 以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单独引入。 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。 首先,安装 babel-plugin-component: npm install babel-plugin-component -D 然后,将

    2024年01月23日
    浏览(54)
  • Svg使用和注册components文件夹内部全部为全局组件

    Vue2+Js中使用(vue只注册了Svg) 1. 安装插件 2. 封装Svg组件 3. 在assets/icons文件夹下创建index.js 4. vue.config.js 5. main.js中引入 Vue3+Ts中使用(一次性将components下的所有组件都注册了)  1.安装SVG依赖插件 2. 封装SvgIcon 3. 在src/components文件夹目录下创建一个index.ts文件:用于注册comp

    2024年02月13日
    浏览(36)
  • 【React】React18+Typescript+craco配置最小化批量引入Svg并应用的组件

    无论是哪种 Web UI 框架都不可避免的要与 Svg 打交道,那么批量引入才更方便管理 Svg 。 https://ryanhutzley.medium.com/dynamic-svg-imports-in-create-react-app-d6d411f6d6c6 https://github.com/airbnb/babel-plugin-inline-react-svg/issues/51 https://blog.shianqi.com/2017/12/13/Webpack/SVG-sprite/ https://pganalyze.com/blog/building-svg

    2024年04月10日
    浏览(47)
  • vue3 vue.config.js配置Element-plus组件和Icon图标实现按需自动引入

    打包时,报警告,提示包太大会影响性能 在页面直接使用,直接使用 SVG 图标,当做一般的 svg 使用 icon使用时需要用以下两种方式方式: 如果用在el-button里面的icon属性上使用,用SVG方式无效,还是需要引入再使用(不知道有没有其他方式) 注意: 使用 :icon=\\\"Edit\\\" 则icon的大

    2024年02月06日
    浏览(72)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包