vue elementui 增加loadding

要在 Vue 中使用 ElementUI 中的 loading 组件，需要先在代码中引入 ElementUI 框架，然后在需要使用 loading 的地方添加 loading 标签。

以下是一个示例：

首先，需要在组件中引入 ElementUI：

import { Loading } from 'element-ui';

然后，在需要使用 loading 的方法中添加 loading 标签，例如：

submit() {
  let loadingInstance = Loading.service({ fullscreen: true });
  setTimeout(() => {
    loadingInstance.close();
  }, 2000);
}

这里，我们使用了 Loading.service() 方法来创建一个 loading 实例，fullscreen 属性设置为 true 表示全屏显示。在 2 秒后，我们通过 loadingInstance.close() 方法关闭 loading 实例。

这样就可以在 Vue 中使用 ElementUI 中的 loading 组件啦！

相关问题

vue elementui 选型

Vue ElementUI 是一个基于 Vue.js 的桌面端组件库，它提供了丰富的 UI 组件，可以帮助开发人员快速构建高质量的 Web 应用程序。选用 Vue ElementUI 的原因有以下几点：

1. 易于学习和使用：Vue ElementUI 的文档清晰明了，组件易于理解和使用。

2. 丰富的组件库：Vue ElementUI 提供了丰富的 UI 组件，包括表单、日期选择器、弹出框等等。

3. 高度定制化：Vue ElementUI 的组件具有高度的可定制性，开发人员可以根据自己的需求进行自定义。

4. 社区支持：Vue ElementUI 是一个开源项目，并且有一个活跃的社区，开发人员可以在社区中寻求帮助。

综上所述，选用 Vue ElementUI 可以加速开发过程，提高开发效率，并且可以使应用程序具有更好的用户体验。

vue elementui sortable排序

### 回答1：
Vue ElementUI Sortable是一个基于Vue.js和ElementUI的可排序列表组件，可以让用户通过拖拽来重新排序列表中的元素。它提供了丰富的配置选项，可以自定义拖拽时的样式、拖拽的范围、拖拽时的动画效果等等。使用Vue ElementUI Sortable可以让开发者快速实现可排序列表功能，提高用户体验。

### 回答2：
Vue ElementUI Sortable是一个基于Vue.js的拖动排序组件，使用户能够以直观的方式对列表进行重新排序和重排。它提供了许多可定制的选项，使开发者能够根据自己的需求来设置和调整选项。

使用Vue ElementUI Sortable的第一步是在Vue.js中引入Sortable组件。导入后，开发者需要在模板中定义一个Sortable组件，这通常涉及到指定一个包含需要排序的元素的数组，以及一些用于定义Sortable的选项。

然后，开发者需要定义Sortable的选项。这些选项允许开发者自定义Sortable的行为。例如，开发者可以定义控制当用户拖动一个元素时它的占位符，或者在拖动结束时执行某个函数。还可以定制拖动的元素的样式、占位符的样式以及其他可视化特性。

最后，当用户进行拖动操作时，开发者需要编写代码来处理列表项的新顺序。例如，当用户停止拖动某个元素时，开发者可以将新的顺序发送到服务器，或者将新的顺序存储在本地存储中。

总之，Vue ElementUI Sortable提供了开发者一个完美的拖拽排序的解决方案，为开发者提高了效率，还能够使用户在排序列表时拥有非常棒的体验。

### 回答3：
Vue ElementUI Sortable插件是一个基于Vue.js和ElementUI的可拖动排序组件。它可以帮助开发者在页面上实现元素的拖动排序，从而提升用户体验。

排序是一个在Web应用程序中常见且有用的功能，Sortabel插件的设计目的就是让开发者在不需要编写过多代码的情况下添加拖拽排序的功能。

使用Vue ElementUI Sortable插件的前提是先引入ElementUI库和Sortable.js库，并在组件中注册插件。然后在需要添加排序功能的元素上绑定v-sortable指令，并指定sortable的选项，如下：

<template>
  <div v-sortable="options">
    <div v-for="(item, index) in list" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs'

export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' }
      ],
      options: {
        animation: 150,
        onSort: function(evt) {
          console.log(evt)
        }
      }
    }
  },
  directives: {
    sortable: {
      inserted: function(el, binding, vnode) {
        new Sortable(el, binding.value || {})
      }
    }
  }
}
</script>

上面的代码中，v-sortable指令绑定在外层div上，其指定了Sortable的选项，如动画时间和排序事件的回调函数。每个拖动排序的元素使用v-for指令进行渲染。

在vue elementui Sortable插件的选项中，最常用的包括animation、onSort、onStart、onEnd、onAdd和onRemove等。其中animation控制拖动排序时的动画时间，onSort、onStart和onEnd用于拖动排序操作的事件处理，onAdd和onRemove用于添加和删除元素时的操作。

除了基本的拖动排序功能，Vue ElementUI Sortable插件还支持多种高级用法，如设置拖动与非拖动区域、禁用拖拽、忽略一些元素等。开发者可以根据自己的需求，灵活运用这些功能，为用户带来更加优秀的体验。

综上所述，Vue ElementUI Sortable插件可以帮助开发者轻松地实现拖动排序功能，同时还有丰富的选项和高级用法，可以满足不同场景和需求的开发。对于希望提升Web应用用户体验的开发者来说，这是一个非常不错的选择。