XNumber 组件使用教程
优质
小牛编辑
141浏览
2023-12-01
安装
import { XNumber } from 'vux'
export default {
components: {
XNumber
}
}// 在入口文件全局引入
import Vue from 'vue'
import { XNumber } from 'vux'
Vue.component('x-number', XNumber)
<group>
<x-number title="title" v-model="value"></x-number>
</group>
x-number只能在Group中使用
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| value | number | 0 | 表单值，使用v-model绑定 | -- |
| title | string | 标题 | -- | |
| min | number | 最小值 | -- | |
| max | number | 最大值 | -- | |
| step | number | 1 | 步长 | -- |
| fillable | boolean | false | 是否可填写 | -- |
| width | string | 50px | 输入框宽度 | -- |
| button-style | string | square | 按钮样式，可选值为square或者round | -- |
| align | string | right | 按钮部分位置，默认在右边(right)，可选值为left和right | -- |
样式变量
| 名字 | 默认值 | 说明 | 继承自变量 |
| @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 |