一、寫在前面?
哈嘍~各位掘友,最近利用工作之餘開源了Vue電商專案,高仿某知名O2O買菜平臺,整個專案做下來收穫還是蠻多的,可以掃描下方二維碼體驗,本篇是專案的核心知識拆解篇,主要是拆解專案中svg元件封裝使用,篇幅較長,順手點個贊先收藏下?
?? 開源兩週已獲得了1100+的點贊 開源不易 感謝小星星❤ 點我看原始碼
二、啥是SVG圖?
業內知名博主張鑫旭前輩很早就說了SVG Sprittes未來必火,具體為啥火,我偷個懶,不復制貼上啦O(∩_∩)O哈哈~點開文章底部的連結可以一看究竟,文章篇幅較長,耐心些看看這個SVG他的前世今生,到底是個神馬鬼,對前端工程師來說受益匪淺~
三、擁抱SVG
SVG有其獨特的先天體積小,且不管放大多少倍都不會失真的優勢,對於移動端App來說是簡直是爽的不要不要的…所以在我開源的ddbuy專案中大多數圖示都採用了SVG格式圖示,用起來真香O(∩_∩)O哈哈~
四、SVG圖示資源哪裡來
不饒彎彎了直接推薦你到阿里巴巴開源的iconfont上找,圖示庫非常多,總有你喜歡的那一套,所以牆裂推薦,如何使用iconfont,就不多說了,上去查詢自己喜歡的圖示,建立到自己的專案,把圖示放到你自己的專案中,用的時候直接匯出就可以了,我這裡說下SVG圖的匯出方法.
點選複製SVG便可以匯出此SVG的程式碼
1<svg t="1575638689495" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8157" width="200" height="200"><path d="M230.4 576.512c-12.288 9.728-25.088 24.064-28.672 41.984-5.12 24.576-1.024 55.296 22.528 79.872 28.672 29.184 72.704 37.376 91.648 38.912 51.2 3.584 105.984-22.016 147.456-50.688 16.384-11.264 44.032-34.304 70.144-69.632-59.392-30.72-133.632-64.512-212.48-61.44-40.448 1.536-69.632 9.728-90.624 20.992z m752.64 135.68c26.112-61.44 40.96-129.024 40.96-200.192C1024 229.888 794.112 0 512 0S0 229.888 0 512s229.888 512 512 512c170.496 0 321.536-83.968 414.72-211.968-88.064-43.52-232.96-115.712-322.56-159.232-42.496 48.64-105.472 97.28-176.64 118.272-44.544 13.312-84.992 18.432-126.976 9.728-41.984-8.704-72.704-28.16-90.624-47.616-9.216-10.24-19.456-22.528-27.136-37.888 0.512 1.024 1.024 2.048 1.024 3.072 0 0-4.608-7.68-7.68-19.456-1.536-6.144-3.072-11.776-3.584-17.92-0.512-4.096-0.512-8.704 0-12.8-0.512-7.68 0-15.872 1.536-24.064 4.096-20.48 12.8-44.032 35.328-65.536 49.152-48.128 114.688-50.688 148.992-50.176 50.176 0.512 138.24 22.528 211.968 48.64 20.48-43.52 33.792-90.112 41.984-121.344h-307.2v-33.28h157.696v-66.56H272.384V302.08h190.464V235.52c0-9.216 2.048-16.384 16.384-16.384h74.752V302.08h207.36v33.28h-207.36v66.56h165.888s-16.896 92.672-68.608 184.32c115.2 40.96 278.016 104.448 331.776 125.952z" fill="#06B4FD" p-id="8158"></path></svg>
複製程式碼於是乎,你就可以把這些程式碼直接複製到你想用的地方了,以下是我在專案中使用案例
1<template>
2 <div id="goodsDetail">
3 <van-nav-bar title="商品詳情"
4 :fixed=true
5 left-arrow
6 @click-left="onClickLeft">
7 <svg t="1575254700818"
8 class="icon"
9 viewBox="0 0 1024 1024"
10 version="1.1"
11 xmlns="http://www.w3.org/2000/svg"
12 p-id="1907"
13 width="32"
14 height="32"
15 slot="right">
16 <path d="M621.93259435 611.38542038L423.92102316 703.33559492c-9.52523406 4.42304387-20.93769289 0.2488718-25.36137327-9.27636225-4.42304387-9.52523406-0.2488718-20.93769289 9.27636226-25.36137326l198.01157118-91.95017455c9.52523406-4.42304387 20.93769289-0.2488718 25.36137327 9.27636226 4.42368037 9.52587056 0.2488718 20.93832939-9.27636225 25.36137326zM600.48824684 870.32029948l-189.07064485-109.15988242c-9.09495954-5.25113136-12.24054635-16.98884212-6.98941498-26.08443814 5.25113136-9.09495954 16.98884212-12.24054635 26.08443815-6.98941498l189.07064483 109.15988241c9.09495954 5.25113136 12.24054635 16.98884212 6.98941499 26.08443814-5.25113136 9.09559604-16.98884212 12.24054635-26.08443814 6.98941499z"
17 fill="#F9C73D"
18 p-id="1908"></path>
19 <path d="M358.28506354 712.46556199m-92.29261194 0a92.29261195 92.29261195 0 1 0 184.58522388 0 92.29261195 92.29261195 0 1 0-184.58522388 0Z"
20 fill="#FFEABB"
21 p-id="1909"></path>
22 <path d="M358.28506354 823.85319711c-61.419142 0-111.38763511-49.96849311-111.38763512-111.38763512s49.96849311-111.38763511 111.38763512-111.38763511 111.38763511 49.96849311 111.38763512 111.38763511-49.96849311 111.38763511-111.38763512 111.38763512z m1e-8-184.5852239c-40.36115047 0-73.19758879 32.83643833-73.19758879 73.19758877s32.83643833 73.19758879 73.19758879 73.1975888 73.19758879-32.83643833 73.1975888-73.19758879-32.83643833-73.19758879-73.1975888-73.19758878zM683.85520847 640.54097475c-50.89014624 0-92.29261195-41.40246571-92.29261196-92.29261196s41.40246571-92.29261195 92.29261196-92.29261194 92.29261195 41.40246571 92.29261195 92.29261194-41.40246571 92.29261195-92.29261195 92.29261195z m0-146.39517759c-29.83215469 0-54.10256563 24.27041094-54.10256564 54.10256563s24.27041094 54.10256563 54.10256564 54.10256564 54.10256563-24.27041094 54.10256562-54.10256564-24.27041094-54.10256563-54.10256562-54.10256563zM683.85520847 979.15938549c-50.89014624 0-92.29261195-41.40246571-92.29261196-92.29261195s41.40246571-92.29261195 92.29261196-92.29261195 92.29261195 41.40246571 92.29261195 92.29261195-41.40246571 92.29261195-92.29261195 92.29261196z m0-146.39517756c-29.83215469 0-54.10256563 24.27041094-54.10256564 54.10256561s24.27041094 54.10256563 54.10256564 54.10256564 54.10256563-24.27041094 54.10256562-54.10256564-24.27041094-54.10256563-54.10256562-54.10256561z"
23 fill="#F9C73D"
24 p-id="1910"></path>
25 </svg>
26 </van-nav-bar>
27 </div>
28 <template>
複製程式碼當我第一次這樣寫,並且沒有做任何封裝開源出來後,收到很多小夥伴的吐槽,WTFU這TM是什麼鬼,就一個商品標題bar然後為了趕個時髦,加了個SVG圖示你TM給我寫了足足30多行的程式碼,真辣雞o(╥﹏╥)o
於是乎,我覺得這個事不能一直這麼被罵下去,於是谷歌了一把,原來這個問題有個叫花褲衩的大兄弟,據說是位元組跳動的大師兄,開源了一個很吊炸天的Vue後臺前端解決方案vue-element-admin,封裝了很多好用且實用的元件,包括本文借鑑的封裝SVG方案,於是乎從頭到尾原始碼讀了一篇,受益匪淺Thanks♪(･ω･)ﾉ強烈推薦小夥伴讀一遍原始碼..
五、封裝SVG
第一步:安裝 svg-sprite-loader
1npm install svg-sprite-loader --save
複製程式碼第二步:在components公共元件資料夾下建立SvgIcon和index.js並加入以下元件配置程式碼
在index.js中
1<template>
2 <svg :class="svgClass"
3 aria-hidden="true"
4 v-on="$listeners">
5 <use :xlink:href="iconName" />
6 </svg>
7</template>
8<script>
9export default {
10 name: 'SvgIcon',
11 props: {
12 iconClass: {
13 type: String,
14 required: true
15 },
16 className: {
17 type: String,
18 default: ''
19 }
20 },
21 computed: {
22 iconName () {
23 return `#icon-${this.iconClass}`
24 },
25 svgClass () {
26 if (this.className) {
27 return 'svg-icon ' + this.className
28 } else {
29 return 'svg-icon'
30 }
31 }
32 }
33}
34</script>
35<style scoped>
36.svg-icon {
37 width: 1em;
38 height: 1em;
39 vertical-align: -0.15em;
40 fill: currentColor;
41 overflow: hidden;
42}
43</style>
複製程式碼第三步:在src目錄下建立icon檔案及子檔案svg和index.js並配置從svg資料夾中讀取svg檔案
在index.js中
1import Vue from 'vue'
2import SvgIcon from '@/components/SvgIcon' // svg元件
3// 註冊為全域性元件
4Vue.component('svg-icon', SvgIcon)
5const req = require.context('./svg', false, /\.svg$/)
6const requireAll = requireContext => requireContext.keys().map(requireContext)
7requireAll(req)
複製程式碼第四步:配置webpage
在vue.config.js中加入以下程式碼:
1function resolve(dir)
2{
3 return path.join(__dirname, dir)
4}
5
6module.exports = {
7chainWebpack(config) {
8 // set svg-sprite-loader
9 config.module
10 .rule('svg')
11 .exclude.add(resolve('src/icons'))
12 .end()
13 config.module
14 .rule('icons')
15 .test(/\.svg$/)
16 .include.add(resolve('src/icons'))
17 .end()
18 .use('svg-sprite-loader')
19 .loader('svg-sprite-loader')
20 .options({
21 symbolId: 'icon-[name]'
22 })
23 .end()
24 }
25}
複製程式碼第五步:在main.js中全域性引入icon
1import './icons' // icon
複製程式碼第六步:將複製好的svg圖示程式碼放到src下icon資料夾的子檔案svg下:
第七步:使用全域性元件svg-icon
在需要用svg圖示的地方通過
1<svg-icon iconClass="backtotop"/>
複製程式碼iconClass是你儲存在
icon下svg檔案下的svg名稱.
這下大功告成了,雖然麻煩了點,但是這是個一勞永逸的方法,也是提升逼格,提高程式碼閱讀的好辦法,再也不用擔心,程式碼中一大段svg程式碼被各位大佬噴的尷尬場面啦~開森^_^
四、文末彩蛋?
希望我的逗B式分享能幫助到你,傳播知識,分享快樂,與你一起共同進步~
最近在和一個大廠小姐姐一起合作運營:前端甜甜圈,內容呢,肯定是技術相關的,不會瞎扯淡,純技術,沒套路,也不會有各種無聊的廣告,還有免費學習資料不定期大放送,已經開始備戰年後跳槽季輕鬆搞定大廠面試題系列啦,每週2次左右推送,相信聽完他的甜美語音分享,對枯燥乏味的知識將會變得更加有趣和好玩,可以掃描下方的二維碼關注下啦,也可以掃描我的私人微信拉你進群,和資深大佬交朋友,一起發現和探索前端領域好玩有趣有用的新知識Thanks♪(･ω･)ﾉ
相關閱讀