Невозможно получить линию между двумя последовательными шагами, которые завершаются в el-step - PullRequest
Новая
       2

Невозможно получить линию между двумя последовательными шагами, которые завершаются в el-step

1 голос
/ 20 июня 2019

Я использую vuejs в качестве основы веб-интерфейса, а для пользовательского интерфейса element-ui.Недавно я использовал el-step компонент, и я столкнулся с ошибкой в ​​нем.Даже если два последовательных шага завершены, я не могу видеть границу между шагами.

Я следовал решению, данному здесь , но оно не сработало для меня.

Следуяэто 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

1 Ответ

0 голосов
/ 20 июня 2019

Ваш 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>
...