element-plus loading用法

简介: Element Plus 是一个 Vue.js 2.0 UI 库,它提供了一系列的组件和工具,可以用于构建 Web 应用程序。其中之一就是 loading 组件。loading 组件可以让用户在等待数据加载时看到一个过渡动画。

Element Plus 是一个 Vue.js 2.0 UI 库,它提供了一系列的组件和工具,可以用于构建 Web 应用程序。其中之一就是 loading 组件。loading 组件可以让用户在等待数据加载时看到一个过渡动画。


使用 Element Plus 的 loading 组件非常简单。下面是一个基本的使用示例:


首先,在你的 Vue.js 组件中引入 Element Plus 的 loading 组件:

import { ElLoading } from 'element-plus';


在 data 中声明一个 isLoading 变量,用于控制 loading 组件的显示/隐藏状态:

data() {
  return {
    isLoading: false,
  };
},


在需要加载数据的方法中,先将 isLoading 设为 true,然后执行异步请求,并在请求完成后将 isLoading 设为 false:

this.isLoading = true;
axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
    this.isLoading = false;
  })
  .catch(error => {
    console.log(error.response.data);
    this.isLoading = false;
  });


在模板中使用 ElLoading 组件,并将 isLoading 作为它的 visible 属性的值:

<template>
  <div>
    <el-loading :visible="isLoading"></el-loading>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>


这样,当 isLoading 为 true 时,loading 组件就会显示出来,当 isLoading 为 false 时,loading 组件就会隐藏起来。


还可以对 loading 组件进行一些自定义配置,比如修改颜色、大小、文本等。具体可以参考 Element Plus 的官方文档。

相关文章
|
8月前
|
JavaScript 前端开发
vue element plus Empty 空状态
vue element plus Empty 空状态
155 0
vue element plus Empty 空状态
|
JavaScript
element-ui(vue版)使用switch时change回调函数中的形参传值问题
element-ui(vue版)使用switch时change回调函数中的形参传值问题
165 0
|
JavaScript
Vue 报错Failed to mount component: template or render function not defined
Vue 报错Failed to mount component: template or render function not defined
Vue 报错Failed to mount component: template or render function not defined
|
8月前
|
JavaScript
Property 'xx' does not exist on type 'Element | Element[] | Vue | Vue[]'
Property 'xx' does not exist on type 'Element | Element[] | Vue | Vue[]'
74 0
|
JavaScript
Element UI报错:Unknown custom element: <el-menu>
Element UI报错:Unknown custom element: <el-menu>
195 0
Vue3引入element-ui报错:Uncaught TypeError: Cannot read property ‘prototype‘ of undefined
配置无误、代码未报错,运行时页面空白,F12控制台报错: Uncaught TypeError: Cannot read property ‘prototype’ of undefined
418 0
element-ui中的prop 的相关作用
element-ui中的prop 的相关作用
486 0
vue3+ts:render极简demo -- 引入element ui el-input组件
vue3+ts:render极简demo -- 引入element ui el-input组件
261 0