vue動態綁定圖標的完整步驟
0 圖標和圖片的不同
圖標時字符,圖片時二進制流。即圖片加載會比圖標慢,且加載圖標最好不要用img標簽,我們可以把圖標當成組件用import的方法引入進來,然後當成標簽引入。
1 安裝svg
1.使用管理員身份運行cmd窗口,切換到項目目錄下執行。
npm add svg
2 從圖標庫下載圖標
1.阿裡圖標庫
https://www.iconfont.cn/
2.下載svg
3.在compone目錄下建立一個icons,在icons下建立一個svg目錄,專門用來放圖標。
3 查看插件的使用方法
- vue所有的插件都在node_modules中
- 根據下載時的插件名來找到插件e-cli-plugin-svg的README
4 展示圖標
1 定義動態組件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>
2 在main,js中全局引入並定義組件MyIcon.vue
import mysvg from '@/components/MyIcon.vue' Vue.component('my-icon',mysvg)
3 調用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動態綁定圖標的文章就介紹到這瞭,更多相關vue動態綁定圖標內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue3+vite2中使用svg的方法詳解(親測可用)
- 基於Vue實現自定義組件的方式引入圖標
- Vue中引入svg圖標的兩種方式
- vue 圖標選擇器的實例代碼
- vue3+vue-cli4中使用svg的方式詳解(親測可用)