Vue3+TS使用element-plus 动态Icon图标

1,前言


源于一段话

Element Plus 团队正在将原有组件内的 Font Icon 向 SVG Icon 迁移,请多多留意更新日志, 及时获取到更新信息,Font Icon 将会在第一个正式发布被废弃,请尽快迁移

在此记录一下如何使用element-plus中的icon组件

环境:

  • Vue:3.2.16
  • Element-Plus:1.2.0-beta.3
  • TypeScript:4.4.3
  • Vite:2.6.4

2,使用


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

main.ts中先导入

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

2.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 } = props
  return 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
    }
  }
}

如果看了觉得有帮助的,我是@上进的鹏多多,欢迎 点赞 关注 评论;
END

往期文章

个人主页

  • 14
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
以下是使用Vue3和TypeScript结合Element-Plus实现头像上传的示例代码: ```vue <template> <div> <el-upload class="avatar-uploader" action="/upload" :show-file-list="false" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="handleError" > <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ name: 'AvatarUploader', setup() { const imageUrl = ref(''); const beforeUpload = (file: File) => { // 验证文件类型和大小等 return true; }; const handleSuccess = (response: any) => { // 上传成功后的处理逻辑 imageUrl.value = response.data.url; }; const handleError = (error: any) => { // 上传失败后的处理逻辑 console.log(error); }; return { imageUrl, beforeUpload, handleSuccess, handleError, }; }, }); </script> <style scoped> .avatar-uploader { display: inline-block; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: #f8f8f8; position: relative; cursor: pointer; } .avatar { width: 100%; height: 100%; object-fit: cover; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> ``` 这是一个名为`AvatarUploader`的Vue组件,使用了`el-upload`组件来实现头像上传功能。在`beforeUpload`方法中,你可以添加文件类型和大小的验证逻辑。在`handleSuccess`方法中,你可以处理上传成功后的逻辑,例如更新头像的URL。在`handleError`方法中,你可以处理上传失败后的逻辑。 你可以将以上代码保存为一个.vue文件,然后在你的Vue项目中使用该组件来实现头像上传功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鹏多多.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值