vue如何动态生成andv图标
更新时间：2023年10月07日 17:05:41 作者：木槿-年华
这篇文章主要介绍了vue如何动态生成andv图标问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue动态生成andv图标
在最近使用andv的时候，出现了一个问题，在不使用iconfont图标的前提下使用andv自带的图标库动态生成icon图标。
在百度一下后，发现以下方法
1.新建一个createIcon.js文件
import * as icons from '@ant-design/icons-vue';
import { createVNode } from 'vue'
export const CreateIcon = (props)=>{
const {icon} = props;
return createVNode(icons[icon]);
}2.使用
<a-menu
v-model:selectedKeys="state.selectedKeys"
theme="dark"
mode="inline"
>
<template v-for="item in menus" :key="item.path">
<a-sub-menu
v-if="item.children && item.children.length"
key="item.name"
>
<template #icon>
<CreateIcon :icon="item.icon"></CreateIcon>
</template>
<template #title>{{ item.title }}}</template>
<a-menu-item v-for="itemChild in item.children" :key="itemChild.name">
<span>{{ itemChild.title }}</span>
</a-menu-item>
</a-sub-menu>
<a-menu-item v-else>
<template #icon>
<CreateIcon :icon="item.icon"></CreateIcon>
</template>
<span>{{ item.title }}</span>
</a-menu-item>
</template>
</a-menu>import {CreateIcon} from './CreateIcon.js';
import {Component} from 'vue';
interface routerConfig {
path: string;
name: string;
title: string;
icon?:string|Component,
children?:routerConfig[],
}
const menus:routerConfig[] = [
{
path: "/home",
name: "home",
title: "首页",
icon: 'HomeOutlined',
children: [],
},
];vue动态绑定图标
图标和图片的不同
图标时字符，图片时二进制流。
即图片加载会比图标慢，且加载图标最好不要用img标签，我们可以把图标当成组件用 import 的方法引入进来，然后当成标签引入。
安装 svg
1.使用管理员身份运行cmd窗口，切换到项目目录下执行。
npm add svg
从图标库下载图标
1.阿里图标库
2.下载svg
3.在compone目录下建立一个icons，在icons下建立一个svg目录，专门用来放图标。
查看插件的使用方法
vue所有的插件都在 node_modules
中根据下载时的插件名来找到插件 e-cli-plugin-svg 的 README
展示图标
定义动态组件 MyIcon.vue
1.其中 myicon 是从父组件传过来的属性
2.computed是用来根据 myicon.name (图标的名字)来动态生成图标地址的。原因是在 export default{} 外引入组件时，我们接收到的props属性是传递不到 export default{} 外面的，所以采用computed来协助生成 icon 组件。
3.:style 是动态绑定样式，此处绑定了宽，高。并在props中设置了默认值，如果父组件不传递宽高信息的话，就是使用默认值。
4.:fill 是绑定填充属性样式的，也在 props 中设置了默认值。
<template>
<div>
<component
:is="icon"
:style="{width : myicon.width , hight : myicon.hight}"
:fill="myicon.fill"
></component>
</div>
</template><script>
export default{
props:{
myicon:{
name:{
type:String
},
width:{
type:String,
default:'40px'
},
hight:{
type:String,
default:'40px'
},
fill:{
type:String,
default:'#000000'
}
}
},
computed:{
icon(){
return () => import('@/components/icons/svg/'+ this.myicon.name +'.svg?inline')
}
}
}
</script>
<style>
</style>在main,js中全局引入并定义组件 MyIcon.vue
import mysvg from '@/components/MyIcon.vue'
Vue.component('my-icon',mysvg)调用 my-icon 作为父组件
1.把要传递的属性定义在 myicon:{} 中，其中 name 是必填项，它是图标的名字，不带后缀。
<template> <my-icon :name = "scope.row.icon" :width = "50px" :hight = "50px" :fill = "#ff00ff"> </my-icon> </template>
<script>
export default {
data() {
return {
myicon:{
name: "position",
width: "60px",
hight: "60px",
fill : "#ff00ff"
},
}
},
}
</script>
<style scoped lang="less">
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中的el-tooltip提示黑框遮挡问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了详解win7 cmd执行vue不是内部命令的解决方法的相关资料,这里提供了解决问题的详细步骤，具有一定的参考价值，需要的朋友可以参考下2017-07-07
这篇文章主要介绍了vue-pdf插件实现pdf文档预览方式(自动分页预览)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要给大家介绍了关于vue组件化中slot的基本使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
在开发Web应用程序时，常常需要进行登录验证和权限管理，本文主要介绍了vue登录路由权限管理的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
最近做的项目用到了全选全不选功能,于是就自己动手写了一个,这篇文章主要给大家介绍了关于Element树形控件el-tree实现一键全选、反选功能的相关资料,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue如何在项目中调用腾讯云的滑动验证码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要为大家详细介绍了vue.js声明式渲染和条件与循环的基础知识，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
使用vue3+vite开发的时候,导入svg图片时,同一个文件夹下的文件,其中一个路径正常解析,另一个不行,更改文件名之后,该图片文件就可以正常解析了,本文给大家介绍了使用vue3+vite导入图片路径错乱问题排查及解决,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue 将多个过滤器封装到一个文件中实现方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-09-09
最新评论