Использование экрана загрузки PleaseWait.js с Vue-CLI - PullRequest
Новая
       37

Использование экрана загрузки PleaseWait.js с Vue-CLI

0 голосов
/ 17 марта 2019

Мне нужно использовать PleaseWait.js экран загрузчика в моем проекте Webpack Vue-CLI.

Я искал любые дружественные Vue альтернативы, но не нашел подходящих пакетов.

Я также нашел this , который является демонстрацией использования PleaseWait.js с Vue, но он не работал с Webpack, в основном из-за этой ошибки:

Ошибка в смонтированном хуке: "Ошибка типа: please_wait__WEBPACK_IMPORTED_MODULE_0 ___ по умолчанию (...) не является Функция "

Я ищу способ заставить его работать или какие-либо хорошие альтернативы.

Ответы [ 2 ]

1 голос
/ 17 марта 2019

Вот как вы можете импортировать его в свой проект 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 и соответствующий наблюдатель , который откроет загрузчик 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>

демо

1 голос
/ 17 марта 2019

нет экспорта по умолчанию

try 

import {pleaseWait} from 'please-wait'

или 

import * aspleaseWait from 'please-wait'
...