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

Merge branch 'dev' of https://github.com/youzan/vant into dev

Browse Source
This commit is contained in:
陈嘉涵 2018-06-06 17:23:25 +08:00
commit f5c1b95af1
18 changed files with 253 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/dialog/dialog.vue
View File

@ -1,6 +1,6 @@
<template>
<transition name="van-dialog-bounce">
<div v-show="value" :class="b()">
<div v-show="value" :class="[b(), className]">
<div v-if="title" v-text="title" :class="b('header')" />
<div :class="b('content')" class="van-hairline">
<slot>
@ -49,6 +49,7 @@ export default create({
title: String,
message: String,
callback: Function,
className: [String, Object, Array],
beforeClose: Function,
confirmButtonText: String,
cancelButtonText: String,

7
packages/dialog/en-US.md
View File

@ -70,9 +70,10 @@ export default {
|-----------|-----------|-----------|-------------|
| title | Title | `String` | - |
| message | Message | `String` | - |
| showConfirmButton | Whether to show confirm button | `Boolean` | `true` |
| showCancelButton | Whether to show cancel button | `Boolean` | `false` |
| confirmButtonText | Confirm button text | `String` | `Confirm` |
| className | Custom className | `String | Array | Object` | - |
| showConfirmButton | Whether to show confirm button | `Boolean` | `true` |
| showCancelButton | Whether to show cancel button | `Boolean` | `false` |
| confirmButtonText | Confirm button text | `String` | `Confirm` |
| cancelButtonText | Cancel button test | `String` | `Cancel` |
| overlay | Whether to show overlay | `Boolean` | `true` |
| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` |

1
packages/dialog/index.js
View File

@ -34,6 +34,7 @@ Dialog.defaultOptions = {
title: '',
message: '',
overlay: true,
className: '',
lockScroll: true,
beforeClose: null,
confirmButtonText: '',

7
packages/dialog/zh-CN.md
View File

@ -71,9 +71,10 @@ export default {
|-----------|-----------|-----------|-------------|
| title | 标题 | `String` | - |
| message | 内容 | `String` | - |
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` |
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` |
| confirmButtonText | 确认按钮的文案 | `String` | `确认` |
| className | 自定义类名 | `String | Array | Object` | - |
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` |
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` |
| confirmButtonText | 确认按钮的文案 | `String` | `确认` |
| cancelButtonText | 取消按钮的文案 | `String` | `取消` |
| overlay | 是否展示蒙层 | `Boolean` | `true` |
| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` |

2
packages/field/en-US.md
View File

@ -114,7 +114,7 @@ Field support all native properties of input tag，such as `maxlength`、`placeh
| Attribute | Description | Type | Default |
|-----------|-----------|-----------|-------------|
| value | Field value | `String` | - |
| value | Field value | `String | Number` | - |
| label | Field label | `String` | - |
| type | Input type | `String` | `text` |
| disabled | Disable field | `Boolean` | `false` |

13
packages/field/index.vue
View File

@ -8,7 +8,7 @@
:class="b({
error,
disabled: $attrs.disabled,
'has-icon': hasIcon,
'has-icon': showIcon,
'min-height': type === 'textarea' && !autosize
})"
>
@ -35,8 +35,7 @@
:class="b('error-message')"
/>
<div
v-if="hasIcon"
v-show="$slots.icon || value"
v-if="showIcon"
:class="b('icon')"
@touchstart.prevent="onClickIcon"
>
@ -60,7 +59,7 @@ export default create({
inheritAttrs: false,
props: {
value: null,
value: [String, Number],
icon: String,
label: String,
error: Boolean,
@ -91,8 +90,8 @@ export default create({
},
computed: {
hasIcon() {
return this.$slots.icon || this.icon;
showIcon() {
return this.$slots.icon || (this.icon && this.value !== '' && this.isDef(this.value));
},
listeners() {
@ -117,7 +116,7 @@ export default create({
onKeypress(event) {
if (this.type === 'number') {
const { keyCode } = event;
const allowPoint = this.value.indexOf('.') === -1;
const allowPoint = String(this.value).indexOf('.') === -1;
const isValidKey = (keyCode >= 48 && keyCode <= 57) || (keyCode === 46 && allowPoint) || keyCode === 45;
if (!isValidKey) {
event.preventDefault();

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

@ -19,7 +19,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-cell-group van-hairline--top-bottom">
<div placeholder="请输入用户名" class="van-cell van-cell--required van-hairline van-field van-field--has-icon">
<div placeholder="请输入用户名" class="van-cell van-cell--required van-hairline van-field">
<!---->
<div class="van-cell__title"><span>用户名</span>
<!---->
@ -27,11 +27,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value">
<input type="text" placeholder="请输入用户名" value="" class="van-field__control">
<!---->
<div class="van-field__icon" style="display:none;">
<i class="van-icon van-icon-clear" style="color:undefined;">
<!---->
</i>
</div>
<!---->
<!---->
</div>
<!---->
@ -119,7 +115,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-cell-group van-hairline--top-bottom">
<div placeholder="请输入短信验证码" class="van-cell van-cell--center van-hairline van-field van-field--has-icon">
<div placeholder="请输入短信验证码" class="van-cell van-cell--center van-hairline van-field">
<!---->
<div class="van-cell__title"><span>短信验证码</span>
<!---->
@ -127,11 +123,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value">
<input type="text" placeholder="请输入短信验证码" value="" class="van-field__control">
<!---->
<div class="van-field__icon" style="display:none;">
<i class="van-icon van-icon-clear" style="color:undefined;">
<!---->
</i>
</div>
<!---->
</div>
<!---->
<div class="van-field__button">

1
packages/field/test/field.spec.js
View File

@ -14,6 +14,7 @@ test('click icon event', () => {
const onIconClick = jest.fn();
const wrapper = mount(Field, {
propsData: {
value: 'a',
icon: 'search',
onIconClick
}

2
packages/field/zh-CN.md
View File

@ -117,7 +117,7 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|-------------|
| label | 标签 | `String` | - |
| value | 当前输入的值 | `String` | - |
| value | 当前输入的值 | `String | Number` | - |
| type | 可设置为任意原生类型, 如 `number` `tel` `textarea` | `String` | `text` |
| disabled | 是否禁用输入框 | `Boolean` | `false` |
| error | 是否将输入内容标红 | `Boolean` | `false` |

29
packages/picker/en-US.md
View File

@ -156,18 +156,19 @@ Picker events will pass different parameters according to the columns are single
| defaultIndex | Default value index |
| className | ClassName for this column |
### Picker instance
You can get the picker instance in 'change' event, and
### Methods
| Method | Description |
|-----------|-----------|
| getValues() | Get current values of all columns |
| setValues(values) | Set current values of all columns |
| getIndexes() | Get current indexes of all columns |
| setIndexes(indexes) | Set current indexes of all columns |
| getColumnValue(columnIndex) | Get current value of the column |
| setColumnValue(columnIndex, value) | Set current value of the column |
| getColumnIndex(columnIndex) | Get current index of the column |
| setColumnIndex(columnIndex, optionIndex) | Set current index of the column |
| getColumnValues(columnIndex) | Get columns data of the column |
| setColumnValues(columnIndex, values) | Set columns data of the column |
Use ref to get picker instance and call instance methods
| Name | Attribute | Return value | Description |
|-----------|-----------|-----------|-------------|
| getValues | - | values | Get current values of all columns |
| setValues | values | - | Set current values of all columns |
| getIndexes | - | indexes | Get current indexes of all columns |
| setIndexes | indexes | - | Set current indexes of all columns |
| getColumnValue | columnIndex | value | Get current value of the column |
| setColumnValue | columnIndex, value | - | Set current value of the column |
| getColumnIndex | columnIndex | optionIndex | Get current index of the column |
| setColumnIndex | columnIndex, optionIndex | - | Set current index of the column |
| getColumnValues | columnIndex | values | Get columns data of the column |
| setColumnValue | columnIndex, values | - | Set columns data of the column |

29
packages/picker/zh-CN.md
View File

@ -159,18 +159,19 @@ Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
| defaultIndex | 初始选中项的索引，默认为 0 |
| className | 为对应列添加额外的`class` |
### Picker 实例
在`change`事件中，可以获取到`picker`实例，通过实例方法可以灵活控制 Picker 内容
### 方法
| 函数 | 说明 |
|-----------|-----------|
| getValues() | 获取所有列选中的值，返回一个数组 |
| setValues(values) | 设置所有列选中的值 |
| getIndexes() | 获取所有列选中值对应的索引，返回一个数组 |
| setIndexes(indexes) | 设置所有列选中值对应的索引 |
| getColumnValue(columnIndex) | 获取对应列选中的值 |
| setColumnValue(columnIndex, value) | 设置对应列选中的值 |
| getColumnIndex(columnIndex) | 获取对应列选中项的索引 |
| setColumnIndex(columnIndex, optionIndex) | 设置对应列选中项的索引 |
| getColumnValues(columnIndex) | 获取对应列中所有选项 |
| setColumnValues(columnIndex, values) | 设置对应列中所有选项 |
通过 ref 可以获取到 picker 实例并调用实例方法
| 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------|
| getValues | - | values | 获取所有列选中的值 |
| setValues | values | - | 设置所有列选中的值 |
| getIndexes | - | indexes | 获取所有列选中值对应的索引 |
| setIndexes | indexes | - | 设置所有列选中值对应的索引 |
| getColumnValue | columnIndex | value | 获取对应列选中的值 |
| setColumnValue | columnIndex, value | - | 设置对应列选中的值 |
| getColumnIndex | columnIndex | optionIndex | 获取对应列选中项的索引 |
| setColumnIndex | columnIndex, optionIndex | - | 设置对应列选中项的索引 |
| getColumnValues | columnIndex | values | 获取对应列中所有选项 |
| setColumnValue | columnIndex, values | - | 设置对应列中所有选项 |

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

@ -7,17 +7,13 @@ exports[`renders demo correctly 1`] = `
<i class="van-icon van-icon-search" style="color:undefined;">
<!---->
</i>
<div placeholder="请输入商品名称" class="van-cell van-field van-field--has-icon">
<div placeholder="请输入商品名称" class="van-cell van-field">
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<input type="search" placeholder="请输入商品名称" value="" class="van-field__control">
<!---->
<div class="van-field__icon" style="display:none;">
<i class="van-icon van-icon-clear" style="color:undefined;">
<!---->
</i>
</div>
<!---->
<!---->
</div>
<!---->
@ -31,17 +27,13 @@ exports[`renders demo correctly 1`] = `
<i class="van-icon van-icon-search" style="color:undefined;">
<!---->
</i>
<div placeholder="请输入商品名称" class="van-cell van-field van-field--has-icon">
<div placeholder="请输入商品名称" class="van-cell van-field">
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<input type="search" placeholder="请输入商品名称" value="" class="van-field__control">
<!---->
<div class="van-field__icon" style="display:none;">
<i class="van-icon van-icon-clear" style="color:undefined;">
<!---->
</i>
</div>
<!---->
<!---->
</div>
<!---->
@ -57,17 +49,13 @@ exports[`renders demo correctly 1`] = `
<i class="van-icon van-icon-search" style="color:undefined;">
<!---->
</i>
<div class="van-cell van-field van-field--has-icon">
<div class="van-cell van-field">
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<input type="search" value="" class="van-field__control">
<!---->
<div class="van-field__icon" style="display:none;">
<i class="van-icon van-icon-clear" style="color:undefined;">
<!---->
</i>
</div>
<!---->
<!---->
</div>
<!---->

8
packages/sku/en-US.md
View File

@ -111,9 +111,11 @@ Vue.use(Sku);
### Methods
| Method | Description |
|-----------|-----------|
| getSkuData() | Get current sku data |
Use ref to get sku instance and call instance methods
| Name | Attribute | Return value | Description |
|-----------|-----------|-----------|-------------|
| getSkuData | - | skuData | Get current skuData |
### Slot

9
packages/sku/zh-CN.md
View File

@ -112,11 +112,14 @@ Vue.use(Sku);
### 方法
| 函数 | 说明 |
|-----------|-----------|
| getSkuData() | 获取当前 skuData |
通过 ref 可以获取到 sku 实例并调用实例方法
| 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------|
| getSkuData | - | skuData | 获取当前 skuData |
### Slot
Sku 组件默认划分好了若干区块，这些区块都定义成了 slot，可以按需进行替换。区块顺序见下表：
| 名称 | 说明 |

8
packages/swipe/en-US.md
View File

@ -94,3 +94,11 @@ export default {
| Event | Description | Arguments |
|-----------|-----------|-----------|
| change | Triggered when current swipe change | index: index of current swipe |
### Methods
Use ref to get swipe instance and call instance methods
| Name | Attribute | Return value | Description |
|-----------|-----------|-----------|-------------|
| swipeTo | index: 目标位置的索引 | void | 滚动到目标位置 |

12
packages/swipe/index.vue
View File

@ -90,6 +90,8 @@ export default create({
autoplay(autoplay) {
if (!autoplay) {
this.clear();
} else {
this.autoPlay();
}
}
},
@ -206,6 +208,15 @@ export default create({
this.offset = offset - this.active * this.size;
},
swipeTo(index) {
this.swiping = true;
this.correctPosition();
setTimeout(() => {
this.swiping = false;
this.move(index % this.count - this.active);
}, 30);
},
correctPosition() {
if (this.active <= -1) {
this.move(this.count);
@ -221,6 +232,7 @@ export default create({
autoPlay() {
const { autoplay } = this;
if (autoplay && this.count > 1) {
this.clear();
this.timer = setTimeout(() => {

154
packages/swipe/test/index.spec.js Normal file
View File

@ -0,0 +1,154 @@
import Swipe from '..';
import SwipeItem from '../../swipe-item';
import { mount } from '@vue/test-utils';
import { triggerDrag } from '../../../test/utils';
const Component = {
template: `
<swipe ref="swipe" v-bind="$props">
<swipe-item :style="style">1</swipe-item>
<swipe-item :style="style">2</swipe-item>
<swipe-item :style="style">3</swipe-item>
</swipe>
`,
components: {
Swipe,
SwipeItem
},
props: {
vertical: Boolean,
loop: {
type: Boolean,
default: true
},
touchable: {
type: Boolean,
default: true
},
autoplay: {
type: Number,
default: 0
},
initialSwipe: {
type: Number,
default: 0
}
},
data() {
return {
style: {
width: '100px',
height: '100px'
}
};
}
};
test('autoplay', done => {
const wrapper = mount(Component, {
propsData: {
autoplay: 20
}
});
const { swipe } = wrapper.vm.$refs;
setTimeout(() => {
expect(swipe.active).toEqual(1);
wrapper.setData({ autoplay: 0 });
setTimeout(() => {
expect(swipe.active).toEqual(1);
wrapper.setData({ autoplay: 20 });
setTimeout(() => {
expect(swipe.active).toEqual(2);
wrapper.destroy();
done();
}, 60);
}, 60);
}, 60);
});
test('swipeTo', done => {
const wrapper = mount(Component);
const { swipe } = wrapper.vm.$refs;
swipe.swipeTo(2);
setTimeout(() => {
expect(swipe.active).toEqual(2);
done();
}, 30);
});
test('initial swipe', () => {
const wrapper = mount(Component);
const { swipe } = wrapper.vm.$refs;
expect(swipe.active).toEqual(0);
wrapper.setProps({ initialSwipe: 2 });
expect(swipe.active).toEqual(2);
});
test('vertical swipe', () => {
const wrapper = mount(Component, {
propsData: {
vertical: true
}
});
const { swipe } = wrapper.vm.$refs;
const track = wrapper.find('.van-swipe__track');
triggerDrag(track, 0, -100);
expect(swipe.active).toEqual(1);
});
test('untouchable', () => {
const wrapper = mount(Component, {
propsData: {
touchable: false
}
});
const { swipe } = wrapper.vm.$refs;
const track = wrapper.find('.van-swipe__track');
triggerDrag(track, 100, 0);
expect(swipe.active).toEqual(0);
});
test('loop', () => {
const wrapper = mount(Component);
const { swipe } = wrapper.vm.$refs;
const track = wrapper.find('.van-swipe__track');
triggerDrag(track, -100, 0);
expect(swipe.active).toEqual(1);
triggerDrag(track, -100, 0);
expect(swipe.active).toEqual(2);
triggerDrag(track, -100, 0);
expect(swipe.active).toEqual(3);
triggerDrag(track, -100, 0);
expect(swipe.active).toEqual(1);
triggerDrag(track, 100, 0);
expect(swipe.active).toEqual(0);
triggerDrag(track, 100, 0);
expect(swipe.active).toEqual(-1);
triggerDrag(track, 100, 0);
expect(swipe.active).toEqual(1);
});
test('not loop', () => {
const wrapper = mount(Component, {
propsData: {
loop: false
}
});
const { swipe } = wrapper.vm.$refs;
const track = wrapper.find('.van-swipe__track');
triggerDrag(track, -100, 0);
expect(swipe.active).toEqual(1);
triggerDrag(track, -100, 0);
expect(swipe.active).toEqual(2);
triggerDrag(track, -100, 0);
expect(swipe.active).toEqual(2);
});

8
packages/swipe/zh-CN.md
View File

@ -94,3 +94,11 @@ export default {
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| change | 每一页轮播结束后触发 | index, 当前页的索引 |
### 方法
通过 ref 可以获取到 swipe 实例并调用实例方法
| 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------|
| swipeTo | index: 目标位置的索引 | void | 滚动到目标位置 |