vue3中element-plus引入ElLoading并修改颜色
在vue3中引入element-plus的loading跟vue2差别还是有的
写法:
<script setup>
import { ElLoading } from 'element-plus'
// 使用
const loading = ref(false) // loading
const openLoading = () => {
loading.value = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)'
})
}
const closeLoading = () => {
loading.value.close()
}
// 举例
const tabs = async (n) => {
store.commit('dapp/STORE_TABINDEX', n)
if (nftList1.value.length === 0) {
openLoading()
await getNftList1()
// 挂载window的resize事件
window.screenWidth = document.body.clientWidth - 20
screenWidth.value = window.screenWidth
if (screenWidth.value > 768) {
// 大屏幕显示4列,小屏幕显示2列
ImgCol.value = 4
} else {
ImgCol.value = 2
}
calculationWidth1() // 重新计算图片宽度
closeLoading()
}
}
tabs()
</script>
然而想修改loading的样式的颜色用之前的:deep()方法尝试过之后行不通
尝试过:deep()之后,失败,第二次用了引入css的方法
import 'element-plus/theme-chalk/el-loading.css'
然后css写入:deep()样式还是行不通
最后想到在css的源码上修改是可以的,成功修改了颜色
如下图:
上面的stroke代表的颜色就是把原本的蓝色修改成了淡黄色
说明了修改源代码是可以成功的
那么我就把源代码里面的代码拿到了当前页面,并注释了引入的css
但是还是没有成功 ,
经过测试,发现是当前页面的style 加了scope 阻挡了样式的穿透
又在当前页面重新写了style,如下:
<style lang="scss" scoped>
// XXX
</style>
<style lang="scss">
.el-loading-spinner .path {
-webkit-animation: loading-dash 1.5s ease-in-out infinite;
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
/* stroke: var(--el-color-primary); */
stroke-linecap: round;
stroke: rgb(240, 228, 188) ;
}
.el-loading-spinner .el-loading-text {
/* color: var(--el-color-primary); */
color: rgb(240, 228, 188) ;
margin: 3px 0;
font-size: 14px;
}
</style>
这次修改之后,当前页面的加载颜色如愿的改变了。
但是项目中不是只有一个页面写了加载
那么想到了做一个全局的样式,那么注释掉当前页面的代码,然后在app.vue中添加了如下的代码
.el-loading-spinner .path {
-webkit-animation: loading-dash 1.5s ease-in-out infinite;
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
/* stroke: var(--el-color-primary); */
stroke-linecap: round;
stroke: rgb(240, 228, 188) !important;
}
.el-loading-spinner .el-loading-text {
/* color: var(--el-color-primary); */
color: rgb(240, 228, 188) !important;
margin: 3px 0;
font-size: 14px;
}
这里使用了!important 是因为这个权重最高,可以覆盖原先的和el-loading.css中的样式。
最后成功的修改!并被老板赏了鸡腿。。。。
不怕打不死的流氓,就怕耍流氓的流氓