vue3引入element-plus的loading跟vue2差别还是有的写法：

305次阅读

在 vue3 中引入 element-plus 的 loading 跟 vue2 差别还是有的

写法：

// 使用
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，如下：

这次修改之后，当前页面的加载颜色如愿的改变了。

但是项目中不是只有一个页面写了加载

那么想到了做一个全局的样式，那么注释掉当前页面的代码，然后在 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;
}