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中的样式。
最后成功的修改！并被老板赏了鸡腿。。。。