element-ui 中如何修改loading加載樣式
更新時(shí)間：2024年05月13日 11:45:54 作者：奮斗的小鳥(niǎo)鳥(niǎo)
element-ui 中的 loading 加載功能,默認(rèn)是全屏加載效果,設(shè)置局部,需要自定義樣式或者修改樣式,下面給大家分享實(shí)例代碼,感興趣的朋友跟隨小編一起看看吧
element-ui 中的 loading 加載功能，默認(rèn)是全屏加載效果
設(shè)置局部，需要自定義樣式或者修改樣式，方法如下：
import { Loading } from 'element-ui'
Vue.prototype.$baseLoading = (text) => {
let loading
loading = Loading.service({
lock: true,
customClass: 'createLoading', // 局部class名稱
text: text,
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0)'
})
return loading
}
<style lang="scss">
.createLoading {
.el-loading-spinner {
top: 50%;
left: 50%;
margin-left: -55px;
background: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 4px;
width: auto;
text-align: center;
position: absolute;
i {
color: #eee;
}
.el-loading-text {
color: #eee;
}
}
}
</style>重點(diǎn)：createLoading有這個(gè)局部class名字就能控制樣式的修改，有時(shí)候:：v-deep在loading中不能修改樣式
一些屬性參數(shù)：
const loading = this.$loading({ // 聲明一個(gè)loading對(duì)象
lock: true, // 是否鎖屏
text: '加載中', // 加載動(dòng)畫的文字
spinner: 'el-icon-loading', // 引入的loading圖標(biāo)
background: 'rgba(0, 0, 0, 0.8)', // 背景顏色
target: '.el-table, .table-flex, .region', // **需要遮罩的區(qū)域，這里寫要添加loading的選擇器**
fullscreen: false,
customClass: 'loadingclass' // **遮罩層新增類名，如果需要修改loading的樣式**
})到此這篇關(guān)于element-ui 中修改loading加載樣式的文章就介紹到這了,更多相關(guān)element-ui 修改loading加載樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中scrollIntoView()方法詳解與實(shí)際運(yùn)用舉例
這篇文章主要給大家介紹了關(guān)于Vue中scrollIntoView()方法詳解與實(shí)際運(yùn)用舉例的相關(guān)資料,該scrollIntoView()方法將調(diào)用它的元素滾動(dòng)到瀏覽器窗口的可見(jiàn)區(qū)域,需要的朋友可以參考下2023-12-12
過(guò)濾器是vue為開(kāi)發(fā)者提供的功能，常用于文本的格式化，過(guò)濾器應(yīng)該被添加在JavaScrip表達(dá)式的尾部，由“管道符”進(jìn)行調(diào)用，這篇文章通過(guò)案例給大家講解Vue過(guò)濾器介紹及使用方法，需要的朋友參考下吧2022-11-11
基于Vue實(shí)現(xiàn)本地消息隊(duì)列MQ的示例詳解
這篇文章為大家詳細(xì)主要介紹了如何基于Vue實(shí)現(xiàn)本地消息隊(duì)列MQ, 讓消息延遲消費(fèi)或者做緩存,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-02-02
工作中日常筆記,vue中使用swiper插件,在pc端和h5端也是常用的插件,下面這篇文章主要給大家介紹了關(guān)于vue3中使用swiper的完整版教程,需要的朋友可以參考下2023-04-04
Vue利用openlayers實(shí)現(xiàn)點(diǎn)擊彈窗的方法詳解
點(diǎn)擊彈窗其實(shí)就是添加一個(gè)彈窗圖層，然后在點(diǎn)擊的時(shí)候讓他顯示出來(lái)罷了。本文將利用openlayers實(shí)現(xiàn)這一效果，快跟隨小編一起學(xué)習(xí)一下吧2022-06-06
vue腳手架配置預(yù)渲染及prerender-spa-plugin配置方式
這篇文章主要介紹了vue腳手架配置預(yù)渲染及prerender-spa-plugin配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue中圖片轉(zhuǎn)base64格式實(shí)現(xiàn)方法
這篇文章主要介紹了vue中圖片轉(zhuǎn)base64格式實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
解決vue 綁定對(duì)象內(nèi)點(diǎn)擊事件失效問(wèn)題
今天小編就為大家分享一篇解決vue 綁定對(duì)象內(nèi)點(diǎn)擊事件失效問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
數(shù)據(jù)的重要性我們大家都知道，就算再小的項(xiàng)目中都可能使用幾個(gè)圖表展示，我最近在做項(xiàng)目的過(guò)程中也是需要用到圖表，最后選擇了echarts圖表庫(kù)，這篇文章主要介紹了Vue使用Echarts畫柱狀圖2022-12-12
Element實(shí)現(xiàn)登錄+注冊(cè)的示例代碼
登錄注冊(cè)是最常用的網(wǎng)站功能,本文主要介紹了Element實(shí)現(xiàn)登錄+注冊(cè)的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09