mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Improvement] Field: support v-model.number (#1221)
This commit is contained in:
neverland
GitHub
parent
4eb328ae08
commit
a3579a88e4
@ -114,7 +114,7 @@ Field support all native properties of input tag，such as `maxlength`、`placeh
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| value | Field value | `String` | - |
|
||||
| value | Field value | `String | Number` | - |
|
||||
| label | Field label | `String` | - |
|
||||
| type | Input type | `String` | `text` |
|
||||
| disabled | Disable field | `Boolean` | `false` |
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
:class="b({
|
||||
error,
|
||||
disabled: $attrs.disabled,
|
||||
'has-icon': hasIcon,
|
||||
'has-icon': showIcon,
|
||||
'min-height': type === 'textarea' && !autosize
|
||||
})"
|
||||
>
|
||||
@ -35,8 +35,7 @@
|
||||
:class="b('error-message')"
|
||||
/>
|
||||
<div
|
||||
v-if="hasIcon"
|
||||
v-show="$slots.icon || value"
|
||||
v-if="showIcon"
|
||||
:class="b('icon')"
|
||||
@touchstart.prevent="onClickIcon"
|
||||
>
|
||||
@ -60,7 +59,7 @@ export default create({
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
value: null,
|
||||
value: [String, Number],
|
||||
icon: String,
|
||||
label: String,
|
||||
error: Boolean,
|
||||
@ -91,8 +90,8 @@ export default create({
|
||||
},
|
||||
|
||||
computed: {
|
||||
hasIcon() {
|
||||
return this.$slots.icon || this.icon;
|
||||
showIcon() {
|
||||
return this.$slots.icon || (this.icon && this.value !== '' && this.isDef(this.value));
|
||||
},
|
||||
|
||||
listeners() {
|
||||
@ -117,7 +116,7 @@ export default create({
|
||||
onKeypress(event) {
|
||||
if (this.type === 'number') {
|
||||
const { keyCode } = event;
|
||||
const allowPoint = this.value.indexOf('.') === -1;
|
||||
const allowPoint = String(this.value).indexOf('.') === -1;
|
||||
const isValidKey = (keyCode >= 48 && keyCode <= 57) || (keyCode === 46 && allowPoint) || keyCode === 45;
|
||||
if (!isValidKey) {
|
||||
event.preventDefault();
|
||||
|
||||
@ -19,7 +19,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div placeholder="请输入用户名" class="van-cell van-cell--required van-hairline van-field van-field--has-icon">
|
||||
<div placeholder="请输入用户名" class="van-cell van-cell--required van-hairline van-field">
|
||||
<!---->
|
||||
<div class="van-cell__title"><span>用户名</span>
|
||||
<!---->
|
||||
@ -27,11 +27,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell__value">
|
||||
<input type="text" placeholder="请输入用户名" value="" class="van-field__control">
|
||||
<!---->
|
||||
<div class="van-field__icon" style="display:none;">
|
||||
<i class="van-icon van-icon-clear" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
@ -119,7 +115,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div placeholder="请输入短信验证码" class="van-cell van-cell--center van-hairline van-field van-field--has-icon">
|
||||
<div placeholder="请输入短信验证码" class="van-cell van-cell--center van-hairline van-field">
|
||||
<!---->
|
||||
<div class="van-cell__title"><span>短信验证码</span>
|
||||
<!---->
|
||||
@ -127,11 +123,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell__value">
|
||||
<input type="text" placeholder="请输入短信验证码" value="" class="van-field__control">
|
||||
<!---->
|
||||
<div class="van-field__icon" style="display:none;">
|
||||
<i class="van-icon van-icon-clear" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-field__button">
|
||||
|
||||
@ -14,6 +14,7 @@ test('click icon event', () => {
|
||||
const onIconClick = jest.fn();
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: 'a',
|
||||
icon: 'search',
|
||||
onIconClick
|
||||
}
|
||||
|
||||
@ -117,7 +117,7 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| label | 标签 | `String` | - |
|
||||
| value | 当前输入的值 | `String` | - |
|
||||
| value | 当前输入的值 | `String | Number` | - |
|
||||
| type | 可设置为任意原生类型, 如 `number` `tel` `textarea` | `String` | `text` |
|
||||
| disabled | 是否禁用输入框 | `Boolean` | `false` |
|
||||
| error | 是否将输入内容标红 | `Boolean` | `false` |
|
||||
|
||||
@ -7,17 +7,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<i class="van-icon van-icon-search" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
<div placeholder="请输入商品名称" class="van-cell van-field van-field--has-icon">
|
||||
<div placeholder="请输入商品名称" class="van-cell van-field">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<input type="search" placeholder="请输入商品名称" value="" class="van-field__control">
|
||||
<!---->
|
||||
<div class="van-field__icon" style="display:none;">
|
||||
<i class="van-icon van-icon-clear" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
@ -31,17 +27,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<i class="van-icon van-icon-search" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
<div placeholder="请输入商品名称" class="van-cell van-field van-field--has-icon">
|
||||
<div placeholder="请输入商品名称" class="van-cell van-field">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<input type="search" placeholder="请输入商品名称" value="" class="van-field__control">
|
||||
<!---->
|
||||
<div class="van-field__icon" style="display:none;">
|
||||
<i class="van-icon van-icon-clear" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
@ -57,17 +49,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<i class="van-icon van-icon-search" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
<div class="van-cell van-field van-field--has-icon">
|
||||
<div class="van-cell van-field">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<input type="search" value="" class="van-field__control">
|
||||
<!---->
|
||||
<div class="van-field__icon" style="display:none;">
|
||||
<i class="van-icon van-icon-clear" style="color:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user