Quasar步进器(Stepper)

Quasar Stepper通过编号的步骤展示进度。 通过一系列逻辑和编号的步骤，步进器显示进度。 它们也可用于导航。 当用户必须按照步骤完成某个过程时，这通常很有用，例如在向导中。

步进器组件是由三个不同的子组件构建而成的：

安装

编辑 /quasar.conf.js:

framework: {
  components: [
    'QStepper',
    'QStep',
    'QStepperNavigation'
  ]
}

基本用法

这里有一个小例子，展示了一个非常基本的步进器，以了解组件如何组装在一起。

<q-stepper ref="stepper">
  <!-- 步骤: -->
  <q-step default title="First Step" subtitle="Here we go">
    ...Step content, components, ...
  </q-step>

  <!-- 步骤: -->
  <q-step title="Step 2">...</q-step>

  <!-- 步骤: -->
  <q-step title="Step 3" subtitle="Review and submit">...</q-step>

  <!--
    可选的.

    “全局”可用的步进导航意味着
    无论当前步骤如何，它都可以看到。
    如果我们将QStepperNavigation放在QStep下，
    那么我们会仅在该步骤下使用它。
  -->
  <q-stepper-navigation>
    <q-btn
      flat
      @click="$refs.stepper.previous()"
      label="Back"
    />
    <q-btn
      @click="$refs.stepper.next()"
      label="Next"
    />
  </q-stepper-navigation>
</q-stepper>

更多复杂的例子。 这个例子不使用QStepperNavigation作为QStepper的直接子对象，因为每个步骤都配置了导航。 注意下面每个组件的附加属性。 他们将在下一节详细介绍。

<q-stepper color="secondary" ref="stepper" alternative-labels>
  <q-step default name="first" title="Ad style">
    <div v-for="n in 10">Step 1</div>

    <!-- 在QStep结尾处为此步骤导航-->
    <q-stepper-navigation>
      <q-btn color="secondary" @click="$refs.stepper.next()" label="Continue" />
    </q-stepper-navigation>
  </q-step>

  <q-step error name="second" title="Custom channels" subtitle="Alert message">
    <div v-for="n in 10">Step 2</div>
    <q-stepper-navigation>
      <q-btn color="secondary" @click="$refs.stepper.next()" label="Next" />
      <q-btn color="secondary" flat @click="$refs.stepper.previous()" label="Back" />
    </q-stepper-navigation>
  </q-step>
  <q-step name="third" title="Get code">
    <div v-for="n in 3">Step 3</div>
    <q-stepper-navigation>
      <q-btn color="secondary" @click="$refs.stepper.next()" label="Next" />
      <q-btn color="secondary" flat @click="$refs.stepper.previous()" label="Back" />
    </q-stepper-navigation>
  </q-step>
  <q-step name="fifth" disable title="Disabled">
    <div v-for="n in 3">Step 4</div>
    <q-stepper-navigation>
      <q-btn color="secondary" @click="$refs.stepper.next()" label="Next" />
      <q-btn color="secondary" flat @click="$refs.stepper.previous()" label="Back" />
    </q-stepper-navigation>
  </q-step>
  <q-step name="fourth" title="Review and Finalize">
    <div v-for="n in 3">Step 5</div>
    <q-stepper-navigation>
      <q-btn color="secondary" @click="$refs.stepper.next()" label="Next" />
      <q-btn color="secondary" flat @click="$refs.stepper.previous()" label="Back" />
    </q-stepper-navigation>
  </q-step>
</q-stepper>

QStepper（父元素）

Vue属性 类型 说明
color 字符串 Stepper的主色，来自Quasar调色板。
vertical 布尔 将步进器设置为垂直而不是默认的水平。
alternative-labels 布尔 使用替代标签（仅适用于水平步进器）。
contractable 布尔 标签隐藏在狭窄的窗口上。
no-header-navigation 布尔 (Quasar v0.15.7+) 禁用通过头部导航到前面步骤的功能。
order 数字/字符串 如果动态添加/删除步骤，最好使用此属性来指定步骤的显示顺序。
done-icon 字符串，布尔 当步骤完成时，用于更改步骤图标的显示。默认是“check”图标。
active-icon 字符串，布尔 用于在选择步骤时更改图标。默认是“edit”图标。
error-icon 字符串/布尔 用于在步骤中出现错误时更改图标。默认是“warning”图标。

您也可以通过在QStep上使用v-model来控制当前步骤。更多细节在下一章节。

Vue方法 说明
goToStep(String) 将用户移动到由Step的“name”属性定义的给定Step。
next() 步进器进入下一步。
previous() 步进器进入前一步。
reset() 将步进器返回到第一步。

组件事件:

Vue事件 说明
@step 导航到另一个步骤时触发。

使用v-model

每个QStep都有一个name属性（这是可选的）。使用这个属性和v-model来控制当前的步骤。

下面的例子显示了如何单独使用v-model来控制导航。注意@click事件。如果你动态地插入/移除步骤，最好在QStepper上使用Vue引用，并调用next()或previous()方法，因为这些方法没有绑定到特定的步骤名称。

<template>
  <q-stepper v-model="currentStep">
    <q-step name="first">
      ...
      <q-stepper-navigation>
        <q-btn
          color="primary"
          @click="currentStep = 'second'"
          label="Go to Step 2"
        />
      </q-stepper-navigation>
    </q-step>

    <q-step name="second">
      ...
      <q-stepper-navigation>
        <q-btn
          color="primary"
          @click="currentStep = 'first'"
          label="Go Back"
        />
      </q-stepper-navigation>
    </q-step>
  </q-stepper>
</template>

<script>
export default {
  data () {
    return {
      // 我们用第一步的名字初始化它
      currentStep: 'first'
    }
  }
}
</script>

QStep（子元素）

Vue属性 类型 说明
name 数字，字符串 步骤名称，由QStepper的v-model或goToStep()方法使用。
default 布尔 （可选）只能使用在仅且一个步骤中。成为默认选定的步骤。
error 布尔 标记步骤有错误。
default 布尔 默认情况下，仅使用一个步骤使其成为活动的步骤。以前的步骤将被标记为“done”。刷新页面时很有用。
title 字符串 步骤标题。
subtitle 字符串 标题旁的步骤附加信息。
icon 字符串 步骤尚未完成时的步骤图标。如果没有指定active-icon，那么当步骤当前活动时，将使用该图标。
active-icon 字符串 当前活动时用于该步骤的图标。未指定active-icon时，默认为icon属性值。
done-icon 字符串 完成时用于步骤的图标。
error-icon 字符串 标记为有错误时用于步骤的图标。
disable 布尔 步骤被禁用。

该组件的方法：

Vue方法 说明
select() 步进器选择此步骤作为当前步骤。

QStepperNavigation（QStepper或QStep的子项）

该组件允许您在QStepper或QStep中放置按钮以浏览各个步骤。您需要添加所需的按钮。

<q-stepper ref="myStepper">
  ...
  <q-stepper-navigation>
    <q-btn
      color="secondary"
      @click="$refs.myStepper.next()"
      label="Next"
    />
    <q-btn
      color="secondary"
      @click="$refs.myStepper.previous()"
      label="Back"
    />
  </q-stepper-navigation>
</q-stepper>

更多示例

垂直步进器

也可以以垂直方式呈现构建一个步进器。 要做到这一点，只需在QStepper上使用vertical属性：

<q-stepper vertical>
  <q-step>..</q-step>
  <q-step>..</q-step>
  ...
</q-stepper>

使用垂直步进器时，使用“全局”QStepper导航没有任何意义。 相反，请在每个QStep中使用导航。

显示进度

一个常见的情况是在进入下一步之前需要执行异步操作（如Ajax调用）。 为此使用QInnerLoading组件：

<q-stepper>
  <!-- 很多步骤... -->
  ........

  <!--
    创建一个布尔范围变量（这里是“inProgress”）
    并绑定到“visible”属性。
    然后在需要显示步进器有一个后台进程在运行时
    切换这个布尔变量。
  --> 
  <q-inner-loading :visible="inProgress" />
</q-stepper>

设定步骤顺序

如果您动态添加/删除步骤，那么您需要指定order属性（对于所有QSteps），以便步进器知道步骤的实际顺序。 通过使用v-if或’v-for`指令，Vue&Quasar无法确保步骤将按照它们在DOM中的顺序注册。

重要
确保当你使用order时你将它应用到所有 QSteps，并且不要在没有它的情况下省略任何步骤。 对所有QSteps使用order或者根本不使用它。

<q-stepper>
  <!-- 将作为第二步-->
  <q-step :order="2">..</q-step>

  <!-- 将作为第一步 -->
  <q-step :order="1">..</q-step>

  <!-- 将作为第三步 -->
  <q-step :order="3">..</q-step>
</q-stepper>

应用于所有QStep的order属性不必严格按照连续增长的方式设置。 将order设置为10，100和52也是可以的。

列表和列表项 树