1. 首先我們看一下 element 中的載入方式，設定載入配置
openfullscreen2() , 2000);
text 是要顯示的文字，spinner 是顯示的圖示
2.在封裝元件之前我們需要看一下文件
3.建立loading.js 檔案
import from 'element-ui';
// 引入 載入圖示 loading
// 設定 載入的資料
let loadingcount = 0;
let loading;
const startloading = () => {
loading = loading.service({
lock: true,
text: '任務下發中······',//可以自定義文字
spinner:'el-icon-loading',//自定義載入圖示類名
background: 'rgba(0, 0, 0, 0.7)'//遮罩層背景色
const endloading = () => {
loading.close();
export const showloading = () => {
if (loadingcount === 0) {
startloading();
loadingcount += 1;
export const hideloading = () => {
if (loadingcount <= 0) {
return;
loadingcount -= 1;
if (loadingcount === 0) {
endloading();
4. 在頁面中引入
標籤：spinner,loading,const,loading,vue,封裝,loadingcount,載入
vue中封裝全域性元件方法
vue專案中全域性註冊js檔案 首先是建立乙個js檔案叫toast.js export const toast var div document.getelementsbytagname div 0 toast2 這裡的方法就是快捷新增樣式的函式 function style domname,obj...
vue 封裝元件
一 通過install 封裝 1 建立元件資料夾包含 vue檔案和對應的.js檔案 如圖 2 完成元件模板 這是乙個公共元件內容 3 在相應的js內註冊元件 list.js檔案 import mylist from list.vue const list export default list 匯入...
vue封裝全域性loading
首先建立乙個loading檔案 loadingall element loading background rgba 0,0,0,0.6 div div template export default script 在store中新增變數 然後就可以使用啦 在需要用到的頁面新增如下 computed...