微调器不工作 vue.js答案

【问题标题】：Spinner not working vue.js微调器不工作 vue.js
【发布时间】：2020-07-22 17:59:48
【问题描述】：

我使用这个包：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>

由于某种原因，微调器没有显示？？？！？！我的控制台没有错误！

【问题讨论】：

试试components: { 'pulse-loader': PulseLoader }
@RoyJ 谢谢，但不起作用:(

标签： javascript spinner vue.js

【解决方案1】：

您不应该从dist 文件夹导入。

请尝试导入vue 组件源，如文档所示：

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

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

更新：

考虑到 Browserify 限制在 node_modules 内的文件中应用转换，那么您可以尝试 mentioned GitHub issue 中提供的代码 sn-p：

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

【讨论】：

我正在使用 vueify aswel。如果我这样做，我会收到一个错误：github.com/greyby/vue-spinner/issues/2
你试过上面提到的 GitHub issue 中提供的代码 sn-p 吗？（请参阅答案中的更新）
谢谢，但是import { PulseLoader } from 'vue-spinner/dist/vue-spinner.min.js' 和import PulseLoader from 'vue-spinner/dist/vue-spinner.min.js' 之间实际上有什么区别？
和import { something }我们试图获取导入脚本提供的对象的something属性；使用import something，我们得到导入脚本提供的任何内容并将其标记为something

【解决方案2】：

我正在开发的网站有一个自定义 CSS 文件。它缺少正确的样式。可能是因为它适用于旧版本的 Bootstrap。

确保在您的样式中的任何位置都有.spinner-border 的定义。如果不是，找出原因并修复它。

我已经从Vue examples 页面的源代码中复制了样式以便快速修复。

@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;
}

【讨论】：