以前用的其它的组件库,图标有标签,可以直接指定type即可,Ant Design Vue V3没有相应标签,只有<step-forward-outlined />这样的。为了能动态展示Icon,做了如下的处理
1. 先下载图标库 (ant design的图标库要单独install)
npm i --save @ant-design/icons-vue
2. 下载完成后在 main.js 中添加
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import * as Icons from '@ant-design/icons-vue'
const app = createApp(App)
// 注册图标组件
for (const i in Icons) {
app.component(i, Icons[i])
}
app.mount('#app)
3. 在vue文件中使用 <component :is="icon">
<template>
<component :is="icon">
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'TestIcon',
setup () {
return {
icon: ref('step-backward-outlined') // step-backward-outlined 在ant design vue 的icon里拷贝就可以
}
}
})
</script>
4. 完成
希望对有需要的兄弟有所帮助.
网友评论