# 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或以上版本有效) |