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

Question

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

我搜索了任何 Vue 友好的替代品，但没有找到任何合适的软件包。

我也找到了，这是一个用Vue使用PleaseWait.js的demo，但是用Webpack就不行了，主要是因为这个错误：

Error in mounted hook: "TypeError: please_wait__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function"

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

Answer 1

no export default

尝试

import {pleaseWait} from 'please-wait'

或

import * aspleaseWait from 'please-wait'

Answer 2

以下是将其导入 Vue CLI 项目的方法：

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

在Loader.vue的<script>中，导入please-wait及其CSS:

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

同时添加一个prop和一个相应的watcher，将根据prop值打开please-wait加载器：

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 的 <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>

demo

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

Using PleaseWait.js loading screen with Vue-CLI

vue.js

webpack

vuejs2

pleasewait