草庐IT

vue3中element-plus引入ElLoading并修改颜色

颂温暖 2023-03-28 原文

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

element-plusElLoadingsectionloadingstroke

有关vue3中element-plus引入ElLoading并修改颜色的更多相关文章

  1. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  2. ruby 诅咒颜色 - 2

    如何使用Ruby的默认Curses库获取颜色？所以像这样:puts"\e[0m\e[30;47mtest\e[0m"效果很好。在浅灰色背景上呈现漂亮的黑色。但是这个:#!/usr/bin/envrubyrequire'curses'Curses.noecho#donotshowtypedkeysCurses.init_screenCurses.stdscr.keypad(true)#enablearrowkeys(forpageup/down)Curses.stdscr.nodelay=1Curses.clearCurses.setpos(0,0)Curses.addstr"Hello

  3. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基

  4. 【Java 面试合集】HashMap中为什么引入红黑树，而不是AVL树呢 - 2

    HashMap中为什么引入红黑树，而不是AVL树呢1.概述开始学习这个知识点之前我们需要知道，在JDK1.8以及之前，针对HashMap有什么不同。JDK1.7的时候，HashMap的底层实现是数组+链表JDK1.8的时候，HashMap的底层实现是数组+链表+红黑树我们要思考一个问题，为什么要从链表转为红黑树呢。首先先让我们了解下链表有什么不好？？？2.链表上述的截图其实就是链表的结构，我们来看下链表的增删改查的时间复杂度增：因为链表不是线性结构，所以每次添加的时候，只需要移动一个节点，所以可以理解为复杂度是N(1)删：算法时间复杂度跟增保持一致查：既然是非线性结构，所以查询某一个节点的时候

  5. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  6. 安卓apk修改(Android反编译apk) - 2

    最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路

  7. ruby - 如何使用 Ruby 基于字母数字字符串生成颜色？ - 2

    我想要像“嘿那里”这样的东西变成，例如，#316583。我希望将任意长度的字符串“归结”为十六进制颜色。我不知道从哪里开始。我在想，每个字符串的MD5散列都是不同的-但如何将该散列转换为十六进制颜色数字？ 最佳答案 你可以只取几位前几位:require'digest/md5'color=Digest::MD5.hexdigest('Mytext')[0..5] 关于ruby-如何使用Ruby基于字母数字字符串生成颜色？，我们在StackOverflow上找到一个类似的问题：

  8. ruby-on-rails - Ruby on Rails - 我可以在调用之前修改属性的值吗？ - 2

    假设我有一个名为Product的模型，其中有一个名为brand的字段。假设brand的值以this_is_a_brand格式存储。我可以在模型(或其他任何地方)中定义一个方法，允许我在调用brand之前修改它的值吗？例如，如果我调用@product.brand，我想得到ThisisaBrand，而不是this_is_a_brand。 最佳答案 我建议使用方括号语法([]和[]=)而不是read_attribute和write_attribute。方括号语法更短并且designedtowraptheprotectedread/writ

  9. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  10. python - 请在 Perl 或 Ruby 中引入多处理库 - 2

    在python中，我们可以使用多处理模块。如果Perl和Ruby中有类似的库，你会教它吗？如果您能附上一个简短的示例，我将不胜感激。 最佳答案 ruby:WorkingwithmultipleprocessesinRubyConcurrencyisaMythinRubyPerl:HarnessingthepowerofmulticoreWhyPerlIsaGreatLanguageforConcurrentProgramming此外，Perl的线程是native操作系统线程，因此您可以使用它们来利用多核。

随机推荐