vue封裝svgIcon公共元件

1、在components新建common\svgicon.vue

3、在src下新建assets\image\icons\index.js

import vue from 'vue'

import svgicon from '../../../components/common/svgicon'
/* require.context("./test", false, /.test.js$/);
這行**就會去 test 資料夾（不包含子目錄） 下面的找所有檔名以 .test.js 結尾的檔案能被 require 的檔案。
更直白的說就是 我們可以通過正則匹配引入相應的檔案模組。
require.context有三個引數： 
directory：說明需要檢索的目錄 
usesubdirectories：是否檢索子目錄 
regexp: 匹配檔案的正規表示式 */
//全域性註冊 
vue.component('svg-icon', svgicon) 
const requireall = requirecontext => requirecontext.keys().map(requirecontext) 
const req = require.context('./svg', false, /\.svg$/) 
requireall(req)

},

},

vue中封裝svg icon元件並使用

1.使用vue cli3.0腳手架執行搭建乙個專案，位址 截圖如下 2.components檔案下新建svgicon元件 檔案中的 如下 3.將所需svg檔案放置icons的svg資料夾下 icons檔案下的index.js檔案中的 如下 import vue from vue import svg...

vue 封裝公共元件 學習 使用

在vue 專案中 會有很多類似的內容 因公司 經常做支付這一塊 像下面的類似的功能還有很多地方要用 因此嘗試 乙個很簡單的小封裝 子元件 sub pay pay left total span div pay amount 實付金額 div div pay right click onpaybtn ...

vue element分頁元件封裝成公共元件

1.首先定義乙個分頁子元件 background background current page.sync currentpage 第幾頁 page size.sync pagesize 每頁顯示幾條資料 layout layout page sizes pagesizes 可選的每頁多少條資料 t...