ElementUI中Loading特效的使用_elementui dialog loading

只需要一个加载特效，简单的使用时：

在button里面使用方法，然后使用方法打开弹窗，打开弹窗前使用loading加载。

<el-button type="primary" @click="openDialog">刷新</el-button>
<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      openDialog() {
      	this.openLoadingScreen()
      	this.dialogVisible = true
      },
	  openLoadingScreen() {
	  	// 让加载特效更好看一些
      	const loading = this.$loading({
	        lock: true,
	        text: '准备打开弹窗中，请稍候',
	        spinner: 'el-icon-loading'
	    })
	    // 等三秒才结束
      	setTimeout(() => {
        	loading.close()
      	}, 3000)
      }	
    }
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

复杂一些，在数据未获取时加载，获取完结束加载时：

写个异步方法，数据获取完才结束加载。

<el-button type="primary" @click="showStudentData">刷新</el-button>
<el-table
 :data="tableData"
 style="width: 100%">
 <el-table-column
   prop="date"
   label="日期"
   width="180">
 </el-table-column>
 <el-table-column
   prop="name"
   label="姓名"
   width="180">
 </el-table-column>
 <el-table-column
   prop="address"
   label="地址">
 </el-table-column>
</el-table>

<script>
  export default {
    data() {
      return {
        tableData: []
      };
    },
    methods: {
      async showStudentData() {
      	const loading = this.$loading({
	        lock: true,
	        text: '准备获取数据中，请稍候',
	        spinner: 'el-icon-loading'
	    })
	    // getStudentData()就是从后端获取数据的方法
	    const res = await getStudentData()
	    this.tableData = res
	    // 还有另外一种await写法
	    // await getStudentData.then(res => this.tableData = res)
	    setTimeout(() => {
        	loading.close()
      	}, 3000)
      }
    }
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

使用loading的方法大概就是这些了。如需其它个性化的花里胡哨loading特效，请移步官网文档。