mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Field: jsx (#2512)
This commit is contained in:
parent
53b1942d08
commit
31da78eae6
@ -7,34 +7,19 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div placeholder="收货人姓名" class="van-cell van-field">
|
<div placeholder="收货人姓名" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>姓名</span></div>
|
<div class="van-cell__title"><span>姓名</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="收货人姓名" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div placeholder="收货人手机号" class="van-cell van-field">
|
<div placeholder="收货人手机号" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>电话</span></div>
|
<div class="van-cell__title"><span>电话</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="收货人手机号" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
|
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>地区</span></div>
|
<div class="van-cell__title"><span>地区</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="选择省 / 市 / 区" readonly="readonly" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-cell van-address-edit-detail">
|
<div class="van-cell van-address-edit-detail">
|
||||||
@ -42,12 +27,7 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
|
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>详细地址</span></div>
|
<div class="van-cell__title"><span>详细地址</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea>
|
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -55,12 +35,7 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
|
<div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>邮政编码</span></div>
|
<div class="van-cell__title"><span>邮政编码</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="tel" maxlength="6" placeholder="邮政编码" value="" class="van-field__control">
|
<div class="van-field__body"><input maxlength="6" placeholder="邮政编码" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
|
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
|
||||||
|
@ -5,34 +5,19 @@ exports[`create a AddressEdit 1`] = `
|
|||||||
<div placeholder="收货人姓名" class="van-cell van-field">
|
<div placeholder="收货人姓名" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>姓名</span></div>
|
<div class="van-cell__title"><span>姓名</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="收货人姓名" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div placeholder="收货人手机号" class="van-cell van-field">
|
<div placeholder="收货人手机号" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>电话</span></div>
|
<div class="van-cell__title"><span>电话</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="收货人手机号" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
|
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>地区</span></div>
|
<div class="van-cell__title"><span>地区</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="选择省 / 市 / 区" readonly="readonly" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-cell van-address-edit-detail">
|
<div class="van-cell van-address-edit-detail">
|
||||||
@ -40,12 +25,7 @@ exports[`create a AddressEdit 1`] = `
|
|||||||
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
|
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>详细地址</span></div>
|
<div class="van-cell__title"><span>详细地址</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea>
|
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -83,34 +63,19 @@ exports[`create a AddressEdit with props 1`] = `
|
|||||||
<div placeholder="收货人姓名" class="van-cell van-field">
|
<div placeholder="收货人姓名" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>姓名</span></div>
|
<div class="van-cell__title"><span>姓名</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" value="测试" class="van-field__control">
|
<div class="van-field__body"><input placeholder="收货人姓名" value="测试" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div placeholder="收货人手机号" class="van-cell van-field">
|
<div placeholder="收货人手机号" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>电话</span></div>
|
<div class="van-cell__title"><span>电话</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="13000000000" class="van-field__control">
|
<div class="van-field__body"><input placeholder="收货人手机号" value="13000000000" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
|
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>地区</span></div>
|
<div class="van-cell__title"><span>地区</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="北京市/朝阳区" class="van-field__control">
|
<div class="van-field__body"><input placeholder="选择省 / 市 / 区" readonly="readonly" value="北京市/朝阳区" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-cell van-address-edit-detail">
|
<div class="van-cell van-address-edit-detail">
|
||||||
@ -118,12 +83,7 @@ exports[`create a AddressEdit with props 1`] = `
|
|||||||
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
|
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>详细地址</span></div>
|
<div class="van-cell__title"><span>详细地址</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control">详细地址</textarea>
|
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control">详细地址</textarea></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -131,12 +91,7 @@ exports[`create a AddressEdit with props 1`] = `
|
|||||||
<div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
|
<div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>邮政编码</span></div>
|
<div class="van-cell__title"><span>邮政编码</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="tel" maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control">
|
<div class="van-field__body"><input maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
|
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
|
||||||
|
@ -28,23 +28,13 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div maxlength="30" placeholder="请填写姓名" class="van-cell van-field">
|
<div maxlength="30" placeholder="请填写姓名" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>张三</span></div>
|
<div class="van-cell__title"><span>张三</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="text" maxlength="30" placeholder="请填写姓名" value="" class="van-field__control">
|
<div class="van-field__body"><input maxlength="30" placeholder="请填写姓名" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div placeholder="请填写电话" class="van-cell van-field">
|
<div placeholder="请填写电话" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>电话</span></div>
|
<div class="van-cell__title"><span>电话</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="tel" placeholder="请填写电话" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="请填写电话" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
|
<div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
|
||||||
|
@ -22,12 +22,9 @@ exports[`render coupon list 1`] = `
|
|||||||
<div class="van-coupon-list">
|
<div class="van-coupon-list">
|
||||||
<div class="van-cell van-cell--borderless van-field van-coupon-list__field">
|
<div class="van-cell van-cell--borderless van-field van-coupon-list__field">
|
||||||
<div class="van-cell__value van-cell__value--alone">
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" maxlength="20" class="van-field__control">
|
<div class="van-field__body"><input placeholder="请输入优惠码" maxlength="20" class="van-field__control">
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--small van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
|
<div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--small van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
|
||||||
</div>
|
</div>
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs van-tabs--line van-coupon-list__tab">
|
<div class="van-tabs van-tabs--line van-coupon-list__tab">
|
||||||
|
@ -18,23 +18,13 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div placeholder="请输入用户名" class="van-cell van-field">
|
<div placeholder="请输入用户名" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>用户名</span></div>
|
<div class="van-cell__title"><span>用户名</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="请输入用户名" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div placeholder="请输入密码" class="van-cell van-field">
|
<div placeholder="请输入密码" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>密码</span></div>
|
<div class="van-cell__title"><span>密码</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="password" placeholder="请输入密码" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="请输入密码" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,84 +1,11 @@
|
|||||||
<template>
|
import { use, isObj, isDef } from '../utils';
|
||||||
<cell
|
import Icon from '../icon';
|
||||||
:icon="leftIcon"
|
import Cell from '../cell';
|
||||||
:title="label"
|
|
||||||
:center="center"
|
|
||||||
:border="border"
|
|
||||||
:is-link="isLink"
|
|
||||||
:required="required"
|
|
||||||
:class="b({
|
|
||||||
error,
|
|
||||||
disabled: $attrs.disabled,
|
|
||||||
[`label-${labelAlign}`]: labelAlign,
|
|
||||||
'min-height': type === 'textarea' && !autosize
|
|
||||||
})"
|
|
||||||
>
|
|
||||||
<slot
|
|
||||||
name="left-icon"
|
|
||||||
slot="icon"
|
|
||||||
/>
|
|
||||||
<slot
|
|
||||||
name="label"
|
|
||||||
slot="title"
|
|
||||||
/>
|
|
||||||
<div :class="b('body')">
|
|
||||||
<textarea
|
|
||||||
v-if="type === 'textarea'"
|
|
||||||
v-bind="$attrs"
|
|
||||||
v-on="listeners"
|
|
||||||
ref="input"
|
|
||||||
:class="b('control', inputAlign)"
|
|
||||||
:value="value"
|
|
||||||
:readonly="readonly"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
v-else
|
|
||||||
v-bind="$attrs"
|
|
||||||
v-on="listeners"
|
|
||||||
ref="input"
|
|
||||||
:class="b('control', inputAlign)"
|
|
||||||
:type="type"
|
|
||||||
:value="value"
|
|
||||||
:readonly="readonly"
|
|
||||||
>
|
|
||||||
<icon
|
|
||||||
v-if="showClear"
|
|
||||||
name="clear"
|
|
||||||
:class="b('clear')"
|
|
||||||
@touchstart.prevent="onClear"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
v-if="$slots.icon || icon"
|
|
||||||
:class="b('icon')"
|
|
||||||
@click="onClickIcon"
|
|
||||||
>
|
|
||||||
<slot name="icon">
|
|
||||||
<icon :name="icon" />
|
|
||||||
</slot>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="$slots.button"
|
|
||||||
:class="b('button')"
|
|
||||||
>
|
|
||||||
<slot name="button" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="errorMessage"
|
|
||||||
v-text="errorMessage"
|
|
||||||
:class="b('error-message')"
|
|
||||||
/>
|
|
||||||
</cell>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import create from '../utils/create';
|
|
||||||
import CellMixin from '../mixins/cell';
|
import CellMixin from '../mixins/cell';
|
||||||
import { isObj } from '../utils';
|
|
||||||
|
|
||||||
export default create({
|
const [sfc, bem] = use('field');
|
||||||
name: 'field',
|
|
||||||
|
|
||||||
|
export default sfc({
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
|
|
||||||
mixins: [CellMixin],
|
mixins: [CellMixin],
|
||||||
@ -118,7 +45,9 @@ export default create({
|
|||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
showClear() {
|
showClear() {
|
||||||
return this.clearable && this.focused && this.value !== '' && this.isDef(this.value) && !this.readonly;
|
return (
|
||||||
|
this.clearable && this.focused && this.value !== '' && isDef(this.value) && !this.readonly
|
||||||
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
listeners() {
|
listeners() {
|
||||||
@ -146,7 +75,7 @@ export default create({
|
|||||||
let { value } = target;
|
let { value } = target;
|
||||||
const { maxlength } = this.$attrs;
|
const { maxlength } = this.$attrs;
|
||||||
|
|
||||||
if (this.type === 'number' && this.isDef(maxlength) && value.length > maxlength) {
|
if (this.type === 'number' && isDef(maxlength) && value.length > maxlength) {
|
||||||
value = value.slice(0, maxlength);
|
value = value.slice(0, maxlength);
|
||||||
target.value = value;
|
target.value = value;
|
||||||
}
|
}
|
||||||
@ -179,7 +108,8 @@ export default create({
|
|||||||
this.onIconClick && this.onIconClick();
|
this.onIconClick && this.onIconClick();
|
||||||
},
|
},
|
||||||
|
|
||||||
onClear() {
|
onClear(event) {
|
||||||
|
event.preventDefault();
|
||||||
this.$emit('input', '');
|
this.$emit('input', '');
|
||||||
this.$emit('clear');
|
this.$emit('clear');
|
||||||
},
|
},
|
||||||
@ -188,7 +118,8 @@ export default create({
|
|||||||
if (this.type === 'number') {
|
if (this.type === 'number') {
|
||||||
const { keyCode } = event;
|
const { keyCode } = event;
|
||||||
const allowPoint = String(this.value).indexOf('.') === -1;
|
const allowPoint = String(this.value).indexOf('.') === -1;
|
||||||
const isValidKey = (keyCode >= 48 && keyCode <= 57) || (keyCode === 46 && allowPoint) || keyCode === 45;
|
const isValidKey =
|
||||||
|
(keyCode >= 48 && keyCode <= 57) || (keyCode === 46 && allowPoint) || keyCode === 45;
|
||||||
if (!isValidKey) {
|
if (!isValidKey) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
@ -226,6 +157,55 @@ export default create({
|
|||||||
input.style.height = height + 'px';
|
input.style.height = height + 'px';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
render(h) {
|
||||||
|
const { type, labelAlign, $slots: slots } = this;
|
||||||
|
|
||||||
|
const inputProps = {
|
||||||
|
ref: 'input',
|
||||||
|
class: bem('control', this.inputAlign),
|
||||||
|
domProps: {
|
||||||
|
value: this.value
|
||||||
|
},
|
||||||
|
attrs: {
|
||||||
|
...this.$attrs,
|
||||||
|
readonly: this.readonly
|
||||||
|
},
|
||||||
|
on: this.listeners
|
||||||
|
};
|
||||||
|
|
||||||
|
const Input = type === 'textarea' ? <textarea {...inputProps} /> : <input {...inputProps} />;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Cell
|
||||||
|
icon={this.leftIcon}
|
||||||
|
title={this.label}
|
||||||
|
center={this.center}
|
||||||
|
border={this.border}
|
||||||
|
isLink={this.isLink}
|
||||||
|
required={this.required}
|
||||||
|
class={bem({
|
||||||
|
error: this.error,
|
||||||
|
disabled: this.$attrs.disabled,
|
||||||
|
[`label-${labelAlign}`]: labelAlign,
|
||||||
|
'min-height': type === 'textarea' && !this.autosize
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{h('template', { slot: 'icon' }, slots['left-icon'])}
|
||||||
|
{h('template', { slot: 'title' }, slots.label)}
|
||||||
|
<div class={bem('body')}>
|
||||||
|
{Input}
|
||||||
|
{this.showClear && <Icon name="clear" class={bem('clear')} onTouchstart={this.onClear} />}
|
||||||
|
{(slots.icon || this.icon) && (
|
||||||
|
<div class={bem('icon')} onClick={this.onClickIcon}>
|
||||||
|
{slots.icon || <Icon name={this.icon} />}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{slots.button && <div class={bem('button')}>{slots.button}</div>}
|
||||||
|
</div>
|
||||||
|
{this.errorMessage && <div class={bem('error-message')}>{this.errorMessage}</div>}
|
||||||
|
</Cell>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
|
@ -6,12 +6,7 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div class="van-cell-group van-hairline--top-bottom">
|
<div class="van-cell-group van-hairline--top-bottom">
|
||||||
<div placeholder="请输入用户名" class="van-cell van-field">
|
<div placeholder="请输入用户名" class="van-cell van-field">
|
||||||
<div class="van-cell__value van-cell__value--alone">
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
<div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="请输入用户名" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -21,25 +16,17 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div placeholder="请输入用户名" class="van-cell van-cell--required van-field">
|
<div placeholder="请输入用户名" class="van-cell van-cell--required van-field">
|
||||||
<div class="van-cell__title"><span>用户名</span></div>
|
<div class="van-cell__title"><span>用户名</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="请输入用户名" value="" class="van-field__control">
|
||||||
<!---->
|
|
||||||
<div class="van-field__icon"><i class="van-icon van-icon-question-o" style="color:undefined;font-size:undefined;">
|
<div class="van-field__icon"><i class="van-icon van-icon-question-o" style="color:undefined;font-size:undefined;">
|
||||||
<!---->
|
<!---->
|
||||||
<!----></i></div>
|
<!----></i></div>
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div placeholder="请输入密码" class="van-cell van-cell--required van-field">
|
<div placeholder="请输入密码" class="van-cell van-cell--required van-field">
|
||||||
<div class="van-cell__title"><span>密码</span></div>
|
<div class="van-cell__title"><span>密码</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="password" placeholder="请输入密码" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="请输入密码" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -51,12 +38,7 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<!----></i>
|
<!----></i>
|
||||||
<div class="van-cell__title"><span>用户名</span></div>
|
<div class="van-cell__title"><span>用户名</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="text" disabled="disabled" value="输入框已禁用" class="van-field__control">
|
<div class="van-field__body"><input disabled="disabled" value="输入框已禁用" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -66,22 +48,13 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div placeholder="请输入用户名" class="van-cell van-field van-field--error">
|
<div placeholder="请输入用户名" class="van-cell van-field van-field--error">
|
||||||
<div class="van-cell__title"><span>用户名</span></div>
|
<div class="van-cell__title"><span>用户名</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="请输入用户名" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div placeholder="请输入手机号" class="van-cell van-field">
|
<div placeholder="请输入手机号" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>手机号</span></div>
|
<div class="van-cell__title"><span>手机号</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="text" placeholder="请输入手机号" value="1365577" class="van-field__control">
|
<div class="van-field__body"><input placeholder="请输入手机号" value="1365577" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<div class="van-field__error-message">手机号格式错误</div>
|
<div class="van-field__error-message">手机号格式错误</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -92,12 +65,7 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div placeholder="请输入留言" rows="1" class="van-cell van-field">
|
<div placeholder="请输入留言" rows="1" class="van-cell van-field">
|
||||||
<div class="van-cell__title"><span>留言</span></div>
|
<div class="van-cell__title"><span>留言</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><textarea placeholder="请输入留言" rows="1" class="van-field__control"></textarea>
|
<div class="van-field__body"><textarea placeholder="请输入留言" rows="1" class="van-field__control"></textarea></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -107,14 +75,11 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div placeholder="请输入短信验证码" class="van-cell van-cell--center van-field">
|
<div placeholder="请输入短信验证码" class="van-cell van-cell--center van-field">
|
||||||
<div class="van-cell__title"><span>短信验证码</span></div>
|
<div class="van-cell__title"><span>短信验证码</span></div>
|
||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="text" placeholder="请输入短信验证码" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="请输入短信验证码" value="" class="van-field__control">
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<div class="van-field__button"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">
|
<div class="van-field__button"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">
|
||||||
发送验证码
|
发送验证码
|
||||||
</span></button></div>
|
</span></button></div>
|
||||||
</div>
|
</div>
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -3,12 +3,7 @@
|
|||||||
exports[`clearable 1`] = `
|
exports[`clearable 1`] = `
|
||||||
<div class="van-cell van-field">
|
<div class="van-cell van-field">
|
||||||
<div class="van-cell__value van-cell__value--alone">
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
<div class="van-field__body"><input type="text" class="van-field__control">
|
<div class="van-field__body"><input class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@ -16,13 +11,9 @@ exports[`clearable 1`] = `
|
|||||||
exports[`clearable 2`] = `
|
exports[`clearable 2`] = `
|
||||||
<div class="van-cell van-field">
|
<div class="van-cell van-field">
|
||||||
<div class="van-cell__value van-cell__value--alone">
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
<div class="van-field__body"><input type="text" class="van-field__control"> <i class="van-icon van-icon-clear van-field__clear">
|
<div class="van-field__body"><input class="van-field__control"><i class="van-icon van-icon-clear van-field__clear">
|
||||||
<!---->
|
<!---->
|
||||||
<!----></i>
|
<!----></i></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@ -30,12 +21,7 @@ exports[`clearable 2`] = `
|
|||||||
exports[`render textarea 1`] = `
|
exports[`render textarea 1`] = `
|
||||||
<div class="van-cell van-field">
|
<div class="van-cell van-field">
|
||||||
<div class="van-cell__value van-cell__value--alone">
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
<div class="van-field__body"><textarea class="van-field__control" style="height: auto;"></textarea>
|
<div class="van-field__body"><textarea class="van-field__control" style="height: auto;"></textarea></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
@ -8,12 +8,7 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<!---->
|
<!---->
|
||||||
<!----></i>
|
<!----></i>
|
||||||
<div class="van-cell__value van-cell__value--alone">
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
<div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!---->
|
<!---->
|
||||||
@ -26,12 +21,7 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<!---->
|
<!---->
|
||||||
<!----></i>
|
<!----></i>
|
||||||
<div class="van-cell__value van-cell__value--alone">
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
<div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-search__action">
|
<div class="van-search__action">
|
||||||
@ -46,12 +36,7 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<!---->
|
<!---->
|
||||||
<!----></i>
|
<!----></i>
|
||||||
<div class="van-cell__value van-cell__value--alone">
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
<div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control">
|
<div class="van-field__body"><input placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-search__action">
|
<div class="van-search__action">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user