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

在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中的样式。

最后成功的修改！并被老板赏了鸡腿。。。。

__EOF__

本文作者： 与君别 本文链接： https://www.cnblogs.com/love920526/p/16741771.html 关于博主： 评论和私信会在第一时间回复。或者直接私信我。 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！ 声援博主： 如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。