【vue】loading使用

原创已于 2022-04-29 16:18:28 修改 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #ui

于 2022-04-29 15:42:14 首次发布

vue 专栏收录该内容

37 篇文章

订阅专栏

这篇博客展示了如何在Vue项目中使用Element-UI库自定义一个加载效果。通过引入`Loading`组件，并在`test()`方法中创建一个锁定屏幕的加载服务，将加载指示器定位到指定的`#loadingDiv`元素上。当需要结束加载时，调用`endLoading()`方法关闭加载提示。

1.效果图

在这里插入图片描述

2.自定义loading代码

<template>
<div>
	<div id="loadingDiv"></div>
	<el-button @click="test()">测试</el-button>
</div>
</template>
import { Loading } from 'element-ui';
<script>
export default {
  data() {
    return {
      loading: undefined
    };
  },
  methods: {
    test(){
      this.loading = Loading.service({
        lock: true,
        text: '上传中...',
        // background: 'rgba(0, 0, 0, 0.7)',
        target: document.querySelector('#loadingDiv')
      })  
    },
    endLoading() {
      this.loading.close()
    }
   }
  }