XNumber

demo 原始链接demo 源码编辑文档组件源码

x-number - 图1

二维码

x-number - 图2

安装

局部注册

全局注册

  1. import { XNumber } from 'vux'
  2. export default {
  3. components: {
  4. XNumber
  5. }
  6. }

  1. // 在入口文件全局引入
  2. import Vue from 'vue'
  3. import { XNumber } from 'vux'
  4. Vue.component('x-number', XNumber)
  1. <group>
  2. <x-number title="title" v-model="value"></x-number>
  3. </group>

x-number只能在Group中使用

属性

名字类型默认值说明版本要求
valuenumber0表单值,使用v-model绑定
titlestring标题
minnumber最小值
maxnumber最大值
stepnumber1步长
fillablebooleanfalse是否可填写
widthstring50px输入框宽度
button-stylestringsquare按钮样式,可选值为square或者round
alignstringright按钮部分位置,默认在右边(right),可选值为leftright
## 样式变量
名字默认值说明继承自变量
@number-button-font-color #3cc51f
@number-input-font-color #666
@number-button-enabled-border-color #ececec
@number-square-button-enabled-border-color #ececec @number-button-enabled-border-color
@number-round-button-enabled-border-color #3cc51f @number-button-font-color
@number-button-disabled-border-color #ececec @number-button-enabled-border-color
@number-round-button-disabled-border-color #ececec @number-button-enabled-border-color

相关 issue

贡献者

该组件(包含文档)迭代次数 26,贡献人数 5Estelle00airyland万刚光君greedying

发布日志

  • v2.8.0 [fix] 修复初始化时 on-change 错误触发
  • v2.3.7 [fix] 修复值类型 #1554
  • v2.3.2 [fix] 修复 min 不存在的判断 #1459
  • v2.2.1 [fix] value为空字符串时,去掉 prop 类型检测 warning 信息,并禁用 addsub 方法
  • v2.2.1-rc.8 [fix] 当 fillable 为true时,修复数字第一位无法编辑的问题
  • v2.1.1-rc.7 [fix] 在 nextTick 后触发 on-change 事件
  • v2.1.0 [feature] 升级WeUI样式
  • v2.1.0 [fix] 修复label样式不受控于group设置
  • v2.1.0 [feature] 支持align属性
  • v2.1.0-rc.46 [enhance] 使用svg代替 + - 字符
  • v2.1.0-rc.46 [feature] 支持圆形按钮样式
  • v2.0.0 [change] fillable 值默认为false, 稍微保护一下不小心商城的后端接口没有做好数据校验的用户,导致用户粘贴负数还提交正确