elementplus 全局挂载loading使用

本文介绍了如何在Vue2项目中全局挂载ElementPlus的loading组件,并在应用中直接使用。
摘要由CSDN通过智能技术生成

在mian里引入挂载   

import { ElLoading } from "element-plus";
let loading;
let loadingCount = 0;
app.config.globalProperties.showLoading = () => {
  if (loadingCount === 0) {
    loading = ElLoading.service({
      lock: true,
      text: "Loading",
      background: "rgba(0, 0, 0, 0.7)"
    });
    loadingCount++;
  }
};
app.config.globalProperties.closeLoading = () => {
  if (loadingCount <= 0) return;
  loadingCount--;
  if (loadingCount === 0) {
    if (loading) {
      loading.close();
    }
  }
};

组件里使用

   proxy.showLoading();
      setTimeout(() => {
        proxy.closeLoading();
      }, 2000);

​​​​​​​

vue2 main.js

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element Plus是一个基于Vue 3的UI组件库,它提供了一系列简洁、易用的UI元素。关于全局样式,Element Plus允许你在项目全局设置一些样式规则,以便在整个应用一致地应用主题或定制化。 要在Element Plus设置全局样式,你可以选择以下几种方式: 1. **`<style lang="scss">`** 或 **`<style lang="less">`**: 在项目的`src/assets/styles`目录下创建一个全局SCSS或Less文件,然后通过`@import`引入element-plus的变量,并自定义你需要覆盖或添加的样式。 ```html <style lang="scss"> $primary-color: #007aff; // 自定义主题颜色 // 全局应用样式 body { @include el-theme($primary-color); } </style> ``` 2. **Vue插槽** (`slot`): 如果你想针对特定组件的部分进行全局定制,可以在根组件或者布局组件上使用插槽(`scoped slot`)并覆盖其的CSS。 3. **全局CSS文件** (`.vue`文件内 `<style>`标签): 在每个`.vue`组件内部,可以使用` scoped `属性来限制样式作用域,如果需要全局生效,去掉` scoped `即可。 4. **Vue.config.js** 配置: 可以在项目的`config/index.js`文件,配置`runtimeCompiler`和`css`, 这样可以让你在Vue组件之外编写样式,例如在`app.css`直接导入Element Plus的主题。 然而,注意全局样式可能会导致样式冲突,所以在修改之前最好理解清楚哪些样式是你想要覆盖的,以及是否有其他地方依赖于默认样式。同时,尽量避免过度使用全局样式,保持模块化和可维护性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值