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
8fc296df9f
@ -18,6 +18,22 @@
|
||||
<van-step>交易完成</van-step>
|
||||
</van-steps>
|
||||
|
||||
</example-block><example-block title="只显示步骤条">
|
||||
<van-steps direction="vertical" :active="0" active-color="#f60">
|
||||
<van-step>
|
||||
<h3>【城市】最新的物流状态之类的表述哈哈哈哈</h3>
|
||||
<p>2016-07-12 12:12:12</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>【城市】已经过了的物流状态我是折行我是折行我是折行联系电话：158630099999</h3>
|
||||
<p>2016-07-12 12:12:12</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>未发货</h3>
|
||||
<p>2016-07-12 12:12:12</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<van-steps :active="active" title="等待商家发货">
|
||||
<van-icon slot="icon" name="like"></van-icon>
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
</example-block><example-block title="基础用法">
|
||||
@ -13,7 +12,6 @@
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
</example-block><example-block title="设置切换tab的动画时间">
|
||||
@ -23,13 +21,24 @@
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
</example-block><example-block title="禁用tab">
|
||||
</example-block><example-block title="多于4个tab时">
|
||||
<van-tabs>
|
||||
<van-tab title="选项三">内容一</van-tab>
|
||||
<van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
<van-tab title="选项六">内容六</van-tab>
|
||||
<van-tab title="选项七">内容七</van-tab>
|
||||
<van-tab title="选项八">内容八</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
</example-block><example-block title="禁用tab">
|
||||
<van-tabs>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
|
||||
@ -40,7 +49,6 @@
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
</example-block><example-block title="自定义样式">
|
||||
@ -49,7 +57,6 @@
|
||||
<van-tab title="选项二" class="custom-pane">内容二</van-tab>
|
||||
<van-tab title="选项三" class="custom-pane">内容三</van-tab>
|
||||
<van-tab title="选项四" class="custom-pane">内容四</van-tab>
|
||||
<van-tab title="选项五" class="custom-pane">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
|
||||
@ -60,7 +67,6 @@
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
|
||||
|
||||
@ -86,4 +86,5 @@ export default {
|
||||
| title | 自定义标题 |
|
||||
| desc | 自定义描述 |
|
||||
| tags | 自定义tags |
|
||||
| thumb | 自定义thumb |
|
||||
| footer | 自定义footer |
|
||||
|
||||
@ -111,6 +111,29 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
#### 竖式步骤条
|
||||
|
||||
可以通过设置`direction`属性来改变步骤条的显示方式，可选值有`vertical/horizontal`。
|
||||
|
||||
:::demo 只显示步骤条
|
||||
```html
|
||||
<van-steps direction="vertical" :active="0" active-color="#f60">
|
||||
<van-step>
|
||||
<h3>【城市】最新的物流状态之类的表述哈哈哈哈</h3>
|
||||
<p>2016-07-12 12:12:12</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>【城市】已经过了的物流状态我是折行我是折行我是折行联系电话：158630099999</h3>
|
||||
<p>2016-07-12 12:12:12</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>未发货</h3>
|
||||
<p>2016-07-12 12:12:12</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
|
||||
可以使用具名`slot`增加自定义内容，其中包含`icon`和`message-extra`。
|
||||
@ -137,6 +160,8 @@ export default {
|
||||
| iconClass | 当前步骤栏为icon添加的类 | `string` | | |
|
||||
| title | 当前步骤从标题 | `string` | | |
|
||||
| description | 当前步骤描述 | `string` | | |
|
||||
| direction | 显示方向 | `string` | `horizontal` | `vertical/horizontal` |
|
||||
| activeColor | `active`状态时的颜色 | `string` | `#06bf04` | |
|
||||
|
||||
### Steps Slot
|
||||
|
||||
|
||||
@ -97,7 +97,6 @@ export default {
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
@ -113,7 +112,6 @@ export default {
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
@ -132,6 +130,25 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
#### 多于4个tab时
|
||||
|
||||
多于4个tab时，可以横向滚动tab。
|
||||
|
||||
:::demo 多于4个tab时
|
||||
```html
|
||||
<van-tabs>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
<van-tab title="选项六">内容六</van-tab>
|
||||
<van-tab title="选项七">内容七</van-tab>
|
||||
<van-tab title="选项八">内容八</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用tab
|
||||
|
||||
在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
|
||||
@ -139,11 +156,10 @@ export default {
|
||||
:::demo 禁用tab
|
||||
```html
|
||||
<van-tabs>
|
||||
<van-tab title="选项三">内容一</van-tab>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<script>
|
||||
@ -169,7 +185,6 @@ export default {
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
@ -198,7 +213,6 @@ export default {
|
||||
<van-tab title="选项二" class="custom-pane">内容二</van-tab>
|
||||
<van-tab title="选项三" class="custom-pane">内容三</van-tab>
|
||||
<van-tab title="选项四" class="custom-pane">内容四</van-tab>
|
||||
<van-tab title="选项五" class="custom-pane">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<style>
|
||||
@ -228,7 +242,6 @@ export default {
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vant",
|
||||
"version": "0.6.2",
|
||||
"version": "0.6.5",
|
||||
"description": "有赞vue wap组件库",
|
||||
"main": "lib/vant.js",
|
||||
"style": "lib/vant-css/index.css",
|
||||
|
||||
@ -1,18 +1,20 @@
|
||||
<template>
|
||||
<div class="van-card">
|
||||
<img :src="thumb" alt="" class="van-card__img">
|
||||
<div class="van-card__content" :class="{'van-card__content--center': !this.$slots.footer}">
|
||||
<div class="van-card__info">
|
||||
<slot name="title">
|
||||
<h4 v-text="title" class="van-card__title"></h4>
|
||||
</slot>
|
||||
<slot name="desc">
|
||||
<p v-if="desc" v-text="desc" class="van-card__desc"></p>
|
||||
</slot>
|
||||
<slot name="tags"></slot>
|
||||
</div>
|
||||
<slot name="footer"></slot>
|
||||
<div :class="['van-card', { 'van-card--center': !$slots.footer }]">
|
||||
<div class="van-card__thumb">
|
||||
<slot name="thumb">
|
||||
<img :src="thumb" class="van-card__img" />
|
||||
</slot>
|
||||
</div>
|
||||
<div class="van-card__content">
|
||||
<slot name="title">
|
||||
<h4 v-text="title" class="van-card__title"></h4>
|
||||
</slot>
|
||||
<slot name="desc">
|
||||
<p v-if="desc" v-text="desc" class="van-card__desc"></p>
|
||||
</slot>
|
||||
<slot name="tags"></slot>
|
||||
</div>
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -20,10 +22,7 @@
|
||||
export default {
|
||||
name: 'van-card',
|
||||
props: {
|
||||
thumb: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
thumb: String,
|
||||
title: String,
|
||||
desc: String
|
||||
}
|
||||
|
||||
@ -32,6 +32,7 @@ const showNextDialog = () => {
|
||||
initInstance();
|
||||
}
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (!instance.value && dialogQueue.length > 0) {
|
||||
currentDialog = dialogQueue.shift();
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@ let instance;
|
||||
const ImagePreviewConstructor = Vue.extend(ImagePreview);
|
||||
|
||||
const initInstance = () => {
|
||||
/* istanbul ignore if */
|
||||
if (Vue.prototype.$isServer) return;
|
||||
instance = new ImagePreviewConstructor({
|
||||
el: document.createElement('div')
|
||||
@ -13,6 +14,7 @@ const initInstance = () => {
|
||||
};
|
||||
|
||||
var ImagePreviewBox = images => {
|
||||
/* istanbul ignore if */
|
||||
if (Vue.prototype.$isServer) return;
|
||||
if (!instance) {
|
||||
initInstance();
|
||||
|
||||
@ -92,6 +92,7 @@ export default {
|
||||
const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
|
||||
const container = this.$refs.previewContainer;
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (supportTouch) {
|
||||
let touchStartTime;
|
||||
|
||||
@ -99,6 +100,7 @@ export default {
|
||||
touchStartTime = new Date();
|
||||
});
|
||||
container.addEventListener('touchend', () => {
|
||||
/* istanbul ignore else */
|
||||
if (new Date() - touchStartTime < 1500) {
|
||||
this.value = false;
|
||||
}
|
||||
|
||||
@ -194,6 +194,7 @@ export default {
|
||||
},
|
||||
|
||||
end: () => {
|
||||
/* istanbul ignore else */
|
||||
if (this.isDragging) {
|
||||
this.isDragging = false;
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="van-step" :class="statusClass">
|
||||
<div class="van-step" :class="stepClass">
|
||||
<div class="van-step__circle-container">
|
||||
<i class="van-step__circle" v-if="status !== 'process'"></i>
|
||||
<i class="van-icon van-icon-checked" v-else></i>
|
||||
<i class="van-icon van-icon-checked" :style="{ color: $parent.activeColor }" v-else></i>
|
||||
</div>
|
||||
<p class="van-step__title">
|
||||
<div class="van-step__title" :style="titleStyle">
|
||||
<slot></slot>
|
||||
</p>
|
||||
</div>
|
||||
<div class="van-step__line"></div>
|
||||
</div>
|
||||
</template>
|
||||
@ -30,9 +30,18 @@ export default {
|
||||
return 'process';
|
||||
}
|
||||
},
|
||||
statusClass() {
|
||||
stepClass() {
|
||||
const status = this.status;
|
||||
return status ? 'van-step--' + status : '';
|
||||
const statusClass = status ? 'van-step--' + status : '';
|
||||
const directionClass = `van-step--${this.$parent.direction}`;
|
||||
return [directionClass, statusClass];
|
||||
},
|
||||
titleStyle() {
|
||||
if (this.status === 'process') {
|
||||
return {
|
||||
color: this.$parent.activeColor
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="van-steps" :class="`van-steps--${steps.length}`">
|
||||
<div class="van-steps" :class="stepsClass">
|
||||
<div class="van-steps__status" v-if="title || description">
|
||||
<div class="van-steps__icon" v-if="icon || $slots.icon">
|
||||
<slot name="icon">
|
||||
@ -41,13 +41,31 @@ export default {
|
||||
default: ''
|
||||
},
|
||||
title: String,
|
||||
description: String
|
||||
description: String,
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'horizontal'
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#06bf04'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
steps: []
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
stepsClass() {
|
||||
const direction = this.direction;
|
||||
const lengthClass = `van-steps--${this.steps.length}`;
|
||||
const directionClass = `van-steps--${direction}`;
|
||||
|
||||
return direction === 'horizontal' ? [lengthClass, directionClass] : [directionClass];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
46
packages/tab/src/swipe.js
Normal file
46
packages/tab/src/swipe.js
Normal file
@ -0,0 +1,46 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
let isSwiping = false;
|
||||
|
||||
const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
|
||||
|
||||
export default function(element, options) {
|
||||
const moveFn = function(event) {
|
||||
if (options.drag) {
|
||||
options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
|
||||
}
|
||||
};
|
||||
|
||||
const endFn = function(event) {
|
||||
if (!supportTouch) {
|
||||
document.removeEventListener('mousemove', moveFn);
|
||||
document.removeEventListener('mouseup', endFn);
|
||||
}
|
||||
|
||||
isSwiping = false;
|
||||
|
||||
if (options.end) {
|
||||
options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
|
||||
}
|
||||
};
|
||||
|
||||
element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {
|
||||
if (isSwiping) return;
|
||||
|
||||
if (!supportTouch) {
|
||||
document.addEventListener('mousemove', moveFn);
|
||||
document.addEventListener('mouseup', endFn);
|
||||
}
|
||||
isSwiping = true;
|
||||
|
||||
if (options.start) {
|
||||
options.start(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
|
||||
}
|
||||
});
|
||||
|
||||
if (supportTouch) {
|
||||
element.addEventListener('touchmove', moveFn);
|
||||
element.addEventListener('touchend', endFn);
|
||||
element.addEventListener('touchcancel', endFn);
|
||||
}
|
||||
};
|
||||
@ -1,8 +1,26 @@
|
||||
<template>
|
||||
<div class="van-tabs" :class="[`van-tabs--${type}`]">
|
||||
<div class="van-tabs__nav-wrap" v-if="type === 'line' && tabs.length > 4">
|
||||
<div class="van-tabs__swipe" ref="swipe">
|
||||
<div class="van-tabs__nav van-tabs__nav--line">
|
||||
<div class="van-tabs__nav-bar" :style="navBarStyle"></div>
|
||||
<div
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
class="van-tab"
|
||||
:class="{'van-tab--active': index === curActive}"
|
||||
ref="tabkey"
|
||||
@click="handleTabClick(index, tab)"
|
||||
>
|
||||
{{ tab.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="van-tabs__nav"
|
||||
:class="[`van-tabs__nav--${this.type}`, `van-tabs--col-${this.tabs.length}`]"
|
||||
:class="[`van-tabs__nav--${this.type}`]"
|
||||
>
|
||||
<div class="van-tabs__nav-bar" :style="navBarStyle" v-if="type === 'line'"></div>
|
||||
<div
|
||||
@ -23,6 +41,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import swipe from './swipe';
|
||||
import translateUtil from 'src/utils/transition';
|
||||
|
||||
export default {
|
||||
name: 'van-tabs',
|
||||
|
||||
@ -48,13 +69,21 @@
|
||||
return {
|
||||
tabs: [],
|
||||
isReady: false,
|
||||
curActive: +this.active
|
||||
curActive: +this.active,
|
||||
isSwiping: false
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
active(val) {
|
||||
this.curActive = +val;
|
||||
},
|
||||
|
||||
curActive() {
|
||||
/* istanbul ignore else */
|
||||
if (this.tabs.length > 4) {
|
||||
this.doOnValueChange();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -72,12 +101,38 @@
|
||||
|
||||
return {
|
||||
width: offsetWidth,
|
||||
transform: `translate3d(${offsetLeft}, 0px, 0px)`,
|
||||
transform: `translate3d(${offsetLeft}, 0, 0)`,
|
||||
transitionDuration: `${this.duration}s`
|
||||
};
|
||||
},
|
||||
swipeWidth() {
|
||||
return this.$refs.swipe && this.$refs.swipe.getBoundingClientRect().width;
|
||||
},
|
||||
maxTranslate() {
|
||||
/* istanbul ignore if */
|
||||
if (!this.$refs.tabkey) return;
|
||||
|
||||
const lastTab = this.$refs.tabkey[this.tabs.length - 1];
|
||||
const lastTabWidth = lastTab.offsetWidth;
|
||||
const lastTabOffsetLeft = lastTab.offsetLeft;
|
||||
|
||||
return (lastTabOffsetLeft + lastTabWidth) - this.swipeWidth;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// 页面载入完成
|
||||
this.$nextTick(() => {
|
||||
// 可以开始触发在computed中关于nav-bar的css动画
|
||||
this.isReady = true;
|
||||
this.initEvents();
|
||||
|
||||
if (this.tabs.length > 4) {
|
||||
this.doOnValueChange();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* tab点击事件
|
||||
@ -93,15 +148,67 @@
|
||||
|
||||
this.$emit('click', index);
|
||||
this.curActive = index;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// 页面载入完成
|
||||
this.$nextTick(() => {
|
||||
// 可以开始触发在computed中关于nav-bar的css动画
|
||||
this.isReady = true;
|
||||
});
|
||||
/**
|
||||
* 将当前value值转换为需要translate的值
|
||||
*/
|
||||
value2Translate(value) {
|
||||
/* istanbul ignore if */
|
||||
if (!this.$refs.tabkey) return 0;
|
||||
|
||||
const tab = this.$refs.tabkey[value];
|
||||
const maxTranslate = this.maxTranslate;
|
||||
const tabWidth = tab.offsetWidth;
|
||||
const tabOffsetLeft = tab.offsetLeft;
|
||||
let translate = tabOffsetLeft + (tabWidth * 2.7) - this.swipeWidth;
|
||||
if (translate < 0) {
|
||||
translate = 0;
|
||||
}
|
||||
|
||||
return -1 * (translate > maxTranslate ? maxTranslate : translate);
|
||||
},
|
||||
|
||||
initEvents() {
|
||||
const el = this.$refs.swipe;
|
||||
if (!el) return;
|
||||
|
||||
let swipeState = {};
|
||||
|
||||
swipe(el, {
|
||||
start: event => {
|
||||
swipeState = {
|
||||
start: new Date(),
|
||||
startLeft: event.pageX,
|
||||
startTranslateLeft: translateUtil.getElementTranslate(el).left
|
||||
};
|
||||
},
|
||||
|
||||
drag: event => {
|
||||
this.isSwiping = true;
|
||||
|
||||
swipeState.left = event.pageX;
|
||||
const deltaX = swipeState.left - swipeState.startLeft;
|
||||
const translate = swipeState.startTranslateLeft + deltaX;
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (translate > 0 || (translate * -1) > this.maxTranslate ) return;
|
||||
|
||||
translateUtil.translateElement(el, translate, null);
|
||||
},
|
||||
|
||||
end: () => {
|
||||
this.isSwiping = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
doOnValueChange() {
|
||||
const value = +this.curActive;
|
||||
const swipe = this.$refs.swipe;
|
||||
|
||||
translateUtil.translateElement(swipe, this.value2Translate(value), null);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vant-css",
|
||||
"version": "0.6.2",
|
||||
"version": "0.6.5",
|
||||
"description": "vant css.",
|
||||
"main": "lib/index.css",
|
||||
"style": "lib/index.css",
|
||||
|
||||
@ -1,93 +1,93 @@
|
||||
@import './mixins/ellipsis.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b card {
|
||||
padding: 5px 15px 5px 115px;
|
||||
height: 90px;
|
||||
background: #FAFAFA;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.van-card {
|
||||
color: #333;
|
||||
height: 90px;
|
||||
background: #fafafa;
|
||||
position: relative;
|
||||
padding: 5px 15px 5px 115px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
&--center,
|
||||
&__thumb {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__thumb {
|
||||
top: 5px;
|
||||
left: 15px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
border: none;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@e img {
|
||||
width: 90px;
|
||||
height: auto;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 15px;
|
||||
&,
|
||||
&__thumb,
|
||||
&__row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
|
||||
&--center {
|
||||
height: 90px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@e content {
|
||||
display: table;
|
||||
width: 100%;
|
||||
&__title,
|
||||
&__desc {
|
||||
line-height: 20px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@m center {
|
||||
display: table;
|
||||
height: 90px;
|
||||
&__title {
|
||||
max-height: 40px;
|
||||
@mixin multi-ellipsis 2;
|
||||
}
|
||||
|
||||
.van-card__info {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__desc {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
max-height: 20px;
|
||||
@mixin multi-ellipsis 1;
|
||||
}
|
||||
|
||||
@e row {
|
||||
overflow: hidden;
|
||||
padding-right: 80px;
|
||||
position: relative;
|
||||
}
|
||||
&__price,
|
||||
&__num {
|
||||
flex: 1;
|
||||
min-width: 80px;
|
||||
line-height: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@e title {
|
||||
line-height: 20px;
|
||||
color: #333;
|
||||
max-height: 40px;
|
||||
margin-bottom: 5px;
|
||||
word-break: break-all;
|
||||
@mixin multi-ellipsis 2;
|
||||
}
|
||||
&__price {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@e desc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
max-height: 20px;
|
||||
word-break: break-all;
|
||||
@mixin multi-ellipsis 1;
|
||||
}
|
||||
&__num {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@e price {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
&__footer {
|
||||
right: 15px;
|
||||
bottom: 5px;
|
||||
position: absolute;
|
||||
|
||||
@e num {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@e footer {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 5px;
|
||||
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,32 @@
|
||||
@import './common/var.css';
|
||||
@import './mixins/ellipsis.css';
|
||||
@import './icon.css';
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b steps {
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
background-color: #fff;
|
||||
|
||||
@m horizontal {
|
||||
padding: 0 10px;
|
||||
|
||||
.van-steps__items {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-bottom: 22px;
|
||||
|
||||
&.van-steps__items--alone {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@m vertical {
|
||||
padding: 0 0 0 35px;
|
||||
}
|
||||
|
||||
@m 4 {
|
||||
.van-step {
|
||||
width: 33.2%;
|
||||
@ -53,86 +72,94 @@
|
||||
max-height: 18px;
|
||||
@mixin multi-ellipsis 1;
|
||||
}
|
||||
|
||||
@e items {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-bottom: 20px;
|
||||
|
||||
@m alone {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@b step {
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
position: relative;
|
||||
color: $c-gray-dark;
|
||||
|
||||
@m horizontal {
|
||||
float: left;
|
||||
|
||||
@m finish {
|
||||
color: $c-black;
|
||||
|
||||
.van-step__circle,
|
||||
.van-step__line {
|
||||
background-color: $c-green;
|
||||
&:first-child {
|
||||
.van-step__title {
|
||||
transform: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@m process {
|
||||
color: $c-black;
|
||||
&:last-child {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: auto;
|
||||
|
||||
.van-step__title {
|
||||
transform: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.van-step__circle-container {
|
||||
left: auto;
|
||||
right: -9px;
|
||||
}
|
||||
|
||||
.van-step__line {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.van-step__circle-container {
|
||||
top: 24px;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: -8px;
|
||||
padding: 0 8px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
.van-step__title {
|
||||
font-size: 12px;
|
||||
color: $c-green;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.van-step__title {
|
||||
transform: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: auto;
|
||||
|
||||
.van-step__title {
|
||||
transform: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.van-step__circle-container {
|
||||
left: auto;
|
||||
right: -9px;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.van-step__line {
|
||||
width: 0;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 30px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: $c-gray-light;
|
||||
}
|
||||
|
||||
&.van-step--finish {
|
||||
color: $c-black;
|
||||
|
||||
.van-step__circle,
|
||||
.van-step__line {
|
||||
background-color: $c-green;
|
||||
}
|
||||
}
|
||||
|
||||
&.van-step--process {
|
||||
color: $c-black;
|
||||
|
||||
.van-step__circle-container {
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
font-size: 12px;
|
||||
color: $c-green;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.van-step__circle-container {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: -8px;
|
||||
padding: 0 8px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@e circle {
|
||||
.van-step__circle {
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
@ -140,20 +167,59 @@
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@e title {
|
||||
font-size: 12px;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
}
|
||||
@m vertical {
|
||||
float: none;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 10px 10px 10px 0;
|
||||
|
||||
@e line {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 30px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: $c-gray-light;
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
top: 0;
|
||||
left: -15px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.van-step__circle-container > i {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.van-icon-checked {
|
||||
top: 12px;
|
||||
left: -20px;
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.van-step__circle {
|
||||
top: 16px;
|
||||
left: -17px;
|
||||
}
|
||||
|
||||
.van-step__line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -15px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: $c-gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,27 +5,20 @@
|
||||
@b tabs {
|
||||
position: relative;
|
||||
|
||||
@m col-2 {
|
||||
.van-tab {
|
||||
width: 50%;
|
||||
}
|
||||
@e nav-wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@m col-3 {
|
||||
.van-tab {
|
||||
width: 33.33333333333333%;
|
||||
}
|
||||
}
|
||||
@e swipe {
|
||||
user-select: none;
|
||||
transition: transform ease .3s;
|
||||
|
||||
@m col-4 {
|
||||
.van-tab {
|
||||
width: 25%;
|
||||
flex: 0 0 22%;
|
||||
}
|
||||
}
|
||||
|
||||
@m col-5 {
|
||||
.van-tab {
|
||||
width: 20%;
|
||||
.van-tabs__nav {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,16 +26,15 @@
|
||||
overflow: hidden;
|
||||
transition: transform .5s cubic-bezier(.645, .045, .355, 1);
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
@m line {
|
||||
height: 44px;
|
||||
background-color: $c-white;
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
@b tabs-nav-bar {
|
||||
display: block;
|
||||
|
||||
.van-tab {
|
||||
&::after {
|
||||
@mixin border-retina (top, bottom);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,14 +47,16 @@
|
||||
overflow: hidden;
|
||||
|
||||
.van-tab {
|
||||
color: #666666;
|
||||
color: #666;
|
||||
line-height: 28px;
|
||||
border-right: 1px solid #666666;
|
||||
border-right: 1px solid #666;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.van-tab--active {
|
||||
background-color: #666666;
|
||||
background-color: #666;
|
||||
color: $c-white;
|
||||
}
|
||||
}
|
||||
@ -82,13 +76,16 @@
|
||||
}
|
||||
|
||||
@b tab {
|
||||
position: relative;
|
||||
color: $c-black;
|
||||
background-color: $c-white;
|
||||
font-size: 14px;
|
||||
line-height: 44px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
float: left;
|
||||
flex: 1;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
|
||||
@m active {
|
||||
color: #FF4444;
|
||||
|
||||
@ -83,7 +83,7 @@ if (typeof window !== 'undefined' && window.Vue) {
|
||||
|
||||
module.exports = {
|
||||
install,
|
||||
version: '0.6.2',
|
||||
version: '0.6.5',
|
||||
Button,
|
||||
Switch,
|
||||
Field,
|
||||
|
||||
@ -6,6 +6,8 @@
|
||||
* <div v-clickoutside="handleClose">
|
||||
* ```
|
||||
*/
|
||||
import Vue from 'vue';
|
||||
const isServer = Vue.prototype.$isServer;
|
||||
const clickoutsideContext = '@@clickoutsideContext';
|
||||
|
||||
export default {
|
||||
@ -20,7 +22,7 @@ export default {
|
||||
methodName: binding.expression,
|
||||
arg: binding.arg || 'click'
|
||||
};
|
||||
document.addEventListener(el[clickoutsideContext].arg, documentHandler);
|
||||
!isServer && document.addEventListener(el[clickoutsideContext].arg, documentHandler);
|
||||
},
|
||||
|
||||
update(el, binding) {
|
||||
@ -28,7 +30,7 @@ export default {
|
||||
},
|
||||
|
||||
unbind(el) {
|
||||
document.removeEventListener(
|
||||
!isServer && document.removeEventListener(
|
||||
el[clickoutsideContext].arg,
|
||||
el[clickoutsideContext].documentHandler);
|
||||
},
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
import Vue from 'vue';
|
||||
const isServer = Vue.prototype.$isServer;
|
||||
|
||||
const trim = function(string) {
|
||||
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
|
||||
};
|
||||
@ -66,7 +69,7 @@ export const once = function(el, event, fn) {
|
||||
};
|
||||
|
||||
export const on = (function() {
|
||||
if (document.addEventListener) {
|
||||
if (!isServer && document.addEventListener) {
|
||||
return function(element, event, handler) {
|
||||
if (element && event && handler) {
|
||||
element.addEventListener(event, handler, false);
|
||||
@ -82,7 +85,7 @@ export const on = (function() {
|
||||
})();
|
||||
|
||||
export const off = (function() {
|
||||
if (document.removeEventListener) {
|
||||
if (!isServer && document.removeEventListener) {
|
||||
return function(element, event, handler) {
|
||||
if (element && event) {
|
||||
element.removeEventListener(event, handler, false);
|
||||
|
||||
28
test/unit/components/more-tabs.vue
Normal file
28
test/unit/components/more-tabs.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<van-tabs :active="active">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
<van-tab title="选项六">内容六</van-tab>
|
||||
<van-tab title="选项七">内容七</van-tab>
|
||||
<van-tab title="选项八">内容八</van-tab>
|
||||
</van-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tab from 'packages/tab';
|
||||
import Tabs from 'packages/tabs';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-tab': Tab,
|
||||
'van-tabs': Tabs
|
||||
},
|
||||
|
||||
props: {
|
||||
active: [String, Number]
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -4,7 +4,6 @@
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三" disabled>内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import Dialog from 'packages/dialog';
|
||||
import Vue from 'vue';
|
||||
|
||||
describe('Dialog', () => {
|
||||
afterEach(() => {
|
||||
@ -51,6 +52,6 @@ describe('Dialog', () => {
|
||||
document.querySelector('.van-dialog__cancel').click();
|
||||
expect(dialogAction).to.equal('cancel');
|
||||
done();
|
||||
}, 50);
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
|
||||
@ -16,6 +16,7 @@ describe('ImagePreview', () => {
|
||||
|
||||
it('create a image preview', (done) => {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
]);
|
||||
@ -40,6 +41,7 @@ describe('ImagePreview', () => {
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
]);
|
||||
|
||||
@ -21,8 +21,21 @@ describe('Steps', () => {
|
||||
|
||||
const finishStep = wrapper.find('.van-step')[0];
|
||||
expect(finishStep.hasClass('van-step--finish')).to.be.true;
|
||||
expect(finishStep.hasClass('van-step--horizontal')).to.be.true;
|
||||
|
||||
const proccessStep = wrapper.find('.van-step')[1];
|
||||
expect(proccessStep.hasClass('van-step--process')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a vertical step', () => {
|
||||
wrapper = mount(Steps, {
|
||||
propsData: {
|
||||
direction: 'vertical'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-steps')).to.be.true;
|
||||
expect(wrapper.hasClass('van-steps--vertical')).to.be.true;
|
||||
expect(wrapper.data().steps.length).to.equal(0);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import Tabs from 'packages/tabs';
|
||||
import { mount } from 'avoriaz';
|
||||
import TabsTestComponent from '../components/tabs';
|
||||
import MoreTabsTestComponent from '../components/more-tabs';
|
||||
|
||||
describe('Tabs', () => {
|
||||
let wrapper;
|
||||
@ -74,4 +75,75 @@ describe('Tabs', () => {
|
||||
|
||||
expect(wrapper.style.transitionDuration != '').to.be.true;
|
||||
});
|
||||
|
||||
it('create a tabs greater then 4', (done) => {
|
||||
wrapper = mount(MoreTabsTestComponent, {
|
||||
attachToDocument: true
|
||||
});
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
const nTab = wrapper.find('.van-tab')[4];
|
||||
nTab.trigger('click');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('create a tabs greater then 4 then click last tab', (done) => {
|
||||
wrapper = mount(MoreTabsTestComponent, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
active: 7
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
const nTab = wrapper.find('.van-tab')[6];
|
||||
nTab.trigger('click');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('test swipe', (done) => {
|
||||
wrapper = mount(MoreTabsTestComponent, {
|
||||
attachToDocument: true
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const nSwipe = wrapper.find('.van-tabs__swipe')[0];
|
||||
|
||||
const eventMouseObject = new window.Event('mousedown');
|
||||
eventMouseObject.pageX = 200;
|
||||
nSwipe.element.dispatchEvent(eventMouseObject);
|
||||
|
||||
const eventTouchObject = new window.Event('touchstart');
|
||||
eventTouchObject.changedTouches = [{ pageX: 200 }];
|
||||
nSwipe.element.dispatchEvent(eventTouchObject);
|
||||
}, 500);
|
||||
|
||||
setTimeout(() => {
|
||||
const nSwipe = wrapper.find('.van-tabs__swipe')[0];
|
||||
|
||||
const eventMouseMoveObject = new window.Event('mousemove');
|
||||
eventMouseMoveObject.pageX = 0;
|
||||
document.dispatchEvent(eventMouseMoveObject);
|
||||
|
||||
const eventObject = new window.Event('touchmove');
|
||||
eventObject.changedTouches = [{ pageX: 0 }];
|
||||
nSwipe.element.dispatchEvent(eventObject);
|
||||
|
||||
// 结束滑动
|
||||
const eventMouseUpObject = new window.Event('mouseup');
|
||||
document.dispatchEvent(eventMouseUpObject);
|
||||
const eventEndObject = new window.Event('touchend');
|
||||
eventEndObject.changedTouches = [{}];
|
||||
nSwipe.element.dispatchEvent(eventEndObject);
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
const nItem = wrapper.find('.van-tab')[0];
|
||||
expect(nItem.hasClass('van-tab--active')).to.be.true;
|
||||
|
||||
done();
|
||||
}, 1200);
|
||||
});
|
||||
});
|
||||
|
||||
@ -18,12 +18,4 @@ describe('Tag', () => {
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
it('create with wrong typeProps', () => {
|
||||
wrapper = mount(Tag, {
|
||||
propsData: {
|
||||
type: 'wrong'
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user