无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/meta.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/pubcss.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/menu.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/top.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/head.htm

[ lyuif-stepper ] 步进器

时间:2020-09-19 23:24来源:www.lyuid.com 作者:前沿视觉网 点击:
V1.1.1 [ lyuif-stepper ] 步进器 # 效果预览 Demo 参数说明 API 步进器,作为常用组件,在商城常见较多使用,丰富的渐变的配置参数,足以满足复杂常见下自定义效果 参数 说明 类型 默认值 ui 组件容

V1.1.1 [ lyuif-stepper ] 步进器#

效果预览 Demo
 

参数说明 API
步进器,作为常用组件,在商城常见较多使用,丰富的渐变的配置参数,足以满足复杂常见下自定义效果
参数 说明 类型 默认值
ui 组件容器-外部class类 Strting /
css 组件容器-style样式 Strting /
name 输入框-表单内提交时的标识符 String /
digit 允许小数 Boolean false
tofixed 输入框-保留小数位数 Number 0
async 异步触发事件-不更改输入框的值 Boolean false
step 步数 Number 1
val 当前值 Number 0
min 最小值 Number 0
max 最大值 Number /
rds 加减按钮-是否大圆角 Boolean false
val-dis 输入框-是否禁用 Boolean true
width 整体-允许设置宽度 Boolean false
size 按钮大小(组件宽度自动适配) Boolean false
bd 整体加粗 Boolean true
bor 按钮-是否描边 Boolean true
rds 按钮-大圆角 Boolean false
use-dis-ui 启用-不可用时状态样式 Boolean false
minus-ui 按钮减-外部class String /
minus-ui-hover 按钮减-点击态-外部class String /
minus-css 按钮减-style样式 String /
minus-f 按钮减-字体大小 String /
minus-c 按钮减-字体颜色 String /
minus-bc 按钮减-背景颜色 String /
val-ui 输入框-外部class(注意:输入框的 width 只能由 参数 val-w 设置生效) String /
val-css 输入框-style样式 String /
val-f 输入框-style样式 String /
val-bd 输入框-是否字体加粗 Boolean true
val-c 输入框-字体颜色 String /
val-bc 输入框-背景颜色 String /
val-w 输入框-自定义宽度 Number /
plus-ui 按钮加-外部class String /
plus-ui-hover 按钮加-点击态-外部class String /
plus-css 按钮加-style样式 String /
plus-f 按钮加-字体大小 String /
plus-c 按钮加-字体颜色 String /
plus-bc 按钮加-背景颜色 String /
minus-hide 隐藏-按钮减(占位) Boolean false
minus-none 隐藏-按钮减(不占位) Boolean false
plus-hide 隐藏-按钮加(占位) Boolean false
plus-none 隐藏-按钮加(不占位) Boolean false
minus-slot 启用自定义-按钮-减-内容 Boolean false
plus-slot 启用自定义-按钮-加-内容 Boolean false

Lyuif组件源码展示

  1. <lyuif-stepper
  2.     bor="{{true}}"
  3.     val="1"
  4.     min="0"
  5.     max="10"
  6.     rds="{{true}}"
  7.     bind:change="change"
  8. />
  9.  
自定义 Slot
自定义加减按钮内容
参数 说明 类型 默认值
minus 自定义-减-内容 String /
plus 自定义-加-内容 String /

Lyuif组件源码展示

  1. <lyuif-stepper
  2.     ninus-slot="{{true}}"
  3.     plus-slot="{{true}}"
  4. >
  5. <view slot="minus">自定义-加-内容</view>
  6. <view slot="plus">自定义-减-内容</view>
  7. </lyuif-stepper>
  8.  
事件 Events
 
参数 说明 类型 默认值
bind:minus 点击减号触发事件 eventhandle /
bind:plus 点击加号触发事件 eventhandle /
bind:change 值变化时均触发事件 eventhandle /

Lyuif组件源码展示

  1. <lyuif-stepper
  2.     val="1"
  3.     bind:minus="minus"
  4.     bind:plus="plus"
  5.     bind:change="change"
  6. />
  7.  
  8.  
  9. ({Page
  10.     minus(e){
  11.     console.log(e.detail.value)
  12.     },
  13.     plus(e){
  14.     console.log(e.detail.value)
  15.     },
  16.     change(e){
  17.     console.log(e.detail.value)
  18.     },
  19. })
  20.  
前端UI框架,UI框架组件,小程序组件,Lyuif前端框架专注于高效UI解决方案.lyuif是一款HTML/CSS前端框架,高效组件搭配lyui基因碎片化组合完美适配设计稿以及迭代更新,高效前端开发解决方案
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/footer.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/side.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/footbar.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/pubjs.htm