VUE Icon外掛程式封裝

2021-10-25 15:30:46 字數 1510 閱讀 7971

本地svg抽象為icon全域性元件，讓icon使用更加優雅，參考手摸手，帶你優雅的使用 icon

在components資料夾下增加iconsvg資料夾，資料夾中增加index.vue，這裡主要定義元件。

// 支援使用外鏈的形式引入 svg。例如：
@/utils/index.js


* @param path


* @returns 


*/export function i***ternal(path)
xlink:href 中傳入 svg id 就好了，由於在上面的配置檔案中我們直接使用檔名作為 symbol 的 id，所以這裡傳入的 id 即為你想顯示的圖示的 svg 檔名

vue專案中src目錄下增加icons資料夾：本地svg、入口檔案index.js

index.js中內容如下：

// index.js


import vue from 'vue'


import svgicon from '@/components/iconsvg'// 引入svg元件


// 註冊全域性元件


vue.component('svg-icon', iconsvg) 


// 自動引入svg資料夾下所有.svg檔案


/* require.context，通過正則匹配到可能的檔案，全部引入


require.context(directory, usesubdirectories, regexp )：


- directory：說明需要檢索的目錄


- usesubdirectories：是否檢索子目錄


- regexp: 匹配檔案的正規表示式


*/const req = require.context('./svg', false, /\.svg$/)


const requireall = requirecontext => requirecontext.keys().map(requirecontext)


requireall(req)
使用外掛程式svg-sprite-loader： webpack loader ，可以將多個 svg 打包成 svg-sprite。

vue-cli預設情況下會使用url-loader對svg進行處理，會將它放在/img目錄下，所以這時候我們使用webpack配置進行修改。

修改webpack.base.conf.js



},},
webpack新增處理svg的loader，第乙個用來處理svg的，第二個是去除svg處理的。

main.js中匯入icons

import './icons' // icon 引入icons資料夾下所有的icon
到這裡就可以直接在**中直接使用 來引入乙個svg，只需要修改icon-class為當前svg的名稱即可。

外掛程式 之封裝

比方說 乙個 加 的外掛程式 function jquery add 5,6 呼叫方法 tab 欄切換 功能 function tab function options 把options中的屬性，把對應屬性的值賦給defaults對應的屬性 defaults.tabmenu options.tabm...

封裝JS外掛程式

jquery 根據json物件填充form表單 author en param fromid form表單id param jsondate json物件 上面的是樣式還是 的注釋 解釋。反正是自己封裝js 的第一步。封裝js的 就是為了方便使用，就比如可以封裝一些常用的 不用重複書寫多次。func...

js外掛程式封裝

封裝乙個js外掛程式其實非常簡單 第一步，先拿出需要封裝功能函式 function options 第二步，避免外掛程式內引數與專案中發生衝突，需要給外掛程式設定作用域 封閉作用域之後在外部如何呼叫呢 第三步，將外掛程式內函式暴露出去 this.call this typeof window und...