vue3+ts+element-plus动态图标生成方式

1.安装

$ yarn add @element-plus/icons
# 或者
$ npm install @element-plus/icons

2.使用全局组件的方式引入

//main.ts
import * as Icon from '@element-plus/icons-vue'//在最下面导入全局组件
Object.keys(Icon).forEach((key)=>{app.component(key,Icon[key])
})

3.在tsconfig.json中新增

 "suppressImplicitAnyIndexErrors":true, // 解决字符串下表报错

4.在组件中引用

<component class="icons" :is="menu.meta.icon" />
//:is="" 里引入后端返回的icon属性
//另，修改一下css样式

记录一下。

vue3+ts+element-plus动态图标生成方式相关推荐

Vue3 Element Plus 动态图标
Vue3 Element Plus 动态图标 Element Plus 中的图标以组件的形式来使用,而在基于Vue 2.x的Element UI中图标是字符串的形式,这样就导致过去的一些使用习惯不得不 ...
vue3+ts+element封装一个简易的curd
vue3+ts+element封装一个简易的curd 闲来无趣做一个简单的table封装,不喜勿喷首先创建一个公共的Table.vue/pagination.vue文件 Table.vue < ...
Vue3+TS使用element-plus 动态Icon图标
目录 1,前言 2,使用 2.1,方式一 2.2,方式二 1,前言源于一段话 Element Plus 团队正在将原有组件内的 Font Icon 向 SVG Icon 迁移,请多多留意更新日志, ...
Vue3+TS + element-plus 项目动态生成Icon图标
1,使用文档原话:如果你想像用例一样直接使用,你需要全局注册组件,才能够直接在项目里使用在main.ts中先导入 import * as Icons from '@element-plus/ico ...
vue3+ts+element 简单的登陆案例（一）
第一步创建vue3项目项目名字不能使用驼峰命名创建好项目目录我们需要引入自己的css文件来重订样式再index.html 文件夹中引入css html, body, div, span, a ...
Vue3+TS+Vite+Element Plus搭建后台管理系统
Vue3+TS+Vite+Element Plus搭建后台管理系统 1.简介 2.效果图 3.技术栈 4.项目目录 5.setting.js(全局配置文件) 6.路由router 7.状态管理stor ...
vue vite创建项目的使用（使用技术栈vue3+vuex+router+ts+element plus）
文章目录前言创建vite项目 vite.config.ts配置自动化引入组件配置以及.env配置的引用创建src/vite-env.d.ts main.ts配置 api/request.ts ...
使用Vite创建Vue3+TS项目并整合Element Plus框架等一条龙服务
记录一下使用Vite创建Vue3+TS项目以及整合Element Plus框架,还有Less.Pinia.Vue-router.monaco-editor等插件或组件. 一.使用Vite创建Vue3+ ...
vue3 使用Element Plus ＜script lang=“ts“ setup＞加上lang=“ts“后编译错误
vue3 使用Element Plus <script lang="ts" setup>加上lang="ts"后编译错误目录 vue3 使用Ele ...

vue3+ts+element-plus动态图标生成方式

vue3+ts+element-plus动态图标生成方式相关推荐

最新文章

热门文章