mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge remote-tracking branch 'upstream/dev' into dev
This commit is contained in:
niunai
commit
4bef267d02
@ -1,9 +1,26 @@
|
|||||||
## 更新日志
|
## 更新日志
|
||||||
|
|
||||||
|
## [v0.8.5](https://github.com/youzan/vant/tree/v0.8.5) (2017-08-21)
|
||||||
|
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.4...v0.8.5)
|
||||||
|
|
||||||
|
**非兼容更新和新特性:**
|
||||||
|
|
||||||
|
- Doc: add usage guide && top progress [\#83](https://github.com/youzan/vant/pull/83) ([chenjiahan](https://github.com/chenjiahan))
|
||||||
|
|
||||||
|
**修复:**
|
||||||
|
|
||||||
|
- Popup: not preventScroll by default [\#84](https://github.com/youzan/vant/pull/84) ([chenjiahan](https://github.com/chenjiahan))
|
||||||
|
- fix: swipe sometimes will change to drag image [\#81](https://github.com/youzan/vant/pull/81) ([pangxie1991](https://github.com/pangxie1991))
|
||||||
|
|
||||||
|
**处理的 Issue:**
|
||||||
|
|
||||||
|
- Href link does not work [\#82](https://github.com/youzan/vant/issues/82)
|
||||||
|
- Swipe image not displayed [\#79](https://github.com/youzan/vant/issues/79)
|
||||||
|
|
||||||
## [v0.8.4](https://github.com/youzan/vant/tree/v0.8.4) (2017-08-18)
|
## [v0.8.4](https://github.com/youzan/vant/tree/v0.8.4) (2017-08-18)
|
||||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.3...v0.8.4)
|
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.3...v0.8.4)
|
||||||
|
|
||||||
**合并的 Pull Request (可能有不兼容改动):**
|
**修复:**
|
||||||
|
|
||||||
- fix: field 计算autosize，需要nextTick [\#78](https://github.com/youzan/vant/pull/78) ([pangxie1991](https://github.com/pangxie1991))
|
- fix: field 计算autosize，需要nextTick [\#78](https://github.com/youzan/vant/pull/78) ([pangxie1991](https://github.com/pangxie1991))
|
||||||
|
|
||||||
|
|||||||
@ -5,15 +5,16 @@ export default {
|
|||||||
minHour: 10,
|
minHour: 10,
|
||||||
maxHour: 20,
|
maxHour: 20,
|
||||||
minDate: new Date(),
|
minDate: new Date(),
|
||||||
currentDate1: null,
|
maxDate: new Date(2019, 10, 1),
|
||||||
|
currentDate1: new Date(2018, 0, 1),
|
||||||
currentDate2: null,
|
currentDate2: null,
|
||||||
currentDate3: null
|
currentDate3: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
handlePickerChange(picker, values) {
|
handlePickerChange(picker) {
|
||||||
console.log(values);
|
console.log(picker);
|
||||||
},
|
},
|
||||||
handlePickerCancel() {
|
handlePickerCancel() {
|
||||||
console.log('picker cancel');
|
console.log('picker cancel');
|
||||||
@ -43,10 +44,10 @@ Vue.component(DatetimePicker.name, DatetimePicker);
|
|||||||
<van-datetime-picker
|
<van-datetime-picker
|
||||||
v-model="currentDate1"
|
v-model="currentDate1"
|
||||||
type="datetime"
|
type="datetime"
|
||||||
format="yyyy.mm.dd hh时 mm分"
|
|
||||||
:min-hour="minHour"
|
:min-hour="minHour"
|
||||||
:max-hour="maxHour"
|
:max-hour="maxHour"
|
||||||
:min-date="minDate"
|
:min-date="minDate"
|
||||||
|
:max-date="maxDate"
|
||||||
@change="handlePickerChange">
|
@change="handlePickerChange">
|
||||||
</van-datetime-picker>
|
</van-datetime-picker>
|
||||||
|
|
||||||
@ -57,13 +58,14 @@ export default {
|
|||||||
minHour: 10,
|
minHour: 10,
|
||||||
maxHour: 20,
|
maxHour: 20,
|
||||||
minDate: new Date(),
|
minDate: new Date(),
|
||||||
currentDate: null
|
maxDate: new Date(2019, 10, 1),
|
||||||
|
currentDate: new Date(2018, 0, 1)
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
handlePickerChange(picker, values) {
|
handlePickerChange(picker) {
|
||||||
picker.setColumnValues(1, citys[values[0]]);
|
console.log(picker);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -78,7 +80,6 @@ export default {
|
|||||||
<van-datetime-picker
|
<van-datetime-picker
|
||||||
v-model="currentDate2"
|
v-model="currentDate2"
|
||||||
type="date"
|
type="date"
|
||||||
format="yyyy.mm.dd hh时 mm分"
|
|
||||||
:min-hour="minHour"
|
:min-hour="minHour"
|
||||||
:max-hour="maxHour"
|
:max-hour="maxHour"
|
||||||
:min-date="minDate"
|
:min-date="minDate"
|
||||||
@ -94,7 +95,6 @@ export default {
|
|||||||
<van-datetime-picker
|
<van-datetime-picker
|
||||||
v-model="currentDate3"
|
v-model="currentDate3"
|
||||||
type="time"
|
type="time"
|
||||||
format="yyyy.mm.dd hh时 mm分"
|
|
||||||
:min-hour="minHour"
|
:min-hour="minHour"
|
||||||
:max-hour="maxHour"
|
:max-hour="maxHour"
|
||||||
:min-date="minDate"
|
:min-date="minDate"
|
||||||
@ -109,19 +109,11 @@ export default {
|
|||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
|
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
|
||||||
| itemHeight | 选中元素区高度 | Number | 44 | |
|
| type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' |
|
||||||
| columns | 对象数组，配置每一列显示的数据 | Array | | |
|
| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | |
|
||||||
| showToolbar | 是否在组件顶部显示一个toolbar | Boolean | true | |
|
| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | |
|
||||||
|
| minHour | 可选的最小小时 | Number | 0 | |
|
||||||
### columns
|
| maxHour | 可选的最大小时 | Number | 23 | |
|
||||||
|
|
||||||
`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
|
|
||||||
|
|
||||||
| key | 说明 |
|
|
||||||
|-----------|-----------|
|
|
||||||
| values | 列中对应的备选值 |
|
|
||||||
| defaultIndex | 初始选中值的索引，默认为0 |
|
|
||||||
| className | 为对应列添加特殊的`class` |
|
|
||||||
|
|
||||||
### Event
|
### Event
|
||||||
|
|
||||||
|
|||||||
@ -9,33 +9,29 @@
|
|||||||
<script>
|
<script>
|
||||||
import { Dialog } from 'packages/index';
|
import { Dialog } from 'packages/index';
|
||||||
|
|
||||||
|
const message = '弹窗内容';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
handleAlertClick() {
|
onClickAlert() {
|
||||||
Dialog.alert({
|
Dialog.alert({
|
||||||
title: 'alert标题',
|
title: '标题',
|
||||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
message
|
||||||
}).then((action) => {
|
|
||||||
console.log(action);
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
handleAlert2Click() {
|
onClickAlert2() {
|
||||||
Dialog.alert({
|
Dialog.alert({
|
||||||
message: '无标题alert'
|
message
|
||||||
}).then((action) => {
|
|
||||||
console.log(action);
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
handleConfirmClick() {
|
onClickConfirm() {
|
||||||
Dialog.confirm({
|
Dialog.confirm({
|
||||||
title: 'confirm标题',
|
title: '标题',
|
||||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
message
|
||||||
}).then((action) => {
|
}).catch(action => {
|
||||||
console.log(action);
|
console.log(action);
|
||||||
}, (error) => {
|
|
||||||
console.log(error);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -46,8 +42,6 @@ export default {
|
|||||||
|
|
||||||
### 使用指南
|
### 使用指南
|
||||||
|
|
||||||
`Dialog`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它，它接受一个数组作为参数，数组中的每一项对应了图片链接。
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { Dialog } from 'vant';
|
import { Dialog } from 'vant';
|
||||||
```
|
```
|
||||||
@ -56,30 +50,30 @@ import { Dialog } from 'vant';
|
|||||||
|
|
||||||
#### 消息提示
|
#### 消息提示
|
||||||
|
|
||||||
用于提示一些消息，只包含一个确认按钮。
|
用于提示一些消息，只包含一个确认按钮
|
||||||
|
|
||||||
:::demo 消息提示
|
:::demo 消息提示
|
||||||
```html
|
```html
|
||||||
<van-button @click="handleAlertClick">alert</van-button>
|
<van-button @click="onClickAlert">Alert</van-button>
|
||||||
<van-button @click="handleAlert2Click">无标题alert</van-button>
|
<van-button @click="onClickAlert2">无标题 Alert</van-button>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
handleAlertClick() {
|
onClickAlert() {
|
||||||
Dialog.alert({
|
Dialog.alert({
|
||||||
title: 'alert标题',
|
title: '标题',
|
||||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
message: '弹窗内容'
|
||||||
}).then((action) => {
|
}).then(() => {
|
||||||
console.log(action);
|
// on close
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
handleAlert2Click() {
|
onClickAlert2() {
|
||||||
Dialog.alert({
|
Dialog.alert({
|
||||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
message: '弹窗内容'
|
||||||
}).then((action) => {
|
}).then(() => {
|
||||||
console.log(action);
|
// on close
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -90,23 +84,23 @@ export default {
|
|||||||
|
|
||||||
#### 消息确认
|
#### 消息确认
|
||||||
|
|
||||||
用于确认消息，包含取消和确认按钮。
|
用于确认消息，包含取消和确认按钮
|
||||||
|
|
||||||
:::demo 消息确认
|
:::demo 消息确认
|
||||||
```html
|
```html
|
||||||
<van-button @click="handleConfirmClick">confirm</van-button>
|
<van-button @click="onClickConfirm">Confirm</van-button>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
handleConfirmClick() {
|
onClickConfirm() {
|
||||||
Dialog.confirm({
|
Dialog.confirm({
|
||||||
title: 'confirm标题',
|
title: '标题',
|
||||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
message: '弹窗内容'
|
||||||
}).then((action) => {
|
}).then(() => {
|
||||||
console.log(action);
|
// on confirm
|
||||||
}, (error) => {
|
}).catch(() => {
|
||||||
console.log(error);
|
// on cancel
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -117,19 +111,22 @@ export default {
|
|||||||
|
|
||||||
### 方法
|
### 方法
|
||||||
|
|
||||||
#### Dialog.alert(options)
|
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||||
|
|-----------|-----------|-----------|-------------|
|
||||||
消息提示时使用该方法。
|
| Dialog.alert | options | `Promise` | 展示消息提示弹窗 |
|
||||||
|
| Dialog.confirm | options | `Promise` | 展示消息确认弹窗 |
|
||||||
#### Dialog.confirm(options)
|
| Dialog.close | - | `void` | 关闭弹窗 |
|
||||||
|
|
||||||
消息确认时使用该方法。
|
|
||||||
|
|
||||||
### Options
|
### Options
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| title | 标题 | `string` | | |
|
| title | 标题 | `String` | | |
|
||||||
| message | 内容 | `string` | | |
|
| message | 内容 | `String` | | |
|
||||||
| confirmButtonText | 确认按钮的文案 | `string` | `确认` | |
|
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | |
|
||||||
| cancelButtonText | 取消按钮的文案 | `string` | `取消` | |
|
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | |
|
||||||
|
| confirmButtonText | 确认按钮的文案 | `String` | `确认` | |
|
||||||
|
| cancelButtonText | 取消按钮的文案 | `String` | `取消` | |
|
||||||
|
| overlay | 是否展示蒙层 | `Boolean` | `true` | |
|
||||||
|
| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | |
|
||||||
|
| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | |
|
||||||
|
|||||||
@ -1,13 +1,11 @@
|
|||||||
<style>
|
<style>
|
||||||
.demo-progress {
|
.demo-progress {
|
||||||
&__wrapper {
|
.van-progress {
|
||||||
padding: 5px;
|
|
||||||
margin: 20px 10px;
|
margin: 20px 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
## Progress 进度条
|
## Progress 进度条
|
||||||
|
|
||||||
### 使用指南
|
### 使用指南
|
||||||
@ -21,57 +19,37 @@ Vue.component(Progress.name, Progress);
|
|||||||
|
|
||||||
#### 基础用法
|
#### 基础用法
|
||||||
|
|
||||||
默认情况进度条为蓝色，使用`percentage`属性来设置当前进度。
|
进度条默认为蓝色，使用`percentage`属性来设置当前进度
|
||||||
|
|
||||||
:::demo 基础用法
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<div class="demo-progress__wrapper">
|
<van-progress :percentage="0"></van-progress>
|
||||||
<van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
|
<van-progress :percentage="46"></van-progress>
|
||||||
</div>
|
<van-progress :percentage="100"></van-progress>
|
||||||
<div class="demo-progress__wrapper">
|
|
||||||
<van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
|
|
||||||
</div>
|
|
||||||
<div class="demo-progress__wrapper">
|
|
||||||
<van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
|
|
||||||
</div>
|
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
#### Inactive
|
#### 进度条置灰
|
||||||
|
|
||||||
是否置灰进度条，一般用于进度条被取消时。
|
:::demo 进度条置灰
|
||||||
|
|
||||||
:::demo Inactive
|
|
||||||
```html
|
```html
|
||||||
<div class="demo-progress__wrapper">
|
<van-progress inactive :percentage="0"></van-progress>
|
||||||
<van-progress class="demo-progress__demo1" inactive :percentage="0"></van-progress>
|
<van-progress inactive :percentage="46"></van-progress>
|
||||||
</div>
|
<van-progress inactive :percentage="100"></van-progress>
|
||||||
<div class="demo-progress__wrapper">
|
|
||||||
<van-progress class="demo-progress__demo2" inactive :percentage="46"></van-progress>
|
|
||||||
</div>
|
|
||||||
<div class="demo-progress__wrapper">
|
|
||||||
<van-progress class="demo-progress__demo1" inactive :percentage="100"></van-progress>
|
|
||||||
</div>
|
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
#### 自定义颜色和文字
|
#### 样式定制
|
||||||
|
|
||||||
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
|
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
|
||||||
|
|
||||||
:::demo 自定义颜色和文字
|
:::demo 样式定制
|
||||||
```html
|
```html
|
||||||
<div class="demo-progress__wrapper">
|
<van-progress pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
|
||||||
<van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
|
<van-progress pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
|
||||||
</div>
|
<van-progress pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
|
||||||
<div class="demo-progress__wrapper">
|
|
||||||
<van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
|
|
||||||
</div>
|
|
||||||
<div class="demo-progress__wrapper">
|
|
||||||
<van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
|
|
||||||
</div>
|
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -79,9 +57,8 @@ Vue.component(Progress.name, Progress);
|
|||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| inactive | 是否置灰 | `boolean` | `false` | `true`, `false` |
|
| inactive | 是否置灰 | `boolean` | `false` | |
|
||||||
| percentage | 进度百分比 | `number` | `false` | `0-100` |
|
| percentage | 进度百分比 | `number` | `false` | `0-100` |
|
||||||
| pivotText | 文字显示 | `string` | 百分比文字 | - |
|
| pivotText | 文字显示 | `string` | 百分比文字 | - |
|
||||||
| color | 进度条颜色 | `string` | `#38f` | hexvalue |
|
| color | 进度条颜色 | `string` | `#38f` | hexvalue |
|
||||||
| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |
|
| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |
|
||||||
|
|
||||||
|
|||||||
@ -26,21 +26,21 @@ module.exports = {
|
|||||||
"title": "快速上手",
|
"title": "快速上手",
|
||||||
noExample: true
|
noExample: true
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"title": "业务组件",
|
||||||
|
"link": "/zanui/captain/component/quickstart"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "/changelog",
|
"path": "/changelog",
|
||||||
"title": "更新日志",
|
"title": "更新日志",
|
||||||
noExample: true
|
noExample: true
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "业务组件",
|
|
||||||
"link": "/zanui/captain/component/quickstart"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "组件列表",
|
"name": "组件",
|
||||||
"showInMobile": true,
|
"showInMobile": true,
|
||||||
"groups": [
|
"groups": [
|
||||||
{
|
{
|
||||||
|
|||||||
@ -5,6 +5,7 @@ import routes from './router.config';
|
|||||||
import ZanUI from 'packages/index';
|
import ZanUI from 'packages/index';
|
||||||
import ZanDoc from 'zan-doc';
|
import ZanDoc from 'zan-doc';
|
||||||
import 'packages/vant-css/src/index.css';
|
import 'packages/vant-css/src/index.css';
|
||||||
|
import 'zan-doc/src/helper/touch-simulator';
|
||||||
|
|
||||||
import DemoList from './components/demo-list.vue';
|
import DemoList from './components/demo-list.vue';
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vant",
|
"name": "vant",
|
||||||
"version": "0.8.5",
|
"version": "0.8.6",
|
||||||
"description": "有赞vue wap组件库",
|
"description": "有赞vue wap组件库",
|
||||||
"main": "lib/vant.js",
|
"main": "lib/vant.js",
|
||||||
"style": "lib/vant-css/index.css",
|
"style": "lib/vant-css/index.css",
|
||||||
@ -26,6 +26,7 @@
|
|||||||
"test": "karma start test/unit/karma.conf.js --single-run",
|
"test": "karma start test/unit/karma.conf.js --single-run",
|
||||||
"test:coverage": "open test/unit/coverage/lcov-report/index.html",
|
"test:coverage": "open test/unit/coverage/lcov-report/index.html",
|
||||||
"test:watch": "karma start test/unit/karma.conf.js",
|
"test:watch": "karma start test/unit/karma.conf.js",
|
||||||
|
"test:single": "node ./test/unit/selector.js",
|
||||||
"release": "npm run bootstrap && sh build/release.sh"
|
"release": "npm run bootstrap && sh build/release.sh"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
@ -66,7 +67,7 @@
|
|||||||
"cross-env": "^5.0.5",
|
"cross-env": "^5.0.5",
|
||||||
"css-loader": "^0.28.5",
|
"css-loader": "^0.28.5",
|
||||||
"eslint-plugin-vue": "^2.1.0",
|
"eslint-plugin-vue": "^2.1.0",
|
||||||
"extract-text-webpack-plugin": "2.1.2",
|
"extract-text-webpack-plugin": "2.0.0",
|
||||||
"felint": "^0.5.0-alpha.3",
|
"felint": "^0.5.0-alpha.3",
|
||||||
"file-loader": "^0.11.2",
|
"file-loader": "^0.11.2",
|
||||||
"file-save": "^0.2.0",
|
"file-save": "^0.2.0",
|
||||||
@ -108,7 +109,7 @@
|
|||||||
"vue": "^2.4.2",
|
"vue": "^2.4.2",
|
||||||
"vue-html-loader": "^1.2.4",
|
"vue-html-loader": "^1.2.4",
|
||||||
"vue-loader": "^13.0.4",
|
"vue-loader": "^13.0.4",
|
||||||
"vue-markdown-loader": "^2.0.0",
|
"vue-markdown-loader": "^2.1.0",
|
||||||
"vue-router": "^2.7.0",
|
"vue-router": "^2.7.0",
|
||||||
"vue-sfc-compiler": "^0.0.2",
|
"vue-sfc-compiler": "^0.0.2",
|
||||||
"vue-style-loader": "^3.0.0",
|
"vue-style-loader": "^3.0.0",
|
||||||
@ -116,6 +117,6 @@
|
|||||||
"webpack": "^3.5.5",
|
"webpack": "^3.5.5",
|
||||||
"webpack-dev-server": "^2.7.1",
|
"webpack-dev-server": "^2.7.1",
|
||||||
"webpack-merge": "^4.1.0",
|
"webpack-merge": "^4.1.0",
|
||||||
"zan-doc": "^0.2.1"
|
"zan-doc": "^0.2.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -28,8 +28,8 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Popup from '../mixins/popup';
|
import Popup from '../mixins/popup';
|
||||||
import VanIcon from '../icon';
|
import Icon from '../icon';
|
||||||
import VanLoading from '../loading';
|
import Loading from '../loading';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-actionsheet',
|
name: 'van-actionsheet',
|
||||||
@ -37,8 +37,8 @@ export default {
|
|||||||
mixins: [Popup],
|
mixins: [Popup],
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
[VanIcon.name]: VanIcon,
|
[Icon.name]: Icon,
|
||||||
[VanLoading.name]: VanLoading
|
[Loading.name]: Loading
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@ -5,21 +5,21 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'van-badge-group',
|
name: 'van-badge-group',
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
// 当前激活 tab 面板的 key
|
// 当前激活 tab 面板的 key
|
||||||
activeKey: {
|
activeKey: {
|
||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
default: 0
|
default: 0
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
badges: []
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
badges: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,15 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-clickoutside:touchstart="swipeMove" @click="swipeMove()" @touchstart="startDrag" @touchmove="onDrag" @touchend="endDrag" class="van-cell-swipe" ref="cell">
|
<div
|
||||||
<div class="van-cell-wrapper">
|
v-clickoutside:touchstart="swipeMove"
|
||||||
<slot>单元格内容</slot>
|
class="van-cell-swipe"
|
||||||
</div>
|
@click="swipeMove()"
|
||||||
<div class="van-cell-left">
|
@touchstart="startDrag"
|
||||||
<div ref="left">
|
@touchmove="onDrag"
|
||||||
|
@touchend="endDrag"
|
||||||
|
@touchcancel="endDrag"
|
||||||
|
>
|
||||||
|
<div class="van-cell-swipe__wrapper" :style="wrapperStyle" @transitionend="swipe = false">
|
||||||
|
<div class="van-cell-swipe__left" v-if="leftWidth">
|
||||||
<slot name="left"></slot>
|
<slot name="left"></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<slot></slot>
|
||||||
<div class="van-cell-right">
|
<div class="van-cell-swipe__right" v-if="rightWidth">
|
||||||
<div ref="right">
|
|
||||||
<slot name="right"></slot>
|
<slot name="right"></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -17,112 +21,100 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { once } from '../utils/dom';
|
|
||||||
import Clickoutside from '../utils/clickoutside';
|
import Clickoutside from '../utils/clickoutside';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-cell-swipe',
|
name: 'van-cell-swipe',
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
'leftWidth': { type: Number, default: 0 },
|
leftWidth: {
|
||||||
'rightWidth': { type: Number, default: 0 }
|
type: Number,
|
||||||
},
|
default: 0
|
||||||
directives: { Clickoutside },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
start: { x: 0, y: 0 }
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
leftDefaultTransform() {
|
|
||||||
return this.translate3d(-this.leftWidth - 1);
|
|
||||||
},
|
},
|
||||||
rightDefaultTransform() {
|
rightWidth: {
|
||||||
return this.translate3d(this.rightWidth);
|
type: Number,
|
||||||
|
default: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
|
||||||
this.wrap = this.$refs.cell.querySelector('.van-cell-wrapper');
|
|
||||||
this.leftElm = this.$refs.left;
|
|
||||||
this.leftWrapElm = this.leftElm.parentNode;
|
|
||||||
this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
|
|
||||||
|
|
||||||
this.rightElm = this.$refs.right;
|
directives: {
|
||||||
this.rightWrapElm = this.rightElm.parentNode;
|
Clickoutside
|
||||||
this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
offset: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
wrapperStyle() {
|
||||||
|
return {
|
||||||
|
transform: `translate3d(${this.offset}px, 0, 0)`
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
resetSwipeStatus() {
|
resetSwipeStatus() {
|
||||||
this.swiping = false; // 是否正在拖动
|
this.swiping = false; // 是否正在拖动
|
||||||
this.opened = true; // 记录是否滑动左右 或者 注册
|
this.opened = true; // 记录是否滑动左右 或者 注册
|
||||||
this.offsetLeft = 0; // 记录单次拖动的拖动距离
|
|
||||||
},
|
|
||||||
translate3d(offset) {
|
|
||||||
return `translate3d(${offset}px, 0, 0)`;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
swipeMove(offset = 0) {
|
swipeMove(offset = 0) {
|
||||||
this.wrap.style.webkitTransform = this.translate3d(offset);
|
this.offset = offset;
|
||||||
this.rightWrapElm.style.webkitTransform = this.translate3d(this.rightWidth + offset);
|
|
||||||
this.leftWrapElm.style.webkitTransform = this.translate3d(-this.leftWidth + offset);
|
|
||||||
offset && (this.swiping = true);
|
offset && (this.swiping = true);
|
||||||
},
|
},
|
||||||
|
|
||||||
swipeLeaveTransition(direction) {
|
swipeLeaveTransition(direction) {
|
||||||
setTimeout(() => {
|
const { offset, leftWidth, rightWidth } = this;
|
||||||
this.swipeLeave = true;
|
// right
|
||||||
// left
|
if (direction > 0 && -offset > rightWidth * 0.4 && rightWidth > 0) {
|
||||||
if (direction > 0 && -this.offsetLeft > this.rightWidth * 0.4 && this.rightWidth > 0) {
|
this.swipeMove(-rightWidth);
|
||||||
this.swipeMove(-this.rightWidth);
|
this.resetSwipeStatus();
|
||||||
this.resetSwipeStatus();
|
// left
|
||||||
return;
|
} else if (direction < 0 && offset > leftWidth * 0.4 && leftWidth > 0) {
|
||||||
// right
|
this.swipeMove(leftWidth);
|
||||||
} else if (direction < 0 && this.offsetLeft > this.leftWidth * 0.4 && this.leftWidth > 0) {
|
this.resetSwipeStatus();
|
||||||
this.swipeMove(this.leftWidth);
|
} else {
|
||||||
this.resetSwipeStatus();
|
this.swipeMove();
|
||||||
return;
|
}
|
||||||
} else {
|
|
||||||
this.swipeMove(0);
|
|
||||||
once(this.wrap, 'webkitTransitionEnd', () => {
|
|
||||||
this.wrap.style.webkitTransform = '';
|
|
||||||
this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
|
|
||||||
this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
|
|
||||||
this.swipeLeave = false;
|
|
||||||
this.swiping = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, 0);
|
|
||||||
},
|
},
|
||||||
startDrag(evt) {
|
|
||||||
evt = evt.changedTouches ? evt.changedTouches[0] : evt;
|
startDrag(event) {
|
||||||
this.dragging = true;
|
this.startX = event.changedTouches[0].pageX;
|
||||||
this.start.x = evt.pageX;
|
this.startY = event.changedTouches[0].pageY;
|
||||||
this.start.y = evt.pageY;
|
|
||||||
},
|
},
|
||||||
onDrag(evt) {
|
|
||||||
|
onDrag(event) {
|
||||||
if (this.opened) {
|
if (this.opened) {
|
||||||
!this.swiping && this.swipeMove(0);
|
!this.swiping && this.swipeMove();
|
||||||
this.opened = false;
|
this.opened = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (!this.dragging) return;
|
|
||||||
let swiping;
|
const offsetTop = event.changedTouches[0].pageY - this.startY;
|
||||||
const e = evt.changedTouches ? evt.changedTouches[0] : evt;
|
const offsetLeft = event.changedTouches[0].pageX - this.startX;
|
||||||
const offsetTop = e.pageY - this.start.y;
|
|
||||||
const offsetLeft = this.offsetLeft = e.pageX - this.start.x;
|
|
||||||
if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
|
if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
|
||||||
(offsetLeft > 0 && offsetLeft > this.leftWidth) ||
|
(offsetLeft > 0 && offsetLeft > this.leftWidth) ||
|
||||||
(offsetLeft > 0 && !this.leftWidth) ||
|
(offsetLeft > 0 && !this.leftWidth) ||
|
||||||
(offsetLeft < 0 && !this.rightWidth)) {
|
(offsetLeft < 0 && !this.rightWidth)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const y = Math.abs(offsetTop);
|
const y = Math.abs(offsetTop);
|
||||||
const x = Math.abs(offsetLeft);
|
const x = Math.abs(offsetLeft);
|
||||||
swiping = !(x < 5 || (x >= 5 && y >= x * 1.73));
|
const swiping = !(x < 5 || (x >= 5 && y >= x * 1.73));
|
||||||
if (!swiping) return;
|
if (swiping) {
|
||||||
evt.preventDefault();
|
event.preventDefault();
|
||||||
this.swipeMove(offsetLeft);
|
this.swipeMove(offsetLeft);
|
||||||
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
endDrag() {
|
endDrag() {
|
||||||
if (!this.swiping) return;
|
if (this.swiping) {
|
||||||
this.swipeLeaveTransition(this.offsetLeft > 0 ? -1 : 1);
|
this.swipeLeaveTransition(this.offset > 0 ? -1 : 1);
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -19,7 +19,7 @@ export default {
|
|||||||
name: 'van-datetime-picker',
|
name: 'van-datetime-picker',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
'van-picker': Picker
|
[Picker.name]: Picker
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
@ -270,6 +270,9 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
setColumnByValues(values) {
|
setColumnByValues(values) {
|
||||||
|
if (!this.$refs.picker) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
const setColumnValue = this.$refs.picker.setColumnValue;
|
const setColumnValue = this.$refs.picker.setColumnValue;
|
||||||
if (this.type === 'time') {
|
if (this.type === 'time') {
|
||||||
setColumnValue(0, values[0]);
|
setColumnValue(0, values[0]);
|
||||||
@ -285,6 +288,10 @@ export default {
|
|||||||
}
|
}
|
||||||
[].forEach.call(this.$refs.picker.$children, child => child.doOnValueChange());
|
[].forEach.call(this.$refs.picker.$children, child => child.doOnValueChange());
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.updateColumnValue(this.innerValue);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -2,8 +2,10 @@
|
|||||||
<transition name="van-dialog-bounce">
|
<transition name="van-dialog-bounce">
|
||||||
<div class="van-dialog" v-show="value">
|
<div class="van-dialog" v-show="value">
|
||||||
<div class="van-dialog__header" v-if="title" v-text="title" />
|
<div class="van-dialog__header" v-if="title" v-text="title" />
|
||||||
<div class="van-dialog__content" v-if="message">
|
<div class="van-dialog__content">
|
||||||
<div class="van-dialog__message" :class="{ 'van-dialog__message--withtitle': title }" v-html="message" />
|
<slot>
|
||||||
|
<div class="van-dialog__message" v-if="message" :class="{ 'van-dialog__message--withtitle': title }" v-html="message" />
|
||||||
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
<div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
||||||
<van-button size="large" class="van-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</van-button>
|
<van-button size="large" class="van-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</van-button>
|
||||||
@ -27,33 +29,48 @@ export default {
|
|||||||
mixins: [Popup],
|
mixins: [Popup],
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
message: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
showConfirmButton: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
showCancelButton: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
confirmButtonText: {
|
||||||
|
type: String,
|
||||||
|
default: '确认'
|
||||||
|
},
|
||||||
|
cancelButtonText: {
|
||||||
|
type: String,
|
||||||
|
default: '取消'
|
||||||
|
},
|
||||||
|
callback: {
|
||||||
|
type: Function
|
||||||
|
},
|
||||||
overlay: {
|
overlay: {
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
closeOnClickOverlay: {
|
closeOnClickOverlay: {
|
||||||
default: true
|
default: false
|
||||||
},
|
},
|
||||||
lockOnScroll: {
|
lockOnScroll: {
|
||||||
default: true
|
default: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
title: '',
|
|
||||||
message: '',
|
|
||||||
type: '',
|
|
||||||
showConfirmButton: true,
|
|
||||||
showCancelButton: false,
|
|
||||||
confirmButtonText: '确认',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
callback: null
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
handleAction(action) {
|
handleAction(action) {
|
||||||
this.$emit('input', false);
|
this.$emit('input', false);
|
||||||
|
this.$emit(action);
|
||||||
this.callback && this.callback(action);
|
this.callback && this.callback(action);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,97 +1,62 @@
|
|||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import Dialog from './dialog';
|
import DialogComponent from './dialog';
|
||||||
|
|
||||||
const DialogConstructor = Vue.extend(Dialog);
|
|
||||||
|
|
||||||
let currentDialog;
|
|
||||||
let instance;
|
let instance;
|
||||||
let dialogQueue = [];
|
|
||||||
|
|
||||||
const defaultCallback = action => {
|
const defaultConfig = {
|
||||||
/* istanbul ignore else */
|
value: true,
|
||||||
if (currentDialog) {
|
title: '',
|
||||||
if (currentDialog.resolve && action === 'confirm') {
|
message: '',
|
||||||
currentDialog.resolve(action);
|
showCancelButton: false,
|
||||||
} else if (currentDialog.reject && action === 'cancel') {
|
closeOnClickOverlay: false,
|
||||||
currentDialog.reject(action);
|
callback: action => {
|
||||||
}
|
instance[action === 'confirm' ? 'resolve' : 'reject'](action);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const initInstance = () => {
|
const initInstance = () => {
|
||||||
|
const DialogConstructor = Vue.extend(DialogComponent);
|
||||||
instance = new DialogConstructor({
|
instance = new DialogConstructor({
|
||||||
el: document.createElement('div')
|
el: document.createElement('div')
|
||||||
});
|
});
|
||||||
|
|
||||||
instance.$on('input', value => {
|
instance.$on('input', value => {
|
||||||
instance.value = value;
|
instance.value = value;
|
||||||
})
|
});
|
||||||
instance.callback = defaultCallback;
|
|
||||||
|
document.body.appendChild(instance.$el);
|
||||||
};
|
};
|
||||||
|
|
||||||
const showNextDialog = () => {
|
const Dialog = options => {
|
||||||
if (!instance) {
|
return new Promise((resolve, reject) => {
|
||||||
initInstance();
|
if (!instance) {
|
||||||
}
|
initInstance();
|
||||||
|
|
||||||
/* istanbul ignore else */
|
|
||||||
if (!instance.value && dialogQueue.length > 0) {
|
|
||||||
currentDialog = dialogQueue.shift();
|
|
||||||
|
|
||||||
const { options } = currentDialog;
|
|
||||||
|
|
||||||
for (const prop in options) {
|
|
||||||
/* istanbul ignore else */
|
|
||||||
if (options.hasOwnProperty(prop)) {
|
|
||||||
instance[prop] = options[prop];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
instance.callback = options.callback || defaultCallback;
|
Object.assign(instance, {
|
||||||
instance.value = true;
|
resolve,
|
||||||
document.body.appendChild(instance.$el);
|
reject,
|
||||||
}
|
...options
|
||||||
};
|
|
||||||
|
|
||||||
const DialogBox = options => {
|
|
||||||
return new Promise((resolve, reject) => { // eslint-disable-line
|
|
||||||
dialogQueue.push({
|
|
||||||
options: { ...options },
|
|
||||||
callback: options.callback,
|
|
||||||
resolve: resolve,
|
|
||||||
reject: reject
|
|
||||||
});
|
});
|
||||||
|
|
||||||
showNextDialog();
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
DialogBox.alert = function(options) {
|
Dialog.alert = options => Dialog({
|
||||||
return DialogBox({
|
...defaultConfig,
|
||||||
type: 'alert',
|
...options
|
||||||
title: '',
|
});
|
||||||
message: '',
|
|
||||||
closeOnClickOverlay: false,
|
|
||||||
showCancelButton: false,
|
|
||||||
...options
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
DialogBox.confirm = function(options) {
|
Dialog.confirm = options => Dialog({
|
||||||
return DialogBox({
|
...defaultConfig,
|
||||||
type: 'confirm',
|
showCancelButton: true,
|
||||||
title: '',
|
...options
|
||||||
message: '',
|
});
|
||||||
closeOnClickOverlay: true,
|
|
||||||
showCancelButton: true,
|
|
||||||
...options
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
DialogBox.close = function() {
|
Dialog.close = () => {
|
||||||
instance.value = false;
|
instance.value = false;
|
||||||
dialogQueue = [];
|
|
||||||
currentDialog = null;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DialogBox;
|
export default Dialog;
|
||||||
|
export {
|
||||||
|
Dialog
|
||||||
|
};
|
||||||
|
|||||||
@ -48,15 +48,15 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'time', 'datetime', 'password', 'textarea'];
|
const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'time', 'datetime', 'password', 'textarea'];
|
||||||
import vanCell from '../cell';
|
import Cell from '../cell';
|
||||||
import vanIcon from '../icon';
|
import Icon from '../icon';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-field',
|
name: 'van-field',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
vanCell,
|
[Cell.name]: Cell,
|
||||||
vanIcon
|
[Icon.name]: Icon
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@ -13,8 +13,8 @@
|
|||||||
<script>
|
<script>
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import Popup from '../mixins/popup';
|
import Popup from '../mixins/popup';
|
||||||
import VanSwipe from '../swipe';
|
import Swipe from '../swipe';
|
||||||
import VanSwipeItem from '../swipe-item';
|
import SwipeItem from '../swipe-item';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-image-preview',
|
name: 'van-image-preview',
|
||||||
@ -22,8 +22,8 @@ export default {
|
|||||||
mixins: [Popup],
|
mixins: [Popup],
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
VanSwipe,
|
[Swipe.name]: Swipe,
|
||||||
VanSwipeItem
|
[SwipeItem.name]: SwipeItem
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@ -37,7 +37,7 @@ import Swipe from './swipe';
|
|||||||
import SwipeItem from './swipe-item';
|
import SwipeItem from './swipe-item';
|
||||||
import DatetimePicker from './datetime-picker';
|
import DatetimePicker from './datetime-picker';
|
||||||
|
|
||||||
const version = '0.8.5';
|
const version = '0.8.6';
|
||||||
const components = [
|
const components = [
|
||||||
Button,
|
Button,
|
||||||
Switch,
|
Switch,
|
||||||
|
|||||||
@ -1,12 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="van-loading" :class="['van-loading--' + type]">
|
<div :class="['van-loading', 'van-loading--' + type]">
|
||||||
<span class="van-loading__spinner" :class="['van-loading__spinner--' + type, 'van-loading__spinner--' + color]"></span>
|
<span :class="['van-loading__spinner', 'van-loading__spinner--' + type, 'van-loading__spinner--' + color]"></span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const VALID_TYPES = ['gradient-circle', 'circle'];
|
const VALID_TYPES = ['gradient-circle', 'circle'];
|
||||||
const VALID_COLORS = ['black', 'white'];
|
const VALID_COLORS = ['black', 'white'];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-loading',
|
name: 'van-loading',
|
||||||
|
|
||||||
@ -14,16 +15,12 @@ export default {
|
|||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'gradient-circle',
|
default: 'gradient-circle',
|
||||||
validator(value) {
|
validator: value => VALID_TYPES.indexOf(value) > -1
|
||||||
return VALID_TYPES.indexOf(value) > -1;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
color: {
|
color: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'black',
|
default: 'black',
|
||||||
validator(value) {
|
validator: value => VALID_COLORS.indexOf(value) > -1
|
||||||
return VALID_COLORS.indexOf(value) > -1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -138,7 +138,7 @@ export default {
|
|||||||
|
|
||||||
if (this.preventScroll) {
|
if (this.preventScroll) {
|
||||||
document.addEventListener('touchstart', this.recordPosition, false);
|
document.addEventListener('touchstart', this.recordPosition, false);
|
||||||
document.addEventListener('touchmove', this.watchTouchMove, false);
|
document.addEventListener('touchmove', this.watchTouchMove, false);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@ -82,7 +82,7 @@ const PopupManager = {
|
|||||||
|
|
||||||
let domParentNode;
|
let domParentNode;
|
||||||
if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
|
if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
|
||||||
domParentNode = dom.parentNode
|
domParentNode = dom.parentNode;
|
||||||
} else {
|
} else {
|
||||||
domParentNode = document.body;
|
domParentNode = document.body;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-picker__columns" :class="['van-picker__columns--' + columns.length]">
|
<div class="van-picker__columns" :class="['van-picker__columns--' + columns.length]">
|
||||||
<picker-column
|
<van-picker-column
|
||||||
v-for="(item, index) in columns"
|
v-for="(item, index) in columns"
|
||||||
:key="index"
|
:key="index"
|
||||||
v-model="values[index]"
|
v-model="values[index]"
|
||||||
@ -17,8 +17,8 @@
|
|||||||
:itemHeight="itemHeight"
|
:itemHeight="itemHeight"
|
||||||
:visible-item-count="visibileColumnCount"
|
:visible-item-count="visibileColumnCount"
|
||||||
:value-key="valueKey"
|
:value-key="valueKey"
|
||||||
@columnChange="columnValueChange(index)">
|
@columnChange="columnValueChange(index)"
|
||||||
</picker-column>
|
/>
|
||||||
<div class="van-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
|
<div class="van-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -33,7 +33,7 @@ export default {
|
|||||||
name: 'van-picker',
|
name: 'van-picker',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
PickerColumn
|
[PickerColumn.name]: PickerColumn
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@ -1,27 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="van-progress">
|
<div class="van-progress">
|
||||||
<div class="van-progress__bar">
|
<span class="van-progress__portion" :style="portionStyle"></span>
|
||||||
<span class="van-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
|
<span class="van-progress__pivot" :style="pivotStyle">{{ pivotText }}</span>
|
||||||
<span class="van-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/**
|
|
||||||
* van-progress
|
|
||||||
* @module components/progress
|
|
||||||
* @desc 开关
|
|
||||||
* @param {boolean} [inactive=false] - 是否置灰
|
|
||||||
* @param {number} [percentage=0] - 进度百分比
|
|
||||||
* @param {string} [pivotText=percentage] - 进度条显示文字
|
|
||||||
* @param {string} [color='#38f'] - 进度条颜色
|
|
||||||
* @param {string} [textColor='#fff'] - 进度条文字颜色
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* <van-switch checked="true" disabled="false"></van-switch>
|
|
||||||
*/
|
|
||||||
|
|
||||||
const DEFAULT_COLOR = '#38f';
|
const DEFAULT_COLOR = '#38f';
|
||||||
const DEFAULT_TEXT_COLOR = '#fff';
|
const DEFAULT_TEXT_COLOR = '#fff';
|
||||||
const INACTIVE_COLOR = '#cacaca';
|
const INACTIVE_COLOR = '#cacaca';
|
||||||
@ -33,14 +17,12 @@ export default {
|
|||||||
percentage: {
|
percentage: {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: true,
|
required: true,
|
||||||
validator(value) {
|
validator: value => value >= 0 && value <= 100
|
||||||
return value <= 100 && value >= 0;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
inactive: Boolean,
|
inactive: Boolean,
|
||||||
pivotText: {
|
pivotText: {
|
||||||
type: String,
|
type: String,
|
||||||
default: function() {
|
default() {
|
||||||
return this.percentage + '%';
|
return this.percentage + '%';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -59,24 +41,19 @@ export default {
|
|||||||
return this.inactive ? INACTIVE_COLOR : this.color;
|
return this.inactive ? INACTIVE_COLOR : this.color;
|
||||||
},
|
},
|
||||||
pivotStyle() {
|
pivotStyle() {
|
||||||
const pivotStyle = {
|
const { percentage } = this;
|
||||||
backgroundColor: this.componentColor,
|
return {
|
||||||
color: this.textColor,
|
color: this.textColor,
|
||||||
left: this.percentage + '%',
|
backgroundColor: this.componentColor,
|
||||||
marginLeft: '-14px'
|
left: percentage <= 5 ? '0%' : percentage >= 95 ? '100%' : percentage + '%',
|
||||||
|
marginLeft: percentage <= 5 ? '0' : percentage >= 95 ? '-28px' : '-14px'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
portionStyle() {
|
||||||
|
return {
|
||||||
|
width: this.percentage + '%',
|
||||||
|
backgroundColor: this.componentColor
|
||||||
};
|
};
|
||||||
if (this.percentage <= 5) {
|
|
||||||
pivotStyle.left = '0%';
|
|
||||||
pivotStyle.marginLeft = '0';
|
|
||||||
} else if (this.percentage >= 95) {
|
|
||||||
pivotStyle.left = '100%';
|
|
||||||
pivotStyle.marginLeft = '-28px';
|
|
||||||
} else {
|
|
||||||
pivotStyle.left = this.percentage + '%';
|
|
||||||
pivotStyle.marginLeft = '-14px';
|
|
||||||
}
|
|
||||||
|
|
||||||
return pivotStyle;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -20,14 +20,14 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import VanIcon from '../icon';
|
import Icon from '../icon';
|
||||||
import Clickoutside from '../utils/clickoutside';
|
import Clickoutside from '../utils/clickoutside';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-search',
|
name: 'van-search',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
VanIcon
|
[Icon.name]: Icon
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@ -30,7 +30,7 @@ export default {
|
|||||||
name: 'van-steps',
|
name: 'van-steps',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
'van-icon': Icon
|
[Icon.name]: Icon
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@ -13,9 +13,9 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
destroyed() {
|
destroyed() {
|
||||||
const index = this.$parent.swipes.indexOf(this)
|
const index = this.$parent.swipes.indexOf(this);
|
||||||
if (index > -1) {
|
if (index > -1) {
|
||||||
this.$parent.swipes.splice(index, 1)
|
this.$parent.swipes.splice(index, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -61,27 +61,27 @@ export default {
|
|||||||
}).on('autoPlay', function(dist, isEnd) {
|
}).on('autoPlay', function(dist, isEnd) {
|
||||||
scroll.movePage(dist.x, isEnd);
|
scroll.movePage(dist.x, isEnd);
|
||||||
});
|
});
|
||||||
this.dummy = dummy
|
this.dummy = dummy;
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
swipes(value) {
|
swipes(value) {
|
||||||
if (this.autoPlay && value.length > 1) {
|
if (this.autoPlay && value.length > 1) {
|
||||||
this.dummy.initMove()
|
this.dummy.initMove();
|
||||||
} else {
|
} else {
|
||||||
this.dummy.clearMove()
|
this.dummy.clearMove();
|
||||||
}
|
}
|
||||||
this.scroll.update();
|
this.scroll.update();
|
||||||
return value
|
return value;
|
||||||
},
|
},
|
||||||
|
|
||||||
autoPlay(value) {
|
autoPlay(value) {
|
||||||
if (value && this.swipes.length > 1) {
|
if (value && this.swipes.length > 1) {
|
||||||
this.dummy.initMove()
|
this.dummy.initMove();
|
||||||
} else {
|
} else {
|
||||||
this.dummy.clearMove()
|
this.dummy.clearMove();
|
||||||
}
|
}
|
||||||
return value
|
return value;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@ -8,22 +8,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import VanLoading from '../loading';
|
import Loading from '../loading';
|
||||||
/**
|
|
||||||
* van-switch
|
|
||||||
* @module components/switch
|
|
||||||
* @desc 开关
|
|
||||||
* @param {boolean} [value=false] - 开关状态
|
|
||||||
* @param {boolean} [disabled=false] - 禁用
|
|
||||||
* @param {boolean} [loading=false] - loading状态
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* <van-switch :checked="true" :disabled="false"></van-switch>
|
|
||||||
*/
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-switch',
|
name: 'van-switch',
|
||||||
components: {
|
components: {
|
||||||
'van-loading': VanLoading
|
[Loading.name]: Loading
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
value: Boolean,
|
value: Boolean,
|
||||||
|
|||||||
@ -192,7 +192,7 @@
|
|||||||
const translate = swipeState.startTranslateLeft + deltaX;
|
const translate = swipeState.startTranslateLeft + deltaX;
|
||||||
|
|
||||||
/* istanbul ignore else */
|
/* istanbul ignore else */
|
||||||
if (translate > 0 || (translate * -1) > this.maxTranslate ) return;
|
if (translate > 0 || (translate * -1) > this.maxTranslate) return;
|
||||||
|
|
||||||
translateUtil.translateElement(el, translate, null);
|
translateUtil.translateElement(el, translate, null);
|
||||||
},
|
},
|
||||||
@ -200,7 +200,7 @@
|
|||||||
end: () => {
|
end: () => {
|
||||||
this.isSwiping = false;
|
this.isSwiping = false;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
doOnValueChange() {
|
doOnValueChange() {
|
||||||
|
|||||||
@ -12,9 +12,7 @@
|
|||||||
props: {
|
props: {
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
validator: function (val) {
|
validator: val => ~ALLOW_TYPE.indexOf(val)
|
||||||
return ~ALLOW_TYPE.indexOf(val);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
mark: Boolean,
|
mark: Boolean,
|
||||||
plain: Boolean
|
plain: Boolean
|
||||||
|
|||||||
@ -20,8 +20,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import vanLoading from '../loading';
|
import Icon from '../icon';
|
||||||
import vanIcon from '../icon';
|
import Loading from '../loading';
|
||||||
|
|
||||||
const TOAST_TYPES = ['text', 'html', 'loading', 'success', 'fail'];
|
const TOAST_TYPES = ['text', 'html', 'loading', 'success', 'fail'];
|
||||||
const DEFAULT_STYLE_LIST = ['success', 'fail'];
|
const DEFAULT_STYLE_LIST = ['success', 'fail'];
|
||||||
@ -37,8 +37,8 @@ export default {
|
|||||||
name: 'van-toast',
|
name: 'van-toast',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
'van-loading': vanLoading,
|
[Icon.name]: Icon,
|
||||||
'van-icon': vanIcon
|
[Loading.name]: Loading
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
type: {
|
type: {
|
||||||
|
|||||||
@ -1,57 +1,54 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="van-uploader">
|
<div class="van-uploader">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
<template v-if="disabled">
|
<input type="file" @change="onValueChange" :disabled="disabled" class="van-uploader__input" ref="input" />
|
||||||
<input type="file" @change="onValueChange" disabled="disabled" class="van-uploader__input" />
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<input type="file" @change="onValueChange" class="van-uploader__input" ref="input" />
|
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'van-uploader',
|
name: 'van-uploader',
|
||||||
props: {
|
|
||||||
disabled: {
|
props: {
|
||||||
type: Boolean,
|
disabled: {
|
||||||
default: false
|
type: Boolean,
|
||||||
},
|
default: false
|
||||||
beforeRead: Function,
|
|
||||||
afterRead: Function,
|
|
||||||
resultType: {
|
|
||||||
type: String,
|
|
||||||
default: 'dataUrl',
|
|
||||||
validator(value) {
|
|
||||||
return value === 'dataUrl' || value === 'text';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
beforeRead: Function,
|
||||||
onValueChange(event) {
|
afterRead: Function,
|
||||||
if (this.disabled) {
|
resultType: {
|
||||||
return;
|
type: String,
|
||||||
}
|
default: 'dataUrl',
|
||||||
var files = event.target.files;
|
validator: value => value === 'dataUrl' || value === 'text'
|
||||||
var file = files[0];
|
}
|
||||||
if (!file) return;
|
},
|
||||||
if (this.beforeRead && !this.beforeRead(file)) return;
|
|
||||||
var reader = new FileReader();
|
methods: {
|
||||||
reader.onload = (e) => {
|
onValueChange(event) {
|
||||||
this.afterRead && this.afterRead(
|
if (this.disabled) {
|
||||||
{
|
return;
|
||||||
file: file,
|
}
|
||||||
content: e.target.result
|
|
||||||
});
|
const file = event.target.files[0];
|
||||||
this.$refs.input && (this.$refs.input.value = '');
|
if (!file || (this.beforeRead && !this.beforeRead(file))) {
|
||||||
};
|
return;
|
||||||
if (this.resultType === 'dataUrl') {
|
}
|
||||||
reader.readAsDataURL(file);
|
|
||||||
} else if (this.resultType === 'text') {
|
const reader = new FileReader();
|
||||||
reader.readAsText(file);
|
reader.onload = (e) => {
|
||||||
}
|
this.afterRead && this.afterRead({
|
||||||
|
file,
|
||||||
|
content: e.target.result
|
||||||
|
});
|
||||||
|
this.$refs.input && (this.$refs.input.value = '');
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.resultType === 'dataUrl') {
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
} else if (this.resultType === 'text') {
|
||||||
|
reader.readAsText(file);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,11 +0,0 @@
|
|||||||
import Vue from 'vue';
|
|
||||||
|
|
||||||
export const once = function(el, event, fn) {
|
|
||||||
const listener = function() {
|
|
||||||
if (fn) {
|
|
||||||
fn.apply(this, arguments);
|
|
||||||
}
|
|
||||||
el.removeEventListener(event, listener);
|
|
||||||
};
|
|
||||||
el.addEventListener(event, listener);
|
|
||||||
};
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vant-css",
|
"name": "vant-css",
|
||||||
"version": "0.8.5",
|
"version": "0.8.6",
|
||||||
"description": "vant css.",
|
"description": "vant css.",
|
||||||
"main": "lib/index.css",
|
"main": "lib/index.css",
|
||||||
"style": "lib/index.css",
|
"style": "lib/index.css",
|
||||||
|
|||||||
@ -11,7 +11,6 @@
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
overflow: hidden;
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
|||||||
@ -1,29 +1,26 @@
|
|||||||
.van-cell {
|
.van-cell-swipe {
|
||||||
&-swipe {
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 48px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.van-cell-wrapper,
|
&__wrapper,
|
||||||
.van-cell-left,
|
&__left,
|
||||||
.van-cell-right {
|
&__right {
|
||||||
transition: transform 150ms ease-in-out;
|
transition: transform .15s ease-in-out;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-left,
|
&__left,
|
||||||
&-right {
|
&__right {
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-left {
|
&__left {
|
||||||
left: 0;
|
left: 0;
|
||||||
transform: translate3d(-100%, 0, 0);
|
transform: translate3d(-100%, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-right {
|
&__right {
|
||||||
right: 0;
|
right: 0;
|
||||||
transform: translate3d(100%, 0, 0);
|
transform: translate3d(100%, 0, 0);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -42,9 +42,10 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&.is-twobtn {
|
&.is-twobtn {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
.van-button {
|
.van-button {
|
||||||
width: 50%;
|
flex: 1;
|
||||||
float: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-dialog__cancel {
|
.van-dialog__cancel {
|
||||||
@ -63,7 +64,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__confirm {
|
&__confirm {
|
||||||
color: #00C000;
|
&,
|
||||||
|
&:active {
|
||||||
|
color: #00C000;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-bounce-enter {
|
&-bounce-enter {
|
||||||
|
|||||||
@ -1,32 +1,27 @@
|
|||||||
@import './common/var.css';
|
@import './common/var.css';
|
||||||
|
|
||||||
.van-progress {
|
.van-progress {
|
||||||
&__bar {
|
height: 4px;
|
||||||
height: 4px;
|
position: relative;
|
||||||
border-radius: 4.5px;
|
border-radius: 4px;
|
||||||
width: 100%;
|
background: $c-gray-light;
|
||||||
background: $c-gray-light;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&__finished-portion {
|
&__portion {
|
||||||
border-radius: 4.5px;
|
left: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
border-radius: 4px;
|
||||||
display: inline-block;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__pivot {
|
&__pivot {
|
||||||
padding: 2px 0;
|
top: 50%;
|
||||||
font-size: 8px;
|
width: 28px;
|
||||||
position: absolute;
|
font-size: 8px;
|
||||||
border-radius: 6px;
|
margin-top: -6px;
|
||||||
width: 28px;
|
position: absolute;
|
||||||
background-color: $c-gray-light;
|
border-radius: 6px;
|
||||||
line-height: 8px;
|
line-height: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
top: 50%;
|
background-color: $c-gray-light;
|
||||||
transform: translate3d(0, -50%, 0);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,96 +2,96 @@ const path = require('path');
|
|||||||
const webpack = require('webpack');
|
const webpack = require('webpack');
|
||||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||||
|
|
||||||
const webpackConfig = {
|
function getWebpackConfig(testFileName) {
|
||||||
output: {
|
return {
|
||||||
path: path.resolve(process.cwd(), 'dist'),
|
output: {
|
||||||
publicPath: '/dist/',
|
path: path.resolve(process.cwd(), 'dist'),
|
||||||
filename: '[name].js',
|
publicPath: '/dist/',
|
||||||
chunkFilename: '[id].js',
|
filename: '[name].js',
|
||||||
libraryTarget: 'umd'
|
chunkFilename: '[id].js',
|
||||||
},
|
libraryTarget: 'umd'
|
||||||
plugins: [
|
},
|
||||||
new ProgressBarPlugin(),
|
plugins: [
|
||||||
new webpack.LoaderOptionsPlugin({
|
new ProgressBarPlugin(),
|
||||||
minimize: true,
|
new webpack.LoaderOptionsPlugin({
|
||||||
options: {
|
minimize: true,
|
||||||
babel: {
|
options: {
|
||||||
presets: ['env'],
|
babel: {
|
||||||
plugins: ['transform-runtime', 'transform-vue-jsx']
|
presets: ['env'],
|
||||||
},
|
plugins: ['transform-runtime', 'transform-vue-jsx']
|
||||||
vue: {
|
},
|
||||||
autoprefixer: false,
|
vue: {
|
||||||
preserveWhitespace: false
|
autoprefixer: false,
|
||||||
|
preserveWhitespace: false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}),
|
||||||
})
|
new webpack.DefinePlugin({
|
||||||
],
|
'process.env': {
|
||||||
stats: 'errors-only',
|
TEST_FILE: `"${testFileName}"`
|
||||||
resolve: {
|
}
|
||||||
modules: [
|
})
|
||||||
path.resolve(process.cwd(), 'node_modules'),
|
|
||||||
'node_modules'
|
|
||||||
],
|
],
|
||||||
extensions: ['.js', '.json', '.vue'],
|
stats: 'errors-only',
|
||||||
alias: {
|
resolve: {
|
||||||
src: path.resolve(process.cwd(), 'src'),
|
modules: [path.resolve(process.cwd(), 'node_modules'), 'node_modules'],
|
||||||
packages: path.resolve(process.cwd(), 'packages'),
|
extensions: ['.js', '.json', '.vue'],
|
||||||
examples: path.resolve(process.cwd(), 'examples'),
|
alias: {
|
||||||
vue$: 'vue/dist/vue.common.js'
|
src: path.resolve(process.cwd(), 'src'),
|
||||||
}
|
packages: path.resolve(process.cwd(), 'packages'),
|
||||||
},
|
examples: path.resolve(process.cwd(), 'examples'),
|
||||||
module: {
|
vue$: 'vue/dist/vue.common.js'
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
enforce: 'pre',
|
|
||||||
test: /\.js$/,
|
|
||||||
exclude: /node_modules|vue-router\/|vue-loader\/|docs|test|src\/index|src\/utils|src\/mixins|packages\/swipe/,
|
|
||||||
use: ['isparta-loader']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.js$/,
|
|
||||||
exclude: /node_modules|vue-router\/|vue-loader\//,
|
|
||||||
use: ['babel-loader']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(css|pcss)$/,
|
|
||||||
use: [
|
|
||||||
'style-loader',
|
|
||||||
'css-loader',
|
|
||||||
'postcss-loader'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(gif|png|jpe?g)(\?\S*)?$/,
|
|
||||||
use: [{
|
|
||||||
loader: 'url-loader',
|
|
||||||
options: {
|
|
||||||
query: {
|
|
||||||
limit: 10000,
|
|
||||||
name: 'static/[name].[hash:7].[ext]'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.vue$/,
|
|
||||||
use: [{
|
|
||||||
loader: 'vue-loader',
|
|
||||||
options: {
|
|
||||||
loaders: {
|
|
||||||
css: [
|
|
||||||
'style-loader',
|
|
||||||
'css-loader',
|
|
||||||
'postcss-loader'
|
|
||||||
],
|
|
||||||
js: ['isparta-loader']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
}
|
}
|
||||||
]
|
},
|
||||||
},
|
module: {
|
||||||
devtool: '#inline-source-map'
|
rules: [
|
||||||
};
|
{
|
||||||
|
enforce: 'pre',
|
||||||
|
test: /\.js$/,
|
||||||
|
exclude: /node_modules|vue-router\/|vue-loader\/|docs|test|src\/index|src\/utils|src\/mixins|packages\/swipe/,
|
||||||
|
use: ['isparta-loader']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.js$/,
|
||||||
|
exclude: /node_modules|vue-router\/|vue-loader\//,
|
||||||
|
use: ['babel-loader']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(css|pcss)$/,
|
||||||
|
use: ['style-loader', 'css-loader', 'postcss-loader']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(gif|png|jpe?g)(\?\S*)?$/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'url-loader',
|
||||||
|
options: {
|
||||||
|
query: {
|
||||||
|
limit: 10000,
|
||||||
|
name: 'static/[name].[hash:7].[ext]'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.vue$/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'vue-loader',
|
||||||
|
options: {
|
||||||
|
loaders: {
|
||||||
|
css: ['style-loader', 'css-loader', 'postcss-loader'],
|
||||||
|
js: ['isparta-loader']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
devtool: '#inline-source-map'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
module.exports = webpackConfig;
|
module.exports = getWebpackConfig;
|
||||||
|
|||||||
@ -1,5 +1,16 @@
|
|||||||
require('packages/vant-css/src/index.css');
|
require('packages/vant-css/src/index.css');
|
||||||
|
|
||||||
// require all test files (files that ends with .spec.js)
|
// hack for test touch event
|
||||||
|
window.ontouchstart = {};
|
||||||
|
|
||||||
|
// 读取配置文件，判断运行单个测试文件还是所有测试文件
|
||||||
const testsReq = require.context('./specs', true, /\.spec$/);
|
const testsReq = require.context('./specs', true, /\.spec$/);
|
||||||
testsReq.keys().forEach(testsReq);
|
if (process.env.TEST_FILE) {
|
||||||
|
testsReq.keys().forEach((file) => {
|
||||||
|
if (file.indexOf(process.env.TEST_FILE) !== -1) {
|
||||||
|
testsReq(file);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
testsReq.keys().forEach(testsReq);
|
||||||
|
}
|
||||||
@ -4,7 +4,7 @@ require('babel-core/register')({
|
|||||||
presets: [require('babel-preset-env')]
|
presets: [require('babel-preset-env')]
|
||||||
});
|
});
|
||||||
|
|
||||||
var webpackConfig = require('./get-webpack-conf');
|
var getWebpackConfig = require('./get-webpack-conf');
|
||||||
var travis = process.env.TRAVIS;
|
var travis = process.env.TRAVIS;
|
||||||
|
|
||||||
module.exports = function(config) {
|
module.exports = function(config) {
|
||||||
@ -16,7 +16,7 @@ module.exports = function(config) {
|
|||||||
preprocessors: {
|
preprocessors: {
|
||||||
'./index.js': ['webpack', 'sourcemap']
|
'./index.js': ['webpack', 'sourcemap']
|
||||||
},
|
},
|
||||||
webpack: webpackConfig,
|
webpack: getWebpackConfig(getTestFileName()),
|
||||||
webpackMiddleware: {
|
webpackMiddleware: {
|
||||||
noInfo: true
|
noInfo: true
|
||||||
},
|
},
|
||||||
@ -30,3 +30,8 @@ module.exports = function(config) {
|
|||||||
singleRun: false
|
singleRun: false
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function getTestFileName() {
|
||||||
|
const flagIndex = process.argv.indexOf('--file');
|
||||||
|
return flagIndex !== -1 ? process.argv[flagIndex + 1] : '';
|
||||||
|
}
|
||||||
|
|||||||
19
test/unit/selector.js
Normal file
19
test/unit/selector.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
/**
|
||||||
|
* 运行单个测试文件
|
||||||
|
*/
|
||||||
|
|
||||||
|
const fs = require('fs');
|
||||||
|
const inquirer = require('inquirer');
|
||||||
|
const path = require('path');
|
||||||
|
const shell = require('shelljs');
|
||||||
|
const files = fs.readdirSync(path.resolve(__dirname, './specs'));
|
||||||
|
|
||||||
|
inquirer.prompt([{
|
||||||
|
type: 'list',
|
||||||
|
name: 'select',
|
||||||
|
message: '请选择要运行的测试文件：',
|
||||||
|
choices: files
|
||||||
|
}], (result) => {
|
||||||
|
const file = result.select.replace('.spec.js', '');
|
||||||
|
shell.exec('karma start test/unit/karma.conf.js --color alway --file ' + file);
|
||||||
|
});
|
||||||
@ -1,141 +1,117 @@
|
|||||||
import CellSwipe from 'packages/cell-swipe';
|
import CellSwipe from 'packages/cell-swipe';
|
||||||
import { mount } from 'avoriaz';
|
import { mount } from 'avoriaz';
|
||||||
|
import { triggerTouch } from '../utils';
|
||||||
|
|
||||||
|
const defaultProps = {
|
||||||
|
propsData: {
|
||||||
|
leftWidth: 100,
|
||||||
|
rightWidth: 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
describe('CellSwipe', () => {
|
describe('CellSwipe', () => {
|
||||||
let wrapper;
|
let wrapper;
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
wrapper && wrapper.destroy();
|
wrapper && wrapper.destroy();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('render left or right part when has width', () => {
|
||||||
|
wrapper = mount(CellSwipe, defaultProps);
|
||||||
|
expect(wrapper.find('.van-cell-swipe__left').length).to.equal(1);
|
||||||
|
expect(wrapper.find('.van-cell-swipe__right').length).to.equal(1);
|
||||||
|
});
|
||||||
|
|
||||||
it('create a CellSwipe', () => {
|
it('not render left or right part when width is 0', () => {
|
||||||
wrapper = mount(CellSwipe, {
|
wrapper = mount(CellSwipe);
|
||||||
propsData: {
|
expect(wrapper.find('.van-cell-swipe__left').length).to.equal(0);
|
||||||
leftWidth: 2,
|
expect(wrapper.find('.van-cell-swipe__right').length).to.equal(0);
|
||||||
rightWidth: 2
|
});
|
||||||
}
|
|
||||||
|
it('drag and show left part', () => {
|
||||||
|
wrapper = mount(CellSwipe, defaultProps);
|
||||||
|
|
||||||
|
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||||
|
expect(wrapper.vm.startX).to.equal(0);
|
||||||
|
expect(wrapper.vm.startY).to.equal(0);
|
||||||
|
|
||||||
|
triggerTouch(wrapper, 'touchmove', 50, 0);
|
||||||
|
expect(wrapper.vm.offset).to.equal(50);
|
||||||
|
|
||||||
|
triggerTouch(wrapper, 'touchend', 50, 0);
|
||||||
|
expect(wrapper.vm.offset).to.equal(100);
|
||||||
|
wrapper.vm.$nextTick(() => {
|
||||||
|
expect(wrapper.vm.opened).to.be.true;
|
||||||
});
|
});
|
||||||
wrapper.vm.startDrag({
|
});
|
||||||
pageX: 0,
|
|
||||||
pageY: 0
|
it('drag and show right part', () => {
|
||||||
|
wrapper = mount(CellSwipe, defaultProps);
|
||||||
|
|
||||||
|
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||||
|
triggerTouch(wrapper, 'touchmove', -50, 0);
|
||||||
|
triggerTouch(wrapper, 'touchend', -50, 0);
|
||||||
|
expect(wrapper.vm.offset).to.equal(-100);
|
||||||
|
wrapper.vm.$nextTick(() => {
|
||||||
|
expect(wrapper.vm.opened).to.be.true;
|
||||||
});
|
});
|
||||||
wrapper.vm.onDrag({
|
});
|
||||||
preventDefault() {},
|
|
||||||
pageY: 0,
|
it('drag and reset left part', () => {
|
||||||
pageX: 50
|
wrapper = mount(CellSwipe, defaultProps);
|
||||||
|
|
||||||
|
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||||
|
triggerTouch(wrapper, 'touchmove', 10, 0);
|
||||||
|
triggerTouch(wrapper, 'touchmove', 30, 0);
|
||||||
|
triggerTouch(wrapper, 'touchend', 30, 0);
|
||||||
|
expect(wrapper.vm.offset).to.equal(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('drag and reset right part', () => {
|
||||||
|
wrapper = mount(CellSwipe, defaultProps);
|
||||||
|
|
||||||
|
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||||
|
triggerTouch(wrapper, 'touchmove', -10, 0);
|
||||||
|
triggerTouch(wrapper, 'touchmove', -30, 0);
|
||||||
|
triggerTouch(wrapper, 'touchend', -30, 0);
|
||||||
|
expect(wrapper.vm.offset).to.equal(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('drag distance out of ranges', () => {
|
||||||
|
wrapper = mount(CellSwipe, defaultProps);
|
||||||
|
|
||||||
|
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||||
|
triggerTouch(wrapper, 'touchmove', 1000, 0);
|
||||||
|
expect(wrapper.vm.offset).to.equal(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('drag and hide left part', (done) => {
|
||||||
|
wrapper = mount(CellSwipe, defaultProps);
|
||||||
|
|
||||||
|
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||||
|
triggerTouch(wrapper, 'touchmove', 20, 0);
|
||||||
|
triggerTouch(wrapper, 'touchmove', 50, 0);
|
||||||
|
triggerTouch(wrapper, 'touchend', 50, 0);
|
||||||
|
expect(wrapper.vm.offset).to.equal(100);
|
||||||
|
wrapper.vm.$nextTick(() => {
|
||||||
|
expect(wrapper.vm.opened).to.be.true;
|
||||||
|
|
||||||
|
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||||
|
triggerTouch(wrapper, 'touchmove', 1, 0);
|
||||||
|
|
||||||
|
wrapper.vm.$nextTick(() => {
|
||||||
|
expect(wrapper.vm.offset).to.equal(0);
|
||||||
|
expect(wrapper.vm.opened).to.be.false;
|
||||||
|
done();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
wrapper.vm.offsetLeft = -20;
|
});
|
||||||
wrapper.vm.rightWidth = 10;
|
|
||||||
wrapper.vm.swipeLeaveTransition(1);
|
it('drag vertical', () => {
|
||||||
wrapper.vm.endDrag();
|
wrapper = mount(CellSwipe, defaultProps);
|
||||||
expect(wrapper.hasClass('van-cell-swipe')).to.be.true;
|
|
||||||
});
|
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||||
});
|
triggerTouch(wrapper, 'touchmove', 0, 100);
|
||||||
|
triggerTouch(wrapper, 'touchend', 0, 100);
|
||||||
|
expect(wrapper.vm.offset).to.equal(0);
|
||||||
describe('CellSwipe-left', () => {
|
|
||||||
let wrapper;
|
|
||||||
afterEach(() => {
|
|
||||||
wrapper && wrapper.destroy();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('create a CellSwipe left', () => {
|
|
||||||
wrapper = mount(CellSwipe, {
|
|
||||||
propsData: {
|
|
||||||
leftWidth: 2,
|
|
||||||
rightWidth: 2
|
|
||||||
}
|
|
||||||
});
|
|
||||||
wrapper.vm.startDrag({
|
|
||||||
changedTouches: [{
|
|
||||||
pageX: 0,
|
|
||||||
pageY: 0
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
wrapper.vm.onDrag({
|
|
||||||
preventDefault() {},
|
|
||||||
changedTouches: [{
|
|
||||||
pageX: 0,
|
|
||||||
pageY: -50
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
wrapper.vm.offsetLeft = 20;
|
|
||||||
wrapper.vm.rightWidth = 10;
|
|
||||||
wrapper.vm.swipeLeaveTransition(-1);
|
|
||||||
wrapper.vm.endDrag();
|
|
||||||
expect(wrapper.hasClass('van-cell-swipe')).to.be.true;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('CellSwipe-0', () => {
|
|
||||||
let wrapper;
|
|
||||||
afterEach(() => {
|
|
||||||
wrapper && wrapper.destroy();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('create a CellSwipe 0', () => {
|
|
||||||
wrapper = mount(CellSwipe, {
|
|
||||||
propsData: {
|
|
||||||
leftWidth: 0,
|
|
||||||
rightWidth: 2
|
|
||||||
}
|
|
||||||
});
|
|
||||||
wrapper.vm.startDrag({
|
|
||||||
pageX: 0,
|
|
||||||
pageY: 0
|
|
||||||
});
|
|
||||||
wrapper.vm.onDrag({
|
|
||||||
preventDefault() {},
|
|
||||||
pageY: 0,
|
|
||||||
pageX: -2
|
|
||||||
});
|
|
||||||
wrapper.vm.opened = true;
|
|
||||||
wrapper.vm.onDrag({
|
|
||||||
preventDefault() {},
|
|
||||||
pageY: 0,
|
|
||||||
pageX: -2
|
|
||||||
});
|
|
||||||
wrapper.vm.opened = false;
|
|
||||||
wrapper.vm.onDrag({
|
|
||||||
preventDefault() {},
|
|
||||||
pageY: 0,
|
|
||||||
pageX: 40
|
|
||||||
});
|
|
||||||
wrapper.vm.swipeLeaveTransition(0);
|
|
||||||
wrapper.vm.endDrag();
|
|
||||||
expect(wrapper.hasClass('van-cell-swipe')).to.be.true;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
describe('CellSwipe-0', () => {
|
|
||||||
let wrapper;
|
|
||||||
afterEach(() => {
|
|
||||||
wrapper && wrapper.destroy();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('create a CellSwipe 0', () => {
|
|
||||||
wrapper = mount(CellSwipe, {
|
|
||||||
propsData: {
|
|
||||||
leftWidth: 0,
|
|
||||||
rightWidth: 2
|
|
||||||
}
|
|
||||||
});
|
|
||||||
wrapper.vm.startDrag({
|
|
||||||
pageX: 0,
|
|
||||||
pageY: 0
|
|
||||||
});
|
|
||||||
wrapper.vm.onDrag({
|
|
||||||
preventDefault() {},
|
|
||||||
pageY: 1000,
|
|
||||||
pageX: 40
|
|
||||||
});
|
|
||||||
wrapper.vm.swipeMove();
|
|
||||||
wrapper.vm.swiping = false;
|
|
||||||
wrapper.vm.endDrag();
|
|
||||||
wrapper.vm.swiping = true;
|
|
||||||
wrapper.vm.endDrag();
|
|
||||||
expect(wrapper.hasClass('van-cell-swipe')).to.be.true;
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,5 +1,20 @@
|
|||||||
import DatetimePicker from 'packages/datetime-picker';
|
import DatetimePicker from 'packages/datetime-picker';
|
||||||
import { mount } from 'avoriaz';
|
import { mount } from 'avoriaz';
|
||||||
|
import { triggerTouch } from '../utils';
|
||||||
|
|
||||||
|
const dragHelper = (el, position) => {
|
||||||
|
triggerTouch(el, 'touchstart', 0, 0);
|
||||||
|
triggerTouch(el, 'touchmove', 0, position / 4);
|
||||||
|
triggerTouch(el, 'touchmove', 0, position / 3);
|
||||||
|
triggerTouch(el, 'touchmove', 0, position / 2);
|
||||||
|
triggerTouch(el, 'touchmove', 0, position);
|
||||||
|
triggerTouch(el, 'touchend', 0, position);
|
||||||
|
};
|
||||||
|
|
||||||
|
const testTime = '10:00';
|
||||||
|
const testDate = new Date('2017/03/10 10:00');
|
||||||
|
const minDate = new Date('2000/01/01 00:00');
|
||||||
|
const maxDate = new Date('3000/01/01 00:00');
|
||||||
|
|
||||||
describe('DatetimePicker', () => {
|
describe('DatetimePicker', () => {
|
||||||
let wrapper;
|
let wrapper;
|
||||||
@ -7,36 +22,117 @@ describe('DatetimePicker', () => {
|
|||||||
wrapper && wrapper.destroy();
|
wrapper && wrapper.destroy();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('create a datetime picker', () => {
|
it('create a time picker', () => {
|
||||||
const date = new Date();
|
|
||||||
wrapper = mount(DatetimePicker, {
|
wrapper = mount(DatetimePicker, {
|
||||||
|
attachToDocument: true,
|
||||||
propsData: {
|
propsData: {
|
||||||
type: 'datetime',
|
type: 'time',
|
||||||
value: date
|
value: testTime
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
expect(wrapper.data().innerValue.getTime()).to.equal(date.getTime());
|
expect(wrapper.vm.innerValue).to.equal(testTime);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('create a date picker', () => {
|
it('create a date picker', () => {
|
||||||
const date = new Date();
|
|
||||||
wrapper = mount(DatetimePicker, {
|
wrapper = mount(DatetimePicker, {
|
||||||
|
attachToDocument: true,
|
||||||
propsData: {
|
propsData: {
|
||||||
type: 'date',
|
type: 'date',
|
||||||
value: date
|
value: testDate
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
expect(wrapper.data().innerValue.getTime()).to.equal(date.getTime());
|
expect(wrapper.vm.innerValue.getTime()).to.equal(testDate.getTime());
|
||||||
});
|
});
|
||||||
|
|
||||||
it('create a time picker', () => {
|
it('create a datetime picker', () => {
|
||||||
const time = '10:00';
|
|
||||||
wrapper = mount(DatetimePicker, {
|
wrapper = mount(DatetimePicker, {
|
||||||
|
attachToDocument: true,
|
||||||
propsData: {
|
propsData: {
|
||||||
type: 'time',
|
type: 'datetime',
|
||||||
value: time
|
value: testDate
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
expect(wrapper.data().innerValue).to.equal(time);
|
expect(wrapper.vm.innerValue.getTime()).to.equal(testDate.getTime());
|
||||||
|
});
|
||||||
|
|
||||||
|
it('drag time picker', (done) => {
|
||||||
|
wrapper = mount(DatetimePicker, {
|
||||||
|
attachToDocument: true,
|
||||||
|
propsData: {
|
||||||
|
type: 'time',
|
||||||
|
value: testTime
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const [hour, minute] = wrapper.find('.van-picker-column-wrapper');
|
||||||
|
dragHelper(hour, -50);
|
||||||
|
dragHelper(minute, -50);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(wrapper.vm.innerValue).to.equal('5:05');
|
||||||
|
done();
|
||||||
|
}, 10);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('drag date picker', (done) => {
|
||||||
|
wrapper = mount(DatetimePicker, {
|
||||||
|
attachToDocument: true,
|
||||||
|
propsData: {
|
||||||
|
type: 'date',
|
||||||
|
value: testDate,
|
||||||
|
minDate,
|
||||||
|
maxDate
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
const [year, month, day] = wrapper.find('.van-picker-column-wrapper');
|
||||||
|
dragHelper(year, -50);
|
||||||
|
dragHelper(month, -50);
|
||||||
|
dragHelper(day, -50);
|
||||||
|
setTimeout(() => {
|
||||||
|
const newYear = wrapper.vm.innerValue.getFullYear();
|
||||||
|
const newMonth = wrapper.vm.innerValue.getMonth() + 1;
|
||||||
|
const newDay = wrapper.vm.innerValue.getDate();
|
||||||
|
expect(newYear).to.equal(2022);
|
||||||
|
expect(newMonth).to.equal(8);
|
||||||
|
expect(newDay).to.equal(15);
|
||||||
|
done();
|
||||||
|
}, 10);
|
||||||
|
}, 10);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('drag datetime picker', (done) => {
|
||||||
|
wrapper = mount(DatetimePicker, {
|
||||||
|
attachToDocument: true,
|
||||||
|
propsData: {
|
||||||
|
type: 'datetime',
|
||||||
|
value: testDate,
|
||||||
|
minDate,
|
||||||
|
maxDate
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
const [year, month, day, hour, minute] = wrapper.find('.van-picker-column-wrapper');
|
||||||
|
dragHelper(year, -50);
|
||||||
|
dragHelper(month, -50);
|
||||||
|
dragHelper(day, -50);
|
||||||
|
dragHelper(hour, -50);
|
||||||
|
dragHelper(minute, -50);
|
||||||
|
setTimeout(() => {
|
||||||
|
const newYear = wrapper.vm.innerValue.getFullYear();
|
||||||
|
const newMonth = wrapper.vm.innerValue.getMonth() + 1;
|
||||||
|
const newDay = wrapper.vm.innerValue.getDate();
|
||||||
|
const newHour = wrapper.vm.innerValue.getHours();
|
||||||
|
const newMinute = wrapper.vm.innerValue.getMinutes();
|
||||||
|
expect(newYear).to.equal(2022);
|
||||||
|
expect(newMonth).to.equal(8);
|
||||||
|
expect(newDay).to.equal(15);
|
||||||
|
expect(newHour).to.equal(15);
|
||||||
|
expect(newMinute).to.equal(5);
|
||||||
|
done();
|
||||||
|
}, 10);
|
||||||
|
}, 10);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -3,11 +3,6 @@ import Vue from 'vue';
|
|||||||
|
|
||||||
describe('Dialog', () => {
|
describe('Dialog', () => {
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
const el = document.querySelector('.van-dialog');
|
|
||||||
if (!el) return;
|
|
||||||
if (el.parentNode) {
|
|
||||||
el.parentNode.removeChild(el);
|
|
||||||
}
|
|
||||||
Dialog.close();
|
Dialog.close();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -28,30 +23,32 @@ describe('Dialog', () => {
|
|||||||
}, 500);
|
}, 500);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('create a confirm dialog', () => {
|
it('create a confirm dialog', (done) => {
|
||||||
Dialog.confirm({
|
Dialog.confirm({
|
||||||
title: 'title',
|
title: 'title',
|
||||||
message: 'message'
|
message: 'message'
|
||||||
|
}).catch((action) => {
|
||||||
|
expect(action).to.equal('cancel');
|
||||||
|
done();
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(document.querySelector('.van-dialog')).to.exist;
|
expect(document.querySelector('.van-dialog')).to.exist;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
document.querySelector('.van-dialog__cancel').click();
|
||||||
|
}, 500);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('create a confirm dialog with callback', (done) => {
|
it('create a confirm dialog with callback', (done) => {
|
||||||
let dialogAction;
|
|
||||||
Dialog.confirm({
|
Dialog.confirm({
|
||||||
title: 'title',
|
|
||||||
message: 'message',
|
|
||||||
callback: (action) => {
|
callback: (action) => {
|
||||||
dialogAction = action;
|
expect(action).to.equal('cancel');
|
||||||
|
done();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(document.querySelector('.van-dialog')).to.exist;
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
document.querySelector('.van-dialog__cancel').click();
|
document.querySelector('.van-dialog__cancel').click();
|
||||||
expect(dialogAction).to.equal('cancel');
|
|
||||||
done();
|
|
||||||
}, 500);
|
}, 500);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -9,8 +9,8 @@ describe('Progress', () => {
|
|||||||
wrapper = mount(Progress, {
|
wrapper = mount(Progress, {
|
||||||
propsData: propsData
|
propsData: propsData
|
||||||
});
|
});
|
||||||
bar = wrapper.find('.van-progress__bar__finished-portion')[0];
|
bar = wrapper.find('.van-progress__portion')[0];
|
||||||
pivot = wrapper.find('.van-progress__bar__pivot')[0];
|
pivot = wrapper.find('.van-progress__pivot')[0];
|
||||||
};
|
};
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
|
|||||||
@ -31,7 +31,9 @@ export function DOMChecker(wrapper, rules) {
|
|||||||
if (style) {
|
if (style) {
|
||||||
Object.keys(style).forEach(key => {
|
Object.keys(style).forEach(key => {
|
||||||
Object.keys(style[key]).forEach(prop => {
|
Object.keys(style[key]).forEach(prop => {
|
||||||
expect(wrapper.find(key)[0].hasStyle(prop, style[key][prop])).to.equal(true);
|
expect(wrapper.find(key)[0].hasStyle(prop, style[key][prop])).to.equal(
|
||||||
|
true
|
||||||
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -39,8 +41,35 @@ export function DOMChecker(wrapper, rules) {
|
|||||||
if (noStyle) {
|
if (noStyle) {
|
||||||
Object.keys(noStyle).forEach(key => {
|
Object.keys(noStyle).forEach(key => {
|
||||||
Object.keys(noStyle[key]).forEach(prop => {
|
Object.keys(noStyle[key]).forEach(prop => {
|
||||||
expect(wrapper.find(key)[0].hasStyle(prop, noStyle[key][prop])).to.equal(false);
|
expect(
|
||||||
|
wrapper.find(key)[0].hasStyle(prop, noStyle[key][prop])
|
||||||
|
).to.equal(false);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 触发一个 touch 事件
|
||||||
|
export function triggerTouch(wrapper, eventName, x, y) {
|
||||||
|
const el = wrapper.element ? wrapper.element : wrapper;
|
||||||
|
const touch = {
|
||||||
|
identifier: Date.now(),
|
||||||
|
target: el,
|
||||||
|
pageX: x,
|
||||||
|
pageY: y,
|
||||||
|
clientX: x,
|
||||||
|
clientY: y,
|
||||||
|
radiusX: 2.5,
|
||||||
|
radiusY: 2.5,
|
||||||
|
rotationAngle: 10,
|
||||||
|
force: 0.5
|
||||||
|
};
|
||||||
|
|
||||||
|
const event = document.createEvent('CustomEvent');
|
||||||
|
event.initCustomEvent(eventName, true, true, {});
|
||||||
|
event.touches = [touch];
|
||||||
|
event.targetTouches = [touch];
|
||||||
|
event.changedTouches = [touch];
|
||||||
|
|
||||||
|
el.dispatchEvent(event);
|
||||||
|
}
|
||||||
|
|||||||
35
yarn.lock
35
yarn.lock
@ -67,7 +67,7 @@ ajv-keywords@^2.0.0:
|
|||||||
version "2.1.0"
|
version "2.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
|
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
|
||||||
|
|
||||||
ajv@^4.7.0, ajv@^4.9.1:
|
ajv@^4.11.2, ajv@^4.7.0, ajv@^4.9.1:
|
||||||
version "4.11.8"
|
version "4.11.8"
|
||||||
resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
|
resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
|
||||||
dependencies:
|
dependencies:
|
||||||
@ -2768,14 +2768,14 @@ extglob@^0.3.1:
|
|||||||
dependencies:
|
dependencies:
|
||||||
is-extglob "^1.0.0"
|
is-extglob "^1.0.0"
|
||||||
|
|
||||||
extract-text-webpack-plugin@2.1.2:
|
extract-text-webpack-plugin@2.0.0:
|
||||||
version "2.1.2"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.1.2.tgz#756ef4efa8155c3681833fbc34da53b941746d6c"
|
resolved "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.0.0.tgz#8640f72609800a3528f13a2a9634d566a5c1ae60"
|
||||||
dependencies:
|
dependencies:
|
||||||
|
ajv "^4.11.2"
|
||||||
async "^2.1.2"
|
async "^2.1.2"
|
||||||
loader-utils "^1.0.2"
|
loader-utils "^1.0.2"
|
||||||
schema-utils "^0.3.0"
|
webpack-sources "^0.1.0"
|
||||||
webpack-sources "^1.0.1"
|
|
||||||
|
|
||||||
extract-zip@~1.6.5:
|
extract-zip@~1.6.5:
|
||||||
version "1.6.5"
|
version "1.6.5"
|
||||||
@ -6816,6 +6816,10 @@ source-list-map@^2.0.0:
|
|||||||
version "2.0.0"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
|
resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
|
||||||
|
|
||||||
|
source-list-map@~0.1.7:
|
||||||
|
version "0.1.8"
|
||||||
|
resolved "https://registry.npmjs.org/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
|
||||||
|
|
||||||
source-map-support@^0.4.15:
|
source-map-support@^0.4.15:
|
||||||
version "0.4.16"
|
version "0.4.16"
|
||||||
resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.16.tgz#16fecf98212467d017d586a2af68d628b9421cd8"
|
resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.16.tgz#16fecf98212467d017d586a2af68d628b9421cd8"
|
||||||
@ -7603,9 +7607,9 @@ vue-loader@^13.0.4:
|
|||||||
vue-style-loader "^3.0.0"
|
vue-style-loader "^3.0.0"
|
||||||
vue-template-es2015-compiler "^1.5.3"
|
vue-template-es2015-compiler "^1.5.3"
|
||||||
|
|
||||||
vue-markdown-loader@^2.0.0:
|
vue-markdown-loader@^2.1.0:
|
||||||
version "2.0.0"
|
version "2.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/vue-markdown-loader/-/vue-markdown-loader-2.0.0.tgz#d3cadbf9c8976a81f2d5e39496d505fd4f31bc96"
|
resolved "https://registry.npmjs.org/vue-markdown-loader/-/vue-markdown-loader-2.1.0.tgz#112d1921dd56daa29906b7c012623c6c5d6e0d8c"
|
||||||
dependencies:
|
dependencies:
|
||||||
cheerio "^0.20.0"
|
cheerio "^0.20.0"
|
||||||
highlight.js "^9.4.0"
|
highlight.js "^9.4.0"
|
||||||
@ -7707,6 +7711,13 @@ webpack-merge@^4.1.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
lodash "^4.17.4"
|
lodash "^4.17.4"
|
||||||
|
|
||||||
|
webpack-sources@^0.1.0:
|
||||||
|
version "0.1.5"
|
||||||
|
resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-0.1.5.tgz#aa1f3abf0f0d74db7111c40e500b84f966640750"
|
||||||
|
dependencies:
|
||||||
|
source-list-map "~0.1.7"
|
||||||
|
source-map "~0.5.3"
|
||||||
|
|
||||||
webpack-sources@^1.0.1:
|
webpack-sources@^1.0.1:
|
||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf"
|
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf"
|
||||||
@ -7926,9 +7937,9 @@ yeast@0.1.2:
|
|||||||
version "0.1.2"
|
version "0.1.2"
|
||||||
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
|
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
|
||||||
|
|
||||||
zan-doc@^0.2.1:
|
zan-doc@^0.2.2:
|
||||||
version "0.2.1"
|
version "0.2.2"
|
||||||
resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.1.tgz#34723ea180d0ac2e183b66d2a3e4a04b4f6fe91b"
|
resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.2.tgz#ebf8ffda5bd3cf9277cc3e59c48476a3fbf84d9f"
|
||||||
dependencies:
|
dependencies:
|
||||||
cheerio "0.22.0"
|
cheerio "0.22.0"
|
||||||
decamelize "^1.2.0"
|
decamelize "^1.2.0"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user