如何将 Bulma 页面加载器扩展添加为 Vue 组件？答案

【问题标题】：How to add Bulma page loader extension as Vue component?如何将 Bulma 页面加载器扩展添加为 Vue 组件？
【发布时间】：2019-05-04 14:43:01
【问题描述】：

我正在尝试设置 page-loader 元素，它是 Vue 项目中的 Bulma 扩展。有没有办法将 page-loader 添加为 Vue component？

我尝试导入 page-loader.min.js 并使用它，但根本不起作用。

<template>
    <div class="steps">
        <div class="step-marker">
            ...
        </div>
    </div>
</template>

<script>
import { bulmaSteps } from 'bulma-extensions/dist/js/bulma-extensions.min';

export default {
    name: "TestingStep",
    mounted: function() {
        this.steps = bulmaSteps.attach();
    },
    data() {
        return {
            steps: [],
        }
    },
}
</script>

【问题讨论】：

标签： javascript vue.js bulma

【解决方案1】：

在脚本部分导入 CSS 文件，它就像一个魅力。

import 'bulma-extensions/bulma-steps/dist/css/bulma-steps.min.css';

【讨论】：

为什么这是在<script> 部分而不是在<styles lang="scss"> 部分？是否可以在<styles lang="scss"> 部分执行（例如@import '~bulma-calendar' 此处所述wikiki.github.io/#integration）？

【解决方案2】：

这是你想要达到的目标吗？

PageLoader.vue

    <template>
        <div class="pageloader">
          <span class="title">Pageloader</span>
        </div>
    </template>

    <script>
    import 'bulma-extensions/bulma-pageloader/dist/css/bulma-pageloader.min.css';
    </script>

并将组件导入到你想要的 vue 文件中。

【讨论】：

【解决方案3】：

这是我导入 bulma-steps 包的方式：

<template>
  <div class="steps">
    <div class="step-marker">
      ...
    </div>
  </div>
</template>

<script>
import StepsWizard from "bulma-steps/dist/js/bulma-steps.js";

export default {
  data() {
    return {};
  },

  mounted() {
    new StepsWizard(document.querySelector(".steps"));
  }
};
</script>

<style lang="scss" scoped>
@import "~bulma-steps/dist/css/bulma-steps.min.css";
</style>

如果要使用.attach()，应该在mounted()内完成。

【讨论】：