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

【问题标题】：Using PleaseWait.js loading screen with Vue-CLI在 Vue-CLI 中使用 PleaseWait.js 加载屏幕
【发布时间】：2019-08-07 17:00:34
【问题描述】：

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

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

我还找到了this，这是一个使用Vue的PleaseWait.js的demo，但是不能和Webpack一起使用，主要是因为这个错误：

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

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

【问题讨论】：

通常情况下，你的错误是因为你错误地导入了包，试试import * as pleaseWait from 'please-wait'

标签： vue.js webpack vuejs2 pleasewait

【解决方案1】：

在 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

【讨论】：

效果很好！

【解决方案2】：

no export default

试试

import {pleaseWait} from 'please-wait'

或

import * aspleaseWait from 'please-wait'

【讨论】：