更新记录

0.0.4（2023-06-07）

优化演示代码

0.0.3（2023-06-06）

优化文档

0.0.2（2023-06-04）

将公共依赖提取至hd-utils

平台兼容性

组件库官方文档：fant-mini-plus

组件库提供更多vue3组件，比单独引入更加强大

Stepper 步进器

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

代码演示

样式风格

直角风格

<hd-stepper shape="square" v-model="value0"></hd-stepper>

直角风格

<hd-stepper shape="circle" v-model="value1"></hd-stepper>

基础功能

步长设置

<hd-stepper step="3" shape="circle" v-model="value2"></hd-stepper>

限制范围

<hd-stepper :max="20" :min="0" shape="circle" v-model="value3"></hd-stepper>

限制输入整数

<hd-stepper :integer="true" shape="circle" v-model="value4"></hd-stepper>

扩展功能

折叠减号

<hd-stepper shape="square" v-model="value5" :collapsible="true"></hd-stepper>

长按加减

<hd-stepper shape="circle" v-model="value6" :longPress="true"></hd-stepper>

异步更新

<hd-loading></hd-loading>
<hd-stepper shape="circle" v-model="value7" :asyncChange="true" @change="change"></hd-stepper>

const loading = useLoading() 

function change(val) {
  loading.showLoading({
    title: '改变中'
  })
  setTimeout(() => {
    this.value7 = val
    loading.hideLoading()
  }, 4000)
}

禁用状态

禁止输入

<hd-stepper shape="square" v-model="value8" readonly></hd-stepper>

禁止操作

<hd-stepper shape="square" v-model="value10" disabled></hd-stepper>

Props

Events

Slots

联系方式

有不明白或者建议可以扫码交流

联系我们