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

Posted 2023-01-24

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

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

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

挂钩错误：“TypeError：please_wait__WEBPACK_IMPORTED_MODULE_0 ___ default（...）不是函数”

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

答案

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

1. 使用此命令将please-wait安装为依赖项： npm i -S please-wait
2. 使用空模板在src/components/Loader.vue中创建单个文件组件（please-wait已将其自己的html附加到文档）： <template> <div v-once></div> </template>
3. 在Loader.vue的<script>中，导入please-wait及其CSS： import pleaseWait from 'please-wait' import 'please-wait/build/please-wait.css'
4. 还要添加一个prop和一个相应的watcher，它将根据please-wait值打开prop加载器： export default props: ['isLoading'], watch: isLoading: handler(isLoading) if (isLoading) this.open() else this.close() , immediate: true, ,
5. 还要定义观察者使用的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
6. 在Loader.vue的<style>中，添加CSS以使加载消息的文本（在open方法中创建）显示为白色。 .loading-message color: white;
7. 在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

另一答案

no export default

尝试

import pleaseWait from 'please-wait'

要么

import * aspleaseWait from 'please-wait'