Spinner 不工作 vue.js

Question

我使用這個包： https : //github.com/greyby/vue-spinner來顯示一個微調器。

<template>
  <pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>
</template>

<script>

import { PulseLoader } from 'vue-spinner/dist/vue-spinner.min.js';

export default {

  components: { PulseLoader },

  data () {
    return {
      loading: true,
      color: "black",
      size: "10"
    }
  }
}
</script>

出於某種原因，微調器沒有顯示？？？？！？！ 我的控制台中沒有錯誤！

Answer 1

您不應該從dist文件夾導入。

請嘗試導入vue組件源，按照文檔中所示進行操作：

import PulseLoader from 'vue-spinner/src/PulseLoader.vue'

文檔： https : //github.com/greyby/vue-spinner#es6

---

更新：

在內部文件應用轉換時考慮Browserify限制node_modules ，那么你可以嘗試在代碼中的代碼片段提供提到GitHub的問題：

var PulseLoader = require('vue-spinner/dist/vue-spinner.min').PulseLoader;

Answer 2

我工作的網站有一個自定義的 CSS 文件。 它缺少正確的樣式。 可能是因為它用於舊版本的 Bootstrap。

確保在您的樣式中的任何地方.spinner-border的定義。 如果沒有，找出原因並修復它。

為了快速修復，我從Vue 示例頁面的源代碼中復制了樣式。

@keyframes spinner-border {
  to { transform: rotate(360deg); }
}

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border .75s linear infinite;
    animation: spinner-border .75s linear infinite;
}