带有自定义微调器的整页加载屏幕 – vuejs-loading-screen

带有自定义微调器的整页加载屏幕 – vuejs-loading-screen
插件名称 vuejs-loading-screen
发布时间 2021年11月4日
插件作者 HELMAB

另一个用于 Vue 的加载指示器库,它在您的应用程序中加载内容时显示带有自定义微调器的全屏加载屏幕。

安装和下载:

# NPM
$ npm i vuejs-loading-screen --save

使用:

1、导入并注册vue加载组件。

import Vue from 'vue'
import loading from 'vuejs-loading-screen'
Vue.use(loading,{
  // 这里的选项
})

2. 这个例子展示了如何在发送 HTTP 请求时显示加载屏幕并在请求完成时隐藏它。

vexport default {
  methods: {
    sendHttpRequest () {
      this.$isLoading(true) // 显示加载屏幕
      this.$axios.post(url, params)
      .then(({data}) => {
        // data
      })
      .finally(() => {
        this.$isLoading(false) // 隐藏加载界面
      })
    }
  },
  mounted () {
    this.sendHttpRequest()
  }
}

3. 自定义加载屏幕的可用选项。

Vue.use(loading,{

  // 背景颜色
  bg: '#41b883ad',

  // spinner icon
  // requires Font Awesome
  icon: 'fas fa-spinner',

  // spinner size:
  // 1 to 5
  size: 3,

  // 图标颜色
  icon_color: '#ffffff',

})

4. 您还可以通过在slot选项中定义 HTML 来自定义加载微调器。

Vue.use(loading,{
  slot: `
    <div>
      <h3><i class="fas fa-spinner fa-spin"></i> Loading...</h3>
    </div>
  `
})