Merge branch 'dev' into next
This commit is contained in:
chenjiahan
@@ -133,6 +133,7 @@ export default {
|
||||
| overlay | Whether to show overlay | *boolean* | `true` |
|
||||
| lock-scroll | Whether to lock background scroll | *boolean* | `true` |
|
||||
| lazy-render | Whether to lazy render util appeared | *boolean* | `true` |
|
||||
| close-on-popstate `v2.5.3` | Whether to close when popstate | *boolean* | `false` |
|
||||
| close-on-click-action | Whether to close when click action | *boolean* | `false` |
|
||||
| close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `true` |
|
||||
@@ -153,10 +154,10 @@ export default {
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| select | Triggered when click option | item, index |
|
||||
| select | Triggered when click option | *action: Action, index: number* |
|
||||
| cancel | Triggered when cancel click | - |
|
||||
| click-overlay | Triggered when click overlay | - |
|
||||
| open | Triggered when open ActionSheet | - |
|
||||
| opened | Triggered when opened ActionSheet | - |
|
||||
| close | Triggered when close ActionSheet | - |
|
||||
| opened | Triggered when opened ActionSheet | - |
|
||||
| closed | Triggered when closed ActionSheet | - |
|
||||
| click-overlay | Triggered when click overlay | - |
|
||||
|
||||
@@ -141,15 +141,16 @@ export default {
|
||||
| title | 顶部标题 | *string* | - |
|
||||
| cancel-text | 取消按钮文字 | *string* | - |
|
||||
| description `v2.2.8` | 选项上方的描述信息 | *string* | - |
|
||||
| close-icon `v2.2.13` | 关闭 [图标名称](#/zh-CN/icon) 或图片链接 | *string* | `cross` |
|
||||
| close-icon `v2.2.13` | 关闭[图标名称](#/zh-CN/icon)或图片链接 | *string* | `cross` |
|
||||
| duration `v2.0.3` | 动画时长，单位秒 | *number \| string* | `0.3` |
|
||||
| round `v2.0.9` | 是否显示圆角 | *boolean* | `true` |
|
||||
| overlay | 是否显示遮罩层 | *boolean* | `true` |
|
||||
| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` |
|
||||
| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` |
|
||||
| close-on-popstate `v2.5.3` | 是否在页面回退时自动关闭 | *boolean* | `false` |
|
||||
| close-on-click-action | 是否在点击选项后关闭 | *boolean* | `false` |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
|
||||
| safe-area-inset-bottom | 是否开启 [底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` |
|
||||
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` |
|
||||
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - |
|
||||
|
||||
### Action 数据结构
|
||||
@@ -169,13 +170,13 @@ export default {
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| select | 选中选项时触发，禁用或加载状态下不会触发 | item: 选项对应的对象, index: 选择对应的索引 |
|
||||
| select | 选中选项时触发，禁用或加载状态下不会触发 | *action: Action, index: number* |
|
||||
| cancel | 取消按钮点击时触发 | - |
|
||||
| click-overlay | 点击遮罩层时触发 | - |
|
||||
| open | 打开菜单时触发 | - |
|
||||
| opened | 打开菜单且动画结束后触发 | - |
|
||||
| close | 关闭菜单时触发 | - |
|
||||
| opened | 打开菜单且动画结束后触发 | - |
|
||||
| closed | 关闭菜单且动画结束后触发 | - |
|
||||
| click-overlay | 点击遮罩层时触发 | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
|
||||
@@ -78,5 +78,9 @@
|
||||
color: @action-sheet-close-icon-color;
|
||||
font-size: @action-sheet-close-icon-size;
|
||||
line-height: inherit;
|
||||
|
||||
&:active {
|
||||
color: @action-sheet-close-icon-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,6 +34,7 @@ export type ActionSheetProps = PopupMixinProps & {
|
||||
closeIcon: string;
|
||||
cancelText?: string;
|
||||
description?: string;
|
||||
closeOnPopstate?: boolean;
|
||||
closeOnClickAction?: boolean;
|
||||
safeAreaInsetBottom?: boolean;
|
||||
};
|
||||
@@ -143,6 +144,7 @@ function ActionSheet(
|
||||
lazyRender={props.lazyRender}
|
||||
lockScroll={props.lockScroll}
|
||||
getContainer={props.getContainer}
|
||||
closeOnPopstate={props.closeOnPopstate}
|
||||
closeOnClickOverlay={props.closeOnClickOverlay}
|
||||
safeAreaInsetBottom={props.safeAreaInsetBottom}
|
||||
{...inherit(ctx, true)}
|
||||
@@ -164,6 +166,7 @@ ActionSheet.props = {
|
||||
cancelText: String,
|
||||
description: String,
|
||||
getContainer: [String, Function],
|
||||
closeOnPopstate: Boolean,
|
||||
closeOnClickAction: Boolean,
|
||||
round: {
|
||||
type: Boolean,
|
||||
|
||||
@@ -73,6 +73,9 @@ export default {
|
||||
| show-delete | Whether to show delete button | *boolean* | `false` |
|
||||
| show-set-default | Whether to show default address switch | *boolean* | `false` |
|
||||
| show-search-result | Whether to show address search result | *boolean* | `false` |
|
||||
| show-area | Whether to show area cell | *boolean* | `true` |
|
||||
| show-detail | Whether to show detail field | *boolean* | `true` |
|
||||
| disable-area `v2.5.0` | Whether to disable area select | *boolean* | `false` |
|
||||
| save-button-text | Save button text | *string* | `Save` |
|
||||
| delete-button-text | Delete button text | *string* | `Delete` |
|
||||
| detail-rows | Detail input rows | *number \| string* | `1` |
|
||||
|
||||
@@ -73,6 +73,9 @@ export default {
|
||||
| show-delete | 是否显示删除按钮 | *boolean* | `false` |
|
||||
| show-set-default | 是否显示默认地址栏 | *boolean* | `false` |
|
||||
| show-search-result | 是否显示搜索结果 | *boolean* | `false` |
|
||||
| show-area | 是否显示地区 | *boolean* | `true` |
|
||||
| show-detail | 是否显示详细地址 | *boolean* | `true` |
|
||||
| disable-area `v2.5.0` | 是否禁用地区选择 | *boolean* | `false` |
|
||||
| save-button-text | 保存按钮文字 | *string* | `保存` |
|
||||
| delete-button-text | 删除按钮文字 | *string* | `删除` |
|
||||
| detail-rows | 详细地址输入框行数 | *number \| string* | `1` |
|
||||
@@ -104,7 +107,7 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
|
||||
@@ -52,6 +52,7 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
disableArea: Boolean,
|
||||
detailRows: {
|
||||
type: [Number, String],
|
||||
default: 1,
|
||||
@@ -250,7 +251,7 @@ export default createComponent({
|
||||
},
|
||||
|
||||
render() {
|
||||
const { data, errorInfo, searchResult } = this;
|
||||
const { data, errorInfo, searchResult, disableArea } = this;
|
||||
const onFocus = name => () => this.onFocus(name);
|
||||
|
||||
// hide bottom field when use search && detail get focused
|
||||
@@ -280,15 +281,15 @@ export default createComponent({
|
||||
<Field
|
||||
vShow={this.showArea}
|
||||
readonly
|
||||
clickable
|
||||
clickable={!disableArea}
|
||||
label={t('area')}
|
||||
placeholder={t('areaPlaceholder')}
|
||||
errorMessage={errorInfo.areaCode}
|
||||
rightIcon="arrow"
|
||||
rightIcon={!disableArea ? 'arrow' : null}
|
||||
value={this.areaText}
|
||||
onFocus={onFocus('areaCode')}
|
||||
onClick={() => {
|
||||
this.showAreaPopup = true;
|
||||
this.showAreaPopup = !disableArea;
|
||||
}}
|
||||
/>
|
||||
<Detail
|
||||
|
||||
@@ -7,19 +7,19 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>姓名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
@@ -30,7 +30,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,7 +38,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,19 +5,19 @@ exports[`create a AddressEdit 1`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>姓名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
@@ -28,7 +28,7 @@ exports[`create a AddressEdit 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,19 +44,19 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>姓名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
@@ -67,7 +67,7 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -75,7 +75,7 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,19 +97,19 @@ exports[`set-default 1`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>姓名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
@@ -120,7 +120,7 @@ exports[`set-default 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,7 +128,7 @@ exports[`set-default 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -150,19 +150,19 @@ exports[`show area component 1`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>姓名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
@@ -173,7 +173,7 @@ exports[`show area component 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -181,7 +181,7 @@ exports[`show area component 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -203,19 +203,19 @@ exports[`show area component 2`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>姓名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
@@ -226,7 +226,7 @@ exports[`show area component 2`] = `
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -234,7 +234,7 @@ exports[`show area component 2`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -256,19 +256,19 @@ exports[`valid area placeholder confirm 1`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>姓名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
@@ -279,7 +279,7 @@ exports[`valid area placeholder confirm 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+18
-14
@@ -10,7 +10,7 @@ import Radio from '../radio';
|
||||
|
||||
// Types
|
||||
import { CreateElement, RenderContext } from 'vue/types';
|
||||
import { DefaultSlots } from '../utils/types';
|
||||
import { DefaultSlots, ScopedSlot } from '../utils/types';
|
||||
|
||||
export type AddressItemData = {
|
||||
id: string | number;
|
||||
@@ -27,6 +27,10 @@ export type AddressItemProps = {
|
||||
defaultTagText?: string;
|
||||
};
|
||||
|
||||
export type AddressItemSlots = DefaultSlots & {
|
||||
bottom?: ScopedSlot;
|
||||
};
|
||||
|
||||
export type AddressItemEvents = {
|
||||
onEdit(): void;
|
||||
onClick(): void;
|
||||
@@ -38,7 +42,7 @@ const [createComponent, bem] = createNamespace('address-item');
|
||||
function AddressItem(
|
||||
h: CreateElement,
|
||||
props: AddressItemProps,
|
||||
slots: DefaultSlots,
|
||||
slots: AddressItemSlots,
|
||||
ctx: RenderContext<AddressItemProps>
|
||||
) {
|
||||
const { disabled, switchable } = props;
|
||||
@@ -95,18 +99,18 @@ function AddressItem(
|
||||
}
|
||||
|
||||
return (
|
||||
<Cell
|
||||
class={bem({ disabled })}
|
||||
border={false}
|
||||
valueClass={bem('value')}
|
||||
clickable={switchable && !disabled}
|
||||
scopedSlots={{
|
||||
default: genContent,
|
||||
'right-icon': genRightIcon,
|
||||
}}
|
||||
onClick={onClick}
|
||||
{...inherit(ctx)}
|
||||
/>
|
||||
<div class={bem({ disabled })} onClick={onClick}>
|
||||
<Cell
|
||||
border={false}
|
||||
valueClass={bem('value')}
|
||||
scopedSlots={{
|
||||
default: genContent,
|
||||
'right-icon': genRightIcon,
|
||||
}}
|
||||
{...inherit(ctx)}
|
||||
/>
|
||||
{slots.bottom?.({ ...props.data, disabled })}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -104,7 +104,8 @@ export default {
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| default | Custom content after list |
|
||||
| top | Custom content before list |
|
||||
| Name | Description | SlotProps |
|
||||
|------|------|------|
|
||||
| default | Custom content after list | - |
|
||||
| top | Custom content before list | - |
|
||||
| item-bottom `v2.5.0` | Custom content after list item | item |
|
||||
|
||||
@@ -104,7 +104,8 @@ export default {
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 在列表下方插入内容 |
|
||||
| top | 在顶部插入内容 |
|
||||
| 名称 | 说明 | SlotProps |
|
||||
|------|------|------|
|
||||
| default | 在列表下方插入内容 | - |
|
||||
| top | 在顶部插入内容 | - |
|
||||
| item-bottom `v2.5.0` | 在列表项底部插入内容 | 列表项的值 |
|
||||
|
||||
@@ -31,6 +31,7 @@
|
||||
|
||||
.van-address-item {
|
||||
padding: @address-list-item-padding;
|
||||
background-color: @white;
|
||||
border-radius: @border-radius-lg;
|
||||
|
||||
&:not(:last-child) {
|
||||
@@ -79,6 +80,10 @@
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.van-cell {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.van-radio__label {
|
||||
margin-left: @padding-sm;
|
||||
}
|
||||
|
||||
@@ -23,6 +23,7 @@ export type AddressListProps = {
|
||||
|
||||
export type AddressListSlots = DefaultSlots & {
|
||||
top?: ScopedSlot;
|
||||
'item-bottom'?: ScopedSlot;
|
||||
};
|
||||
|
||||
const [createComponent, bem, t] = createNamespace('address-list');
|
||||
@@ -45,6 +46,9 @@ function AddressList(
|
||||
disabled={disabled}
|
||||
switchable={props.switchable}
|
||||
defaultTagText={props.defaultTagText}
|
||||
scopedSlots={{
|
||||
bottom: slots['item-bottom'],
|
||||
}}
|
||||
onSelect={() => {
|
||||
emit(ctx, disabled ? 'select-disabled' : 'select', item, index);
|
||||
|
||||
|
||||
@@ -5,34 +5,40 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-address-list">
|
||||
<div role="radiogroup" class="van-radio-group">
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-address-item">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 18px;"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三 13000000000<span class="van-tag van-tag--round van-tag--danger van-address-item__tag">默认</span>
|
||||
<div class="van-address-item">
|
||||
<div class="van-cell van-cell--borderless">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 18px;"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三 13000000000<span class="van-tag van-tag--round van-tag--danger van-address-item__tag">默认</span>
|
||||
</div>
|
||||
<div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
|
||||
</div>
|
||||
<div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
|
||||
</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-address-item">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round" style="font-size: 18px;"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">李四 1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span>
|
||||
</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
<div class="van-address-item">
|
||||
<div class="van-cell van-cell--borderless">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round" style="font-size: 18px;"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">李四 1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span>
|
||||
</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-list__disabled-text">以下地址超出配送范围</div>
|
||||
<div class="van-cell van-cell--borderless van-address-item van-address-item--disabled">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div class="van-address-item__name">王五 1320000000</div>
|
||||
<div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
<div class="van-address-item van-address-item--disabled">
|
||||
<div class="van-cell van-cell--borderless">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div class="van-address-item__name">王五 1320000000</div>
|
||||
<div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
|
||||
</div>
|
||||
|
||||
@@ -3,19 +3,23 @@
|
||||
exports[`unswitchable 1`] = `
|
||||
<div class="van-address-list">
|
||||
<div role="radiogroup" class="van-radio-group">
|
||||
<div class="van-cell van-cell--borderless van-address-item">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div class="van-address-item__name">张三 13000000000</div>
|
||||
<div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
<div class="van-address-item">
|
||||
<div class="van-cell van-cell--borderless">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div class="van-address-item__name">张三 13000000000</div>
|
||||
<div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--borderless van-address-item">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div class="van-address-item__name">李四 1310000000</div>
|
||||
<div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
<div class="van-address-item">
|
||||
<div class="van-cell van-cell--borderless">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div class="van-address-item__name">李四 1310000000</div>
|
||||
<div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
|
||||
|
||||
@@ -79,6 +79,14 @@ Set `columns-num` with 2, you'll have a 2 level picker.
|
||||
| cancel | triggers when clicking the cancel button | - |
|
||||
| change | Triggered when current option changed | Picker instance, current values，column index |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| title `v2.5.3` | Custom title |
|
||||
| columns-top `v2.5.3` | Custom content above columns |
|
||||
| columns-bottom `v2.5.3` | Custom content below columns |
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Area instance and call instance methods
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
省市区三级联动选择，通常与 [弹出层](#/zh-CN/popup) 组件配合使用
|
||||
省市区三级联动选择，通常与[弹出层](#/zh-CN/popup)组件配合使用
|
||||
|
||||
### 引入
|
||||
|
||||
@@ -78,9 +78,17 @@ Vue.use(Area);
|
||||
| cancel | 点击取消按钮时 | - |
|
||||
| change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| title `v2.5.3` | 自定义标题内容 |
|
||||
| columns-top `v2.5.3` | 自定义选项上方内容 |
|
||||
| columns-bottom `v2.5.3` | 自定义选项下方内容 |
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 Area 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Area 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
|
||||
@@ -1880,10 +1880,11 @@ export default {
|
||||
370113: '长清区',
|
||||
370114: '章丘区',
|
||||
370115: '济阳区',
|
||||
370116: '莱芜区',
|
||||
370117: '钢城区',
|
||||
370124: '平阴县',
|
||||
370126: '商河县',
|
||||
370190: '高新区',
|
||||
370191: '莱芜区',
|
||||
370202: '市南区',
|
||||
370203: '市北区',
|
||||
370211: '黄岛区',
|
||||
|
||||
@@ -10,6 +10,21 @@ function isOverseaCode(code) {
|
||||
return code[0] === '9';
|
||||
}
|
||||
|
||||
function pickSlots(instance, keys) {
|
||||
const { $slots, $scopedSlots } = instance;
|
||||
const scopedSlots = {};
|
||||
|
||||
keys.forEach(key => {
|
||||
if ($scopedSlots[key]) {
|
||||
scopedSlots[key] = $scopedSlots[key];
|
||||
} else if ($slots[key]) {
|
||||
scopedSlots[key] = () => $slots[key];
|
||||
}
|
||||
});
|
||||
|
||||
return scopedSlots;
|
||||
}
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
...pickerProps,
|
||||
@@ -290,6 +305,11 @@ export default createComponent({
|
||||
visibleItemCount={this.visibleItemCount}
|
||||
cancelButtonText={this.cancelButtonText}
|
||||
confirmButtonText={this.confirmButtonText}
|
||||
scopedSlots={pickSlots(this, [
|
||||
'title',
|
||||
'columns-top',
|
||||
'columns-bottom',
|
||||
])}
|
||||
{...{ on }}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -114,6 +114,26 @@ exports[`columns-num prop 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`columns-top、columns-bottom slot 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->Top<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>Bottom
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`reset method 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
@@ -173,6 +193,27 @@ exports[`reset method 2`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`title slot 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom Title<button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`watch areaList & code 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
|
||||
@@ -128,3 +128,26 @@ test('columns-num prop', async () => {
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('title slot', async () => {
|
||||
const wrapper = mount(Area, {
|
||||
scopedSlots: {
|
||||
title: () => 'Custom Title',
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('columns-top、columns-bottom slot', async () => {
|
||||
const wrapper = mount(Area, {
|
||||
slots: {
|
||||
'columns-top': 'Top',
|
||||
'columns-bottom': 'Bottom',
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -106,6 +106,7 @@ Vue.use(Button);
|
||||
| text | Text | *string* | - |
|
||||
| color `v2.1.8` | Color, support linear-gradient | *string* | - |
|
||||
| icon | Left Icon | *string* | - |
|
||||
| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
|
||||
| tag | HTML Tag | *string* | `button` |
|
||||
| native-type | Native Type Attribute | *string* | `''` |
|
||||
| plain | Whether to be plain button | *boolean* | `false` |
|
||||
@@ -125,5 +126,5 @@ Vue.use(Button);
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when click button and not disabled or loading | event: Event |
|
||||
| touchstart | Triggered when touch start | event: TouchEvent |
|
||||
| click | Triggered when click button and not disabled or loading | *event: Event* |
|
||||
| touchstart | Triggered when touch start | *event: TouchEvent* |
|
||||
|
||||
@@ -127,9 +127,10 @@ Vue.use(Button);
|
||||
| size | 尺寸，可选值为 `large` `small` `mini` | *string* | `normal` |
|
||||
| text | 按钮文字 | *string* | - |
|
||||
| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | *string* | - |
|
||||
| icon | 左侧 [图标名称](#/zh-CN/icon) 或图片链接 | *string* | - |
|
||||
| tag | HTML 标签 | *string* | `button` |
|
||||
| native-type | 原生 button 标签 type 属性 | *string* | - |
|
||||
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
|
||||
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
|
||||
| tag | 根节点的 HTML 标签 | *string* | `button` |
|
||||
| native-type | 原生 button 标签的 type 属性 | *string* | - |
|
||||
| block | 是否为块级元素 | *boolean* | `false` |
|
||||
| plain | 是否为朴素按钮 | *boolean* | `false` |
|
||||
| square | 是否为方形按钮 | *boolean* | `false` |
|
||||
@@ -148,5 +149,5 @@ Vue.use(Button);
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击按钮，且按钮状态不为加载或禁用时触发 | event: Event |
|
||||
| touchstart | 开始触摸按钮时触发 | event: TouchEvent |
|
||||
| click | 点击按钮，且按钮状态不为加载或禁用时触发 | *event: Event* |
|
||||
| touchstart | 开始触摸按钮时触发 | *event: TouchEvent* |
|
||||
|
||||
@@ -31,6 +31,7 @@ export type ButtonProps = RouteProps & {
|
||||
hairline?: boolean;
|
||||
disabled?: boolean;
|
||||
nativeType?: string;
|
||||
iconPrefix?: string;
|
||||
loadingSize: string;
|
||||
loadingType?: LoadingType;
|
||||
loadingText?: string;
|
||||
@@ -119,7 +120,9 @@ function Button(
|
||||
/>
|
||||
);
|
||||
} else if (icon) {
|
||||
content.push(<Icon name={icon} class={bem('icon')} />);
|
||||
content.push(
|
||||
<Icon name={icon} class={bem('icon')} classPrefix={props.iconPrefix} />
|
||||
);
|
||||
}
|
||||
|
||||
let text;
|
||||
|
||||
@@ -249,8 +249,12 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| select | Triggered when select date | value: Date \| Date[] |
|
||||
| confirm | Triggered after date selection is complete，if `show-confirm` is` true`, it is triggered after clicking the confirm button | value: Date \| Date[] |
|
||||
| select | Triggered when select date | *value: Date \| Date[]* |
|
||||
| confirm | Triggered after date selection is complete，if `show-confirm` is` true`, it is triggered after clicking the confirm button | *value: Date \| Date[]* |
|
||||
| open `v2.5.2` | Triggered when open Popup | - |
|
||||
| close `v2.5.2` | Triggered when close Popup | - |
|
||||
| opened `v2.5.2` | Triggered when opened Popup | - |
|
||||
| closed `v2.5.2` | Triggered when closed Popup | - |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@@ -227,7 +227,7 @@ export default {
|
||||
| show-confirm | 是否展示确认按钮 | *boolean* | `true` |
|
||||
| close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | *boolean* | `false` |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
|
||||
| safe-area-inset-bottom | 是否开启 [底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` |
|
||||
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` |
|
||||
| confirm-text | 确认按钮的文字 | *string* | `确定` |
|
||||
| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` |
|
||||
| max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | *number \| string* | - |
|
||||
@@ -251,8 +251,12 @@ export default {
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| select | 点击任意日期时触发 | value: Date \| Date[] |
|
||||
| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | value: Date \| Date[] |
|
||||
| select | 点击任意日期时触发 | *value: Date \| Date[]* |
|
||||
| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | *value: Date \| Date[]* |
|
||||
| open `v2.5.2` | 打开弹出层时触发 | - |
|
||||
| close `v2.5.2` | 关闭弹出层时触发 | - |
|
||||
| opened `v2.5.2` | 打开弹出层且动画结束后触发 | - |
|
||||
| closed `v2.5.2` | 关闭弹出层且动画结束后触发 | - |
|
||||
|
||||
### Slots
|
||||
|
||||
@@ -263,7 +267,7 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 Calendar 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
|
||||
@@ -170,7 +170,7 @@ export default createComponent({
|
||||
genDays() {
|
||||
if (this.visible) {
|
||||
return (
|
||||
<div ref="days" class={bem('days')}>
|
||||
<div ref="days" role="grid" class={bem('days')}>
|
||||
{this.genMark()}
|
||||
{this.days.map(this.genDay)}
|
||||
</div>
|
||||
@@ -183,9 +183,10 @@ export default createComponent({
|
||||
genDay(item, index) {
|
||||
const { type, topInfo, bottomInfo } = item;
|
||||
const style = this.getDayStyle(type, index);
|
||||
const disabled = type === 'disabled';
|
||||
|
||||
const onClick = () => {
|
||||
if (type !== 'disabled') {
|
||||
if (!disabled) {
|
||||
this.$emit('click', item);
|
||||
}
|
||||
};
|
||||
@@ -198,7 +199,13 @@ export default createComponent({
|
||||
|
||||
if (type === 'selected') {
|
||||
return (
|
||||
<div style={style} class={bem('day')} onClick={onClick}>
|
||||
<div
|
||||
role="gridcell"
|
||||
style={style}
|
||||
class={[bem('day'), item.className]}
|
||||
tabindex={disabled ? null : -1}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div class={bem('selected-day')} style={{ background: this.color }}>
|
||||
{TopInfo}
|
||||
{item.text}
|
||||
@@ -210,8 +217,10 @@ export default createComponent({
|
||||
|
||||
return (
|
||||
<div
|
||||
role="gridcell"
|
||||
style={style}
|
||||
class={[bem('day', [type]), item.className]}
|
||||
class={[bem('day', type), item.className]}
|
||||
tabindex={disabled ? null : -1}
|
||||
onClick={onClick}
|
||||
>
|
||||
{TopInfo}
|
||||
|
||||
+25
-9
@@ -133,6 +133,7 @@ export default createComponent({
|
||||
|
||||
defaultDate(val) {
|
||||
this.currentDate = val;
|
||||
this.scrollIntoView();
|
||||
},
|
||||
},
|
||||
|
||||
@@ -146,11 +147,16 @@ export default createComponent({
|
||||
// @exposed-api
|
||||
reset() {
|
||||
this.currentDate = this.getInitialDate();
|
||||
this.scrollIntoView();
|
||||
},
|
||||
|
||||
initRect() {
|
||||
this.$nextTick(() => {
|
||||
this.bodyHeight = this.$refs.body.getBoundingClientRect().height;
|
||||
// add Math.floor to avoid decimal height issues
|
||||
// https://github.com/youzan/vant/issues/5640
|
||||
this.bodyHeight = Math.floor(
|
||||
this.$refs.body.getBoundingClientRect().height
|
||||
);
|
||||
this.onScroll();
|
||||
});
|
||||
},
|
||||
@@ -160,9 +166,10 @@ export default createComponent({
|
||||
this.$nextTick(() => {
|
||||
const { currentDate } = this;
|
||||
const targetDate = this.range ? currentDate[0] : currentDate;
|
||||
const displayed = this.value || !this.poppable;
|
||||
|
||||
/* istanbul ignore if */
|
||||
if (!targetDate) {
|
||||
if (!targetDate || !displayed) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -204,13 +211,13 @@ export default createComponent({
|
||||
}
|
||||
|
||||
let height = 0;
|
||||
let firstMonth;
|
||||
let currentMonth;
|
||||
|
||||
for (let i = 0; i < months.length; i++) {
|
||||
const visible = height <= bottom && height + heights[i] >= top;
|
||||
|
||||
if (visible && !firstMonth) {
|
||||
firstMonth = months[i];
|
||||
if (visible && !currentMonth) {
|
||||
currentMonth = months[i];
|
||||
}
|
||||
|
||||
months[i].visible = visible;
|
||||
@@ -218,8 +225,8 @@ export default createComponent({
|
||||
}
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (firstMonth) {
|
||||
this.monthTitle = firstMonth.title;
|
||||
if (currentMonth) {
|
||||
this.monthTitle = currentMonth.title;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -278,9 +285,11 @@ export default createComponent({
|
||||
},
|
||||
|
||||
onConfirm() {
|
||||
if (this.checkRange()) {
|
||||
this.$emit('confirm', this.currentDate);
|
||||
if (this.range && !this.checkRange()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('confirm', this.currentDate);
|
||||
},
|
||||
|
||||
genMonth(date, index) {
|
||||
@@ -323,6 +332,7 @@ export default createComponent({
|
||||
color={this.color}
|
||||
class={bem('confirm')}
|
||||
disabled={this.buttonDisabled}
|
||||
nativeType="text"
|
||||
onClick={this.onConfirm}
|
||||
>
|
||||
{text || t('confirm')}
|
||||
@@ -364,6 +374,8 @@ export default createComponent({
|
||||
|
||||
render() {
|
||||
if (this.poppable) {
|
||||
const createListener = name => () => this.$emit(name);
|
||||
|
||||
return (
|
||||
<Popup
|
||||
round
|
||||
@@ -376,6 +388,10 @@ export default createComponent({
|
||||
closeOnPopstate={this.closeOnPopstate}
|
||||
closeOnClickOverlay={this.closeOnClickOverlay}
|
||||
onInput={this.togglePopup}
|
||||
onOpen={createListener('open')}
|
||||
onOpened={createListener('opened')}
|
||||
onClose={createListener('close')}
|
||||
onClosed={createListener('closed')}
|
||||
>
|
||||
{this.genCalendar()}
|
||||
</Popup>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
}
|
||||
|
||||
.van-popup__close-icon {
|
||||
top: 13px;
|
||||
top: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -57,113 +57,113 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 320px;">
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 0%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day">
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 0%;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day">21</div>
|
||||
<div class="van-calendar__day van-calendar__day">22</div>
|
||||
<div class="van-calendar__day van-calendar__day">23</div>
|
||||
<div class="van-calendar__day van-calendar__day">24</div>
|
||||
<div class="van-calendar__day van-calendar__day">25</div>
|
||||
<div class="van-calendar__day van-calendar__day">26</div>
|
||||
<div class="van-calendar__day van-calendar__day">27</div>
|
||||
<div class="van-calendar__day van-calendar__day">28</div>
|
||||
<div class="van-calendar__day van-calendar__day">29</div>
|
||||
<div class="van-calendar__day van-calendar__day">30</div>
|
||||
<div class="van-calendar__day van-calendar__day">31</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">21</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">22</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">23</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">24</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">25</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">26</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">27</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">28</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">29</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">30</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">31</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__month" style="padding-bottom: 320px;">
|
||||
<div class="van-calendar__month-title">2012年2月</div>
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">2</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="margin-left: 42.857142857142854%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day">2</div>
|
||||
<div class="van-calendar__day van-calendar__day">3</div>
|
||||
<div class="van-calendar__day van-calendar__day">4</div>
|
||||
<div class="van-calendar__day van-calendar__day">5</div>
|
||||
<div class="van-calendar__day van-calendar__day">6</div>
|
||||
<div class="van-calendar__day van-calendar__day">7</div>
|
||||
<div class="van-calendar__day van-calendar__day">8</div>
|
||||
<div class="van-calendar__day van-calendar__day">9</div>
|
||||
<div class="van-calendar__day van-calendar__day">10</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day">21</div>
|
||||
<div class="van-calendar__day van-calendar__day">22</div>
|
||||
<div class="van-calendar__day van-calendar__day">23</div>
|
||||
<div class="van-calendar__day van-calendar__day">24</div>
|
||||
<div class="van-calendar__day van-calendar__day">25</div>
|
||||
<div class="van-calendar__day van-calendar__day">26</div>
|
||||
<div class="van-calendar__day van-calendar__day">27</div>
|
||||
<div class="van-calendar__day van-calendar__day">28</div>
|
||||
<div class="van-calendar__day van-calendar__day">29</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="margin-left: 42.857142857142854%;">1</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">2</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">3</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">4</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">5</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">6</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">7</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">8</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">10</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">21</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">22</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">23</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">24</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">25</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">26</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">27</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">28</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">29</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__month" style="padding-bottom: 320px;">
|
||||
<div class="van-calendar__month-title">2012年3月</div>
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">3</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="margin-left: 57.142857142857146%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day">2</div>
|
||||
<div class="van-calendar__day van-calendar__day">3</div>
|
||||
<div class="van-calendar__day van-calendar__day">4</div>
|
||||
<div class="van-calendar__day van-calendar__day">5</div>
|
||||
<div class="van-calendar__day van-calendar__day">6</div>
|
||||
<div class="van-calendar__day van-calendar__day">7</div>
|
||||
<div class="van-calendar__day van-calendar__day">8</div>
|
||||
<div class="van-calendar__day van-calendar__day">9</div>
|
||||
<div class="van-calendar__day van-calendar__day">10</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="margin-left: 57.142857142857146%;">1</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">2</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">3</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">4</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">5</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">6</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">7</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">8</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">10</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,45 +9,45 @@ exports[`color prop when type is range 1`] = `
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 384px;">
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day van-calendar__day--start" style="background: blue;">10<div class="van-calendar__bottom-info">开始</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--start" style="background: blue;">10<div class="van-calendar__bottom-info">开始</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">11</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">12</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">13</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">14</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">15</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">16</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">17</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">18</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">19</div>
|
||||
<div class="van-calendar__day van-calendar__day--end" style="background: blue;">20<div class="van-calendar__bottom-info">结束</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--end" style="background: blue;">20<div class="van-calendar__bottom-info">结束</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="text" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -60,45 +60,45 @@ exports[`color prop when type is single 1`] = `
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 384px;">
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day">
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day" style="background: blue;">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="text" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -111,48 +111,48 @@ exports[`formatter prop 1`] = `
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 384px;">
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day">
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">
|
||||
<div class="van-calendar__top-info">Top Info</div>11
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">12<div class="van-calendar__bottom-info">Bottom Info</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">12<div class="van-calendar__bottom-info">Bottom Info</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">Text</div>
|
||||
<div class="van-calendar__day van-calendar__day test">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">Text</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day test">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="text" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -168,45 +168,45 @@ exports[`popup wrapper 2`] = `
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 384px;">
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day">
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="text" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
</div><i role="button" tabindex="0" class="van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-right">
|
||||
<!----></i>
|
||||
</div>
|
||||
@@ -221,45 +221,45 @@ exports[`row-height prop 1`] = `
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 300px;">
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%; height: 50px;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">9</div>
|
||||
<div class="van-calendar__day" style="height: 50px;">
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%; height: 50px;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">5</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">6</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">7</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">8</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">
|
||||
<div class="van-calendar__selected-day">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">11</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">12</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">13</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">14</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">15</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">16</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">17</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">18</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">19</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">31</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">20</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">21</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">22</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">23</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">24</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">25</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">26</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">27</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">28</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">29</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">30</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="text" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -272,41 +272,41 @@ exports[`title & footer slot 1`] = `
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 384px;">
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day">
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -450,3 +450,14 @@ test('max-range prop', async () => {
|
||||
|
||||
expect(wrapper.emitted('confirm')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('close event', () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
value: true,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.setProps({ value: false });
|
||||
expect(wrapper.emitted('close')).toBeTruthy();
|
||||
});
|
||||
|
||||
+2
-2
@@ -82,8 +82,8 @@ Use slot to custom content.
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when clicked | event: Event |
|
||||
| click-thumb | Triggered when thumb clicked | event: Event |
|
||||
| click | Triggered when clicked | *event: Event* |
|
||||
| click-thumb | Triggered when thumb clicked | *event: Event* |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@@ -84,8 +84,8 @@ Vue.use(Card);
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击时触发 | event: Event |
|
||||
| click-thumb | 点击自定义图片时触发 | event: Event |
|
||||
| click | 点击时触发 | *event: Event* |
|
||||
| click-thumb | 点击自定义图片时触发 | *event: Event* |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
+3
-2
@@ -114,11 +114,12 @@ Vue.use(CellGroup);
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| icon | Left Icon | *string* | - |
|
||||
| title | Title | *number \| string* | - |
|
||||
| value | Right text | *number \| string* | - |
|
||||
| label | Description below the title | *string* | - |
|
||||
| size | Size，can be set to `large` | *string* | - |
|
||||
| icon | Left Icon | *string* | - |
|
||||
| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
|
||||
| border | Whether to show inner border | *boolean* | `true` |
|
||||
| center | Whether to center content vertically | *boolean* | `true` |
|
||||
| url | Link URL | *string* | - |
|
||||
@@ -137,7 +138,7 @@ Vue.use(CellGroup);
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when click cell | event: Event |
|
||||
| click | Triggered when click cell | *event: Event* |
|
||||
|
||||
### CellGroup Slots
|
||||
|
||||
|
||||
@@ -125,11 +125,12 @@ Vue.use(CellGroup);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| icon | 左侧 [图标名称](#/zh-CN/icon) 或图片链接 | *string* | - |
|
||||
| title | 左侧标题 | *number \| string* | - |
|
||||
| value | 右侧内容 | *number \| string* | - |
|
||||
| label | 标题下方的描述信息 | *string* | - |
|
||||
| size | 单元格大小，可选值为 `large` | *string* | - |
|
||||
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
|
||||
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
|
||||
| url | 点击后跳转的链接地址 | *string* | - |
|
||||
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |
|
||||
| border | 是否显示内边框 | *boolean* | `true` |
|
||||
@@ -148,7 +149,7 @@ Vue.use(CellGroup);
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击单元格时触发 | event: Event |
|
||||
| click | 点击单元格时触发 | *event: Event* |
|
||||
|
||||
### CellGroup Slots
|
||||
|
||||
|
||||
+7
-1
@@ -78,7 +78,13 @@ function Cell(
|
||||
}
|
||||
|
||||
if (icon) {
|
||||
return <Icon class={bem('left-icon')} name={icon} />;
|
||||
return (
|
||||
<Icon
|
||||
class={bem('left-icon')}
|
||||
name={icon}
|
||||
classPrefix={props.iconPrefix}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ export type SharedCellProps = {
|
||||
isLink?: boolean;
|
||||
required?: boolean;
|
||||
clickable?: boolean;
|
||||
iconPrefix?: string;
|
||||
titleStyle?: any;
|
||||
titleClass?: any;
|
||||
valueClass?: any;
|
||||
@@ -23,6 +24,7 @@ export const cellProps = {
|
||||
isLink: Boolean,
|
||||
required: Boolean,
|
||||
clickable: Boolean,
|
||||
iconPrefix: String,
|
||||
titleStyle: null as any,
|
||||
titleClass: null as any,
|
||||
valueClass: null as any,
|
||||
|
||||
@@ -12,6 +12,11 @@ exports[`arrow direction 1`] = `
|
||||
<!----></i></div>
|
||||
`;
|
||||
|
||||
exports[`icon-prefix prop 1`] = `
|
||||
<div class="van-cell"><i class="my-icon my-icon-success van-cell__left-icon">
|
||||
<!----></i></div>
|
||||
`;
|
||||
|
||||
exports[`render slot 1`] = `
|
||||
<div class="van-cell">Custom Icon<div class="van-cell__title">Custom Title<div class="van-cell__label">Custom Label</div>
|
||||
</div>Custom Extra</div>
|
||||
|
||||
@@ -67,3 +67,14 @@ test('CellGroup title slot', () => {
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('icon-prefix prop', () => {
|
||||
const wrapper = mount(Cell, {
|
||||
propsData: {
|
||||
iconPrefix: 'my-icon',
|
||||
icon: 'success',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { FieldMixin } from '../mixins/field';
|
||||
import { ParentMixin } from '../mixins/relation';
|
||||
|
||||
const [createComponent, bem] = createNamespace('checkbox-group');
|
||||
|
||||
export default createComponent({
|
||||
mixins: [ParentMixin('vanCheckbox')],
|
||||
mixins: [ParentMixin('vanCheckbox'), FieldMixin],
|
||||
|
||||
props: {
|
||||
max: [Number, String],
|
||||
disabled: Boolean,
|
||||
direction: String,
|
||||
iconSize: [Number, String],
|
||||
checkedColor: String,
|
||||
value: {
|
||||
@@ -42,6 +44,6 @@ export default createComponent({
|
||||
},
|
||||
|
||||
render() {
|
||||
return <div class={bem()}>{this.slots()}</div>;
|
||||
return <div class={bem([this.direction])}>{this.slots()}</div>;
|
||||
},
|
||||
});
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-checkbox-group {
|
||||
&--horizontal {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
+23
-21
@@ -34,12 +34,6 @@ export default {
|
||||
<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
### Disabled Label Click
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
### Custom Shape
|
||||
|
||||
```html
|
||||
@@ -85,6 +79,12 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Disable Label Click
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
### Checkbox Group
|
||||
|
||||
When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
|
||||
@@ -137,7 +137,6 @@ export default {
|
||||
result: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
checkAll() {
|
||||
this.$refs.checkboxGroup.toggleAll(true);
|
||||
@@ -161,11 +160,7 @@ export default {
|
||||
:title="`Checkbox ${item}`"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
<van-checkbox
|
||||
:name="item"
|
||||
ref="checkboxes"
|
||||
slot="right-icon"
|
||||
/>
|
||||
<van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
@@ -173,6 +168,12 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['a', 'b']
|
||||
result: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggle(index) {
|
||||
this.$refs.checkboxes[index].toggle();
|
||||
@@ -187,9 +188,9 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| v-model (value) | Check status | *boolean* | `false` |
|
||||
| name | Checkbox name | *any* | - |
|
||||
| shape | Can be set to `square` | *string* | `round` |
|
||||
| v-model | Check status | *boolean* | `false` |
|
||||
| disabled | Disable checkbox | *boolean* | `false` |
|
||||
| label-disabled | Whether to disable label click | *boolean* | `false` |
|
||||
| label-position | Can be set to `left` | *string* | `right` |
|
||||
@@ -201,9 +202,10 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| v-model | Names of all checked checkboxes | *any[]* | - |
|
||||
| v-model (value) | Names of all checked checkboxes | *any[]* | - |
|
||||
| disabled | Whether to disable all checkboxes | *boolean* | `false` |
|
||||
| max | Maximum amount of checked options | *number \| string* | `0`(Unlimited) |
|
||||
| disabled | Disable all checkboxes | *boolean* | `false` |
|
||||
| direction `v2.5.0` | Direction, can be set to `horizontal` | *string* | `vertical` |
|
||||
| icon-size `v2.2.3` | Icon size of all checkboxes | *number \| string* | `20px` |
|
||||
| checked-color `v2.2.3` | Checked color of all checkboxes | *string* | `#1989fa` | - |
|
||||
|
||||
@@ -211,21 +213,21 @@ export default {
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|------|------|------|
|
||||
| change | Triggered when value changed | current value |
|
||||
| click | Triggered when click checkbox | event: Event |
|
||||
| change | Triggered when value changed | *checked: boolean* |
|
||||
| click | Triggered when click checkbox | *event: Event* |
|
||||
|
||||
### CheckboxGroup Events
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|------|------|------|
|
||||
| change | Triggered when value changed | current value |
|
||||
| change | Triggered when value changed | *names: any[]* |
|
||||
|
||||
### Checkbox Slots
|
||||
|
||||
| Name | Description | SlotProps |
|
||||
|------|------|------|
|
||||
| default | Custom label | - |
|
||||
| icon | Custom icon | checked: whether to be checked |
|
||||
| icon | Custom icon | *checked: boolean* |
|
||||
|
||||
### CheckboxGroup Methods
|
||||
|
||||
@@ -233,7 +235,7 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
|------|------|------|------|
|
||||
| toggleAll | Toggle check status of all checkboxes | checked?: boolean | - |
|
||||
| toggleAll | Toggle check status of all checkboxes | *checked?: boolean* | - |
|
||||
|
||||
### Checkbox Methods
|
||||
|
||||
@@ -241,4 +243,4 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Checkbox instance and call insta
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
|------|------|------|------|
|
||||
| toggle | Toggle check status | checked?: boolean | - |
|
||||
| toggle | Toggle check status | *checked?: boolean* | - |
|
||||
|
||||
@@ -38,14 +38,6 @@ export default {
|
||||
<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
### 禁用文本点击
|
||||
|
||||
设置`label-disabled`属性后，点击复选框图标以外的内容不会触发切换
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" icon-disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
### 自定义形状
|
||||
|
||||
将`shape`属性设置为`square`，复选框的形状会变成方形
|
||||
@@ -95,9 +87,17 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
### 禁用文本点击
|
||||
|
||||
设置`label-disabled`属性后，点击图标以外的内容不会触发复选框切换
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
### 复选框组
|
||||
|
||||
复选框可以与复选框组一起使用，选中值是一个数组，通过`v-model`绑定在`CheckboxGroup`上，数组中的值为选中的复选框的`name`
|
||||
复选框可以与复选框组一起使用，复选框组通过`v-model`数组绑定复选框的勾选状态
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
@@ -117,9 +117,9 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 设置最大可选数
|
||||
### 限制最大可选数
|
||||
|
||||
通过`max`属性可以限制最大可选数
|
||||
通过`max`属性可以限制复选框组的最大可选数
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result" :max="2">
|
||||
@@ -151,7 +151,6 @@ export default {
|
||||
result: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
checkAll() {
|
||||
this.$refs.checkboxGroup.toggleAll(true);
|
||||
@@ -177,11 +176,7 @@ export default {
|
||||
:title="`复选框 ${item}`"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
<van-checkbox
|
||||
:name="item"
|
||||
ref="checkboxes"
|
||||
slot="right-icon"
|
||||
/>
|
||||
<van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
@@ -189,6 +184,12 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['a', 'b']
|
||||
result: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggle(index) {
|
||||
this.$refs.checkboxes[index].toggle();
|
||||
@@ -203,9 +204,9 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| v-model (value) | 是否为选中状态 | *boolean* | `false` |
|
||||
| name | 标识符 | *any* | - |
|
||||
| shape | 形状，可选值为 `square` | *string* | `round` |
|
||||
| v-model | 是否为选中状态 | *boolean* | `false` |
|
||||
| disabled | 是否禁用复选框 | *boolean* | `false` |
|
||||
| label-disabled | 是否禁用复选框文本点击 | *boolean* | `false` |
|
||||
| label-position | 文本位置，可选值为 `left` | *string* | `right` |
|
||||
@@ -217,9 +218,10 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| v-model | 所有选中项的标识符 | *any[]* | - |
|
||||
| v-model (value) | 所有选中项的标识符 | *any[]* | - |
|
||||
| disabled | 是否禁用所有复选框 | *boolean* | `false` |
|
||||
| max | 最大可选数，0 为无限制 | *number \| string* | `0` |
|
||||
| max | 最大可选数，`0`为无限制 | *number \| string* | `0` |
|
||||
| direction `v2.5.0` | 排列方向，可选值为`horizontal` | *string* | `vertical` |
|
||||
| icon-size `v2.2.3` | 所有复选框的图标大小，默认单位为`px` | *number \| string* | `20px` |
|
||||
| checked-color `v2.2.3` | 所有复选框的选中状态颜色 | *string* | `#1989fa` |
|
||||
|
||||
@@ -227,34 +229,34 @@ export default {
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
| click | 点击复选框时触发 | event: Event |
|
||||
| change | 当绑定值变化时触发的事件 | *checked: boolean* |
|
||||
| click | 点击复选框时触发 | *event: Event* |
|
||||
|
||||
### CheckboxGroup Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
| change | 当绑定值变化时触发的事件 | *names: any[]* |
|
||||
|
||||
### Checkbox Slots
|
||||
|
||||
| 名称 | 说明 | SlotProps |
|
||||
|------|------|------|
|
||||
| default | 自定义文本 | - |
|
||||
| icon | 自定义图标 | checked: 是否为选中状态 |
|
||||
| icon | 自定义图标 | *checked: boolean* |
|
||||
|
||||
### CheckboxGroup 方法
|
||||
|
||||
通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
| toggleAll | 切换所有复选框，传`true`为选中，`false`为取消选中，不传参为取反 | checked?: boolean | - |
|
||||
| toggleAll | 切换所有复选框，传`true`为选中，`false`为取消选中，不传参为取反 | *checked?: boolean* | - |
|
||||
|
||||
### Checkbox 方法
|
||||
|
||||
通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
| toggle | 切换选中状态，传`true`为选中，`false`为取消选中，不传参为取反 | checked?: boolean | - |
|
||||
| toggle | 切换选中状态，传`true`为选中，`false`为取消选中，不传参为取反 | *checked?: boolean* | - |
|
||||
|
||||
+26
-13
@@ -13,12 +13,6 @@
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabledLabelClick')">
|
||||
<van-checkbox v-model="checkboxLabel" label-disabled>
|
||||
{{ $t('checkbox') }}
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customShape')">
|
||||
<van-checkbox v-model="checkboxShape" shape="square">
|
||||
{{ $t('customColor') }}
|
||||
@@ -46,11 +40,23 @@
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disableLabel')">
|
||||
<van-checkbox v-model="checkboxLabel" label-disabled>
|
||||
{{ $t('checkbox') }}
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
|
||||
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
|
||||
<van-checkbox name="c">{{ $t('checkbox') }} c</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('horizontal')">
|
||||
<van-checkbox-group v-model="horizontalResult" direction="horizontal">
|
||||
<van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
|
||||
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</demo-block>
|
||||
|
||||
@@ -86,7 +92,7 @@
|
||||
v-for="(item, index) in list"
|
||||
clickable
|
||||
:key="index"
|
||||
:title="$t('checkbox') + item"
|
||||
:title="`${$t('checkbox')} ${item}`"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
<template #right-icon>
|
||||
@@ -109,12 +115,13 @@ export default {
|
||||
customColor: '自定义颜色',
|
||||
customShape: '自定义形状',
|
||||
title3: '复选框组',
|
||||
title4: '设置最大可选数',
|
||||
title4: '限制最大可选数',
|
||||
title5: '搭配单元格组件使用',
|
||||
toggleAll: '全选与反选',
|
||||
checkAll: '全选',
|
||||
inverse: '反选',
|
||||
disabledLabelClick: '禁用文本点击',
|
||||
horizontal: '水平排列',
|
||||
disableLabel: '禁用文本点击',
|
||||
},
|
||||
'en-US': {
|
||||
checkbox: 'Checkbox',
|
||||
@@ -128,7 +135,8 @@ export default {
|
||||
toggleAll: 'Toggle All',
|
||||
checkAll: 'Check All',
|
||||
inverse: 'Inverse',
|
||||
disabledLabelClick: 'Disable the click event of label',
|
||||
horizontal: 'Horizontal',
|
||||
disableLabel: 'Disable label click',
|
||||
},
|
||||
},
|
||||
|
||||
@@ -140,11 +148,12 @@ export default {
|
||||
checkboxShape: true,
|
||||
checkboxLabel: true,
|
||||
checboxIcon: true,
|
||||
list: ['a', 'b', 'c'],
|
||||
list: ['a', 'b'],
|
||||
result: ['a', 'b'],
|
||||
result2: [],
|
||||
result3: [],
|
||||
checkAllResult: [],
|
||||
horizontalResult: [],
|
||||
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
|
||||
};
|
||||
@@ -173,7 +182,7 @@ export default {
|
||||
background: @white;
|
||||
|
||||
.van-checkbox {
|
||||
margin: 10px 0 0 20px;
|
||||
margin: 0 0 8px 20px;
|
||||
}
|
||||
|
||||
.van-cell {
|
||||
@@ -193,5 +202,9 @@ export default {
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title {
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -15,6 +15,10 @@
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&--horizontal {
|
||||
margin-right: @padding-sm;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex: none;
|
||||
height: 1em;
|
||||
|
||||
@@ -22,14 +22,6 @@ exports[`renders demo correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-checkbox--label-disabled">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-checkbox__label">
|
||||
复选框
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked"><i class="van-icon van-icon-success">
|
||||
@@ -61,6 +53,14 @@ exports[`renders demo correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-checkbox--label-disabled">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-checkbox__label">
|
||||
复选框
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-checkbox-group">
|
||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
|
||||
@@ -71,9 +71,17 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-checkbox__label">复选框 b</span>
|
||||
</div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-checkbox-group van-checkbox-group--horizontal">
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-checkbox__label">复选框 c</span>
|
||||
<!----></i></div><span class="van-checkbox__label">复选框 a</span>
|
||||
</div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-checkbox__label">复选框 b</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -118,21 +126,14 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-checkbox-group">
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>复选框a</span></div>
|
||||
<div class="van-cell__title"><span>复选框 a</span></div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>复选框b</span></div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>复选框c</span></div>
|
||||
<div class="van-cell__title"><span>复选框 b</span></div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div>
|
||||
|
||||
+2
-2
@@ -112,10 +112,10 @@ Setting `type` to `flex` to enable flex layout
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when click row | event: Event |
|
||||
| click | Triggered when click row | *event: Event* |
|
||||
|
||||
### Col Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when click col | event: Event |
|
||||
| click | Triggered when click col | *event: Event* |
|
||||
|
||||
@@ -115,10 +115,10 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击时触发 | event: Event |
|
||||
| click | 点击时触发 | *event: Event* |
|
||||
|
||||
### Col Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击时触发 | event: Event |
|
||||
| click | 点击时触发 | *event: Event* |
|
||||
|
||||
@@ -101,7 +101,7 @@ export default {
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| name | 唯一标识符，默认为索引值 | *number \| string* | `index` |
|
||||
| icon | 标题栏左侧 [图标名称](#/zh-CN/icon) 或图片链接 | *string* | - |
|
||||
| icon | 标题栏左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
|
||||
| size | 标题栏大小，可选值为 `large` | *string* | - |
|
||||
| title | 标题栏左侧内容 | *number \| string* | - |
|
||||
| value | 标题栏右侧内容 | *number \| string* | - |
|
||||
|
||||
@@ -145,7 +145,7 @@ export default {
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when clicked | event: Event |
|
||||
| click | Triggered when clicked | *event: Event* |
|
||||
|
||||
### ContactList Props
|
||||
|
||||
|
||||
@@ -149,7 +149,7 @@ export default {
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击时触发 | event: Event |
|
||||
| click | 点击时触发 | *event: Event* |
|
||||
|
||||
### ContactList Props
|
||||
|
||||
|
||||
@@ -28,13 +28,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-contact-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>张三</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请填写姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="请填写电话" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -130,15 +130,15 @@ export default {
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| finish | Triggered when count down finished | - |
|
||||
| change `v2.4.4` | Triggered when count down changed | timeData |
|
||||
| change `v2.4.4` | Triggered when count down changed | *timeData: TimeData* |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description | SlotProps |
|
||||
|------|------|------|
|
||||
| default | Custom Content | timeData |
|
||||
| default | Custom Content | *timeData: TimeData* |
|
||||
|
||||
### timeData Structure
|
||||
### TimeData Structure
|
||||
|
||||
| Name | Description | Type |
|
||||
|------|------|------|
|
||||
|
||||
@@ -140,15 +140,15 @@ export default {
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| finish | 倒计时结束时触发 | - |
|
||||
| change `v2.4.4` | 倒计时变化时触发 | timeData |
|
||||
| change `v2.4.4` | 倒计时变化时触发 | *timeData: TimeData* |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 | SlotProps |
|
||||
|------|------|------|
|
||||
| default | 自定义内容 | timeData |
|
||||
| default | 自定义内容 | *timeData: TimeData* |
|
||||
|
||||
### timeData 格式
|
||||
### TimeData 格式
|
||||
|
||||
| 名称 | 说明 | 类型 |
|
||||
|------|------|------|
|
||||
@@ -160,7 +160,7 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 CountDown 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 CountDown 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
|
||||
@@ -4,7 +4,7 @@ exports[`empty-image prop 1`] = `
|
||||
<div class="van-coupon-list">
|
||||
<div class="van-coupon-list__exchange-bar">
|
||||
<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 van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
|
||||
@@ -54,7 +54,7 @@ exports[`render coupon list 1`] = `
|
||||
<div class="van-coupon-list">
|
||||
<div class="van-coupon-list__exchange-bar">
|
||||
<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 van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
|
||||
@@ -200,7 +200,7 @@ exports[`render empty coupon list 1`] = `
|
||||
<div class="van-coupon-list">
|
||||
<div class="van-coupon-list__exchange-bar">
|
||||
<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 van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
|
||||
|
||||
@@ -82,7 +82,6 @@ export default {
|
||||
currentDate: new Date()
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatter(type, val) {
|
||||
if (type === 'year') {
|
||||
@@ -134,7 +133,6 @@ export default {
|
||||
currentTime: '12:00'
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
filter(type, options) {
|
||||
if (type === 'minute') {
|
||||
@@ -199,4 +197,4 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get DatetimePicker instance and call
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
|------|------|------|------|
|
||||
| getPicker `v2.4.0` | get Picker instance | - | - |
|
||||
| getPicker `v2.5.3` | get Picker instance | - | - |
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
时间选择器，支持日期、年月、时分等维度，通常与 [弹出层](#/zh-CN/popup) 组件配合使用
|
||||
时间选择器，支持日期、年月、时分等维度，通常与[弹出层](#/zh-CN/popup)组件配合使用
|
||||
|
||||
### 引入
|
||||
|
||||
@@ -84,7 +84,6 @@ export default {
|
||||
currentDate: new Date()
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatter(type, val) {
|
||||
if (type === 'year') {
|
||||
@@ -138,7 +137,6 @@ export default {
|
||||
currentTime: '12:00'
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
filter(type, options) {
|
||||
if (type === 'minute') {
|
||||
@@ -199,11 +197,11 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
| getPicker `v2.4.0` | 获取 Picker 实例，用于调用 Picker 的[实例方法](#/zh-CN/picker#fang-fa) | - | - |
|
||||
| getPicker `v2.5.3` | 获取 Picker 实例，用于调用 Picker 的[实例方法](#/zh-CN/picker#fang-fa) | - | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
|
||||
@@ -10,11 +10,19 @@ export default createComponent({
|
||||
...DatePicker.props,
|
||||
},
|
||||
|
||||
methods: {
|
||||
// @exposed-api
|
||||
getPicker() {
|
||||
return this.$refs.root.getPicker();
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const Component = this.type === 'time' ? TimePicker : DatePicker;
|
||||
|
||||
return (
|
||||
<Component
|
||||
ref="root"
|
||||
class={bem()}
|
||||
{...{
|
||||
props: this.$props,
|
||||
|
||||
@@ -30,3 +30,8 @@ test('time type', () => {
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('getPicker method', () => {
|
||||
const wrapper = mount(DatetimePicker);
|
||||
expect(wrapper.vm.getPicker()).toBeTruthy();
|
||||
});
|
||||
|
||||
@@ -168,8 +168,8 @@ export default {
|
||||
| confirm | Triggered when click confirm button | - |
|
||||
| cancel | Triggered when click cancel button | - |
|
||||
| open | Triggered when open Dialog | - |
|
||||
| opened | Triggered when opened Dialog | - |
|
||||
| close | Triggered when close Dialog | - |
|
||||
| opened | Triggered when opened Dialog | - |
|
||||
| closed | Triggered when closed Dialog | - |
|
||||
|
||||
### Slots
|
||||
|
||||
@@ -201,8 +201,8 @@ export default {
|
||||
| confirm | 点击确认按钮时触发 | - |
|
||||
| cancel | 点击取消按钮时触发 | - |
|
||||
| open | 打开弹窗时触发 | - |
|
||||
| opened | 打开弹窗且动画结束后触发 | - |
|
||||
| close | 关闭弹窗时触发 | - |
|
||||
| opened | 打开弹窗且动画结束后触发 | - |
|
||||
| closed | 关闭弹窗且动画结束后触发 | - |
|
||||
|
||||
### Slots
|
||||
|
||||
@@ -137,8 +137,8 @@ Use `active-color` prop to custom active color of the title and options
|
||||
|------|------|------|
|
||||
| change | Triggered select option and value changed | value |
|
||||
| open | Triggered when open menu | - |
|
||||
| opened | Triggered when menu opened | - |
|
||||
| close | Triggered when close menu | - |
|
||||
| opened | Triggered when menu opened | - |
|
||||
| closed | Triggered when menu closed | - |
|
||||
|
||||
### DropdownItem Slots
|
||||
|
||||
@@ -141,9 +141,9 @@ export default {
|
||||
|------|------|------|
|
||||
| change | 点击选项导致 value 变化时触发 | value |
|
||||
| open | 打开菜单栏时触发 | - |
|
||||
| opened | 打开菜单栏且动画结束后触发 | - |
|
||||
| close | 关闭菜单栏时触发 | - |
|
||||
| opened | 关闭菜单栏且动画结束后触发 | - |
|
||||
| opened | 打开菜单栏且动画结束后触发 | - |
|
||||
| closed | 关闭菜单栏且动画结束后触发 | - |
|
||||
|
||||
### DropdownItem Slots
|
||||
|
||||
@@ -154,7 +154,7 @@ export default {
|
||||
|
||||
### DropdownItem 方法
|
||||
|
||||
通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
@@ -166,4 +166,4 @@ export default {
|
||||
|------|------|------|
|
||||
| text | 文字 | *string* |
|
||||
| value | 标识符 | *number \| string* |
|
||||
| icon | 左侧 [图标名称](#/zh-CN/icon) 或图片链接 | *string* |
|
||||
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* |
|
||||
|
||||
+15
-12
@@ -214,8 +214,9 @@ Use `input-align` prop to align the input value
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| value | Field value | *number \| string* | - |
|
||||
| v-model (value) | Field value | *number \| string* | - |
|
||||
| label | Field label | *string* | - |
|
||||
| name `v2.5.0` | Name | *string* | - |
|
||||
| type | Input type, can be set to `tel` `digit`<br>`number` `textarea` `password` | *string* | `text` |
|
||||
| size | Size，can be set to `large` | *string* | - |
|
||||
| maxlength | Max length of value | *number \| string* | - |
|
||||
@@ -230,17 +231,19 @@ Use `input-align` prop to align the input value
|
||||
| autofocus | Whether to auto focus, unsupported in iOS | *boolean* | `false` |
|
||||
| show-word-limit `v2.2.8` | Whether to show word limit, need to set the `maxlength` prop | *boolean* | `false` |
|
||||
| error | Whether to show error info | *boolean* | `false` |
|
||||
| error-message | Error message | *string* | - |
|
||||
| formatter `v2.4.2` | Input value formatter | *Function* | - |
|
||||
| arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | *string* | `right` |
|
||||
| error-message | Error message | *string* | `''` |
|
||||
| label-class | Label className | *any* | - |
|
||||
| label-width | Label width | *number \| string* | `90px` |
|
||||
| label-align | Label text align, can be set to `center` `right` | *string* | `left` |
|
||||
| input-align | Input text align, can be set to `center` `right` | *string* | `left` |
|
||||
| error-message-align | Error message text align, can be set to `center` `right` | *string* | `left` |
|
||||
| label-align | Label align, can be set to `center` `right` | *string* | `left` |
|
||||
| input-align | Input align, can be set to `center` `right` | *string* | `left` |
|
||||
| error-message-align | Error message align, can be set to `center` `right` | *string* | `left` |
|
||||
| autosize | Textarea auto resize，can accpet an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | *boolean \| object* | `false` |
|
||||
| left-icon | Left side icon name | *string* | - |
|
||||
| right-icon | Right side icon name | *string* | - |
|
||||
| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
|
||||
| rules `v2.5.0` | Form validation rules | *Rule[]* | - |
|
||||
|
||||
### Events
|
||||
|
||||
@@ -248,13 +251,13 @@ Field support all native events of input tag
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|------|------|------|
|
||||
| input | Triggered when input value changed | value: current value |
|
||||
| focus | Triggered when input gets focus | event: Event |
|
||||
| blur | Triggered when input loses focus | event: Event |
|
||||
| clear | Triggered when click clear icon | event: Event |
|
||||
| click | Triggered when click Field | event: Event |
|
||||
| click-left-icon | Triggered when click the left icon of Field | event: Event |
|
||||
| click-right-icon | Triggered when click the right icon of Field | event: Event |
|
||||
| input | Triggered when input value changed | *value: string* |
|
||||
| focus | Triggered when input gets focus | *event: Event* |
|
||||
| blur | Triggered when input loses focus | *event: Event* |
|
||||
| clear | Triggered when click clear icon | *event: Event* |
|
||||
| click | Triggered when click Field | *event: Event* |
|
||||
| click-left-icon | Triggered when click the left icon of Field | *event: Event* |
|
||||
| click-right-icon | Triggered when click the right icon of Field | *event: Event* |
|
||||
|
||||
### Methods
|
||||
|
||||
|
||||
+22
-13
@@ -233,8 +233,9 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| v-model (value) | 当前输入的值 | *number \| string* | - |
|
||||
| label | 输入框左侧文本 | *string* | - |
|
||||
| value | 当前输入的值 | *number \| string* | - |
|
||||
| name `v2.5.0` | 名称，提交表单的标识符 | *string* | - |
|
||||
| type | 输入框类型, 可选值为 `tel` `digit`<br>`number` `textarea` `password` 等 | *string* | `text` |
|
||||
| size | 大小，可选值为 `large` | *string* | - |
|
||||
| maxlength | 输入的最大字符数 | *number \| string* | - |
|
||||
@@ -249,17 +250,19 @@ export default {
|
||||
| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | *boolean* | `false` |
|
||||
| show-word-limit `v2.2.8` | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` |
|
||||
| error | 是否将输入内容标红 | *boolean* | `false` |
|
||||
| error-message | 底部错误提示文案，为空时不展示 | *string* | - |
|
||||
| formatter `v2.4.2` | 输入内容格式化函数 | *Function* | - |
|
||||
| arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | *string* | `right` |
|
||||
| error-message | 底部错误提示文案，为空时不展示 | *string* | `''` |
|
||||
| label-class | 左侧文本额外类名 | *any* | - |
|
||||
| label-width | 左侧文本宽度，默认单位为`px` | *number \| string* | `90px` |
|
||||
| label-align | 左侧文本对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| input-align | 输入框内容对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| input-align | 输入框对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| autosize | 是否自适应内容高度，只对 textarea 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`px` | *boolean \| object* | `false` |
|
||||
| left-icon | 左侧 [图标名称](#/zh-CN/icon) 或图片链接 | *string* | - |
|
||||
| right-icon | 右侧 [图标名称](#/zh-CN/icon) 或图片链接 | *string* | - |
|
||||
| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
|
||||
| right-icon | 右侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
|
||||
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
|
||||
| rules `v2.5.0` | 表单校验规则，详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | *Rule[]* | - |
|
||||
|
||||
### Events
|
||||
|
||||
@@ -267,17 +270,17 @@ export default {
|
||||
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| input | 输入框内容变化时触发 | value: 输入框当前值 |
|
||||
| focus | 输入框获得焦点时触发 | event: Event |
|
||||
| blur | 输入框失去焦点时触发 | event: Event |
|
||||
| clear | 点击清除按钮时触发 | event: Event |
|
||||
| click | 点击时触发 | event: Event |
|
||||
| click-left-icon | 点击左侧图标时触发 | event: Event |
|
||||
| click-right-icon | 点击右侧图标时触发 | event: Event |
|
||||
| input | 输入框内容变化时触发 | *value: string (当前输入的值)* |
|
||||
| focus | 输入框获得焦点时触发 | *event: Event* |
|
||||
| blur | 输入框失去焦点时触发 | *event: Event* |
|
||||
| clear | 点击清除按钮时触发 | *event: Event* |
|
||||
| click | 点击时触发 | *event: Event* |
|
||||
| click-left-icon | 点击左侧图标时触发 | *event: Event* |
|
||||
| click-right-icon | 点击右侧图标时触发 | *event: Event* |
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 Field 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Field 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
@@ -293,3 +296,9 @@ export default {
|
||||
| left-icon | 自定义输入框头部图标 |
|
||||
| right-icon | 自定义输入框尾部图标 |
|
||||
| button | 自定义输入框尾部按钮 |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 在桌面端点击清除按钮无效？
|
||||
|
||||
参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username"
|
||||
error
|
||||
required
|
||||
:label="$t('username')"
|
||||
:placeholder="$t('usernamePlaceholder')"
|
||||
error
|
||||
/>
|
||||
<van-field
|
||||
v-model="phone"
|
||||
|
||||
+208
-17
@@ -3,7 +3,14 @@ import { formatNumber } from './utils';
|
||||
import { isIOS } from '../utils/validate/system';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import { resetScroll } from '../utils/dom/reset-scroll';
|
||||
import { createNamespace, isObject, isDef, addUnit } from '../utils';
|
||||
import {
|
||||
createNamespace,
|
||||
isObject,
|
||||
isDef,
|
||||
addUnit,
|
||||
isPromise,
|
||||
isFunction,
|
||||
} from '../utils';
|
||||
|
||||
// Components
|
||||
import Icon from '../icon';
|
||||
@@ -15,8 +22,22 @@ const [createComponent, bem] = createNamespace('field');
|
||||
export default createComponent({
|
||||
inheritAttrs: false,
|
||||
|
||||
provide() {
|
||||
return {
|
||||
vanField: this,
|
||||
};
|
||||
},
|
||||
|
||||
inject: {
|
||||
vanForm: {
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
...cellProps,
|
||||
name: String,
|
||||
rules: Array,
|
||||
error: Boolean,
|
||||
disabled: Boolean,
|
||||
readonly: Boolean,
|
||||
@@ -43,11 +64,14 @@ export default createComponent({
|
||||
data() {
|
||||
return {
|
||||
focused: false,
|
||||
validateMessage: '',
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
value() {
|
||||
this.resetValidation();
|
||||
this.validateWithTrigger('onChange');
|
||||
this.$nextTick(this.adjustSize);
|
||||
},
|
||||
},
|
||||
@@ -55,6 +79,16 @@ export default createComponent({
|
||||
mounted() {
|
||||
this.format();
|
||||
this.$nextTick(this.adjustSize);
|
||||
|
||||
if (this.vanForm) {
|
||||
this.vanForm.fields.push(this);
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
if (this.vanForm) {
|
||||
this.vanForm.fields = this.vanForm.fields.filter(item => item !== this);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
@@ -83,11 +117,16 @@ export default createComponent({
|
||||
},
|
||||
|
||||
labelStyle() {
|
||||
const { labelWidth } = this;
|
||||
const labelWidth = this.getProp('labelWidth');
|
||||
|
||||
if (labelWidth) {
|
||||
return { width: addUnit(labelWidth) };
|
||||
}
|
||||
},
|
||||
|
||||
formValue() {
|
||||
return this.children ? this.children.value : this.value;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -105,6 +144,117 @@ export default createComponent({
|
||||
}
|
||||
},
|
||||
|
||||
runValidator(value, rule) {
|
||||
return new Promise(resolve => {
|
||||
const returnVal = rule.validator(value, rule);
|
||||
|
||||
if (isPromise(returnVal)) {
|
||||
return returnVal.then(resolve);
|
||||
}
|
||||
|
||||
resolve(returnVal);
|
||||
});
|
||||
},
|
||||
|
||||
isEmptyValue(value) {
|
||||
if (Array.isArray(value)) {
|
||||
return !value.length;
|
||||
}
|
||||
|
||||
return !value;
|
||||
},
|
||||
|
||||
runSyncRule(value, rule) {
|
||||
if (rule.required && this.isEmptyValue(value)) {
|
||||
return false;
|
||||
}
|
||||
if (rule.pattern && !rule.pattern.test(value)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
getRuleMessage(value, rule) {
|
||||
const { message } = rule;
|
||||
|
||||
if (isFunction(message)) {
|
||||
return message(value, rule);
|
||||
}
|
||||
|
||||
return message;
|
||||
},
|
||||
|
||||
runRules(rules) {
|
||||
return rules.reduce(
|
||||
(promise, rule) =>
|
||||
promise.then(() => {
|
||||
if (this.validateMessage) {
|
||||
return;
|
||||
}
|
||||
|
||||
let value = this.formValue;
|
||||
|
||||
if (rule.formatter) {
|
||||
value = rule.formatter(value, rule);
|
||||
}
|
||||
|
||||
if (!this.runSyncRule(value, rule)) {
|
||||
this.validateMessage = this.getRuleMessage(value, rule);
|
||||
return;
|
||||
}
|
||||
|
||||
if (rule.validator) {
|
||||
return this.runValidator(value, rule).then(result => {
|
||||
if (result === false) {
|
||||
this.validateMessage = this.getRuleMessage(value, rule);
|
||||
}
|
||||
});
|
||||
}
|
||||
}),
|
||||
Promise.resolve()
|
||||
);
|
||||
},
|
||||
|
||||
validate(rules = this.rules) {
|
||||
return new Promise(resolve => {
|
||||
if (!rules) {
|
||||
resolve();
|
||||
}
|
||||
|
||||
this.runRules(rules).then(() => {
|
||||
if (this.validateMessage) {
|
||||
resolve({
|
||||
name: this.name,
|
||||
message: this.validateMessage,
|
||||
});
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
validateWithTrigger(trigger) {
|
||||
if (this.vanForm && this.rules) {
|
||||
const defaultTrigger = this.vanForm.validateTrigger === trigger;
|
||||
const rules = this.rules.filter(rule => {
|
||||
if (rule.trigger) {
|
||||
return rule.trigger === trigger;
|
||||
}
|
||||
|
||||
return defaultTrigger;
|
||||
});
|
||||
|
||||
this.validate(rules);
|
||||
}
|
||||
},
|
||||
|
||||
resetValidation() {
|
||||
if (this.validateMessage) {
|
||||
this.validateMessage = '';
|
||||
}
|
||||
},
|
||||
|
||||
format(target = this.$refs.input) {
|
||||
if (!target) {
|
||||
return;
|
||||
@@ -166,6 +316,7 @@ export default createComponent({
|
||||
onBlur(event) {
|
||||
this.focused = false;
|
||||
this.$emit('blur', event);
|
||||
this.validateWithTrigger('onBlur');
|
||||
resetScroll();
|
||||
},
|
||||
|
||||
@@ -224,19 +375,23 @@ export default createComponent({
|
||||
genInput() {
|
||||
const { type } = this;
|
||||
const inputSlot = this.slots('input');
|
||||
const inputAlign = this.getProp('inputAlign');
|
||||
|
||||
if (inputSlot) {
|
||||
return <div class={bem('control', this.inputAlign)}>{inputSlot}</div>;
|
||||
return (
|
||||
<div class={bem('control', [inputAlign, 'custom'])}>{inputSlot}</div>
|
||||
);
|
||||
}
|
||||
|
||||
const inputProps = {
|
||||
ref: 'input',
|
||||
class: bem('control', this.inputAlign),
|
||||
class: bem('control', inputAlign),
|
||||
domProps: {
|
||||
value: this.value,
|
||||
},
|
||||
attrs: {
|
||||
...this.$attrs,
|
||||
name: this.name,
|
||||
disabled: this.disabled,
|
||||
readonly: this.readonly,
|
||||
placeholder: this.placeholder,
|
||||
@@ -282,7 +437,9 @@ export default createComponent({
|
||||
if (showLeftIcon) {
|
||||
return (
|
||||
<div class={bem('left-icon')} onClick={this.onClickLeftIcon}>
|
||||
{this.slots('left-icon') || <Icon name={this.leftIcon} />}
|
||||
{this.slots('left-icon') || (
|
||||
<Icon name={this.leftIcon} classPrefix={this.iconPrefix} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -295,7 +452,9 @@ export default createComponent({
|
||||
if (showRightIcon) {
|
||||
return (
|
||||
<div class={bem('right-icon')} onClick={this.onClickRightIcon}>
|
||||
{slots('right-icon') || <Icon name={this.rightIcon} />}
|
||||
{slots('right-icon') || (
|
||||
<Icon name={this.rightIcon} classPrefix={this.iconPrefix} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -314,38 +473,74 @@ export default createComponent({
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
genMessage() {
|
||||
const message = this.errorMessage || this.validateMessage;
|
||||
|
||||
if (message) {
|
||||
const errorMessageAlign = this.getProp('errorMessageAlign');
|
||||
|
||||
return (
|
||||
<div class={bem('error-message', errorMessageAlign)}>{message}</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
getProp(key) {
|
||||
if (isDef(this[key])) {
|
||||
return this[key];
|
||||
}
|
||||
|
||||
if (this.vanForm && isDef(this.vanForm[key])) {
|
||||
return this.vanForm[key];
|
||||
}
|
||||
},
|
||||
|
||||
genLabel() {
|
||||
const colon = this.getProp('colon') ? ':' : '';
|
||||
|
||||
if (this.slots('label')) {
|
||||
return [this.slots('label'), colon];
|
||||
}
|
||||
|
||||
if (this.label) {
|
||||
return <span>{this.label + colon}</span>;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const { slots, labelAlign } = this;
|
||||
const { slots } = this;
|
||||
const labelAlign = this.getProp('labelAlign');
|
||||
|
||||
const scopedSlots = {
|
||||
icon: this.genLeftIcon,
|
||||
};
|
||||
|
||||
if (slots('label')) {
|
||||
scopedSlots.title = () => slots('label');
|
||||
const Label = this.genLabel();
|
||||
if (Label) {
|
||||
scopedSlots.title = () => Label;
|
||||
}
|
||||
|
||||
return (
|
||||
<Cell
|
||||
icon={this.leftIcon}
|
||||
size={this.size}
|
||||
title={this.label}
|
||||
center={this.center}
|
||||
border={this.border}
|
||||
isLink={this.isLink}
|
||||
required={this.required}
|
||||
clickable={this.clickable}
|
||||
titleStyle={this.labelStyle}
|
||||
valueClass={bem('value')}
|
||||
titleClass={[bem('label', labelAlign), this.labelClass]}
|
||||
scopedSlots={scopedSlots}
|
||||
arrowDirection={this.arrowDirection}
|
||||
class={bem({
|
||||
error: this.error,
|
||||
error: this.error || this.validateMessage,
|
||||
[`label-${labelAlign}`]: labelAlign,
|
||||
'min-height': this.type === 'textarea' && !this.autosize,
|
||||
})}
|
||||
scopedSlots={scopedSlots}
|
||||
onClick={this.onClick}
|
||||
>
|
||||
<div class={bem('body')}>
|
||||
@@ -363,11 +558,7 @@ export default createComponent({
|
||||
)}
|
||||
</div>
|
||||
{this.genWordLimit()}
|
||||
{this.errorMessage && (
|
||||
<div class={bem('error-message', this.errorMessageAlign)}>
|
||||
{this.errorMessage}
|
||||
</div>
|
||||
)}
|
||||
{this.genMessage()}
|
||||
</Cell>
|
||||
);
|
||||
},
|
||||
|
||||
+17
-2
@@ -3,6 +3,7 @@
|
||||
.van-field {
|
||||
&__label {
|
||||
flex: none;
|
||||
box-sizing: border-box;
|
||||
width: @field-label-width;
|
||||
|
||||
&--center {
|
||||
@@ -10,10 +11,15 @@
|
||||
}
|
||||
|
||||
&--right {
|
||||
padding-right: @padding-md;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&__value {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -27,6 +33,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: @field-input-text-color;
|
||||
line-height: inherit;
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
@@ -38,10 +45,10 @@
|
||||
|
||||
&:disabled {
|
||||
color: @field-input-disabled-text-color;
|
||||
-webkit-text-fill-color: @field-input-disabled-text-color; // fix disabled color in iOS
|
||||
background-color: transparent;
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
-webkit-text-fill-color: currentColor; // fix disabled color in iOS
|
||||
}
|
||||
|
||||
&:read-only {
|
||||
@@ -49,13 +56,21 @@
|
||||
}
|
||||
|
||||
&--center {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&--right {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&--custom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: @cell-line-height;
|
||||
}
|
||||
|
||||
// for ios wechat
|
||||
&[type='date'],
|
||||
&[type='time'],
|
||||
@@ -142,7 +157,7 @@
|
||||
&,
|
||||
&::placeholder {
|
||||
color: @field-input-error-text-color;
|
||||
-webkit-text-fill-color: @field-input-error-text-color;
|
||||
-webkit-text-fill-color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入文本" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -15,31 +15,31 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入文本" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>手机号</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="请输入手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>整数</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="请输入整数" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>数字</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入数字（支持小数）" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>密码</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="password" placeholder="请输入密码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -49,13 +49,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" disabled="disabled" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,7 +67,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-smile-o">
|
||||
<!----></i></div>
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="显示图标" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-warning-o">
|
||||
<!----></i></div>
|
||||
@@ -78,7 +78,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-music-o">
|
||||
<!----></i></div>
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="显示清除图标" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,13 +88,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-cell--required van-field van-field--error">
|
||||
<div class="van-cell__title van-field__label"><span>用户名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入用户名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--required van-field">
|
||||
<div class="van-cell__title van-field__label"><span>手机号</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入手机号" class="van-field__control"></div>
|
||||
<div class="van-field__error-message">手机号格式错误</div>
|
||||
</div>
|
||||
@@ -105,7 +105,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-cell--center van-field">
|
||||
<div class="van-cell__title van-field__label"><span>短信验证码</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入短信验证码" class="van-field__control">
|
||||
<div class="van-field__button"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">
|
||||
发送验证码
|
||||
@@ -119,7 +119,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="格式化输入内容" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -129,7 +129,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>留言</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="请输入留言" class="van-field__control" style="height: auto;"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -139,9 +139,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>留言</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="2" placeholder="请输入留言" class="van-field__control" style="height: auto;"></textarea></div>
|
||||
<div class="van-field__word-limit">0/50</div>
|
||||
<div class="van-field__word-limit"><span class="van-field__word-num">0</span>/50</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -150,7 +150,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="输入框内容右对齐" class="van-field__control van-field__control--right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
exports[`arrow-direction prop 1`] = `
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div><i class="van-icon van-icon-arrow-up van-cell__right-icon">
|
||||
<!----></i>
|
||||
@@ -11,7 +11,7 @@ exports[`arrow-direction prop 1`] = `
|
||||
|
||||
exports[`clearable 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -19,7 +19,7 @@ exports[`clearable 1`] = `
|
||||
|
||||
exports[`clearable 2`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"><i class="van-icon van-icon-clear van-field__clear">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
@@ -29,7 +29,7 @@ exports[`clearable 2`] = `
|
||||
exports[`label-class prop 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label custom-label-class"><span>Label</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,7 +38,7 @@ exports[`label-class prop 1`] = `
|
||||
exports[`label-width prop with unit 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label" style="width: 10rem;"><span>Label</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,15 +47,23 @@ exports[`label-width prop with unit 1`] = `
|
||||
exports[`label-width prop without unit 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label" style="width: 100px;"><span>Label</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`name prop 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="foo" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`reach max word-limit 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
<div class="van-field__word-limit"><span class="van-field__word-num van-field__word-num--full">3</span>/3</div>
|
||||
</div>
|
||||
@@ -64,9 +72,9 @@ exports[`reach max word-limit 1`] = `
|
||||
|
||||
exports[`render input slot 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control">Custom Input</div>
|
||||
<div class="van-field__control van-field__control--custom">Custom Input</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -75,7 +83,7 @@ exports[`render input slot 1`] = `
|
||||
exports[`render label slot 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">Custom Label</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -83,7 +91,7 @@ exports[`render label slot 1`] = `
|
||||
|
||||
exports[`render textarea 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><textarea class="van-field__control" style="height: auto;"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,7 +99,7 @@ exports[`render textarea 1`] = `
|
||||
|
||||
exports[`size prop 1`] = `
|
||||
<div class="van-cell van-cell--large van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -291,3 +291,26 @@ test('reach max word-limit', () => {
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('name prop', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
name: 'foo',
|
||||
},
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('call focus method before mounted', done => {
|
||||
mount(Field, {
|
||||
created() {
|
||||
this.focus();
|
||||
this.blur();
|
||||
done();
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('destroy field', () => {
|
||||
mount(Field).destroy();
|
||||
});
|
||||
|
||||
@@ -0,0 +1,469 @@
|
||||
# Form
|
||||
|
||||
### Install
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Form } from 'vant';
|
||||
|
||||
Vue.use(Form);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field
|
||||
v-model="username"
|
||||
name="Username"
|
||||
label="Username"
|
||||
placeholder="Username"
|
||||
:rules="[{ required: true, message: 'Username is required' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
name="Password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
:rules="[{ required: true, message: 'Password is required' }]"
|
||||
/>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="info" native-type="submit">
|
||||
Submit
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit(values) {
|
||||
console.log('submit', values);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Validate Rules
|
||||
|
||||
```html
|
||||
<van-form validate-first @failed="onFailed">
|
||||
<van-field
|
||||
v-model="value1"
|
||||
name="pattern"
|
||||
placeholder="USe pattern"
|
||||
:rules="[{ pattern, message: 'Error message }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
name="validator"
|
||||
placeholder="Use validator"
|
||||
:rules="[{ validator, message: 'Error message }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value3"
|
||||
name="asyncValidator"
|
||||
placeholder="Use async validator"
|
||||
:rules="[{ validator: asyncValidator, message: 'Error message }]"
|
||||
/>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="info" native-type="submit">
|
||||
Submit
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
pattern: /\d{6}/,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
validator(val) {
|
||||
return /1\d{10}/.test(val);
|
||||
},
|
||||
asyncValidator(val) {
|
||||
return new Promise(resolve => {
|
||||
Toast.loading('Validating...');
|
||||
|
||||
setTimeout(() => {
|
||||
Toast.clear();
|
||||
resolve(/\d{6}/.test(val));
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
onFailed(errorInfo) {
|
||||
console.log('failed', errorInfo);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Switch
|
||||
|
||||
```html
|
||||
<van-field name="switch" label="Switch">
|
||||
<template #input>
|
||||
<van-switch v-model="switchChecked" size="20" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchChecked: false,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Checkbox
|
||||
|
||||
```html
|
||||
<van-field name="checkbox" label="Checkbox">
|
||||
<template #input>
|
||||
<van-checkbox v-model="checkbox" shape="square" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="checkboxGroup" label="CheckboxGroup">
|
||||
<template #input>
|
||||
<van-checkbox-group v-model="checkboxGroup" direction="horizontal">
|
||||
<van-checkbox name="1" shape="square">Checkbox 1</van-checkbox>
|
||||
<van-checkbox name="2" shape="square">Checkbox 2</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox: false,
|
||||
checkboxGroup: [],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Radio
|
||||
|
||||
```html
|
||||
<van-field name="radio" label="Radio">
|
||||
<template #input>
|
||||
<van-radio-group v-model="radio" direction="horizontal">
|
||||
<van-radio name="1">Radio 1</van-radio>
|
||||
<van-radio name="2">Radio 2</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio: '1',
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Stepper
|
||||
|
||||
```html
|
||||
<van-field name="stepper" label="Stepper">
|
||||
<template #input>
|
||||
<van-stepper v-model="stepper"/>
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
stepper: 1,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Rate
|
||||
|
||||
```html
|
||||
<van-field name="rate" label="Rate">
|
||||
<template #input>
|
||||
<van-rate v-model="rate" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
rate: 3,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Slider
|
||||
|
||||
```html
|
||||
<van-field name="slider" label="Slider">
|
||||
<template #input>
|
||||
<van-slider v-model="slider" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
slider: 50,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Uploader
|
||||
|
||||
```html
|
||||
<van-field name="uploader" label="Uploader">
|
||||
<template #input>
|
||||
<van-uploader v-model="uploader" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Picker
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="picker"
|
||||
:value="value"
|
||||
label="Picker"
|
||||
placeholder="Select city"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="columns"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(value) {
|
||||
this.value = value;
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - DatetimePicker
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="datetimePicker"
|
||||
:value="value"
|
||||
label="Datetime Picker"
|
||||
placeholder="Select time"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-datetime-picker
|
||||
type="time"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(time) {
|
||||
this.value = time;
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Area
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="area"
|
||||
:value="value"
|
||||
label="Area Picker"
|
||||
placeholder="Select area"
|
||||
@click="showArea = true"
|
||||
/>
|
||||
<van-popup v-model="showArea" position="bottom">
|
||||
<van-area
|
||||
:area-list="areaList"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showArea = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showArea: false,
|
||||
areaList: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(values) {
|
||||
this.value = values.map(item => item.name).join('/');
|
||||
this.showArea = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Calendar
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="calendar"
|
||||
:value="value"
|
||||
label="Calendar"
|
||||
placeholder="Select date"
|
||||
@click="showCalendar = true"
|
||||
/>
|
||||
<van-calendar v-model="showCalendar" @confirm="onConfirm" />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(date) {
|
||||
this.value = `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
this.showCalendar = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| label-width | Field label width | *number \| string* | `90px` |
|
||||
| label-align | Field label align, can be set to `center` `right` | *string* | `left` |
|
||||
| input-align | Field input align, can be set to `center` `right` | *string* | `left` |
|
||||
| error-message-align | Error message align, can be set to `center` `right` | *string* | `left` |
|
||||
| validate-trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onSubmit` | *string* | `onBlur` |
|
||||
| colon | Whether to display `:` after label | *boolean* | `false` |
|
||||
| validate-first | Whether to stop the validation when a rule fails | *boolean* | `false` |
|
||||
| scroll-to-error `v2.5.2` | Whether to scroll to the error field when submit failed | *boolean* | `false` |
|
||||
|
||||
### Data Structure of Rule
|
||||
|
||||
| Key | Description | Type |
|
||||
|------|------|------|
|
||||
| required | Whether to be a required field | *boolean* |
|
||||
| message `v2.5.3` | Error message | *string \| (value, rule) => string* |
|
||||
| validator `v2.5.3` | Custom validator | *(value, rule) => boolean \| Promise* |
|
||||
| pattern `v2.5.3` | Regex pattern | *RegExp* |
|
||||
| trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onBlur` | *string* |
|
||||
| formatter `v2.5.3` | Format value before validate | *(value, rule) => any* |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| submit | Triggered after submitting the form and validation passed | *values: object* |
|
||||
| failed | Triggered after submitting the form and validation failed | *errorInfo: { values: object, errors: object[] }* |
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Form instance and call instance methods
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
|------|------|------|------|
|
||||
| submit | Submit form | - | - |
|
||||
| validate | Validate form | *name?: string* | *Promise* |
|
||||
| resetValidation | Reset validation | *name?: string* | - |
|
||||
| scrollToField `v2.5.2` | Scroll to field | *name: string* | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ----------- |
|
||||
| default | Form content |
|
||||
@@ -0,0 +1,508 @@
|
||||
# Form 表单
|
||||
|
||||
### 介绍
|
||||
|
||||
用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型，2.5 版本开始支持此组件
|
||||
|
||||
### 引入
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Form } from 'vant';
|
||||
|
||||
Vue.use(Form);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
在表单中，每个 [Field 组件](#/zh-CN/field) 代表一个表单项，使用 Field 的`rules`属性定义校验规则
|
||||
|
||||
```html
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field
|
||||
v-model="username"
|
||||
name="用户名"
|
||||
label="用户名"
|
||||
placeholder="用户名"
|
||||
:rules="[{ required: true, message: '请填写用户名' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
name="密码"
|
||||
label="密码"
|
||||
placeholder="密码"
|
||||
:rules="[{ required: true, message: '请填写密码' }]"
|
||||
/>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="info" native-type="submit">
|
||||
提交
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit(values) {
|
||||
console.log('submit', values);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 校验规则
|
||||
|
||||
通过`rules`定义表单校验规则，可用字段见[下方表格](#/zh-CN/form#rule-shu-ju-jie-gou)
|
||||
|
||||
```html
|
||||
<van-form validate-first @failed="onFailed">
|
||||
<!-- 通过 pattern 进行正则校验 -->
|
||||
<van-field
|
||||
v-model="value1"
|
||||
name="pattern"
|
||||
placeholder="正则校验"
|
||||
:rules="[{ pattern, message: '请输入正确内容 }]"
|
||||
/>
|
||||
<!-- 通过 validator 进行函数校验 -->
|
||||
<van-field
|
||||
v-model="value2"
|
||||
name="validator"
|
||||
placeholder="函数校验"
|
||||
:rules="[{ validator, message: '请输入正确内容 }]"
|
||||
/>
|
||||
<!-- 通过 validator 进行异步函数校验 -->
|
||||
<van-field
|
||||
v-model="value3"
|
||||
name="asyncValidator"
|
||||
placeholder="异步函数校验"
|
||||
:rules="[{ validator: asyncValidator, message: '请输入正确内容 }]"
|
||||
/>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="info" native-type="submit">
|
||||
提交
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
pattern: /\d{6}/,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 校验函数返回 true 表示校验通过，false 表示不通过
|
||||
validator(val) {
|
||||
return /1\d{10}/.test(val);
|
||||
},
|
||||
// 异步校验函数返回 Promise
|
||||
asyncValidator(val) {
|
||||
return new Promise(resolve => {
|
||||
Toast.loading('验证中...');
|
||||
|
||||
setTimeout(() => {
|
||||
Toast.clear();
|
||||
resolve(/\d{6}/.test(val));
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
onFailed(errorInfo) {
|
||||
console.log('failed', errorInfo);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 开关
|
||||
|
||||
在表单中使用 [Switch 组件](#/zh-CN/switch)
|
||||
|
||||
```html
|
||||
<van-field name="switch" label="开关">
|
||||
<template #input>
|
||||
<van-switch v-model="switchChecked" size="20" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchChecked: false,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 复选框
|
||||
|
||||
在表单中使用 [Checkbox 组件](#/zh-CN/checkbox)
|
||||
|
||||
```html
|
||||
<van-field name="checkbox" label="复选框">
|
||||
<template #input>
|
||||
<van-checkbox v-model="checkbox" shape="square" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="checkboxGroup" label="复选框组">
|
||||
<template #input>
|
||||
<van-checkbox-group v-model="checkboxGroup" direction="horizontal">
|
||||
<van-checkbox name="1" shape="square">复选框 1</van-checkbox>
|
||||
<van-checkbox name="2" shape="square">复选框 2</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox: false,
|
||||
checkboxGroup: [],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 单选框
|
||||
|
||||
在表单中使用 [Radio 组件](#/zh-CN/radio)
|
||||
|
||||
```html
|
||||
<van-field name="radio" label="单选框">
|
||||
<template #input>
|
||||
<van-radio-group v-model="radio" direction="horizontal">
|
||||
<van-radio name="1">单选框 1</van-radio>
|
||||
<van-radio name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio: '1',
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 步进器
|
||||
|
||||
在表单中使用 [Stepper 组件](#/zh-CN/stepper)
|
||||
|
||||
```html
|
||||
<van-field name="stepper" label="步进器">
|
||||
<template #input>
|
||||
<van-stepper v-model="stepper" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
stepper: 1,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 评分
|
||||
|
||||
在表单中使用 [Rate 组件](#/zh-CN/rate)
|
||||
|
||||
```html
|
||||
<van-field name="rate" label="评分">
|
||||
<template #input>
|
||||
<van-rate v-model="rate" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
rate: 3,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 滑块
|
||||
|
||||
在表单中使用 [Slider 组件](#/zh-CN/slider)
|
||||
|
||||
```html
|
||||
<van-field name="slider" label="滑块">
|
||||
<template #input>
|
||||
<van-slider v-model="slider" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
slider: 50,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 文件上传
|
||||
|
||||
在表单中使用 [Uploader 组件](#/zh-CN/uploader)
|
||||
|
||||
```html
|
||||
<van-field name="uploader" label="文件上传">
|
||||
<template #input>
|
||||
<van-uploader v-model="uploader" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 选择器
|
||||
|
||||
在表单中使用 [Picker 组件](#/zh-CN/picker)
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="picker"
|
||||
:value="value"
|
||||
label="选择器"
|
||||
placeholder="点击选择城市"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="columns"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(value) {
|
||||
this.value = value;
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 时间选择器
|
||||
|
||||
在表单中使用 [DatetimePicker 组件](#/zh-CN/datetime-picker)
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="datetimePicker"
|
||||
:value="value"
|
||||
label="时间选择"
|
||||
placeholder="点击选择时间"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-datetime-picker
|
||||
type="time"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(time) {
|
||||
this.value = time;
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 省市区选择器
|
||||
|
||||
在表单中使用 [Area 组件](#/zh-CN/area)
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="area"
|
||||
:value="value"
|
||||
label="地区选择"
|
||||
placeholder="点击选择省市区"
|
||||
@click="showArea = true"
|
||||
/>
|
||||
<van-popup v-model="showArea" position="bottom">
|
||||
<van-area
|
||||
:area-list="areaList"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showArea = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showArea: false,
|
||||
areaList: {}, // 数据格式见 Area 组件文档
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(values) {
|
||||
this.value = values.map(item => item.name).join('/');
|
||||
this.showArea = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 日历
|
||||
|
||||
在表单中使用 [Calendar 组件](#/zh-CN/calendar)
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="calendar"
|
||||
:value="value"
|
||||
label="日历"
|
||||
placeholder="点击选择日期"
|
||||
@click="showCalendar = true"
|
||||
/>
|
||||
<van-calendar v-model="showCalendar" @confirm="onConfirm" />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(date) {
|
||||
this.value = `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
this.showCalendar = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| label-width | 表单项 label 宽度，默认单位为`px` | *number \| string* | `90px` |
|
||||
| label-align | 表单项 label 对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| input-align | 输入框对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| validate-trigger `v2.5.2` | 表单校验触发时机，可选值为`onChange` | *string* | `onBlur` |
|
||||
| colon | 是否在 label 后面添加冒号 | *boolean* | `false` |
|
||||
| validate-first | 是否在某一项校验不通过时停止校验 | *boolean* | `false` |
|
||||
| scroll-to-error `v2.5.2` | 是否在提交表单且校验不通过时滚动至错误的表单项 | *boolean* | `false` |
|
||||
|
||||
> 表单项的 API 参见：[Field 组件](#/zh-CN/field#api)
|
||||
|
||||
### Rule 数据结构
|
||||
|
||||
使用 Field 的`rules`属性可以定义校验规则，可选属性如下:
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
|------|------|------|
|
||||
| required | 是否为必选字段 | *boolean* |
|
||||
| message `v2.5.3` | 错误提示文案 | *string \| (value, rule) => string* |
|
||||
| validator `v2.5.3` | 通过函数进行校验 | *(value, rule) => boolean \| Promise* |
|
||||
| pattern `v2.5.3` | 通过正则表达式进行校验 | *RegExp* |
|
||||
| trigger `v2.5.2` | 本项规则的触发时机，可选值为`onChange`、`onBlur` | *string* |
|
||||
| formatter `v2.5.3` | 格式化函数，将表单项的值转换后进行校验 | *(value, rule) => any* |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| submit | 提交表单且验证通过后触发 | *values: object* |
|
||||
| failed | 提交表单且验证不通过后触发 | *errorInfo: { values: object, errors: object[] }* |
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 Form 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
| submit | 提交表单，与点击提交按钮的效果等价 | - | - |
|
||||
| validate | 验证表单，支持传入`name`来验证单个表单项 | *name?: string* | *Promise* |
|
||||
| resetValidation | 重置表单项的验证提示，支持传入`name`来重置单个表单项 | *name?: string* | - |
|
||||
| scrollToField `v2.5.2` | 滚动到对应表单项的位置 | *name: string* | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 表单内容 |
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-form @submit="onSubmit" @failed="onFailed">
|
||||
<van-field
|
||||
v-model="username"
|
||||
name="username"
|
||||
:label="$t('username')"
|
||||
:rules="[{ required: true, message: $t('requireUsername') }]"
|
||||
:placeholder="$t('username')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
name="password"
|
||||
:label="$t('password')"
|
||||
:rules="[{ required: true, message: $t('requirePassword') }]"
|
||||
:placeholder="$t('password')"
|
||||
/>
|
||||
<div style="margin: 16px 16px 0;">
|
||||
<van-button round block type="info" native-type="submit">
|
||||
{{ $t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
submit: '提交',
|
||||
username: '用户名',
|
||||
password: '密码',
|
||||
requireUsername: '请填写用户名',
|
||||
requirePassword: '请填写密码',
|
||||
},
|
||||
'en-US': {
|
||||
submit: 'Submit',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
requireUsername: 'Username is required',
|
||||
requirePassword: 'Password is required',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSubmit(values) {
|
||||
console.log('submit', values);
|
||||
},
|
||||
onFailed(errorInfo) {
|
||||
console.log('failed', errorInfo);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<demo-block :title="$t('fieldType')">
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field name="switch" :label="$t('switch')">
|
||||
<template #input>
|
||||
<van-switch v-model="switchChecked" size="20" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="checkbox" :label="$t('checkbox')">
|
||||
<template #input>
|
||||
<van-checkbox v-model="checkbox" shape="square" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="checkboxGroup" :label="$t('checkboxGroup')">
|
||||
<template #input>
|
||||
<van-checkbox-group v-model="checkboxGroup" direction="horizontal">
|
||||
<van-checkbox name="1" shape="square">
|
||||
{{ $t('checkbox') }} 1
|
||||
</van-checkbox>
|
||||
<van-checkbox name="2" shape="square">
|
||||
{{ $t('checkbox') }} 2
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="radio" :label="$t('radio')">
|
||||
<template #input>
|
||||
<van-radio-group v-model="radio" direction="horizontal">
|
||||
<van-radio name="1">{{ $t('radio') }} 1</van-radio>
|
||||
<van-radio name="2">{{ $t('radio') }} 2</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="stepper" :label="$t('stepper')">
|
||||
<template #input>
|
||||
<van-stepper v-model="stepper" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="rate" :label="$t('rate')">
|
||||
<template #input>
|
||||
<van-rate v-model="rate" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="slider" :label="$t('slider')">
|
||||
<template #input>
|
||||
<van-slider v-model="slider" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="uploader" :label="$t('uploader')">
|
||||
<template #input>
|
||||
<van-uploader v-model="uploader" max-count="2" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<field-type-picker />
|
||||
<field-type-datetime-picker />
|
||||
<field-type-area />
|
||||
<field-type-calendar />
|
||||
|
||||
<div style="margin: 16px 16px 0;">
|
||||
<van-button round block type="info" native-type="submit">
|
||||
{{ $t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FieldTypeArea from './FieldTypeArea';
|
||||
import FieldTypePicker from './FieldTypePicker';
|
||||
import FieldTypeCalendar from './FieldTypeCalendar';
|
||||
import FieldTypeDatetimePicker from './FieldTypeDatetimePicker';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
rate: '评分',
|
||||
radio: '单选框',
|
||||
submit: '提交',
|
||||
switch: '开关',
|
||||
slider: '滑块',
|
||||
picker: '选择器',
|
||||
stepper: '步进器',
|
||||
checkbox: '复选框',
|
||||
uploader: '文件上传',
|
||||
fieldType: '表单项类型',
|
||||
checkboxGroup: '复选框组',
|
||||
requireCheckbox: '请勾选复选框',
|
||||
},
|
||||
'en-US': {
|
||||
rate: 'Rate',
|
||||
radio: 'Radio',
|
||||
submit: 'Submit',
|
||||
switch: 'Switch',
|
||||
slider: 'Slider',
|
||||
picker: 'Picker',
|
||||
stepper: 'Stepper',
|
||||
checkbox: 'Checkbox',
|
||||
uploader: 'Uploader',
|
||||
fieldType: 'Field Type',
|
||||
checkboxGroup: 'Checkbox Group',
|
||||
requireCheckbox: 'Checkbox is required',
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
FieldTypeArea,
|
||||
FieldTypePicker,
|
||||
FieldTypeCalendar,
|
||||
FieldTypeDatetimePicker,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
rate: 3,
|
||||
radio: '1',
|
||||
slider: 50,
|
||||
stepper: 1,
|
||||
uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
|
||||
checkbox: false,
|
||||
checkboxGroup: [],
|
||||
switchChecked: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSubmit(values) {
|
||||
console.log(values);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="area"
|
||||
:value="value"
|
||||
:label="$t('picker')"
|
||||
:placeholder="$t('placeholder')"
|
||||
@click="showArea = true"
|
||||
/>
|
||||
<van-popup v-model="showArea" position="bottom">
|
||||
<van-area
|
||||
:area-list="$t('areaList')"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AreaList from '../../area/demo/area';
|
||||
import AreaListEn from '../../area/demo/area-en';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
picker: '地区选择',
|
||||
areaList: AreaList,
|
||||
placeholder: '点击选择省市区',
|
||||
},
|
||||
'en-US': {
|
||||
picker: 'Area Picker',
|
||||
areaList: AreaListEn,
|
||||
placeholder: 'Select area',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showArea: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm(values) {
|
||||
this.value = values.map(item => item.name).join('/');
|
||||
this.showArea = false;
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
this.showArea = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="calendar"
|
||||
:value="value"
|
||||
:label="$t('calendar')"
|
||||
:placeholder="$t('placeholder')"
|
||||
@click="showCalendar = true"
|
||||
/>
|
||||
<van-calendar v-model="showCalendar" @confirm="onConfirm" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
calendar: '日历',
|
||||
placeholder: '点击选择日期',
|
||||
},
|
||||
'en-US': {
|
||||
calendar: 'Calendar',
|
||||
placeholder: 'Select date',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatDate(date) {
|
||||
return `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
},
|
||||
|
||||
onConfirm(date) {
|
||||
this.value = this.formatDate(date);
|
||||
this.showCalendar = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="datetimePicker"
|
||||
:value="value"
|
||||
:label="$t('label')"
|
||||
:placeholder="$t('placeholder')"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-datetime-picker
|
||||
type="time"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
label: '时间选择',
|
||||
placeholder: '点击选择时间',
|
||||
},
|
||||
'en-US': {
|
||||
label: 'Datetime Picker',
|
||||
placeholder: 'Select time',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm(time) {
|
||||
console.log('time', time);
|
||||
this.value = time;
|
||||
this.showPicker = false;
|
||||
},
|
||||
onCancel() {
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="picker"
|
||||
:value="value"
|
||||
:label="$t('picker')"
|
||||
:placeholder="$t('placeholder')"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="$t('textColumns')"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
picker: '选择器',
|
||||
placeholder: '点击选择城市',
|
||||
textColumns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
},
|
||||
'en-US': {
|
||||
picker: 'Picker',
|
||||
placeholder: 'Select city',
|
||||
textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm(value) {
|
||||
this.value = value;
|
||||
this.showPicker = false;
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<demo-block :title="$t('title')">
|
||||
<van-form validate-first @sumbit="onSubmit" @failed="onFailed">
|
||||
<van-field
|
||||
v-model="value1"
|
||||
name="pattern"
|
||||
:label="$t('label')"
|
||||
:rules="[{ pattern, message: $t('message') }]"
|
||||
:placeholder="$t('pattern')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
name="validator"
|
||||
:label="$t('label')"
|
||||
:rules="[{ validator, message: $t('message') }]"
|
||||
:placeholder="$t('validator')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value3"
|
||||
name="asyncValidator"
|
||||
:label="$t('label')"
|
||||
:rules="[{ validator: asyncValidator, message: $t('message') }]"
|
||||
:placeholder="$t('asyncValidator')"
|
||||
/>
|
||||
<div style="margin: 16px 16px 0;">
|
||||
<van-button round block type="info" native-type="submit">
|
||||
{{ $t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
label: '文本',
|
||||
title: '校验规则',
|
||||
submit: '提交',
|
||||
message: '请输入正确内容',
|
||||
pattern: '正则校验',
|
||||
validator: '函数校验',
|
||||
validating: '验证中...',
|
||||
asyncValidator: '异步函数校验',
|
||||
},
|
||||
'en-US': {
|
||||
label: 'Label',
|
||||
title: 'Validate Rules',
|
||||
submit: 'Submit',
|
||||
message: 'Error message',
|
||||
pattern: 'Use pattern',
|
||||
validator: 'Use validator',
|
||||
validating: 'Validating...',
|
||||
asyncValidator: 'Use async validator',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
pattern: /\d{6}/,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
validator(val) {
|
||||
return val === '1234';
|
||||
},
|
||||
|
||||
asyncValidator(val) {
|
||||
return new Promise(resolve => {
|
||||
this.$toast.loading(this.$t('validating'));
|
||||
|
||||
setTimeout(() => {
|
||||
this.$toast.clear();
|
||||
resolve(val === '1234');
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
|
||||
onSubmit(values) {
|
||||
console.log('submit', values);
|
||||
},
|
||||
|
||||
onFailed(errorInfo) {
|
||||
console.log('failed', errorInfo);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<basic-usage />
|
||||
<validate-rules />
|
||||
<field-type />
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BasicUsage from './BasicUsage';
|
||||
import ValidateRules from './ValidateRules';
|
||||
import FieldType from './FieldType';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BasicUsage,
|
||||
FieldType,
|
||||
ValidateRules,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,159 @@
|
||||
import { createNamespace } from '../utils';
|
||||
|
||||
const [createComponent, bem] = createNamespace('form');
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
colon: Boolean,
|
||||
labelWidth: [Number, String],
|
||||
labelAlign: String,
|
||||
inputAlign: String,
|
||||
scrollToError: Boolean,
|
||||
validateFirst: Boolean,
|
||||
errorMessageAlign: String,
|
||||
validateTrigger: {
|
||||
type: String,
|
||||
default: 'onBlur',
|
||||
},
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
vanForm: this,
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
fields: [],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
validateSeq() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const errors = [];
|
||||
|
||||
this.fields
|
||||
.reduce(
|
||||
(promise, field) =>
|
||||
promise.then(() => {
|
||||
if (!errors.length) {
|
||||
return field.validate().then(error => {
|
||||
if (error) {
|
||||
errors.push(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
}),
|
||||
Promise.resolve()
|
||||
)
|
||||
.then(() => {
|
||||
if (errors.length) {
|
||||
reject(errors);
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
validateAll() {
|
||||
return new Promise((resolve, reject) => {
|
||||
Promise.all(this.fields.map(item => item.validate())).then(errors => {
|
||||
errors = errors.filter(item => item);
|
||||
|
||||
if (errors.length) {
|
||||
reject(errors);
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// @exposed-api
|
||||
validate(name) {
|
||||
if (name) {
|
||||
return this.validateField(name);
|
||||
}
|
||||
return this.validateFirst ? this.validateSeq() : this.validateAll();
|
||||
},
|
||||
|
||||
validateField(name) {
|
||||
const matched = this.fields.filter(item => item.name === name);
|
||||
|
||||
if (matched.length) {
|
||||
return new Promise((resolve, reject) => {
|
||||
matched[0].validate().then(error => {
|
||||
if (error) {
|
||||
reject(error);
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return Promise.reject();
|
||||
},
|
||||
|
||||
// @exposed-api
|
||||
resetValidation(name) {
|
||||
this.fields.forEach(item => {
|
||||
if (!name || item.name === name) {
|
||||
item.resetValidation();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// @exposed-api
|
||||
scrollToField(name) {
|
||||
this.fields.forEach(item => {
|
||||
if (item.name === name) {
|
||||
item.$el.scrollIntoView();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getValues() {
|
||||
return this.fields.reduce((form, field) => {
|
||||
form[field.name] = field.formValue;
|
||||
return form;
|
||||
}, {});
|
||||
},
|
||||
|
||||
onSubmit(event) {
|
||||
event.preventDefault();
|
||||
this.submit();
|
||||
},
|
||||
|
||||
// @exposed-api
|
||||
submit() {
|
||||
const values = this.getValues();
|
||||
|
||||
this.validate()
|
||||
.then(() => {
|
||||
this.$emit('submit', values);
|
||||
})
|
||||
.catch(errors => {
|
||||
this.$emit('failed', {
|
||||
values,
|
||||
errors,
|
||||
});
|
||||
|
||||
if (this.scrollToError) {
|
||||
this.scrollToField(errors[0].name);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<form class={bem()} onSubmit={this.onSubmit}>
|
||||
{this.slots()}
|
||||
</form>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,229 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>用户名</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="username" placeholder="用户名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>密码</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="password" name="password" placeholder="密码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
|
||||
提交
|
||||
</span></button></div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="pattern" placeholder="正则校验" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="validator" placeholder="函数校验" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="asyncValidator" placeholder="异步函数校验" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
|
||||
提交
|
||||
</span></button></div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>开关</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 20px;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>复选框</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-icon van-icon-success">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>复选框组</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div class="van-checkbox-group van-checkbox-group--horizontal">
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-checkbox__label">
|
||||
复选框 1
|
||||
</span>
|
||||
</div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-checkbox__label">
|
||||
复选框 2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>单选框</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div role="radiogroup" class="van-radio-group van-radio-group--horizontal">
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="van-radio van-radio--horizontal">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label">单选框 1</span>
|
||||
</div>
|
||||
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio van-radio--horizontal">
|
||||
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label">单选框 2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>步进器</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>评分</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div tabindex="0" role="radiogroup" class="van-rate">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>滑块</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar" style="width: 50%;">
|
||||
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
|
||||
<div class="van-slider__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文件上传</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
||||
<!----></i></div>
|
||||
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>选择器</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="picker" readonly="readonly" placeholder="点击选择城市" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>时间选择</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="datetimePicker" readonly="readonly" placeholder="点击选择时间" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区选择</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="area" readonly="readonly" placeholder="点击选择省市区" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>日历</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="calendar" readonly="readonly" placeholder="点击选择日期" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
|
||||
提交
|
||||
</span></button></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,18 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`failed event 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field van-field--error">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="A" class="van-field__control"></div>
|
||||
<div class="van-field__error-message">A failed</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field van-field--error">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="B" class="van-field__control"></div>
|
||||
<div class="van-field__error-message">B failed</div>
|
||||
</div>
|
||||
</div> <button type="submit" class="van-button van-button--default van-button--normal"></button>
|
||||
</form>
|
||||
`;
|
||||
@@ -0,0 +1,17 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`resetValidation method - reset one field 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="A" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field van-field--error">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="B" class="van-field__control"></div>
|
||||
<div class="van-field__error-message">B failed</div>
|
||||
</div>
|
||||
</div> <button type="submit" class="van-button van-button--default van-button--normal"></button>
|
||||
</form>
|
||||
`;
|
||||
@@ -0,0 +1,98 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`colon prop 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>Label:</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">Custom Label:</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`error-message-align prop 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
<div class="van-field__error-message van-field__error-message--right">Error</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`input-align prop 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control van-field__control--right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--right van-field__control--custom">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`label-align prop 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field van-field--label-right">
|
||||
<div class="van-cell__title van-field__label van-field__label--right"><span>Label</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field van-field--label-center">
|
||||
<div class="van-cell__title van-field__label van-field__label--center"><span>Label</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`label-width prop 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label" style="width: 5rem;"><span>Label</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label" style="width: 10vw;"><span>Label</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`validate-first prop 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field van-field--error">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="A" class="van-field__control"></div>
|
||||
<div class="van-field__error-message">A failed</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="B" class="van-field__control"></div>
|
||||
</div>
|
||||
</div> <button type="submit" class="van-button van-button--default van-button--normal"></button>
|
||||
</form>
|
||||
`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import { snapshotDemo } from '../../../test/demo';
|
||||
|
||||
snapshotDemo(Demo);
|
||||
@@ -0,0 +1,40 @@
|
||||
import { mountForm, submitForm, mountSimpleRulesForm } from './shared';
|
||||
|
||||
test('submit event', async () => {
|
||||
const onSubmit = jest.fn();
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field name="A" value="bar" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
methods: {
|
||||
onSubmit,
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
|
||||
expect(onSubmit).toHaveBeenCalledWith({ A: 'bar' });
|
||||
});
|
||||
|
||||
test('failed event', async () => {
|
||||
const onFailed = jest.fn();
|
||||
const wrapper = mountSimpleRulesForm({
|
||||
methods: {
|
||||
onFailed,
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [
|
||||
{ name: 'A', message: 'A failed' },
|
||||
{ name: 'B', message: 'B failed' },
|
||||
],
|
||||
values: { A: '', B: '' },
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,198 @@
|
||||
import { mountForm, submitForm } from './shared';
|
||||
|
||||
function mountFormWithChild({ template, data }) {
|
||||
const onSubmit = jest.fn();
|
||||
const onFailed = jest.fn();
|
||||
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form @submit="onSubmit" @failed="onFailed">
|
||||
<van-field name="A" :rules="[{ required: true, message: 'foo' }]">
|
||||
<template #input>${template}</template>
|
||||
</van-field>
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
data,
|
||||
methods: {
|
||||
onSubmit,
|
||||
onFailed,
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
wrapper,
|
||||
onSubmit,
|
||||
onFailed,
|
||||
};
|
||||
}
|
||||
|
||||
test('use switch', async () => {
|
||||
const { wrapper, onSubmit, onFailed } = mountFormWithChild({
|
||||
template: '<van-switch v-model="value" />',
|
||||
data() {
|
||||
return { value: false };
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ message: 'foo', name: 'A' }],
|
||||
values: { A: false },
|
||||
});
|
||||
|
||||
wrapper.setData({ value: true });
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onSubmit).toHaveBeenCalledWith({ A: true });
|
||||
});
|
||||
|
||||
test('use checkbox', async () => {
|
||||
const { wrapper, onSubmit, onFailed } = mountFormWithChild({
|
||||
template: '<van-checkbox v-model="value" />',
|
||||
data() {
|
||||
return { value: false };
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ message: 'foo', name: 'A' }],
|
||||
values: { A: false },
|
||||
});
|
||||
|
||||
wrapper.setData({ value: true });
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onSubmit).toHaveBeenCalledWith({ A: true });
|
||||
});
|
||||
|
||||
test('use checkbox-group', async () => {
|
||||
const { wrapper, onSubmit, onFailed } = mountFormWithChild({
|
||||
template: `
|
||||
<van-checkbox-group v-model="checkboxGroup">
|
||||
<van-checkbox name="1">1</van-checkbox>
|
||||
<van-checkbox name="2">2</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
`,
|
||||
data() {
|
||||
return { checkboxGroup: [] };
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ message: 'foo', name: 'A' }],
|
||||
values: { A: [] },
|
||||
});
|
||||
|
||||
wrapper.setData({ checkboxGroup: ['1'] });
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onSubmit).toHaveBeenCalledWith({ A: ['1'] });
|
||||
});
|
||||
|
||||
test('use radio', async () => {
|
||||
const { wrapper, onSubmit, onFailed } = mountFormWithChild({
|
||||
template: `
|
||||
<van-radio-group v-model="radio">
|
||||
<van-radio name="1">1</van-radio>
|
||||
<van-radio name="2">2</van-radio>
|
||||
</van-radio-group>
|
||||
`,
|
||||
data() {
|
||||
return { radio: '' };
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ message: 'foo', name: 'A' }],
|
||||
values: { A: '' },
|
||||
});
|
||||
|
||||
wrapper.setData({ radio: '1' });
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onSubmit).toHaveBeenCalledWith({ A: '1' });
|
||||
});
|
||||
|
||||
test('use stepper', async () => {
|
||||
const { wrapper, onSubmit, onFailed } = mountFormWithChild({
|
||||
template: '<van-stepper v-model="value" :min="0" />',
|
||||
data() {
|
||||
return { value: 0 };
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ message: 'foo', name: 'A' }],
|
||||
values: { A: 0 },
|
||||
});
|
||||
|
||||
wrapper.setData({ value: 1 });
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onSubmit).toHaveBeenCalledWith({ A: 1 });
|
||||
});
|
||||
|
||||
test('use rate', async () => {
|
||||
const { wrapper, onSubmit, onFailed } = mountFormWithChild({
|
||||
template: '<van-rate v-model="value" />',
|
||||
data() {
|
||||
return { value: 0 };
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ message: 'foo', name: 'A' }],
|
||||
values: { A: 0 },
|
||||
});
|
||||
|
||||
wrapper.setData({ value: 1 });
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onSubmit).toHaveBeenCalledWith({ A: 1 });
|
||||
});
|
||||
|
||||
test('use slider', async () => {
|
||||
const { wrapper, onSubmit, onFailed } = mountFormWithChild({
|
||||
template: '<van-slider v-model="value" />',
|
||||
data() {
|
||||
return { value: 0 };
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ message: 'foo', name: 'A' }],
|
||||
values: { A: 0 },
|
||||
});
|
||||
|
||||
wrapper.setData({ value: 50 });
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onSubmit).toHaveBeenCalledWith({ A: 50 });
|
||||
});
|
||||
|
||||
test('use uploader', async () => {
|
||||
const { wrapper, onSubmit, onFailed } = mountFormWithChild({
|
||||
template: '<van-uploader v-model="value" />',
|
||||
data() {
|
||||
return { value: [] };
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ message: 'foo', name: 'A' }],
|
||||
values: { A: [] },
|
||||
});
|
||||
|
||||
wrapper.setData({ value: [{ url: 'foo' }] });
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onSubmit).toHaveBeenCalledWith({ A: [{ url: 'foo' }] });
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
import { mountForm, submitForm } from './shared';
|
||||
|
||||
test('dynamic add/remove fileds', async () => {
|
||||
const onSubmit = jest.fn();
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field
|
||||
v-for="item in list"
|
||||
:key="item"
|
||||
:name="item"
|
||||
value=""
|
||||
/>
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
data() {
|
||||
return { list: ['A'] };
|
||||
},
|
||||
methods: {
|
||||
onSubmit,
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onSubmit).toHaveBeenCalledWith({ A: '' });
|
||||
|
||||
wrapper.setData({ list: ['A', 'B'] });
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onSubmit).toHaveBeenCalledWith({ A: '', B: '' });
|
||||
|
||||
wrapper.setData({ list: ['B'] });
|
||||
|
||||
await submitForm(wrapper);
|
||||
expect(onSubmit).toHaveBeenCalledWith({ B: '' });
|
||||
});
|
||||
@@ -0,0 +1,112 @@
|
||||
import { later, mockScrollIntoView } from '../../../test';
|
||||
import { mountForm, mountSimpleRulesForm, getSimpleRules } from './shared';
|
||||
|
||||
test('submit method', async () => {
|
||||
const onSubmit = jest.fn();
|
||||
|
||||
mountForm({
|
||||
template: `
|
||||
<van-form ref="form" @submit="onSubmit">
|
||||
<van-field name="A" value="bar" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
mounted() {
|
||||
this.$refs.form.submit();
|
||||
},
|
||||
methods: {
|
||||
onSubmit,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(onSubmit).toHaveBeenCalledWith({ A: 'bar' });
|
||||
});
|
||||
|
||||
test('validate method - validate all fields', done => {
|
||||
mountSimpleRulesForm({
|
||||
mounted() {
|
||||
this.$refs.form.validate().catch(err => {
|
||||
expect(err).toEqual([
|
||||
{ message: 'A failed', name: 'A' },
|
||||
{ message: 'B failed', name: 'B' },
|
||||
]);
|
||||
done();
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('validate method - validate one field and passed', done => {
|
||||
mountSimpleRulesForm({
|
||||
mounted() {
|
||||
this.$refs.form.validate('A').catch(err => {
|
||||
expect(err).toEqual({ message: 'A failed', name: 'A' });
|
||||
done();
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('validate method - validate one field and failed', done => {
|
||||
mountForm({
|
||||
template: `
|
||||
<van-form ref="form" @failed="onFailed">
|
||||
<van-field name="A" :rules="rulesA" value="123" />
|
||||
<van-field name="B" :rules="rulesB" value="" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
data: getSimpleRules,
|
||||
mounted() {
|
||||
this.$refs.form.validate('A').then(done);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('validate method - unexisted name', done => {
|
||||
mountSimpleRulesForm({
|
||||
mounted() {
|
||||
this.$refs.form.validate('unexisted').catch(done);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('resetValidation method - reset all fields', done => {
|
||||
const wrapper = mountSimpleRulesForm({
|
||||
mounted() {
|
||||
this.$refs.form.validate().catch(() => {
|
||||
this.$refs.form.resetValidation();
|
||||
const errors = wrapper.findAll('.van-field__error-message');
|
||||
expect(errors.length).toEqual(0);
|
||||
done();
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('resetValidation method - reset one field', done => {
|
||||
const wrapper = mountSimpleRulesForm({
|
||||
mounted() {
|
||||
this.$refs.form.validate().catch(() => {
|
||||
this.$refs.form.resetValidation('A');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
done();
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('scrollToField method', done => {
|
||||
const fn = mockScrollIntoView();
|
||||
mountSimpleRulesForm({
|
||||
mounted() {
|
||||
this.$refs.form.scrollToField('unknown');
|
||||
expect(fn).toHaveBeenCalledTimes(0);
|
||||
|
||||
this.$refs.form.scrollToField('A');
|
||||
expect(fn).toHaveBeenCalledTimes(1);
|
||||
done();
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,383 @@
|
||||
import { later, mockScrollIntoView } from '../../../test';
|
||||
import { mountForm, submitForm, getSimpleRules } from './shared';
|
||||
|
||||
test('rules prop - execute order', async () => {
|
||||
const onFailed = jest.fn();
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form @failed="onFailed">
|
||||
<van-field name="A" :rules="rules" value="123" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
rules: [
|
||||
{ required: true, message: 'A' },
|
||||
{ validator: val => val.length > 6, message: 'B' },
|
||||
{ validator: val => val !== 'foo', message: 'C' },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onFailed,
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ message: 'B', name: 'A' }],
|
||||
values: { A: '123' },
|
||||
});
|
||||
});
|
||||
|
||||
test('rules prop - pattern', async () => {
|
||||
const onFailed = jest.fn();
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form @failed="onFailed">
|
||||
<van-field name="A" :rules="rules" value="123" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
rules: [{ pattern: /\d{6}/, message: 'foo' }],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onFailed,
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ message: 'foo', name: 'A' }],
|
||||
values: { A: '123' },
|
||||
});
|
||||
});
|
||||
|
||||
test('rules prop - message function', async () => {
|
||||
const onFailed = jest.fn();
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form @failed="onFailed">
|
||||
<van-field name="A" :rules="rules" value="123" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
rules: [{ pattern: /\d{6}/, message: val => val }],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onFailed,
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ message: '123', name: 'A' }],
|
||||
values: { A: '123' },
|
||||
});
|
||||
});
|
||||
|
||||
test('rules prop - formatter', async () => {
|
||||
const onFailed = jest.fn();
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form @failed="onFailed">
|
||||
<van-field name="A" :rules="rules" value=" " />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
rules: [
|
||||
{
|
||||
message: 'foo',
|
||||
required: true,
|
||||
formatter: (val, rule) => {
|
||||
expect(rule.message).toEqual('foo');
|
||||
return val.trim();
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onFailed,
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ message: 'foo', name: 'A' }],
|
||||
values: { A: ' ' },
|
||||
});
|
||||
});
|
||||
|
||||
test('rules prop - async validator', async () => {
|
||||
const onFailed = jest.fn();
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form @failed="onFailed">
|
||||
<van-field name="A" :rules="rules" value="123" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
rules: [
|
||||
{
|
||||
validator: (value, rule) => {
|
||||
expect(value).toEqual('123');
|
||||
expect(typeof rule).toEqual('object');
|
||||
return new Promise(resolve => resolve(true));
|
||||
},
|
||||
message: 'should pass',
|
||||
},
|
||||
{
|
||||
validator: () => new Promise(resolve => resolve(false)),
|
||||
message: 'should fail',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onFailed,
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ message: 'should fail', name: 'A' }],
|
||||
values: { A: '123' },
|
||||
});
|
||||
});
|
||||
|
||||
test('validate-first prop', async () => {
|
||||
const onSubmit = jest.fn();
|
||||
const onFailed = jest.fn();
|
||||
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form validate-first @submit="onSubmit" @failed="onFailed">
|
||||
<van-field name="A" :rules="rulesA" :value="value" />
|
||||
<van-field name="B" :rules="rulesB" :value="value" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
...getSimpleRules(),
|
||||
value: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit,
|
||||
onFailed,
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ message: 'A failed', name: 'A' }],
|
||||
values: { A: '', B: '' },
|
||||
});
|
||||
|
||||
wrapper.setData({ value: 'foo' });
|
||||
await submitForm(wrapper);
|
||||
|
||||
expect(onSubmit).toHaveBeenCalledWith({ A: 'foo', B: 'foo' });
|
||||
});
|
||||
|
||||
test('colon prop', () => {
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form colon>
|
||||
<van-field label="Label" />
|
||||
<van-field>
|
||||
<template #label>Custom Label</template>
|
||||
</van-field>
|
||||
</van-form>
|
||||
`,
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('label-align prop', () => {
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form label-align="right">
|
||||
<van-field label="Label" />
|
||||
<van-field label="Label" label-align="center" />
|
||||
</van-form>
|
||||
`,
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('label-width prop', () => {
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form label-width="5rem">
|
||||
<van-field label="Label" />
|
||||
<van-field label="Label" label-width="10vw" />
|
||||
</van-form>
|
||||
`,
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('input-align prop', () => {
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form input-align="right">
|
||||
<van-field />
|
||||
<van-field>
|
||||
<template #input>
|
||||
<div />
|
||||
</template>
|
||||
</van-field>
|
||||
</van-form>
|
||||
`,
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('error-message-align prop', () => {
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form error-message-align="right">
|
||||
<van-field error-message="Error" />
|
||||
</van-form>
|
||||
`,
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('validate-trigger - onBlur', async () => {
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form ref="form">
|
||||
<van-field name="A" :rules="rulesA" value="" />
|
||||
</van-form>
|
||||
`,
|
||||
data: getSimpleRules,
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
|
||||
input.trigger('input');
|
||||
await later();
|
||||
expect(wrapper.contains('.van-field__error-message')).toBeFalsy();
|
||||
|
||||
input.trigger('blur');
|
||||
await later();
|
||||
expect(wrapper.contains('.van-field__error-message')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('validate-trigger - onChange', async () => {
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form validate-trigger="onChange" ref="form">
|
||||
<van-field v-model="value" name="A" :rules="rulesA" />
|
||||
</van-form>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
...getSimpleRules(),
|
||||
value: '',
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
|
||||
input.trigger('blur');
|
||||
await later();
|
||||
expect(wrapper.contains('.van-field__error-message')).toBeFalsy();
|
||||
|
||||
wrapper.setData({ value: '1' });
|
||||
await later();
|
||||
expect(wrapper.contains('.van-field__error-message')).toBeFalsy();
|
||||
|
||||
wrapper.setData({ value: '' });
|
||||
await later();
|
||||
expect(wrapper.contains('.van-field__error-message')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('validate-trigger - custom trigger in rules', async () => {
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form validate-trigger="none" ref="form">
|
||||
<van-field name="A" :rules="rulesA" :value="valueA" />
|
||||
<van-field name="B" :rules="rulesB" :value="valueB" />
|
||||
</van-form>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
valueA: '',
|
||||
valueB: '',
|
||||
rulesA: [
|
||||
{
|
||||
message: 'A',
|
||||
required: true,
|
||||
trigger: 'onChange',
|
||||
},
|
||||
],
|
||||
rulesB: [
|
||||
{
|
||||
message: 'B',
|
||||
required: true,
|
||||
trigger: 'onBlur',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const inputs = wrapper.findAll('input');
|
||||
|
||||
inputs.at(0).trigger('blur');
|
||||
wrapper.setData({ valueB: '1' });
|
||||
await later();
|
||||
wrapper.setData({ valueB: '' });
|
||||
await later();
|
||||
expect(wrapper.contains('.van-field__error-message')).toBeFalsy();
|
||||
|
||||
inputs.at(1).trigger('blur');
|
||||
wrapper.setData({ valueA: '1' });
|
||||
await later();
|
||||
wrapper.setData({ valueA: '' });
|
||||
await later();
|
||||
expect(
|
||||
wrapper.element.querySelectorAll('.van-field__error-message').length
|
||||
).toEqual(2);
|
||||
});
|
||||
|
||||
test('scroll-to-error prop', async () => {
|
||||
const fn = mockScrollIntoView();
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form scroll-to-error>
|
||||
<van-field name="A" :rules="rulesA" value="" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
data: getSimpleRules,
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
|
||||
expect(fn).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
@@ -0,0 +1,31 @@
|
||||
import { mount, later } from '../../../test';
|
||||
|
||||
export async function submitForm(wrapper) {
|
||||
wrapper.find('.van-button').trigger('click');
|
||||
return later();
|
||||
}
|
||||
|
||||
export function mountForm(options) {
|
||||
return mount(options, { attachToDocument: true });
|
||||
}
|
||||
|
||||
export function getSimpleRules() {
|
||||
return {
|
||||
rulesA: [{ required: true, message: 'A failed' }],
|
||||
rulesB: [{ required: true, message: 'B failed' }],
|
||||
};
|
||||
}
|
||||
|
||||
export function mountSimpleRulesForm(options) {
|
||||
return mountForm({
|
||||
template: `
|
||||
<van-form ref="form" @failed="onFailed">
|
||||
<van-field name="A" :rules="rulesA" value="" />
|
||||
<van-field name="B" :rules="rulesB" value="" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
data: getSimpleRules,
|
||||
...options,
|
||||
});
|
||||
}
|
||||
@@ -86,7 +86,7 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| safe-area-inset-bottom | 是否开启 [底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` |
|
||||
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` |
|
||||
|
||||
### GoodsActionIcon Props
|
||||
|
||||
@@ -108,7 +108,7 @@ export default {
|
||||
| text | 按钮文字 | *string* | - |
|
||||
| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | *string* | `default` |
|
||||
| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | *string* | - |
|
||||
| icon `v2.4.4` | 左侧 [图标名称](#/zh-CN/icon) 或图片链接 | *string* | - |
|
||||
| icon `v2.4.4` | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
|
||||
| disabled | 是否禁用按钮 | *boolean* | `false` | - |
|
||||
| loading | 是否显示为加载状态 | *boolean* | `false` | - |
|
||||
| url | 点击后跳转的链接地址 | *string* | - |
|
||||
|
||||
@@ -20,6 +20,7 @@ export default createComponent({
|
||||
dot: Boolean,
|
||||
text: String,
|
||||
icon: String,
|
||||
iconPrefix: String,
|
||||
info: [Number, String],
|
||||
},
|
||||
|
||||
@@ -87,6 +88,7 @@ export default createComponent({
|
||||
info={this.info}
|
||||
size={this.parent.iconSize}
|
||||
class={bem('icon')}
|
||||
classPrefix={this.iconPrefix}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
+2
-1
@@ -116,6 +116,7 @@ Vue.use(GridItem);
|
||||
|------|------|------|------|
|
||||
| text | Text | *string* | - |
|
||||
| icon | Icon name or URL | *string* | - |
|
||||
| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
|
||||
| dot `v2.2.1` | Whether to show red dot | *boolean* | `false` |
|
||||
| info `v2.2.1` | Content of the badge | *number \| string* | - |
|
||||
| url | Link URL | *string* | - |
|
||||
@@ -126,7 +127,7 @@ Vue.use(GridItem);
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when clicked | event: Event |
|
||||
| click | Triggered when clicked | *event: Event* |
|
||||
|
||||
### GridItem Slots
|
||||
|
||||
|
||||
@@ -133,7 +133,8 @@ Vue.use(GridItem);
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| text | 文字 | *string* | - |
|
||||
| icon | [图标名称](#/zh-CN/icon) 或图片链接 | *string* | - |
|
||||
| icon | [图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
|
||||
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
|
||||
| dot `v2.2.1` | 是否显示图标右上角小红点 | *boolean* | `false` |
|
||||
| info `v2.2.1` | 图标右上角徽标的内容 | *number \| string* | - |
|
||||
| url | 点击后跳转的链接地址 | *string* | - |
|
||||
@@ -144,7 +145,7 @@ Vue.use(GridItem);
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击格子时触发 | event: Event |
|
||||
| click | 点击格子时触发 | *event: Event* |
|
||||
|
||||
### GridItem Slots
|
||||
|
||||
|
||||
+1
-1
@@ -97,4 +97,4 @@ import 'vant/lib/icon/local.css';
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when click icon | event: Event |
|
||||
| click | Triggered when click icon | *event: Event* |
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user