vue如何動(dòng)態(tài)生成andv圖標(biāo)

更新時(shí)間：2023年10月07日 17:05:41 作者：木槿-年華

這篇文章主要介紹了vue如何動(dòng)態(tài)生成andv圖標(biāo)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue動(dòng)態(tài)生成andv圖標(biāo)

在最近使用andv的時(shí)候，出現(xiàn)了一個(gè)問(wèn)題，在不使用iconfont圖標(biāo)的前提下使用andv自帶的圖標(biāo)庫(kù)動(dòng)態(tài)生成icon圖標(biāo)。

在百度一下后，發(fā)現(xiàn)以下方法

1.新建一個(gè)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: "首頁(yè)",
    icon: 'HomeOutlined',
    children: [],
  },
];

vue動(dòng)態(tài)綁定圖標(biāo)

圖標(biāo)和圖片的不同

圖標(biāo)時(shí)字符，圖片時(shí)二進(jìn)制流。

即圖片加載會(huì)比圖標(biāo)慢，且加載圖標(biāo)最好不要用img標(biāo)簽，我們可以把圖標(biāo)當(dāng)成組件用 import 的方法引入進(jìn)來(lái)，然后當(dāng)成標(biāo)簽引入。

安裝 svg

1.使用管理員身份運(yùn)行cmd窗口，切換到項(xiàng)目目錄下執(zhí)行。

npm add svg

從圖標(biāo)庫(kù)下載圖標(biāo)

1.阿里圖標(biāo)庫(kù)

https://www.iconfont.cn/

2.下載svg

3.在compone目錄下建立一個(gè)icons，在icons下建立一個(gè)svg目錄，專門(mén)用來(lái)放圖標(biāo)。

查看插件的使用方法

vue所有的插件都在 node_modules

中根據(jù)下載時(shí)的插件名來(lái)找到插件 e-cli-plugin-svg 的 README

展示圖標(biāo)

定義動(dòng)態(tài)組件 MyIcon.vue

1.其中 myicon 是從父組件傳過(guò)來(lái)的屬性

2.computed是用來(lái)根據(jù) myicon.name (圖標(biāo)的名字)來(lái)動(dòng)態(tài)生成圖標(biāo)地址的。原因是在 export default{} 外引入組件時(shí)，我們接收到的props屬性是傳遞不到 export default{} 外面的，所以采用computed來(lái)協(xié)助生成 icon 組件。

3.:style 是動(dòng)態(tài)綁定樣式，此處綁定了寬，高。并在props中設(shè)置了默認(rèn)值，如果父組件不傳遞寬高信息的話，就是使用默認(rèn)值。

4.:fill 是綁定填充屬性樣式的，也在 props 中設(shè)置了默認(rèn)值。

<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)

調(diào)用 my-icon 作為父組件

1.把要傳遞的屬性定義在 myicon:{} 中，其中 name 是必填項(xiàng)，它是圖標(biāo)的名字，不帶后綴。

<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>