vue 使用Loading遮罩层

  //引入
import { Loading } from "element-ui";

//开启遮罩层
        let loadingInstance = Loading.service({
        lock: true, //lock的修改符--默认是false
        text: "正在保存邮件,请耐心等待", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.7)", //遮罩层颜色
        target: document.querySelector("#futureTransferDialog"), //loadin覆盖的dom元素节点
      });

//关闭遮罩层
loadingInstance.close();

### 如何在 Vue使用 Element UI 的 Loading 组件 为了在 Vue 应用程序中使用 Element UI 的 `Loading` 组件,可以按照以下方法实现功能。以下是详细的说明: #### 安装 Element UI 如果尚未安装 Element UI,则可以通过 npm 或 yarn 进行安装[^1]。 ```bash npm install element-ui --save ``` 或者, ```bash yarn add element-ui ``` #### 引入整个库或按需加载 引入方式有两种:全局引入整个 Element UI 和按需加载特定组件。推荐按需加载以减少打包体积[^2]。 ##### 方法一:全局引入 在项目的入口文件(通常是 main.js)中添加如下代码: ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` ##### 方法二:按需加载 通过 babel-plugin-component 插件来实现按需加载。首先安装插件: ```bash npm install babel-plugin-component --save-dev ``` 然后,在 `.babelrc` 文件中配置插件: ```json { "plugins": [ ["component", [ { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ]] ] } ``` 接着仅导入所需的组件即可: ```javascript import Vue from 'vue'; import { Loading } from 'element-ui'; Vue.use(Loading.directive); // 注册指令形式的 loading ``` #### 使用 Directive 方式 Element 提供了一个简单的 directive 来控制页面局部区域的加载状态。可以在模板中的任何 DOM 元素上绑定该指令并传参给它[^3]。 ```html <template> <div v-loading="isLoading"> <!-- 需要显示的内容 --> </div> </template> <script> export default { data() { return { isLoading: true, // 控制loading的状态 }; }, }; </script> ``` 当变量 `isLoading` 被设置为 false 后,加载动画会自动消失。 #### Service 形式的调用 除了作为指令外,还可以利用 service API 创建更灵活的服务层实例化对象来进行操作[^4]。 下面是一个例子展示如何手动开启和关闭一个全屏遮罩效果: ```javascript // 导入服务函数 import { Loading } from 'element-ui'; let loadingInstance; methods: { startLoading() { loadingInstance = Loading.service({ fullscreen: true, text: '拼命加载中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); }, endLoading() { if (loadingInstance) { loadingInstance.close(); } } } ``` 以上就是关于如何在 Vue 中集成以及应用 Element UI 的 Loading 功能的具体介绍[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值