v-easy-components

# Steps 0.7.0+

A step-by-step navigation bar that guides users to complete tasks in accordance with the process. The steps can be set according to the actual application scenario. The steps must be at least 2 steps.

# Basic usage

Simple steps.

    Set the active property, accept a Number, indicating the index of the step, starting from 0
    <template>
  <ve-steps :active="active" class="step-box">
    <ve-step class="step-li" title="Apple">Set Apple</ve-step>
    <ve-step class="step-li" title="Firefox">Set Firefox</ve-step>
    <ve-step class="step-li" title="Google">Set Google</ve-step>
    <ve-step class="step-li" title="Success">Success</ve-step>
    <template #footer>
      <ve-button type="primary" @click="handlerPrev" v-show="active !== 0 && active !== 3">Previous</ve-button>
      <ve-button type="primary" @click="handlerNext" :loading="loading" v-show="active !== 3">Next step</ve-button>
      <ve-button type="primary" @click="handlerSuccess" v-show="active === 3">Complete</ve-button>
    </template>
  </ve-steps>
</template>

<script>
export default {
  data() {
    return {
      active: 2,
      loading: false
    }
  },
  methods: {
    sleep(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms)
      })
    },
    handlerPrev() {
      this.active--
    },
    async handlerNext() {
      this.loading = true
      await this.sleep((Math.random() * 2000 + 100) | 0)
      this.loading = false
      this.active++
    },
    handlerSuccess() {

    }
  }
}
</script>

    # Step bar with icon

    A variety of custom icons can be used in the step bar.

      Set the icon through the icon property, the color of the icon follows the color of the text
      <template>
  <ve-steps :active="active" class="step-box">
    <ve-step class="step-li" icon-style="brands" title="Apple" icon="apple">Set Apple</ve-step>
    <ve-step class="step-li" icon-style="brands" title="Firefox" icon="firefox">Set Firefox</ve-step>
    <ve-step class="step-li" icon-style="brands" title="Google" icon="google">Set Google</ve-step>
    <ve-step class="step-li" title="Success" icon="check">Success</ve-step>
    <template #footer>
      <ve-button type="primary" @click="handlerPrev" v-show="active !== 0 && active !== 3">Previous</ve-button>
      <ve-button type="primary" @click="handlerNext" :loading="loading" v-show="active !== 3">Next step</ve-button>
      <ve-button type="primary" @click="handlerSuccess" v-show="active === 3">Complete</ve-button>
    </template>
  </ve-steps>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      loading: false
    }
  },
  methods: {
    sleep(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms)
      })
    },
    handlerPrev() {
      this.active--
    },
    async handlerNext() {
      this.loading = true
      await this.sleep((Math.random() * 2000 + 100) | 0)
      this.loading = false
      this.active++
    },
    handlerSuccess() {

    }
  }
}
</script>

      # Set steps direction

      Change the position of the title

        By setting the placement to control the position of the navigation bar, it supports three values: left, right, top
        <template>
  <ve-steps :active="active" placement="right" class="step-box">
    <ve-step class="step-li" icon-style="brands" title="Apple" icon="apple">Set Apple</ve-step>
    <ve-step class="step-li" icon-style="brands" title="Firefox" icon="firefox">Set Firefox</ve-step>
    <ve-step class="step-li" icon-style="brands" title="Google" icon="google">Set Google</ve-step>
    <ve-step class="step-li" title="Success" icon="check">Success</ve-step>
    <template #footer>
      <ve-button type="primary" @click="handlerPrev" v-show="active !== 0 && active !== 3">Previous</ve-button>
      <ve-button type="primary" @click="handlerNext" :loading="loading" v-show="active !== 3">Next step</ve-button>
      <ve-button type="primary" @click="handlerSuccess" v-show="active === 3">Complete</ve-button>
    </template>
  </ve-steps>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      loading: false
    }
  },
  methods: {
    sleep(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms)
      })
    },
    handlerPrev() {
      this.active--
    },
    async handlerNext() {
      this.loading = true
      await this.sleep((Math.random() * 2000 + 100) | 0)
      this.loading = false
      this.active++
    },
    handlerSuccess() {

    }
  }
}
</script>

        # Steps Attributes

        Parameter Description Type Optional value Defaults
        active Set the current activation step number - 0
        placement Set navigation bar position string left / right / top left
        nav-class-name Set the class name of the navigation bar string - -

        # Step Attributes

        Parameter Description Type Optional value Defaults
        title Set the title of the step bar string - -
        icon Set the icon to the left of the step bar string - -
        icon-style Set the icon icon style details string brands / regular / solid solid

        ← Message →