无法在 el-step 中完成的两个连续步骤之间取得连线

Question

我使用 vuejs 作为我的前端框架，对于 UI 我使用 element-ui。最近，我使用了 el-step 组件，但遇到了错误。即使完成了两个连续的步骤，我也看不到步骤之间的线。

我遵循了给定的解决方案 here，但它对我不起作用。

以下是我的代码的 JSFiddle：- https://jsfiddle.net/ywdg7cu6/

在控制台中，我收到以下错误：-

Error in callback for watcher "$parent.active": "TypeError: t.calcProgress is not a function
prevChild.calcProgress is not a function

Answer 1

你的 el-popover 不应该在你的 el-steps 组件中。

var Main = {
  data() {
    return {
      ifLocality: false,
      ifLocation: false,
      ifArea: false,
      ifOtherMetrics: false,

      active: 0
    };
  },

  mounted() {
    this.ifLocality = true
  },

  methods: {
    getLocation() {
      this.ifLocality = false
      this.ifLocation = true
      if (this.active++ > 3) this.active = 0;
    },

    getOtherMetrics() {
     this.ifLocation = false
      this.ifOtherMetrics = true
      if (this.active++ > 3) this.active = 0;
    },

    getArea() {
      this.ifOtherMetrics = false
      this.ifArea = true
      if (this.active++ > 3) this.active = 0;
    },

    getReport() {
      this.ifArea = false
      if (this.active++ > 3) this.active = 0;
    },
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.9.1/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.9.1/lib/index.js"></script>
<div id="app">
  <template>
  <el-container>
      <el-header>
          <el-row>
              <el-steps :active="active" align-center>
                  <el-step v-popover:step-1 title="Step 1"  icon="el-icon-search" description="Step 1"></el-step>
                  <el-step v-popover:step-2  title="Step 2"  icon="el-icon-location" description="Step 2"></el-step>
                  <el-step v-popover:step-3  title="Step 3"  icon="el-icon-s-tools" description="Provide Other Credentials"></el-step>
                  <el-step  v-popover:step-4 title="Step 4"  icon="el-icon-edit" description="step 4"></el-step>
              </el-steps>

              <!-- Step - 1 - Search Locality -->
              <el-popover ref="step-1" placement="bottom" width="300" trigger="manual" v-model="ifLocality">
                  <h4 class="heading">Step1</h4>
                  <el-row type="flex" justify="center">
                      <el-button class="button" type="primary" round @click="getLocation">Next<i class="el-icon-arrow-right"></i></el-button>
                  </el-row>
              </el-popover>

              <!-- Step - 2 - Pin Down Your Home -->
              <el-popover ref="step-2" placement="bottom" width="300" trigger="manual" v-model="ifLocation">
                  <h4 class="heading">Step 2</h4>
                  <el-row class="popover" type="flex" justify="center">
                      <el-button type="primary" round @click="getOtherMetrics">Next <i class="el-icon-arrow-right"></i></el-button>
                  </el-row>
              </el-popover>

              <!-- Step - 3 - Provide Other Credentials -->
              <el-popover ref="step-3" placement="bottom" width="300" trigger="manual" v-model="ifOtherMetrics">
                  <div class="other-metrics">
                      <h4 class="heading">Step 3</h4>

                  </div>


                  <el-row class="popover" type="flex" justify="center">
                      <el-button type="primary" round @click="getArea">Next <i class="el-icon-arrow-right"></i></el-button>
                  </el-row>

              </el-popover>

              <!-- Step - 4 - Trace Your Roof -->
              <el-popover ref="step-4" placement="bottom" width="300" trigger="manual" v-model="ifArea">
                  <h4 class="heading">Step 4</h4>
                  <el-row class="popover" type="flex" justify="center">
                      <el-button type="primary" round @click="getReport">Next <i class="el-icon-arrow-right"></i></el-button>
                  </el-row>
              </el-popover>
          </el-row>
      </el-header>
  </el-container>
</template>
</div>

无法在 el-step 中完成的两个连续步骤之间取得连线

Unable to get line between two consecutive steps that get completed in el-step

vue.js

element-ui