Question

我正在寻找一个vue项目的材料设计步进ui组件。我有一个使用Vue Cli构建的项目。 Vuetify具有步进器组件，但是它具有一些内置样式，例如textarea，可以代替原始样式，因此我不想使用。所以我找到了这个Materialise-stepper。

https://kinark.github.io/Materialize-stepper/

这种用法没有说明如何在vue项目中使用它。那么如何将这个组件（或类似的任何组件）添加到vue中？

我在index.html中添加了这两行

然后，我像这样创建一个新的text.vue文件，但是它不起作用。该怎么办？

<template>
  <div class="test">
      <ul class="stepper linear">
        <li class="step active">
          <div class="step-title waves-effect">E-mail</div>
          <div class="step-content">
            <!-- Your step content goes here (like inputs or so) -->
            <div class="step-actions">
              <!-- Here goes your actions buttons -->
              <button class="waves-effect waves-dark btn next-step">CONTINUE</button>
            </div>
          </div>
        </li>
      </ul>
  </div>
</template>

<script>
var stepper = document.querySelector(".stepper");
var stepperInstace = new MStepper(stepper, {
  // options
  firstActive: 0 // this is the default
});
</script>
<style scoped>
</style>

然后显示此错误，怎么办？

mstepper.min.js:10 Uncaught TypeError: Cannot read property 'children' of null
    at mstepper.min.js:10
    at E._init (mstepper.min.js:10)
    at new E (mstepper.min.js:10)
    at eval (test.vue?1174:178)
    at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/test.vue (app.js:774)
    at __webpack_require__ (app.js:679)
    at fn (app.js:89)
    at eval (test.vue?edbc:1)
    at Object../src/components/test.vue (app.js:2019)
    at __webpack_require__ (app.js:679)

如何将ui组件（实现步进器）添加到vue项目中？

0 个答案: