vue.js - 在 Vue-CLI 中使用 PleaseWait.js 加载屏幕

Question

我需要在我的 Webpack Vue-CLI 项目中使用PleaseWait.js加载器屏幕。

我搜索了任何对 Vue 友好的替代方案，但没有找到任何合适的包。

我还找到了这个，这是一个使用 PleaseWait.js 和 Vue 的演示，但它不适用于 Webpack，主要是因为这个错误：

挂载钩子错误：“TypeError: please_wait__WEBPACK_IMPORTED_MODULE_0___default(...) 不是函数”

我正在寻找一种使它起作用的方法，或者寻找任何好的替代方法。

score 4 · Accepted Answer

以下是在 Vue CLI 项目中导入它的方法：

使用以下命令安装please-wait为依赖项：
```
npm i -S please-wait
```
src/components/Loader.vue使用空模板创建单个文件组件（please-wait已将其自己的 HTML 附加到文档）：
```
<template>
  <div v-once></div>
</template>
```

在Loader.vue's<script>中，importplease-wait及其 CSS：

import { pleaseWait } from 'please-wait'
import 'please-wait/build/please-wait.css'

还要添加一个prop和一个相应的观察者，它将please-wait根据prop值打开加载器：

export default {
  props: ['isLoading'],
  watch: {
    isLoading: {
      handler(isLoading) {
        if (isLoading) {
          this.open()
        } else {
          this.close()
        }
      },
      immediate: true,
    }
  },
}

还要定义观察者使用的open/close方法：

export default {
  methods: {
    open() {
      // Attaching a `pleaseWaitInstance` property (no need to declare)...
      if (!this.pleaseWaitInstance) {
        this.pleaseWaitInstance = pleaseWait({
          logo: 'https://pathgather.github.io/please-wait/assets/images/pathgather.png',
          backgroundColor: '#f46d3b',
          loadingHtml: '<p class="loading-message">A good day to you fine user!</p>'
        })
      }
    },
    close() {
      if (this.pleaseWaitInstance) {
        this.pleaseWaitInstance.finish()
        this.pleaseWaitInstance = null
      }
    }
  }
}

在Loader.vue's<style>中，添加 CSS 以使加载消息的文本（在open方法中创建）显示为白色。
```
.loading-message {
  color: white;
}
```

在src/App.vue中，从上面导入Loader组件，并将其添加到模板中：

<template>
  <div>
    <loading-screen :is-loading="isLoading"></loading-screen>
    ...
  </div>
</template>

<script>
import Loader from "./components/Loader";
...

export default {
  components: {
    'loading-screen': Loader
  },
  data() {
    return {
      isLoading: true
    }
  },
  mounted () {
    setTimeout(() => {
      this.isLoading = false
    }, 2000)
  }
}
</script>

演示

score 1 · Accepted Answer

没有导出默认值

尝试

import {pleaseWait} from 'please-wait'

或者

import * aspleaseWait from 'please-wait'

vue.js - 在 Vue-CLI 中使用 PleaseWait.js 加载屏幕

2 回答 2

Related

Reference