在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的源码上修改是可以的，成功修改了颜色
如下图：
image.png
image.png
image.png
上面的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中的样式。
最后成功的修改！并被老板赏了鸡腿。。。。
