# typefield 金额框
# typefield 概述
当区块正在获取数据中时可使用,适当的等待动画可以提升用户体验。
# typefield 代码演示
# 基础用法
最简单使用 typefield 的方法。
未开启四舍五入,整数位 2 位,小数位 2 位。
# 自定义小数位数
未开启四舍五入,整数位 3 位,小数位 2 位。
# 开启四舍五入
开启四舍五入。
# 卡号
基本用法。
# 事件
焦点事件。
# typefield API
# typefield props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 输入框类型,可选值为 money 和 cardNo 或者不设置 | String | money |
| value | 可用 v-model 双向绑定的值 | String | -- |
| disabled | 禁用输入框 | Boolean | false |
| readonly | 只读输入框 | Boolean | false |
| placeholder | 内部提示语句 | String | -- |
| isround | 是否进行四舍五入 | Boolean | false |
| integerNum | 整数位保留位数,当整数位超过 13 位时请小数位最多保留2位小数(受 javascript 计算精度限制,更加精细的运算请于后端处理; v1.0.61后可突破此限制) | Number/String | 10 |
| suffixNum | 小数位保留位数 | Number/String | 2 |
| bigTips | 开启大写提示 | Boolean | false |
| divided | 是否添加金额组件分隔符 ( type 为 money 时专用 ) | Boolean | false |
| algin | 输入框数字显示位置 left center right | String | left |
| notFillin | 格式化金额时,当小数点少于指定位数是否不需要补 0 ( type 为 money 时专用) ( isround 优先级大于 notFillin ) | Boolean | false |
| notFormat | 不对数据进行格式化,输入什么是什么 ( type 为 money 时专用) | Boolean | false |
| setNull | 设置空值为 0( type为money时专用 ) | Boolean | false |
| maxlength | 可输入最大长度 ( type为cardNo时专用 ) (v1.0.27) | Number | -- |
| cardFormat | 双向绑定获取值是否格式化 ( type为 cardNo 时专用) (v1.0.27) | Boolean | true |
| focusAllSelect | 聚焦时全选中控件内容,只支持金额类型( v1.0.31) | Boolean | false |
| nonNegative | 只允许非负数,即正数和 0(v1.0.36) | Boolean | false |
| hoverTips | 开启大写提示后,支持是否移到组件显示大写提示 hoverTips(v1.0.43) | Boolean | false |
| immeDivided | 是否在输入时显示千分位格式 (v1.0.44) | Boolean | false |
| tabindex | 设置输入框 tabindex (v1.0.47) | String | Number | -1 |
| step | 设置输入框步长 (v1.0.49) | Number | 1 |
| min | 设置输入框最小值 (v1.0.49) | Number | -Infinity |
| max | 设置输入框最大值 (v1.0.49) | Number | Infinity |
| uppercaseMethod | 自定义金额数字大写转换函数 (v1.0.50) | Function | -- |
| isShowBtn | 添加上下键加减按钮,开启后键盘上下键禁用( immeDivided 属性不支持) (v1.0.66) | Boolean | false |
| eventTriggerConfig | 用于个性化配置事件触发的场景(v1.7.0) outValueChange:false表示外部改变值,不触发当前设置事件 true: 表示外部改变值,触发当前设置事件 {'on-change': { outValueChange: false }} v1.7.0版本开放 'on-change'中outValueChange | Object | {} |
| keepBigTip | 开启该属性需要同时开启大写提示bigTips,开启后,输入框内有值时,大写提示框将保持长期开启。同时启用该属性后,hoverTips将失效 (v1.8.1) | Boolean | false |
# typefield event
| 事件名 | 说明 | 返回值 |
|---|---|---|
| on-blur | 输入框失去焦点时触发 | 参数一:event(v1.0.62) 参数二: 值是否变化 Boolean (v1.0.62) |
| on-keyup | 原生的 keyup 事件 | 输入值 |
| on-focus | 输入框获取焦点时触发 | event |
| on-enter | 输入框键盘输入 enter 键触发 (v1.0.62) | event |
| on-change | 输入框键盘输入 enter 键或者 blur 时,且输入值发生改变时触发。(v1.0.62) | 参数一:value 参数二: oldvalue |
typefield slot
| 名称 | 说明 |
|---|---|
| prepend | 输入框前置内容(除 select 组件外自加样式) |
| append | 输入框后置内容(除 select 组件外自加样式) |
# typefield methods
| 方法 | 说明 |
|---|---|
| focus | 通过 this.$refs.xxx.focus() 调用,使当前输入框获取焦点 |
| blur | 手动取消输入框焦点 ( this.$refs.xxx.blur() )(此属性只在1.0.10或以上版本有效) |