Stepper 步进器

使用指南

组件介绍

Stepper 步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字

引入方式

import { Stepper } from 'feart';

components: {
  "fe-stepper": Stepper,
}

代码演示

基础用法

通过 v-model 绑定输入值

<fe-stepper title="基础用法" v-model="value" />

export default {
  data() {
    return {
      value: 10,
    };
  },
};

限制输入范围

通过 min 和 max 属性限制输入值的范围，min 默认是 1，max 默认是 Infinity

<fe-stepper title="限制输入范围" :min="0" :max="10" />

步长设置

设置 step 属性可设置每次点击增加或减少按钮时变化的值，默认是 1

<fe-stepper title="步长设置" :step="2" />

输入框只读模式

设置 readonly-input 属性后，输入框将变成可读模式，不能输入

<fe-stepper title="输入框只读模式" readonly-input />

固定小数位数

设置 fixed-decimal-length 属性后，限制输入的值小数点位数固定几位

<fe-stepper title="固定小数位数" :fixed-decimal-length="2" />

只允许输入整数

设置 integer 属性后，输入框将限制只能输入整数

<fe-stepper title="只允许输入整数" integer />

禁用

通过设置 disabled 属性来禁用步进器，禁用状态下无法点击按钮或修改输入框

<fe-stepper title="禁用" disabled />

样式风格

设置 radius ，icon-style ， width 属性后，可以修改样式风格

<fe-stepper
  title="自定义风格"
  :value="8"
  radius="50%"
  :icon-style="{
    size: '32px',
    color: '#333',
  }"
  width="30px"
/>

标题 slot

通过 slot=title 设置标题插槽内容

<fe-stepper>
  <span slot="title" class="demo-title">我是的标题<i>自带风格</i></span>
</fe-stepper>

事件

<fe-stepper
  title="事件"
  v-model="value"
  :min="minValue"
  :max="maxValue"
  :step="stepValue"
  integer
  @focus="onFocus"
  @blur="onBlur"
  @change="onChange"
  @plus="onPlus"
  @minus="onMinus"
  @overlimit="onOverlimit"
/>

API

Props

Slots

通过组件调用 Stepper 时，支持以下 Slots

Events