blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Field: jsx (#2512)

Browse Source
This commit is contained in:
neverland 2019-01-12 23:14:52 +08:00 committed by GitHub
parent 53b1942d08
commit 31da78eae6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 97 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/address-edit/test/__snapshots__/demo.spec.js.snap
View File

@ -7,34 +7,19 @@ exports[`renders demo correctly 1`] = `
<div placeholder="收货人姓名" class="van-cell van-field">
<div class="van-cell__title"><span>姓名</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="收货人姓名" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="收货人姓名" value="" class="van-field__control"></div>
</div>
</div>
<div placeholder="收货人手机号" class="van-cell van-field">
<div class="van-cell__title"><span>电话</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="收货人手机号" value="" class="van-field__control"></div>
</div>
</div>
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
<div class="van-cell__title"><span>地区</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="选择省 / 市 / 区" readonly="readonly" value="" class="van-field__control"></div>
</div>
</div>
<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 class="van-cell__title"><span>详细地址</span></div>
<div class="van-cell__value">
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea>
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
</div>
</div>
</div>
@ -55,12 +35,7 @@ exports[`renders demo correctly 1`] = `
<div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
<div class="van-cell__title"><span>邮政编码</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" maxlength="6" placeholder="邮政编码" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input maxlength="6" placeholder="邮政编码" value="" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">

63
packages/address-edit/test/__snapshots__/index.spec.js.snap
View File

@ -5,34 +5,19 @@ exports[`create a AddressEdit 1`] = `
<div placeholder="收货人姓名" class="van-cell van-field">
<div class="van-cell__title"><span>姓名</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="收货人姓名" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="收货人姓名" value="" class="van-field__control"></div>
</div>
</div>
<div placeholder="收货人手机号" class="van-cell van-field">
<div class="van-cell__title"><span>电话</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="收货人手机号" value="" class="van-field__control"></div>
</div>
</div>
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
<div class="van-cell__title"><span>地区</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="选择省 / 市 / 区" readonly="readonly" value="" class="van-field__control"></div>
</div>
</div>
<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 class="van-cell__title"><span>详细地址</span></div>
<div class="van-cell__value">
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea>
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
</div>
</div>
</div>
@ -83,34 +63,19 @@ exports[`create a AddressEdit with props 1`] = `
<div placeholder="收货人姓名" class="van-cell van-field">
<div class="van-cell__title"><span>姓名</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="收货人姓名" value="测试" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="收货人姓名" value="测试" class="van-field__control"></div>
</div>
</div>
<div placeholder="收货人手机号" class="van-cell van-field">
<div class="van-cell__title"><span>电话</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="13000000000" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="收货人手机号" value="13000000000" class="van-field__control"></div>
</div>
</div>
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
<div class="van-cell__title"><span>地区</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="北京市/朝阳区" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="选择省 / 市 / 区" readonly="readonly" value="北京市/朝阳区" class="van-field__control"></div>
</div>
</div>
<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 class="van-cell__title"><span>详细地址</span></div>
<div class="van-cell__value">
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control">详细地址</textarea>
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control">详细地址</textarea></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 class="van-cell__title"><span>邮政编码</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">

14
packages/contact-card/test/__snapshots__/demo.spec.js.snap
View File

@ -28,23 +28,13 @@ exports[`renders demo correctly 1`] = `
<div maxlength="30" placeholder="请填写姓名" class="van-cell van-field">
<div class="van-cell__title"><span>张三</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" maxlength="30" placeholder="请填写姓名" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input maxlength="30" placeholder="请填写姓名" value="" class="van-field__control"></div>
</div>
</div>
<div placeholder="请填写电话" class="van-cell van-field">
<div class="van-cell__title"><span>电话</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" placeholder="请填写电话" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="请填写电话" value="" class="van-field__control"></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>

5
packages/coupon-list/test/__snapshots__/index.spec.js.snap
View File

@ -22,12 +22,9 @@ exports[`render coupon list 1`] = `
<div class="van-coupon-list">
<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-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>
<!---->
</div>
</div>
<div class="van-tabs van-tabs--line van-coupon-list__tab">

14
packages/dialog/test/__snapshots__/demo.spec.js.snap
View File

@ -18,23 +18,13 @@ exports[`renders demo correctly 1`] = `
<div placeholder="请输入用户名" class="van-cell van-field">
<div class="van-cell__title"><span>用户名</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="请输入用户名" value="" class="van-field__control"></div>
</div>
</div>
<div placeholder="请输入密码" class="van-cell van-field">
<div class="van-cell__title"><span>密码</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="password" placeholder="请输入密码" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="请输入密码" value="" class="van-field__control"></div>
</div>
</div>
</div>

146
packages/field/index.vue → packages/field/index.js
View File

@ -1,84 +1,11 @@
<template>
<cell
:icon="leftIcon"
: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 { use, isObj, isDef } from '../utils';
import Icon from '../icon';
import Cell from '../cell';
import CellMixin from '../mixins/cell';
import { isObj } from '../utils';
export default create({
name: 'field',
const [sfc, bem] = use('field');
export default sfc({
inheritAttrs: false,
mixins: [CellMixin],
@ -118,7 +45,9 @@ export default create({
computed: {
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() {
@ -146,7 +75,7 @@ export default create({
let { value } = target;
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);
target.value = value;
}
@ -179,7 +108,8 @@ export default create({
this.onIconClick && this.onIconClick();
},
onClear() {
onClear(event) {
event.preventDefault();
this.$emit('input', '');
this.$emit('clear');
},
@ -188,7 +118,8 @@ export default create({
if (this.type === 'number') {
const { keyCode } = event;
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) {
event.preventDefault();
}
@ -226,6 +157,55 @@ export default create({
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>

51
packages/field/test/__snapshots__/demo.spec.js.snap
View File

@ -6,12 +6,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell-group van-hairline--top-bottom">
<div placeholder="请输入用户名" class="van-cell van-field">
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="请输入用户名" value="" class="van-field__control"></div>
</div>
</div>
</div>
@ -21,25 +16,17 @@ exports[`renders demo correctly 1`] = `
<div placeholder="请输入用户名" class="van-cell van-cell--required van-field">
<div class="van-cell__title"><span>用户名</span></div>
<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;">
<!---->
<!----></i></div>
<!---->
</div>
<!---->
</div>
</div>
<div placeholder="请输入密码" class="van-cell van-cell--required van-field">
<div class="van-cell__title"><span>密码</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="password" placeholder="请输入密码" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="请输入密码" value="" class="van-field__control"></div>
</div>
</div>
</div>
@ -51,12 +38,7 @@ exports[`renders demo correctly 1`] = `
<!----></i>
<div class="van-cell__title"><span>用户名</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" disabled="disabled" value="输入框已禁用" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input disabled="disabled" value="输入框已禁用" class="van-field__control"></div>
</div>
</div>
</div>
@ -66,22 +48,13 @@ exports[`renders demo correctly 1`] = `
<div placeholder="请输入用户名" class="van-cell van-field van-field--error">
<div class="van-cell__title"><span>用户名</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="请输入用户名" value="" class="van-field__control"></div>
</div>
</div>
<div placeholder="请输入手机号" class="van-cell van-field">
<div class="van-cell__title"><span>手机号</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="请输入手机号" value="1365577" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<div class="van-field__body"><input placeholder="请输入手机号" value="1365577" class="van-field__control"></div>
<div class="van-field__error-message">手机号格式错误</div>
</div>
</div>
@ -92,12 +65,7 @@ exports[`renders demo correctly 1`] = `
<div placeholder="请输入留言" rows="1" class="van-cell van-field">
<div class="van-cell__title"><span>留言</span></div>
<div class="van-cell__value">
<div class="van-field__body"><textarea placeholder="请输入留言" rows="1" class="van-field__control"></textarea>
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><textarea placeholder="请输入留言" rows="1" class="van-field__control"></textarea></div>
</div>
</div>
</div>
@ -107,14 +75,11 @@ exports[`renders demo correctly 1`] = `
<div placeholder="请输入短信验证码" class="van-cell van-cell--center van-field">
<div class="van-cell__title"><span>短信验证码</span></div>
<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">
发送验证码
</span></button></div>
</div>
<!---->
</div>
</div>
</div>

22
packages/field/test/__snapshots__/index.spec.js.snap
View File

@ -3,12 +3,7 @@
exports[`clearable 1`] = `
<div class="van-cell van-field">
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="text" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input class="van-field__control"></div>
</div>
</div>
`;
@ -16,13 +11,9 @@ exports[`clearable 1`] = `
exports[`clearable 2`] = `
<div class="van-cell van-field">
<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>
<!---->
<!---->
</div>
<!---->
<!----></i></div>
</div>
</div>
`;
@ -30,12 +21,7 @@ exports[`clearable 2`] = `
exports[`render textarea 1`] = `
<div class="van-cell van-field">
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"><textarea class="van-field__control" style="height: auto;"></textarea>
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><textarea class="van-field__control" style="height: auto;"></textarea></div>
</div>
</div>
`;

21
packages/search/test/__snapshots__/demo.spec.js.snap
View File

@ -8,12 +8,7 @@ exports[`renders demo correctly 1`] = `
<!---->
<!----></i>
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
</div>
</div>
<!---->
@ -26,12 +21,7 @@ exports[`renders demo correctly 1`] = `
<!---->
<!----></i>
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
</div>
</div>
<div class="van-search__action">
@ -46,12 +36,7 @@ exports[`renders demo correctly 1`] = `
<!---->
<!----></i>
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
<div class="van-field__body"><input placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
</div>
</div>
<div class="van-search__action">