Vue ElementUI建立全域性元件方法及呼叫

2021-10-10 16:50:16 字數 991 閱讀 1295

在做專案的時候,我們在很多地方需要使用到loading效果,雖然element有攜帶,可直接按照案例使用,但是感覺過於麻煩了。

全域性資料夾建立完成後,需在main.js中匯入並宣告註冊

檔案

//引入

import global from './globalfun'

//宣告註冊

vue.use(global)

我們在vue專案裡的src中建立乙個存放全域性方法的資料夾,「globalfun」,裡面包含modules資料夾和index.js檔案。其中modules是註冊方法的資料夾,index.js是引入和新增全域性api的檔案

首先在modules資料夾中建立loading.js檔案,並編寫**

import  from 'element-ui'

const fullloading =

let loadingins

export default class loadevents

close()

}//引數說明

//fullscreen:是否全屏,lock:是否需要鎖定螢幕的滾動, customclass:繫結的class(區域性載入),text:自定義文案,spinner:自定義圖示,background:自定義背景色

3.完成loading.js檔案**編寫後,在index.js中進行全域性說明呼叫方式

import loadevents from './modules/loading'
export default function(vue) 

}

4.最後頁面的使用方式

//開啟 

this.$u.loads.open()

//關閉

this.$u.loads.close()

vue elementUI專案搭建

安裝node 基於node之npm環境下操作vue,所以先部署node 安裝gitwget http 7 extras x86 64 packages epel release 7 11.noarch.rpm yum install y epel release 7 11.noarch.rpm yu...

重置表單(vue elementui)

第一種 在methods下的具體方法中直接乙個乙個地將表單繫結的值賦值為空 最笨的方法,只適用於僅幾個繫結值的情況下 第二種 elementui官網的方法 從這裡直接進入官網表單相關位置 model ruleform rules rules ref ruleform label width 100p...

vue elementUi許可權管理

第一次摸索著完成vue的許可權管理,在此記錄下自己搬磚的點點滴滴,希望以後回望的時候,有跡可循,也分享給需要的小夥伴們,參考哦 思路如下 1,登入成功後,把後台返回的使用者資訊,存vuex的state 2,vuex的actions調介面,返回資料後,賦值給state,然後呼叫遞迴,來把返回的資料處理...