Vue3+TS + element-plus 项目动态生成Icon图标

1，使用

文档原话：如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用

在main.ts中先导入

import * as Icons from '@element-plus/icons'

.1，方式一

在main.ts中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { store, key } from './store'
import * as Icons from '@element-plus/icons'const app = createApp(App)
app.use(store, key)
app.use(router)
app.mount('#app')
// 注册全局组件**
Object.keys(Icons).forEach(key => {app.component(key, Icons[key as keyof typeof Icons])
})

在xxx.vue文件中

// html
<template><el-icon :size="20"><alarm-clock /></el-icon>
</template>

//或使用动态组件

// html
<template><component class="xxx" :is="iconName"></component>
</template>// script
export default {name: 'Login',setup() {const iconName = 'Search'return {iconName}}
}

2.2，方式二

在main.ts中

import { createApp, createVNode } from 'vue'
import App from './App.vue'
import router from './router'
import { store, key } from './store'
import * as Icons from '@element-plus/icons'const app = createApp(App)
app.use(store, key)
app.use(router)
app.mount('#app')// 创建Icon组件
const Icon = (props: { icon: string }) => {const { icon } = propsreturn createVNode(Icons[icon as keyof typeof Icons])
}
// 注册Icon组件
app.component('Icon', Icon)

使用动态组件

// html
<template><Icon class="xxx" :icon="iconName"></Icon>
</template>// script
export default {name: 'Login',setup() {const iconName = 'Search'return {iconName}}
}

原文链接：https://blog.csdn.net/pdd11997110103/article/details/121440220

Vue3+TS + element-plus 项目动态生成Icon图标相关推荐

Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，菜单不显示的解决方法
目前在升级前端框架,UI组件element-plus升级到了目前最新的1.3.0beta8版本,图标也换成了官方提供的SvgIcon图标,官方提供了组件导入的方式使用图标.而我的图标是全局导入的,默认 ...
vue3+ts+element封装一个简易的curd
vue3+ts+element封装一个简易的curd 闲来无趣做一个简单的table封装,不喜勿喷首先创建一个公共的Table.vue/pagination.vue文件 Table.vue < ...
Naive 组件库动态渲染icon图标
使用Naive组件库默认你已经安装了对应的icon图标库没有安装的参考链接安装点击传送 Naive组件动态渲染Icon图标主要是使用 component Vue内置组件来渲染对应的icon组件, ...
生成icon图标 1005 html 左上角icon图标
生成icon图标 1005 生成一个图片生成方式随意可截图可ps 可在线生成利用工具生成icon ICO图标在线生成 https://tool.520101.com/diannao/ico/ ...
css画表格多级表头,element UI实现动态生成多级表头
一.效果图二.封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成 DynamicTable.vue ...
基于Element组件下动态生成多级表头以及数据
介绍 element是一套基于vue的组件,本文主要介绍如何根据后端传输数据来动态生成表格. 代码 html 利用vue里的for循环来动态生成表头,再利用if语句判断是否有二级表头,并将对应key赋 ...
vue项目设置浏览器icon图标
1. 引入图标在vue项目中的index.html中引入图标,为防止项目打包时图片路径出错,需把icon图标放在static静态文件夹下 <link rel="shortcut ic ...
vb.net下，生成icon图标文件，图像格式为bmp，可用作windows应用的桌面快捷方式图标
一.icon文件格式的简单介绍 windows的图标文件,其格式为ico. windows的.net编程,自带Icon函数,可以利用Icon.Save来保存icon文件,其中稍微要注意的就是,icon ...
微信小程序项目中使用icon图标
效果: 步骤: 1.先让ui负责人把你的账号加入到项目中,加入到项目中后就可以在icon图标库中看到该项目 2.在小程序中使用新建一个view,在上面加一个class,复制icon名字上去即可,注意 ...

Vue3+TS + element-plus 项目动态生成Icon图标

1，使用

.1，方式一

2.2，方式二

Vue3+TS + element-plus 项目动态生成Icon图标相关推荐

最新文章

热门文章

Vue3+TS + element-plus 项目 动态生成Icon图标

1，使用

.1，方式一

2.2，方式二

Vue3+TS + element-plus 项目 动态生成Icon图标相关推荐

最新文章

热门文章

Vue3+TS + element-plus 项目动态生成Icon图标

Vue3+TS + element-plus 项目动态生成Icon图标相关推荐