快捷導(dǎo)航

vue動(dòng)態(tài)綁定圖標(biāo)的完整步驟

更新時(shí)間：2021年05月23日 15:31:28 作者：我的龍呢

動(dòng)態(tài)綁定是我們?nèi)粘ｉ_發(fā)中經(jīng)常遇到的一個(gè)需求，下面這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)綁定圖標(biāo)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下

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

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

1 安裝svg

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

npm add svg

2 從圖標(biāo)庫下載圖標(biāo)

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

https://www.iconfont.cn/

2.下載svg

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

3 查看插件的使用方法

vue所有的插件都在node_modules中
根據(jù)下載時(shí)的插件名來找到插件e-cli-plugin-svg的README

4 展示圖標(biāo)

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

1.其中myicon是從父組件傳過來的屬性

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

2 在main,js中全局引入并定義組件MyIcon.vue

import mysvg from '@/components/MyIcon.vue'
Vue.component('my-icon',mysvg)

3 調(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>