Honeycomb Design

# 数值 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：当前输入值

← 文本框 Textbox →