Question

我正在尝试设置page-loader元素，该元素是Vue项目中的布尔扩展。有没有办法将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>

Answer 1

在脚本部分中导入CSS文件，它的工作原理就像一个超级按钮。

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

Answer 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文件。

Answer 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()内完成。

如何将Bulma页面加载程序扩展添加为Vue组件？

3 个答案: