淺析vue cli3 封裝Svgicon組件正確姿勢(shì)(推薦)
vue cli3 手把手教學(xué)封裝Svgicon組件
第一步:在src文件下新建一個(gè)放置svg文件的文件夾

第二步:在components文件下新建一個(gè)Svg組件
這是一個(gè) 文件夾 專門用來(lái)存放項(xiàng)目里面需要使用的svg文件,比如 a.svg b.svg …

svg組件源碼
<template> <svg : aria-hidden='true'> <use :xlink:href='http://m.b3g6.com/bcjs/iconName'></use> </svg></template><script type='text/ecmascript-6'>/* icon組件實(shí)現(xiàn)自動(dòng)引入 ../../Icons/svg 下面所有的圖標(biāo)了*之后我們就要使用到 webpack 的 require.context。很多人對(duì)于 require.context可能比較陌生,直白的解釋就是require.context('./test', false, /.test.js$/); 這行代碼就會(huì)去 test 文件夾(不包含子目錄)下面的找所有文件名以 .test.js 結(jié)尾的文件能被 require 的文件。 更直白的說(shuō)就是 我們可以通過正則匹配引入相應(yīng)的文件模塊*/const requireAll = requireContext => requireContext.keys().map(requireContext)const req = require.context(’../../Icons/svg’, false, /.svg$/)requireAll(req)export default { name: ’Svgicon’, props: { iconClass: { type: String, required: true }, className: { type: String } }, computed: { iconName () { return `#icon-${this.iconClass}` }, svgClass () { if (this.className) { return ’svg-icon ’ + this.className } else { return ’svg-icon’ } } }}</script><style>.svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }</style>
第三步:配置vue.config.js
需要的loader npm i svg-sprite-loader -DchainWebpack: config => { const svgRule = config.module.rule(’svg’) svgRule.uses.clear() svgRule .use(’svg-sprite-loader’) .loader(’svg-sprite-loader’) .options({ symbolId: ’icon-[name]’ })}
以上就配置完畢
注:未注冊(cè)組件在人口文件全局注冊(cè)即可使用(main.js)
到此這篇關(guān)于淺析vue cli3 封裝Svgicon組件正確姿勢(shì)(推薦)的文章就介紹到這了,更多相關(guān)vue cli3 Svgicon組件內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. JS實(shí)現(xiàn)前端動(dòng)態(tài)分頁(yè)碼代碼實(shí)例2. 關(guān)于IDEA 2020.3 多窗口視圖丟失的問題3. javascript實(shí)現(xiàn)貪吃蛇小練習(xí)4. 一文帶你徹底理解Java序列化和反序列化5. 用Spring JMS使異步消息變得簡(jiǎn)單6. js實(shí)現(xiàn)碰撞檢測(cè)7. PHP驗(yàn)證碼工具-Securimage8. Python 制作查詢商品歷史價(jià)格的小工具9. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條10. Python 利用Entrez庫(kù)篩選下載PubMed文獻(xiàn)摘要的示例

網(wǎng)公網(wǎng)安備