Stepper Vue 组件

Stepper Vue 组件表示 Stepper 组件。

步骤组件

包含以下组件

f7-stepper

Stepper 属性

属性	类型	默认值	描述
<f7-stepper> 属性
init	布尔值	true	初始化 Stepper
value	数字	0	Stepper 值
min	数字	0	最小值
max	数字	100	最大值
step	数字	1	值之间的最小步
wraps	布尔值	false	启用时，超过最大值后增量会将值设置为最小值；同样，低于最小值后减量会将值设置为最大值
autorepeat	布尔值	false	启用后，当您点击并按住加号/减号按钮时，它会反复增加/减少值
自动重复-动态	布尔值	false	启用后，它会根据按住按钮的时间增加自动重复比率
输入	布尔值	true	定义是否渲染`<input>`元素
输入-只读	布尔值	false	使内部输入元素`只读`
名称	字符		输入元素“名称”属性
仅按钮	布尔值	false	禁用步进器按钮之间的内部值容器
格式值	function(value)		用于设置按钮之间值元素值的自定义函数。它必须返回新格式的值
手动输入模式	布尔值	false	启用手动输入模式。此模式允许用键盘输入值，并按照设定的精度检查小数部分。此外，在这种模式下输入时将忽略`step`参数。
小数点	数字	4	手动输入模式下的点后数字位数。
按钮终止手动输入模式	布尔值	true	在点击步进器的减号或加号按钮时禁用手动输入模式。
已禁用	布尔值	false	定义步进器是否已禁用
圆形	布尔值	false	使步进器变为圆形
圆形-ios	布尔值	false	仅使步进器变为 iOS 主题的圆形
圆形-md	布尔值	false	仅使步进器变为 MD 主题的圆形
大号	布尔值	false	使步进器变为大号
大号-ios	布尔值	false	仅使步进器变为 iOS 主题的大号
大号-md	布尔值	false	仅使步进器变为 MD 主题的大号
小号	布尔值	false	使步进器变为小号
小号-ios	布尔值	false	仅使步进器变为 iOS 主题的小号
小号-md	布尔值	false	仅使步进器变为 MD 主题的小号
填充	布尔值	false	使步进器填充颜色
填充-ios	布尔值	false	仅使步进器填充 iOS 主题的颜色
填充-md	布尔值	false	仅使步进器填充 MD 主题的颜色
凸起	布尔值	false	使步进器凸起。
凸起-ios	布尔值	false	使步进器凸起为 iOS 主题。
凸起-md	布尔值	false	使步进器凸起为 MD 主题。

步进器事件

事件	描述
<f7-stepper>事件
stepper:change	当步进器的值发生变化时，将触发事件
stepper:minusclick	在点击“减号”按钮时触发事件
stepper:plusclick	在点击“加号”按钮时触发事件
输入	将在输入的`input`事件中触发事件

步进器方法

<f7-stepper>方法
.increment()	递增步进器值，类似于点击其“加号”按钮
.decremenet()	递减步进器值，类似于点击其“减号”按钮
.setValue(newValue)	设置新的步进器值
.getValue()	返回步进器值

步进器 v-model

f7-stepper组件支持value属性上的v-model

<template>
  <p>Value is {{ count }}</p>
  ...
  <f7-stepper
    v-model:value="count"
  />
  ...
</template>
<script>
  export default {
    data() {
      count: 1,
    },
    ...
  };
</script>

示例

stepper.vue

<template>
  <f7-page>
    <f7-navbar title="Stepper"></f7-navbar>
    <f7-block-title>Shape and size</f7-block-title>
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <small class="display-block">Default</small>
          <f7-stepper />
        </div>
        <div>
          <small class="display-block">Round</small>
          <f7-stepper round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Fill</small>
          <f7-stepper fill />
        </div>
        <div>
          <small class="display-block">Round Fill</small>
          <f7-stepper fill round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Small</small>
          <f7-stepper small />
        </div>
        <div>
          <small class="display-block">Small Round</small>
          <f7-stepper small round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Small Fill</small>
          <f7-stepper small fill />
        </div>
        <div>
          <small class="display-block">Small Round Fill</small>
          <f7-stepper small round fill />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Large</small>
          <f7-stepper large />
        </div>
        <div>
          <small class="display-block">Large Round</small>
          <f7-stepper large round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Large Fill</small>
          <f7-stepper large fill />
        </div>
        <div>
          <small class="display-block">Large Round Fill</small>
          <f7-stepper large round fill />
        </div>
      </div>
    </f7-block>

    <f7-block-title>Raised</f7-block-title>
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <small class="display-block">Default</small>
          <f7-stepper raised />
        </div>
        <div>
          <small class="display-block">Round</small>
          <f7-stepper raised round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Fill</small>
          <f7-stepper raised fill />
        </div>
        <div>
          <small class="display-block">Round Fill</small>
          <f7-stepper raised fill round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Small</small>
          <f7-stepper raised small />
        </div>
        <div>
          <small class="display-block">Small Round</small>
          <f7-stepper raised small round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Small Fill</small>
          <f7-stepper raised small fill />
        </div>
        <div>
          <small class="display-block">Small Round Fill</small>
          <f7-stepper raised small round fill />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Large</small>
          <f7-stepper raised large />
        </div>
        <div>
          <small class="display-block">Large Round</small>
          <f7-stepper raised large round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Large Fill</small>
          <f7-stepper raised large fill />
        </div>
        <div>
          <small class="display-block">Large Round Fill</small>
          <f7-stepper raised large round fill />
        </div>
      </div>
    </f7-block>
    <f7-block-title>Colors</f7-block-title>
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <f7-stepper fill color="red" />
        </div>
        <div>
          <f7-stepper fill round color="green" />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <f7-stepper fill color="blue" />
        </div>
        <div>
          <f7-stepper fill round color="pink" />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <f7-stepper fill small color="yellow" />
        </div>
        <div>
          <f7-stepper fill small round color="orange" />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <f7-stepper fill small color="gray" />
        </div>
        <div>
          <f7-stepper fill small round color="black" />
        </div>
      </div>
    </f7-block>
    <f7-block-title>Without input element</f7-block-title>
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <f7-stepper :input="false" />
        </div>
        <div>
          <f7-stepper :input="false" round />
        </div>
      </div>
    </f7-block>
    <f7-block-title>Min, max, step</f7-block-title>
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <f7-stepper fill :value="100" :min="0" :max="1000" :step="100" />
        </div>
        <div>
          <f7-stepper fill :input="false" :value="5" :min="0" :max="10" :step="0.5" />
        </div>
      </div>
    </f7-block>

    <f7-block-title>Autorepeat (Tap & hold)</f7-block-title>
    <f7-block-header
      >Pressing and holding one of its buttons increments or decrements the stepper’s value
      repeatedly. With dynamic autorepeat, the rate of change depends on how long the user continues
      pressing the control.</f7-block-header
    >
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <small class="display-block">Default</small>
          <f7-stepper fill :value="0" :min="0" :max="100" :step="1" :autorepeat="true" />
        </div>
        <div>
          <small class="display-block">Dynamic</small>
          <f7-stepper
            fill
            :value="0"
            :min="0"
            :max="100"
            :step="1"
            :autorepeat="true"
            :autorepeat-dynamic="true"
          />
        </div>
      </div>
    </f7-block>

    <f7-block-title>Wraps</f7-block-title>
    <f7-block-header
      >In wraps mode incrementing beyond maximum value sets value to minimum value, likewise,
      decrementing below minimum value sets value to maximum value</f7-block-header
    >
    <f7-block strong outline-ios class="text-align-center">
      <f7-stepper fill :value="0" :min="0" :max="10" :step="1" :autorepeat="true" :wraps="true" />
    </f7-block>

    <f7-block-title>Custom value element</f7-block-title>
    <f7-list strong-ios outline-ios dividers-ios>
      <f7-list-item :title="`Apples ${applesCount}`">
        <template #after>
          <f7-stepper :buttons-only="true" small raised @stepper:change="setApples" />
        </template>
      </f7-list-item>
      <f7-list-item :title="`Oranges ${orangesCount}`">
        <template #after>
          <f7-stepper :buttons-only="true" small raised @stepper:change="setOranges" />
        </template>
      </f7-list-item>
    </f7-list>

    <f7-block-title>Custom value format</f7-block-title>
    <f7-list strong-ios outline-ios dividers-ios>
      <f7-list-item header="Meeting starts in" :title="meetingTimeComputed">
        <template #after>
          <f7-stepper
            :min="15"
            :max="240"
            :step="15"
            :value="meetingTime"
            :buttons-only="true"
            small
            fill
            raised
            @stepper:change="setMeetingTime"
          />
        </template>
      </f7-list-item>
    </f7-list>

    <f7-block-title>Manual input</f7-block-title>
    <f7-block-header
      >It is possible to enter value manually from keyboard or mobile keypad. When click on input
      field, stepper enter into manual input mode, which allow type value from keyboar and check
      fractional part with defined accurancy. Click outside or enter Return key, ending manual
      mode.</f7-block-header
    >
    <f7-block strong outline-ios class="text-align-center">
      <f7-stepper
        fill
        :value="0"
        :min="0"
        :max="1000"
        :step="1"
        :autorepeat="true"
        :wraps="true"
        :manual-input-mode="true"
        :decimal-point="2"
      />
    </f7-block>
  </f7-page>
</template>
<script>
import {
  f7Page,
  f7Navbar,
  f7BlockTitle,
  f7Block,
  f7BlockHeader,
  f7List,
  f7ListItem,
  f7Stepper,
} from 'framework7-vue';

export default {
  components: {
    f7Page,
    f7Navbar,
    f7BlockTitle,
    f7Block,
    f7BlockHeader,
    f7List,
    f7ListItem,
    f7Stepper,
  },
  data() {
    return {
      applesCount: 0,
      orangesCount: 0,
      meetingTime: 15,
    };
  },
  computed: {
    meetingTimeComputed() {
      const self = this;
      const value = self.meetingTime;

      const hours = Math.floor(value / 60);
      const minutes = value - hours * 60;
      const formatted = [];
      if (hours > 0) {
        formatted.push(`${hours} ${hours > 1 ? 'hours' : 'hour'}`);
      }
      if (minutes > 0) {
        formatted.push(`${minutes} minutes`);
      }
      return formatted.join(' ');
    },
  },
  methods: {
    setApples(value) {
      this.applesCount = value;
    },
    setOranges(value) {
      this.orangesCount = value;
    },
    setMeetingTime(value) {
      this.meetingTime = value;
    },
  },
};
</script>

改进此文档

在本页

步骤组件
Stepper 属性
步进器事件
步进器方法
步进器 v-model
示例