您好,登錄后才能下訂單哦!
本篇文章為大家展示了如何在vue中動(dòng)態(tài)綁定圖標(biāo),內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
1.使用管理員身份運(yùn)行cmd窗口,切換到項(xiàng)目目錄下執(zhí)行。
npm add svg
1.阿里圖標(biāo)庫
https://www.iconfont.cn/
2.下載svg
3.在compone目錄下建立一個(gè)icons,在icons下建立一個(gè)svg目錄,專門用來放圖標(biāo)。
vue所有的插件都在node_modules中
根據(jù)下載時(shí)的插件名來找到插件e-cli-plugin-svg的README
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" : :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>
上述內(nèi)容就是如何在vue中動(dòng)態(tài)綁定圖標(biāo),你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。