# 数值 Spinner
仅允许输入标准的数字值
# 基础用法
基础用法
展示数值组件的基础使用方法，可绑定已有值
<title>基础用法</title>
<describe>展示数值组件的基础使用方法，可绑定已有值</describe>
<template>
<hc-spinner :value="value" style="width: 200px;"></hc-spinner>
</template>
<script>
export default {
data () {
return {
value: 147258.369
</script>
# 数值单位
数值单位
可在输入框后面配置显示的单位文本
<title>数值单位</title>
<describe>可在输入框后面配置显示的单位文本</describe>
<template>
<hc-spinner :value="value" unit="万元" style="width: 200px;"></hc-spinner>
</template>
<script>
export default {
data () {
return {
value: 147258.369
</script>
# 数值图标
数值图标
可在输入框后配置图标，描述业务意义
<title>数值图标</title>
<describe>可在输入框后配置图标，描述业务意义</describe>
<template>
<hc-spinner :value="value" icon="el-icon-date" style="width: 200px;"></hc-spinner>
</template>
<script>
export default {
data () {
return {
value: 147258.369
</script>
# 数值范围
数值范围
指定可以输入的最大最小值
<title>数值范围</title>
<describe>指定可以输入的最大最小值</describe>
<template>
<hc-spinner :value="value" :max="999999" :min="0" style="width: 200px;"></hc-spinner>
</template>
<script>
export default {
data () {
return {
value: 147258.369
</script>
# 数值小数位
数值小数位
将输入的值格式化到指定的小数位展示
<title>数值小数位</title>
<describe>将输入的值格式化到指定的小数位展示</describe>
<template>
<hc-spinner :value="value" :rounding="4" style="width: 200px;"></hc-spinner>
</template>
<script>
export default {
data () {
return {
value: 147258.369
</script>
# 数值保留位
数值保留位
对输入的值进行保留为处理（四舍五入）
<title>数值保留位</title>
<describe>对输入的值进行保留为处理（四舍五入）</describe>
<template>
<hc-spinner :value="value" :decimal-places="4" style="width: 200px;"></hc-spinner>
</template>
<script>
export default {
data () {
return {
value: 147258.369
</script>
# 属性及事件
# HcSpinner属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
value
|
当前输入的值，可配合v-model使用 |
number
|
-- | ---- |
unit
|
单位 |
string
|
-- | -- |
icon
|
图标 |
string
|
-- | -- |
align
|
对齐方式 |
string
|
left / right
|
right
|
show-thousandths
|
显示千分符 |
boolean
|
-- |
true
|
decimal-places
|
补充小数位数 |
number
|
-- |
2
|
rounding
|
数值保留位（四舍五入） |
number
|
-- |
2
|
min
|
最小值 |
number
|
-- |
-Infinity
|
max
|
最大值 |
number
|
-- |
Infinity
|
allow-empty
|
允许为空 |
boolean
|
-- |
false
|
placeholder
|
为空提示 |
string
|
-- | -- |
viewable
|
是否查看模式 |
boolean
|
-- |
false
|
disabled
|
是否禁用 |
boolean
|
-- |
false
|
# HcSpinner事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
change
|
值改变事件 |
event.value
：当前输入值
|
登录
下拉树 TreeSelect 文本框 Textbox