mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge remote-tracking branch 'upstream/master' into dev
This commit is contained in:
niunai
commit
f98223a21b
@ -7,6 +7,7 @@ var getPostcssPlugin = require('./utils/postcss_pipe');
|
|||||||
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||||
var HtmlWebpackPlugin = require('html-webpack-plugin');
|
var HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||||
|
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
|
||||||
|
|
||||||
var StyleExtractPlugin;
|
var StyleExtractPlugin;
|
||||||
if (process.env.NODE_ENV === 'production') {
|
if (process.env.NODE_ENV === 'production') {
|
||||||
@ -25,8 +26,7 @@ function convert(str) {
|
|||||||
function wrap(render) {
|
function wrap(render) {
|
||||||
return function() {
|
return function() {
|
||||||
return render.apply(this, arguments)
|
return render.apply(this, arguments)
|
||||||
.replace('<code class="', '<code class="hljs ')
|
.replace(/\<code v-pre class=\"/, '<code v-pre class="hljs ');
|
||||||
.replace('<code>', '<code class="hljs">');
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -58,7 +58,6 @@ module.exports = {
|
|||||||
extensions: ['.js', '.vue', '.css'],
|
extensions: ['.js', '.vue', '.css'],
|
||||||
alias: {
|
alias: {
|
||||||
'vue$': 'vue/dist/vue.runtime.common.js',
|
'vue$': 'vue/dist/vue.runtime.common.js',
|
||||||
'vant': path.join(__dirname, '..'),
|
|
||||||
'src': path.join(__dirname, '../src'),
|
'src': path.join(__dirname, '../src'),
|
||||||
'packages': path.join(__dirname, '../packages'),
|
'packages': path.join(__dirname, '../packages'),
|
||||||
'lib': path.join(__dirname, '../lib'),
|
'lib': path.join(__dirname, '../lib'),
|
||||||
@ -167,7 +166,9 @@ module.exports = {
|
|||||||
filename: 'examples.html',
|
filename: 'examples.html',
|
||||||
inject: true
|
inject: true
|
||||||
}),
|
}),
|
||||||
|
new webpack.HotModuleReplacementPlugin(),
|
||||||
new OptimizeCssAssetsPlugin(),
|
new OptimizeCssAssetsPlugin(),
|
||||||
StyleExtractPlugin
|
StyleExtractPlugin,
|
||||||
|
new FriendlyErrorsPlugin()
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|||||||
@ -6,6 +6,7 @@
|
|||||||
"cell": "./packages/cell/index.js",
|
"cell": "./packages/cell/index.js",
|
||||||
"icon": "./packages/icon/index.js",
|
"icon": "./packages/icon/index.js",
|
||||||
"cell-group": "./packages/cell-group/index.js",
|
"cell-group": "./packages/cell-group/index.js",
|
||||||
|
"cell-swipe": "./packages/cell-swipe/index.js",
|
||||||
"popup": "./packages/popup/index.js",
|
"popup": "./packages/popup/index.js",
|
||||||
"dialog": "./packages/dialog/index.js",
|
"dialog": "./packages/dialog/index.js",
|
||||||
"picker": "./packages/picker/index.js",
|
"picker": "./packages/picker/index.js",
|
||||||
|
|||||||
39
docs/examples-dist/cell-swipe.vue
Normal file
39
docs/examples-dist/cell-swipe.vue
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<template><section class="demo-cell"><h1 class="demo-title">Cell Swipe 滑动单元格</h1><example-block title="基础用法">
|
||||||
|
<van-cell-swipe :right-width="65" :left-width="65">
|
||||||
|
<van-cell-group>
|
||||||
|
<van-cell title="单元格1" value="单元格1内容"></van-cell>
|
||||||
|
</van-cell-group>
|
||||||
|
|
||||||
|
<span slot="right" class="swipe-delete-btn">
|
||||||
|
删除
|
||||||
|
</span>
|
||||||
|
<span slot="left" class="swipe-check-btn">
|
||||||
|
选择
|
||||||
|
</span>
|
||||||
|
</van-cell-swipe>
|
||||||
|
|
||||||
|
</example-block></section></template>
|
||||||
|
<style>
|
||||||
|
.swipe-delete-btn {
|
||||||
|
background-color: #FF4444;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 65px;
|
||||||
|
height: 44px;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 44px;
|
||||||
|
}
|
||||||
|
.swipe-check-btn {
|
||||||
|
background-color: #84c483;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 65px;
|
||||||
|
height: 44px;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 44px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||||
@ -7,7 +7,7 @@
|
|||||||
|
|
||||||
</example-block><example-block title="禁用状态">
|
</example-block><example-block title="禁用状态">
|
||||||
<div class="van-checkbox-wrapper">
|
<div class="van-checkbox-wrapper">
|
||||||
<van-checkbox v-model="checkbox2">复选框2</van-checkbox>
|
<van-checkbox v-model="checkbox2" disabled>复选框2</van-checkbox>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -15,7 +15,7 @@
|
|||||||
</example-block><example-block title="Checkbox组">
|
</example-block><example-block title="Checkbox组">
|
||||||
<div class="van-checkbox-wrapper">
|
<div class="van-checkbox-wrapper">
|
||||||
<van-checkbox-group v-model="result">
|
<van-checkbox-group v-model="result">
|
||||||
<van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
|
<van-checkbox v-for="(item, index) in list" :key="index" :name="item">复选框{{item}}</van-checkbox>
|
||||||
</van-checkbox-group>
|
</van-checkbox-group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -24,7 +24,7 @@
|
|||||||
</example-block><example-block title="禁用Checkbox组">
|
</example-block><example-block title="禁用Checkbox组">
|
||||||
<div class="van-checkbox-wrapper">
|
<div class="van-checkbox-wrapper">
|
||||||
<van-checkbox-group v-model="result" disabled>
|
<van-checkbox-group v-model="result" disabled>
|
||||||
<van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
|
<van-checkbox v-for="(item, index) in list" :key="index" :name="item">复选框{{item}}</van-checkbox>
|
||||||
</van-checkbox-group>
|
</van-checkbox-group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -33,7 +33,7 @@
|
|||||||
</example-block><example-block title="与Cell组件一起使用">
|
</example-block><example-block title="与Cell组件一起使用">
|
||||||
<van-checkbox-group v-model="result">
|
<van-checkbox-group v-model="result">
|
||||||
<van-cell-group>
|
<van-cell-group>
|
||||||
<van-cell v-for="item in list">
|
<van-cell v-for="(item, index) in list" :key="index">
|
||||||
<van-checkbox :name="item">复选框{{item}}</van-checkbox>
|
<van-checkbox :name="item">复选框{{item}}</van-checkbox>
|
||||||
</van-cell>
|
</van-cell>
|
||||||
</van-cell-group>
|
</van-cell-group>
|
||||||
|
|||||||
@ -1,4 +1,7 @@
|
|||||||
<template><section class="demo-icon"><h1 class="demo-title">Icon 图标</h1><example-block title="所有Icon">
|
<template><section class="demo-icon"><h1 class="demo-title">Icon 图标</h1><example-block title="所有Icon">
|
||||||
|
<van-icon name="qr-invalid" style="text-align: center"></van-icon>
|
||||||
|
|
||||||
|
</example-block><example-block title="所有Icon">
|
||||||
<van-row>
|
<van-row>
|
||||||
<van-col span="8">
|
<van-col span="8">
|
||||||
<van-icon name="qr-invalid"></van-icon>
|
<van-icon name="qr-invalid"></van-icon>
|
||||||
@ -64,10 +67,6 @@
|
|||||||
<van-icon name="photo"></van-icon>
|
<van-icon name="photo"></van-icon>
|
||||||
<span>photo</span>
|
<span>photo</span>
|
||||||
</van-col>
|
</van-col>
|
||||||
<van-col span="8">
|
|
||||||
<van-icon name="logistics"></van-icon>
|
|
||||||
<span>logistics</span>
|
|
||||||
</van-col>
|
|
||||||
<van-col span="8">
|
<van-col span="8">
|
||||||
<van-icon name="edit"></van-icon>
|
<van-icon name="edit"></van-icon>
|
||||||
<span>edit</span>
|
<span>edit</span>
|
||||||
@ -120,26 +119,163 @@
|
|||||||
<van-icon name="password-view"></van-icon>
|
<van-icon name="password-view"></van-icon>
|
||||||
<span>password-view</span>
|
<span>password-view</span>
|
||||||
</van-col>
|
</van-col>
|
||||||
<van-col span="8">
|
|
||||||
<van-icon name="password-not-view"></van-icon>
|
|
||||||
<span>password-not-view</span>
|
|
||||||
</van-col>
|
|
||||||
<van-col span="8">
|
<van-col span="8">
|
||||||
<van-icon name="wap-nav"></van-icon>
|
<van-icon name="wap-nav"></van-icon>
|
||||||
<span>wap-nav</span>
|
<span>wap-nav</span>
|
||||||
</van-col>
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="password-not-view"></van-icon>
|
||||||
|
<span>password-not-view</span>
|
||||||
|
</van-col>
|
||||||
<van-col span="8">
|
<van-col span="8">
|
||||||
<van-icon name="wap-home"></van-icon>
|
<van-icon name="wap-home"></van-icon>
|
||||||
<span>wap-home</span>
|
<span>wap-home</span>
|
||||||
</van-col>
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="ecard-pay"></van-icon>
|
||||||
|
<span>ecard-pay</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="balance-pay"></van-icon>
|
||||||
|
<span>balance-pay</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="peer-pay"></van-icon>
|
||||||
|
<span>peer-pay</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="credit-pay"></van-icon>
|
||||||
|
<span>credit-pay</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="debit-pay"></van-icon>
|
||||||
|
<span>debit-pay</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="other-pay"></van-icon>
|
||||||
|
<span>other-pay</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="cart"></van-icon>
|
||||||
|
<span>cart</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="browsing-history"></van-icon>
|
||||||
|
<span>browsing-history</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="goods-collect"></van-icon>
|
||||||
|
<span>goods-collect</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="shop-collect"></van-icon>
|
||||||
|
<span>shop-collect</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="receive-gift"></van-icon>
|
||||||
|
<span>receive-gift</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="send-gift"></van-icon>
|
||||||
|
<span>send-gift</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="setting"></van-icon>
|
||||||
|
<span>setting</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="points"></van-icon>
|
||||||
|
<span>points</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="coupon"></van-icon>
|
||||||
|
<span>coupon</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="free-postage"></van-icon>
|
||||||
|
<span>free-postage</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="discount"></van-icon>
|
||||||
|
<span>discount</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="birthday-privilege"></van-icon>
|
||||||
|
<span>birthday-privilege</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="member-day-privilege"></van-icon>
|
||||||
|
<span>member-day-privilege</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="balance-details"></van-icon>
|
||||||
|
<span>balance-details</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="cash-back-record"></van-icon>
|
||||||
|
<span>cash-back-record</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="points-mall"></van-icon>
|
||||||
|
<span>points-mall</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="exchange-record"></van-icon>
|
||||||
|
<span>exchange-record</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="pending-payment"></van-icon>
|
||||||
|
<span>pending-payment</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="pending-orders"></van-icon>
|
||||||
|
<span>pending-orders</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="pending-deliver"></van-icon>
|
||||||
|
<span>pending-deliver</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="logistics"></van-icon>
|
||||||
|
<span>logistics</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="pending-evaluate"></van-icon>
|
||||||
|
<span>pending-evaluate</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="cash-on-deliver"></van-icon>
|
||||||
|
<span>cash-on-deliver</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="gift-card-pay"></van-icon>
|
||||||
|
<span>gift-card-pay</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="underway"></van-icon>
|
||||||
|
<span>underway</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="point-gift"></van-icon>
|
||||||
|
<span>point-gift</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="after-sale"></van-icon>
|
||||||
|
<span>after-sale</span>
|
||||||
|
</van-col>
|
||||||
</van-row>
|
</van-row>
|
||||||
|
|
||||||
</example-block></section></template>
|
</example-block></section></template>
|
||||||
<style>
|
<style>
|
||||||
@component-namespace demo {
|
@component-namespace demo {
|
||||||
@b icon {
|
@b icon {
|
||||||
|
.examples {
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
|
||||||
.van-col {
|
.van-col {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
height: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-icon {
|
.van-icon {
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template><section class="demo-lazyload"><h1 class="demo-title">Lazyload 图片懒加载</h1><example-block title="基础用法">
|
<template><section class="demo-lazyload"><h1 class="demo-title">Lazyload 图片懒加载</h1><example-block title="基础用法">
|
||||||
<ul class="image-list" ref="container">
|
<ul class="image-list" ref="container">
|
||||||
<li v-for="img in imageList">
|
<li v-for="(img, index) in imageList" :key="index">
|
||||||
<img class="lazy-img" v-lazy="img">
|
<img class="lazy-img" v-lazy="img">
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -9,7 +9,7 @@
|
|||||||
|
|
||||||
</example-block><example-block title="背景图懒加载">
|
</example-block><example-block title="背景图懒加载">
|
||||||
<ul class="image-list" ref="container">
|
<ul class="image-list" ref="container">
|
||||||
<li v-for="img in backgroundImageList">
|
<li v-for="(img, index) in backgroundImageList" :key="index">
|
||||||
<div class="lazy-background" v-lazy:background-image="img"></div>
|
<div class="lazy-background" v-lazy:background-image="img"></div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -19,7 +19,7 @@
|
|||||||
</example-block><example-block title="懒加载模块">
|
</example-block><example-block title="懒加载模块">
|
||||||
<lazy-component @show="handleComponentShow">
|
<lazy-component @show="handleComponentShow">
|
||||||
<ul class="image-list">
|
<ul class="image-list">
|
||||||
<li v-for="img in componentImageList">
|
<li v-for="(img, index) in componentImageList" :key="index">
|
||||||
<img class="lazy-img" v-lazy="img">
|
<img class="lazy-img" v-lazy="img">
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@ -11,13 +11,13 @@
|
|||||||
|
|
||||||
</example-block><example-block title="Inactive">
|
</example-block><example-block title="Inactive">
|
||||||
<div class="demo-progress__wrapper">
|
<div class="demo-progress__wrapper">
|
||||||
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></van-progress>
|
<van-progress class="demo-progress__demo1" inactive="" :percentage="0"></van-progress>
|
||||||
</div>
|
</div>
|
||||||
<div class="demo-progress__wrapper">
|
<div class="demo-progress__wrapper">
|
||||||
<van-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></van-progress>
|
<van-progress class="demo-progress__demo2" inactive="" :percentage="46"></van-progress>
|
||||||
</div>
|
</div>
|
||||||
<div class="demo-progress__wrapper">
|
<div class="demo-progress__wrapper">
|
||||||
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></van-progress>
|
<van-progress class="demo-progress__demo1" inactive="" :percentage="100"></van-progress>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</example-block><example-block title="自定义颜色和文字">
|
</example-block><example-block title="自定义颜色和文字">
|
||||||
|
|||||||
@ -3,6 +3,9 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</example-block><example-block title="基础用法">
|
||||||
|
<van-search placeholder="搜索商品" type="showcase"></van-search>
|
||||||
|
|
||||||
</example-block><example-block title="监听对应事件">
|
</example-block><example-block title="监听对应事件">
|
||||||
<van-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></van-search>
|
<van-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></van-search>
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template><section class="demo-swipe"><h1 class="demo-title">Swipe 轮播</h1><example-block title="基础用法">
|
<template><section class="demo-swipe"><h1 class="demo-title">Swipe 轮播</h1><example-block title="基础用法">
|
||||||
<van-swipe>
|
<van-swipe>
|
||||||
<van-swipe-item v-for="img in images">
|
<van-swipe-item v-for="(img, index) in images" :key="index">
|
||||||
<a href="https://youzan.com" target="_blank">
|
<a href="https://youzan.com" target="_blank">
|
||||||
<img v-lazy="img" alt="">
|
<img v-lazy="img" alt="">
|
||||||
</a>
|
</a>
|
||||||
@ -11,7 +11,7 @@
|
|||||||
|
|
||||||
</example-block><example-block title="自动轮播">
|
</example-block><example-block title="自动轮播">
|
||||||
<van-swipe auto-play="" @pagechange:end="handlePageEnd">
|
<van-swipe auto-play="" @pagechange:end="handlePageEnd">
|
||||||
<van-swipe-item v-for="img in autoImages">
|
<van-swipe-item v-for="(img, index) in autoImages" :key="index">
|
||||||
<img v-lazy="img" alt="">
|
<img v-lazy="img" alt="">
|
||||||
</van-swipe-item>
|
</van-swipe-item>
|
||||||
</van-swipe>
|
</van-swipe>
|
||||||
|
|||||||
@ -17,11 +17,11 @@
|
|||||||
</example-block><example-block title="禁用状态">
|
</example-block><example-block title="禁用状态">
|
||||||
<van-row>
|
<van-row>
|
||||||
<van-col span="12">
|
<van-col span="12">
|
||||||
<van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
|
<van-switch class="some-customized-class" v-model="switchStateTrue" disabled></van-switch>
|
||||||
<div class="demo-switch__text">打开</div>
|
<div class="demo-switch__text">打开</div>
|
||||||
</van-col>
|
</van-col>
|
||||||
<van-col span="12">
|
<van-col span="12">
|
||||||
<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
|
<van-switch class="some-customized-class" v-model="switchStateFalse" disabled></van-switch>
|
||||||
<div class="demo-switch__text">关闭</div>
|
<div class="demo-switch__text">关闭</div>
|
||||||
</van-col>
|
</van-col>
|
||||||
</van-row>
|
</van-row>
|
||||||
@ -31,11 +31,11 @@
|
|||||||
</example-block><example-block title="loading状态">
|
</example-block><example-block title="loading状态">
|
||||||
<van-row>
|
<van-row>
|
||||||
<van-col span="12">
|
<van-col span="12">
|
||||||
<van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
|
<van-switch class="some-customized-class" v-model="switchStateTrue" loading=""></van-switch>
|
||||||
<div class="demo-switch__text">打开</div>
|
<div class="demo-switch__text">打开</div>
|
||||||
</van-col>
|
</van-col>
|
||||||
<van-col span="12">
|
<van-col span="12">
|
||||||
<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
|
<van-switch class="some-customized-class" v-model="switchStateFalse" loading=""></van-switch>
|
||||||
<div class="demo-switch__text">关闭</div>
|
<div class="demo-switch__text">关闭</div>
|
||||||
</van-col>
|
</van-col>
|
||||||
</van-row>
|
</van-row>
|
||||||
|
|||||||
@ -5,6 +5,8 @@
|
|||||||
</van-uploader>
|
</van-uploader>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</example-block></section></template>
|
</example-block></section></template>
|
||||||
<style>
|
<style>
|
||||||
.uploader-container {
|
.uploader-container {
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p>
|
<p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p>
|
||||||
<div class="waterfall">
|
<div class="waterfall">
|
||||||
<div v-waterfall-lower="loadMore" waterfall-disabled="isWaterfallDisabled" waterfall-offset="400">
|
<div v-waterfall-lower="loadMore" waterfall-disabled="isWaterfallDisabled" waterfall-offset="400">
|
||||||
<div class="waterfall-item" v-for="item in list" style="text-align: center;">
|
<div class="waterfall-item" v-for="(item, index) in list" :key="index" style="text-align: center;">
|
||||||
{{ item }}
|
{{ item }}
|
||||||
</div>
|
</div>
|
||||||
<van-loading v-if="loading" :type="'circle'" :color="'black'"></van-loading>
|
<van-loading v-if="loading" :type="'circle'" :color="'black'"></van-loading>
|
||||||
|
|||||||
90
docs/examples-docs/cell-swipe.md
Normal file
90
docs/examples-docs/cell-swipe.md
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
<style>
|
||||||
|
.swipe-delete-btn {
|
||||||
|
background-color: #FF4444;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 65px;
|
||||||
|
height: 44px;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 44px;
|
||||||
|
}
|
||||||
|
.swipe-check-btn {
|
||||||
|
background-color: #84c483;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 65px;
|
||||||
|
height: 44px;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 44px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
## CellSwipe 滑动单元格
|
||||||
|
|
||||||
|
### 使用指南
|
||||||
|
|
||||||
|
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||||
|
|
||||||
|
#### 全局注册
|
||||||
|
|
||||||
|
你可以在全局注册`Cell Swipe`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Cell Swipe`组件了：
|
||||||
|
|
||||||
|
```js
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { CellSwipe } from 'vant';
|
||||||
|
import 'vant/lib/vant-css/cell-swipe.css';
|
||||||
|
|
||||||
|
Vue.component(CellSwipe.name, CellSwipe);
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 局部注册
|
||||||
|
|
||||||
|
如果你只是想在某个组件中使用，你可以在对应组件中注册`Cell Swipe`组件，这样只能在你注册的组件中使用`Cell Swipe`：
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { CellSwipe } from 'vant';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
'van-cell-swipe': CellSwipe
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### 代码演示
|
||||||
|
|
||||||
|
#### 基础用法
|
||||||
|
|
||||||
|
:::demo 基础用法
|
||||||
|
```html
|
||||||
|
<van-cell-swipe :right-width="65" :left-width="65">
|
||||||
|
<van-cell-group>
|
||||||
|
<van-cell title="单元格1" value="单元格1内容"></van-cell>
|
||||||
|
</van-cell-group>
|
||||||
|
|
||||||
|
<span slot="right" class="swipe-delete-btn">
|
||||||
|
删除
|
||||||
|
</span>
|
||||||
|
<span slot="left" class="swipe-check-btn">
|
||||||
|
选择
|
||||||
|
</span>
|
||||||
|
</van-cell-swipe>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
### API
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
|
| right-width | 右侧滑动按钮宽度 | `number` | 0 | |
|
||||||
|
| left-width | 左侧滑动按钮宽度 | `number` | 0 | |
|
||||||
|
|
||||||
|
### Slot
|
||||||
|
|
||||||
|
| name | 描述 |
|
||||||
|
|-----------|-----------|
|
||||||
|
| - | 自定义显示内容 |
|
||||||
|
| right | 右侧滑动内容 |
|
||||||
|
| left | 左侧滑动内容 |
|
||||||
@ -101,7 +101,7 @@ export default {
|
|||||||
:::demo 禁用状态
|
:::demo 禁用状态
|
||||||
```html
|
```html
|
||||||
<div class="van-checkbox-wrapper">
|
<div class="van-checkbox-wrapper">
|
||||||
<van-checkbox v-model="checkbox2">复选框2</van-checkbox>
|
<van-checkbox v-model="checkbox2" disabled>复选框2</van-checkbox>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -124,7 +124,7 @@ export default {
|
|||||||
```html
|
```html
|
||||||
<div class="van-checkbox-wrapper">
|
<div class="van-checkbox-wrapper">
|
||||||
<van-checkbox-group v-model="result">
|
<van-checkbox-group v-model="result">
|
||||||
<van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
|
<van-checkbox v-for="(item, index) in list" :key="index" :name="item">复选框{{item}}</van-checkbox>
|
||||||
</van-checkbox-group>
|
</van-checkbox-group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -159,7 +159,7 @@ export default {
|
|||||||
```html
|
```html
|
||||||
<div class="van-checkbox-wrapper">
|
<div class="van-checkbox-wrapper">
|
||||||
<van-checkbox-group v-model="result" disabled>
|
<van-checkbox-group v-model="result" disabled>
|
||||||
<van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
|
<van-checkbox v-for="(item, index) in list" :key="index" :name="item">复选框{{item}}</van-checkbox>
|
||||||
</van-checkbox-group>
|
</van-checkbox-group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -188,7 +188,7 @@ export default {
|
|||||||
```html
|
```html
|
||||||
<van-checkbox-group v-model="result">
|
<van-checkbox-group v-model="result">
|
||||||
<van-cell-group>
|
<van-cell-group>
|
||||||
<van-cell v-for="item in list">
|
<van-cell v-for="(item, index) in list" :key="index">
|
||||||
<van-checkbox :name="item">复选框{{item}}</van-checkbox>
|
<van-checkbox :name="item">复选框{{item}}</van-checkbox>
|
||||||
</van-cell>
|
</van-cell>
|
||||||
</van-cell-group>
|
</van-cell-group>
|
||||||
|
|||||||
@ -73,13 +73,13 @@ export default {
|
|||||||
</van-datetime-picker>
|
</van-datetime-picker>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
minHour: 10,
|
minHour: 10,
|
||||||
maxHour: 20,
|
maxHour: 20,
|
||||||
minDate: new Date()
|
minDate: new Date(),
|
||||||
|
currentDate: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +1,13 @@
|
|||||||
<style>
|
<style>
|
||||||
@component-namespace demo {
|
@component-namespace demo {
|
||||||
@b icon {
|
@b icon {
|
||||||
|
.examples {
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
|
||||||
.van-col {
|
.van-col {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
height: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-icon {
|
.van-icon {
|
||||||
@ -51,7 +56,17 @@ export default {
|
|||||||
|
|
||||||
#### 基础用法
|
#### 基础用法
|
||||||
|
|
||||||
设置`name`属性为对应的图标名称即可，以下目前有的所有图标：
|
设置`name`属性为对应的图标名称即可：
|
||||||
|
|
||||||
|
:::demo 所有Icon
|
||||||
|
```html
|
||||||
|
<van-icon name="qr-invalid" style="text-align: center"></van-icon>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
#### 所有Icons
|
||||||
|
|
||||||
|
以下目前有的所有图标及其名称：
|
||||||
|
|
||||||
:::demo 所有Icon
|
:::demo 所有Icon
|
||||||
```html
|
```html
|
||||||
@ -120,10 +135,6 @@ export default {
|
|||||||
<van-icon name="photo"></van-icon>
|
<van-icon name="photo"></van-icon>
|
||||||
<span>photo</span>
|
<span>photo</span>
|
||||||
</van-col>
|
</van-col>
|
||||||
<van-col span="8">
|
|
||||||
<van-icon name="logistics"></van-icon>
|
|
||||||
<span>logistics</span>
|
|
||||||
</van-col>
|
|
||||||
<van-col span="8">
|
<van-col span="8">
|
||||||
<van-icon name="edit"></van-icon>
|
<van-icon name="edit"></van-icon>
|
||||||
<span>edit</span>
|
<span>edit</span>
|
||||||
@ -176,18 +187,150 @@ export default {
|
|||||||
<van-icon name="password-view"></van-icon>
|
<van-icon name="password-view"></van-icon>
|
||||||
<span>password-view</span>
|
<span>password-view</span>
|
||||||
</van-col>
|
</van-col>
|
||||||
<van-col span="8">
|
|
||||||
<van-icon name="password-not-view"></van-icon>
|
|
||||||
<span>password-not-view</span>
|
|
||||||
</van-col>
|
|
||||||
<van-col span="8">
|
<van-col span="8">
|
||||||
<van-icon name="wap-nav"></van-icon>
|
<van-icon name="wap-nav"></van-icon>
|
||||||
<span>wap-nav</span>
|
<span>wap-nav</span>
|
||||||
</van-col>
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="password-not-view"></van-icon>
|
||||||
|
<span>password-not-view</span>
|
||||||
|
</van-col>
|
||||||
<van-col span="8">
|
<van-col span="8">
|
||||||
<van-icon name="wap-home"></van-icon>
|
<van-icon name="wap-home"></van-icon>
|
||||||
<span>wap-home</span>
|
<span>wap-home</span>
|
||||||
</van-col>
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="ecard-pay"></van-icon>
|
||||||
|
<span>ecard-pay</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="balance-pay"></van-icon>
|
||||||
|
<span>balance-pay</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="peer-pay"></van-icon>
|
||||||
|
<span>peer-pay</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="credit-pay"></van-icon>
|
||||||
|
<span>credit-pay</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="debit-pay"></van-icon>
|
||||||
|
<span>debit-pay</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="other-pay"></van-icon>
|
||||||
|
<span>other-pay</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="cart"></van-icon>
|
||||||
|
<span>cart</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="browsing-history"></van-icon>
|
||||||
|
<span>browsing-history</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="goods-collect"></van-icon>
|
||||||
|
<span>goods-collect</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="shop-collect"></van-icon>
|
||||||
|
<span>shop-collect</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="receive-gift"></van-icon>
|
||||||
|
<span>receive-gift</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="send-gift"></van-icon>
|
||||||
|
<span>send-gift</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="setting"></van-icon>
|
||||||
|
<span>setting</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="points"></van-icon>
|
||||||
|
<span>points</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="coupon"></van-icon>
|
||||||
|
<span>coupon</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="free-postage"></van-icon>
|
||||||
|
<span>free-postage</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="discount"></van-icon>
|
||||||
|
<span>discount</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="birthday-privilege"></van-icon>
|
||||||
|
<span>birthday-privilege</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="member-day-privilege"></van-icon>
|
||||||
|
<span>member-day-privilege</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="balance-details"></van-icon>
|
||||||
|
<span>balance-details</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="cash-back-record"></van-icon>
|
||||||
|
<span>cash-back-record</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="points-mall"></van-icon>
|
||||||
|
<span>points-mall</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="exchange-record"></van-icon>
|
||||||
|
<span>exchange-record</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="pending-payment"></van-icon>
|
||||||
|
<span>pending-payment</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="pending-orders"></van-icon>
|
||||||
|
<span>pending-orders</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="pending-deliver"></van-icon>
|
||||||
|
<span>pending-deliver</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="logistics"></van-icon>
|
||||||
|
<span>logistics</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="pending-evaluate"></van-icon>
|
||||||
|
<span>pending-evaluate</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="cash-on-deliver"></van-icon>
|
||||||
|
<span>cash-on-deliver</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="gift-card-pay"></van-icon>
|
||||||
|
<span>gift-card-pay</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="underway"></van-icon>
|
||||||
|
<span>underway</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="point-gift"></van-icon>
|
||||||
|
<span>point-gift</span>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="8">
|
||||||
|
<van-icon name="after-sale"></van-icon>
|
||||||
|
<span>after-sale</span>
|
||||||
|
</van-col>
|
||||||
</van-row>
|
</van-row>
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|||||||
@ -69,7 +69,7 @@ Vue.use(Lazyload, options);
|
|||||||
:::demo 基础用法
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<ul class="image-list" ref="container">
|
<ul class="image-list" ref="container">
|
||||||
<li v-for="img in imageList">
|
<li v-for="(img, index) in imageList" :key="index">
|
||||||
<img class="lazy-img" v-lazy="img">
|
<img class="lazy-img" v-lazy="img">
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -100,7 +100,7 @@ export default {
|
|||||||
:::demo 背景图懒加载
|
:::demo 背景图懒加载
|
||||||
```html
|
```html
|
||||||
<ul class="image-list" ref="container">
|
<ul class="image-list" ref="container">
|
||||||
<li v-for="img in backgroundImageList">
|
<li v-for="(img, index) in backgroundImageList" :key="index">
|
||||||
<div class="lazy-background" v-lazy:background-image="img"></div>
|
<div class="lazy-background" v-lazy:background-image="img"></div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -128,7 +128,7 @@ export default {
|
|||||||
```html
|
```html
|
||||||
<lazy-component @show="handleComponentShow">
|
<lazy-component @show="handleComponentShow">
|
||||||
<ul class="image-list">
|
<ul class="image-list">
|
||||||
<li v-for="img in componentImageList">
|
<li v-for="(img, index) in componentImageList" :key="index">
|
||||||
<img class="lazy-img" v-lazy="img">
|
<img class="lazy-img" v-lazy="img">
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@ -71,13 +71,13 @@ export default {
|
|||||||
:::demo Inactive
|
:::demo Inactive
|
||||||
```html
|
```html
|
||||||
<div class="demo-progress__wrapper">
|
<div class="demo-progress__wrapper">
|
||||||
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></van-progress>
|
<van-progress class="demo-progress__demo1" inactive :percentage="0"></van-progress>
|
||||||
</div>
|
</div>
|
||||||
<div class="demo-progress__wrapper">
|
<div class="demo-progress__wrapper">
|
||||||
<van-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></van-progress>
|
<van-progress class="demo-progress__demo2" inactive :percentage="46"></van-progress>
|
||||||
</div>
|
</div>
|
||||||
<div class="demo-progress__wrapper">
|
<div class="demo-progress__wrapper">
|
||||||
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></van-progress>
|
<van-progress class="demo-progress__demo1" inactive :percentage="100"></van-progress>
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
## Vant
|
## Vant
|
||||||
|
|
||||||
一套`Vue 2.0`的基础组件。
|
一套基于`Vue.js 2.0`的Mobile组件库
|
||||||
<br>A collection of essential UI components written with Vue 2.0.
|
<br>A Vue.js 2.0 Mobile UI
|
||||||
|
|
||||||
### 安装
|
### 安装
|
||||||
|
|
||||||
@ -32,3 +32,25 @@ import 'vant/lib/vant-css/cell.css';
|
|||||||
Vue.component(Button.name, Button);
|
Vue.component(Button.name, Button);
|
||||||
Vue.component(Cell.name, Cell);
|
Vue.component(Cell.name, Cell);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 自定义主题
|
||||||
|
|
||||||
|
`Vant`默认提供一套主题，`CSS`命名采用`BEM`的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法：
|
||||||
|
|
||||||
|
#### 下载主题
|
||||||
|
|
||||||
|
可以通过Github或npm来下载主题：
|
||||||
|
|
||||||
|
```shell
|
||||||
|
# npm
|
||||||
|
npm i vant-css -D
|
||||||
|
|
||||||
|
# github
|
||||||
|
git clone git@github.com:youzan/vant.git
|
||||||
|
cd packages/vant-css
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 修改主题
|
||||||
|
|
||||||
|
修改你下载主题对应的样式即可，然后引入你修改后的主题。
|
||||||
|
|
||||||
|
|||||||
@ -69,6 +69,14 @@ export default {
|
|||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
#### 微杂志页搜索样式
|
||||||
|
|
||||||
|
:::demo 基础用法
|
||||||
|
```html
|
||||||
|
<van-search placeholder="搜索商品" type="showcase"></van-search>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
#### 监听对应事件
|
#### 监听对应事件
|
||||||
|
|
||||||
除了`search`事件，还有`change`和`cancel`事件，`change`事件在`input`输入框每次`change`时触发，适用于实时搜索等，`cancel`在取消按钮点击时触发。
|
除了`search`事件，还有`change`和`cancel`事件，`change`事件在`input`输入框每次`change`时触发，适用于实时搜索等，`cancel`在取消按钮点击时触发。
|
||||||
@ -97,9 +105,10 @@ export default {
|
|||||||
|
|
||||||
### API
|
### API
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| placeholder | `input`的`placeholder`文案 | `string` | | |
|
| placeholder | `input`的`placeholder`文案 | `string` | | |
|
||||||
|
| type | 搜索样式类型 | `string` | `normal` | `normal`：普通样式，`showcase`：微杂志页样式 |
|
||||||
|
|
||||||
### Event
|
### Event
|
||||||
|
|
||||||
|
|||||||
@ -77,7 +77,7 @@ export default {
|
|||||||
:::demo 基础用法
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<van-swipe>
|
<van-swipe>
|
||||||
<van-swipe-item v-for="img in images">
|
<van-swipe-item v-for="(img, index) in images" :key="index">
|
||||||
<a href="https://youzan.com" target="_blank">
|
<a href="https://youzan.com" target="_blank">
|
||||||
<img v-lazy="img" alt="">
|
<img v-lazy="img" alt="">
|
||||||
</a>
|
</a>
|
||||||
@ -106,7 +106,7 @@ export default {
|
|||||||
:::demo 自动轮播
|
:::demo 自动轮播
|
||||||
```html
|
```html
|
||||||
<van-swipe auto-play @pagechange:end="handlePageEnd">
|
<van-swipe auto-play @pagechange:end="handlePageEnd">
|
||||||
<van-swipe-item v-for="img in autoImages">
|
<van-swipe-item v-for="(img, index) in autoImages" :key="index">
|
||||||
<img v-lazy="img" alt="">
|
<img v-lazy="img" alt="">
|
||||||
</van-swipe-item>
|
</van-swipe-item>
|
||||||
</van-swipe>
|
</van-swipe>
|
||||||
|
|||||||
@ -128,11 +128,11 @@ export default {
|
|||||||
```html
|
```html
|
||||||
<van-row>
|
<van-row>
|
||||||
<van-col span="12">
|
<van-col span="12">
|
||||||
<van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
|
<van-switch class="some-customized-class" v-model="switchStateTrue" disabled></van-switch>
|
||||||
<div class="demo-switch__text">打开</div>
|
<div class="demo-switch__text">打开</div>
|
||||||
</van-col>
|
</van-col>
|
||||||
<van-col span="12">
|
<van-col span="12">
|
||||||
<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
|
<van-switch class="some-customized-class" v-model="switchStateFalse" disabled></van-switch>
|
||||||
<div class="demo-switch__text">关闭</div>
|
<div class="demo-switch__text">关闭</div>
|
||||||
</van-col>
|
</van-col>
|
||||||
</van-row>
|
</van-row>
|
||||||
@ -158,11 +158,11 @@ export default {
|
|||||||
```html
|
```html
|
||||||
<van-row>
|
<van-row>
|
||||||
<van-col span="12">
|
<van-col span="12">
|
||||||
<van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
|
<van-switch class="some-customized-class" v-model="switchStateTrue" loading></van-switch>
|
||||||
<div class="demo-switch__text">打开</div>
|
<div class="demo-switch__text">打开</div>
|
||||||
</van-col>
|
</van-col>
|
||||||
<van-col span="12">
|
<van-col span="12">
|
||||||
<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
|
<van-switch class="some-customized-class" v-model="switchStateFalse" loading></van-switch>
|
||||||
<div class="demo-switch__text">关闭</div>
|
<div class="demo-switch__text">关闭</div>
|
||||||
</van-col>
|
</van-col>
|
||||||
</van-row>
|
</van-row>
|
||||||
|
|||||||
@ -3,6 +3,7 @@
|
|||||||
padding: 5px 15px;
|
padding: 5px 15px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
@ -57,6 +58,16 @@ export default {
|
|||||||
<van-icon name="photograph"></van-icon>
|
<van-icon name="photograph"></van-icon>
|
||||||
</van-uploader>
|
</van-uploader>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
logContent(file) {
|
||||||
|
console.log(file)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -105,7 +105,8 @@ export default {
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="waterfall-item"
|
class="waterfall-item"
|
||||||
v-for="item in list"
|
v-for="(item, index) in list"
|
||||||
|
:key="index"
|
||||||
style="text-align: center;"
|
style="text-align: center;"
|
||||||
>
|
>
|
||||||
{{ item }}
|
{{ item }}
|
||||||
|
|||||||
@ -3,9 +3,9 @@
|
|||||||
<h1 class="zanui-title">Zan UI Wap</h1>
|
<h1 class="zanui-title">Zan UI Wap</h1>
|
||||||
<h2 class="zanui-desc">有赞移动wap端组件库</h2>
|
<h2 class="zanui-desc">有赞移动wap端组件库</h2>
|
||||||
<div class="mobile-navs">
|
<div class="mobile-navs">
|
||||||
<template v-for="item in data">
|
<template v-for="(item, index) in data">
|
||||||
<div class="mobile-nav-item" v-if="item.showInMobile">
|
<div class="mobile-nav-item" v-if="item.showInMobile" :key="index">
|
||||||
<mobile-nav v-for="(group, index) in item.groups" :group="group" :base="base" :nav-key="index"></mobile-nav>
|
<mobile-nav v-for="(group, index) in item.groups" :group="group" :base="base" :nav-key="index" :key="index"></mobile-nav>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -10,8 +10,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="mobile-nav-group__list-wrapper" :class="{ 'mobile-nav-group__list-wrapper--open': isOpen }">
|
<div class="mobile-nav-group__list-wrapper" :class="{ 'mobile-nav-group__list-wrapper--open': isOpen }">
|
||||||
<ul class="mobile-nav-group__list" :class="{ 'mobile-nav-group__list--open': isOpen }">
|
<ul class="mobile-nav-group__list" :class="{ 'mobile-nav-group__list--open': isOpen }">
|
||||||
<template v-for="navItem in group.list">
|
<template v-for="(navItem, index) in group.list">
|
||||||
<li
|
<li
|
||||||
|
:key="index"
|
||||||
class="mobile-nav-group__title"
|
class="mobile-nav-group__title"
|
||||||
v-if="!navItem.disabled">
|
v-if="!navItem.disabled">
|
||||||
<router-link
|
<router-link
|
||||||
|
|||||||
@ -9,13 +9,13 @@
|
|||||||
<a href="https://www.youzanyun.com/zanui" class="page-header__link">首页</a>
|
<a href="https://www.youzanyun.com/zanui" class="page-header__link">首页</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="page-header__item">
|
<li class="page-header__item">
|
||||||
<a href="https://www.youzanyun.com/zanui/react" class="page-header__link">PC端</a>
|
<a href="https://www.youzanyun.com/zanui/react" class="page-header__link">Zent - PC端</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="page-header__item">
|
<li class="page-header__item">
|
||||||
<a href="https://www.youzanyun.com/zanui/vue" class="page-header__link page-header__link--active">移动端</a>
|
<a href="https://www.youzanyun.com/zanui/vue" class="page-header__link page-header__link--active">Vant - 移动端</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="page-header__item">
|
<li class="page-header__item">
|
||||||
<a href="https://github.com/youzan/zanui-weapp" class="page-header__link">微信小程序</a>
|
<a href="https://github.com/youzan/zanui-weapp" class="page-header__link">ZanUi-WeApp - 微信小程序</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="side-nav">
|
<div class="side-nav">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="nav-item" v-for="item in data">
|
<li class="nav-item" v-for="(item, index) in data" :key="index">
|
||||||
<a href="javascript:void(0)" v-if="!item.path" @click="handleTitleClick(item)">{{item.name}}</a>
|
<a href="javascript:void(0)" v-if="!item.path" @click="handleTitleClick(item)">{{item.name}}</a>
|
||||||
<router-link
|
<router-link
|
||||||
v-else
|
v-else
|
||||||
@ -11,7 +11,7 @@
|
|||||||
v-text="item.title || item.name">
|
v-text="item.title || item.name">
|
||||||
</router-link>
|
</router-link>
|
||||||
<ul class="pure-menu-list sub-nav" v-if="item.children">
|
<ul class="pure-menu-list sub-nav" v-if="item.children">
|
||||||
<li class="nav-item" v-for="navItem in item.children">
|
<li class="nav-item" v-for="(navItem, index) in item.children" :key="index">
|
||||||
<router-link
|
<router-link
|
||||||
active-class="active"
|
active-class="active"
|
||||||
:to="base + navItem.path"
|
:to="base + navItem.path"
|
||||||
@ -20,11 +20,12 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<template v-if="item.groups">
|
<template v-if="item.groups">
|
||||||
<div class="nav-group" v-for="group in item.groups">
|
<div class="nav-group" v-for="(group, index) in item.groups" :key="index">
|
||||||
<div class="nav-group__title">{{group.groupName}}</div>
|
<div class="nav-group__title">{{group.groupName}}</div>
|
||||||
<ul class="pure-menu-list">
|
<ul class="pure-menu-list">
|
||||||
<template v-for="navItem in group.list">
|
<template v-for="(navItem, index) in group.list">
|
||||||
<li
|
<li
|
||||||
|
:key="index"
|
||||||
class="nav-item"
|
class="nav-item"
|
||||||
v-if="!navItem.disabled">
|
v-if="!navItem.disabled">
|
||||||
<router-link
|
<router-link
|
||||||
|
|||||||
@ -25,8 +25,12 @@ const router = new VueRouter({
|
|||||||
base: '/zanui/vue/examples',
|
base: '/zanui/vue/examples',
|
||||||
routes: routesConfig
|
routes: routesConfig
|
||||||
});
|
});
|
||||||
router.afterEach((route, redirect, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
|
const container = document.querySelector('.examples-container');
|
||||||
|
if (container) {
|
||||||
document.querySelector('.examples-container').scrollTop = 0;
|
document.querySelector('.examples-container').scrollTop = 0;
|
||||||
|
}
|
||||||
|
next()
|
||||||
});
|
});
|
||||||
|
|
||||||
new Vue({ // eslint-disable-line
|
new Vue({ // eslint-disable-line
|
||||||
|
|||||||
@ -37,6 +37,10 @@ module.exports = {
|
|||||||
"path": "/cell",
|
"path": "/cell",
|
||||||
"title": "Cell 单元格"
|
"title": "Cell 单元格"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "/cell-swipe",
|
||||||
|
"title": "Cell Swipe 滑动单元格"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "/progress",
|
"path": "/progress",
|
||||||
"title": "Progress 进度条"
|
"title": "Progress 进度条"
|
||||||
|
|||||||
23
package.json
23
package.json
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vant",
|
"name": "vant",
|
||||||
"version": "0.5.11",
|
"version": "0.6.2",
|
||||||
"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",
|
||||||
@ -46,11 +46,11 @@
|
|||||||
"vue-lazyload": "^1.0.3"
|
"vue-lazyload": "^1.0.3"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"vue": "2.1.8"
|
"vue": "2.3.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "^6.7.5",
|
"autoprefixer": "^6.7.5",
|
||||||
"avoriaz": "^1.11.1",
|
"avoriaz": "^2.0.0",
|
||||||
"babel-cli": "^6.14.0",
|
"babel-cli": "^6.14.0",
|
||||||
"babel-core": "^6.17.0",
|
"babel-core": "^6.17.0",
|
||||||
"babel-eslint": "^6.1.2",
|
"babel-eslint": "^6.1.2",
|
||||||
@ -78,6 +78,7 @@
|
|||||||
"felint": "^0.5.0-alpha.3",
|
"felint": "^0.5.0-alpha.3",
|
||||||
"file-loader": "^0.9.0",
|
"file-loader": "^0.9.0",
|
||||||
"file-save": "^0.2.0",
|
"file-save": "^0.2.0",
|
||||||
|
"friendly-errors-webpack-plugin": "^1.6.1",
|
||||||
"gh-pages": "^0.12.0",
|
"gh-pages": "^0.12.0",
|
||||||
"gulp": "^3.9.1",
|
"gulp": "^3.9.1",
|
||||||
"gulp-util": "^3.0.8",
|
"gulp-util": "^3.0.8",
|
||||||
@ -120,14 +121,14 @@
|
|||||||
"transliteration": "^1.1.11",
|
"transliteration": "^1.1.11",
|
||||||
"uppercamelcase": "^1.1.0",
|
"uppercamelcase": "^1.1.0",
|
||||||
"url-loader": "^0.5.7",
|
"url-loader": "^0.5.7",
|
||||||
"vue": "2.1.8",
|
"vue": "2.3.4",
|
||||||
"vue-hot-reload-api": "^1.3.3",
|
"vue-hot-reload-api": "^2.1.0",
|
||||||
"vue-html-loader": "^1.2.3",
|
"vue-html-loader": "^1.2.4",
|
||||||
"vue-loader": "^10.3.0",
|
"vue-loader": "^12.0.0",
|
||||||
"vue-markdown-loader": "^0.6.1",
|
"vue-markdown-loader": "^1.0.0",
|
||||||
"vue-router": "^2.0.0",
|
"vue-router": "^2.5.0",
|
||||||
"vue-style-loader": "^1.0.0",
|
"vue-style-loader": "^3.0.0",
|
||||||
"vue-template-compiler": "2.1.8",
|
"vue-template-compiler": "2.3.4",
|
||||||
"vue-template-es2015-compiler": "^1.4.2",
|
"vue-template-es2015-compiler": "^1.4.2",
|
||||||
"webpack": "^2.2.1",
|
"webpack": "^2.2.1",
|
||||||
"webpack-dev-server": "^1.16.3",
|
"webpack-dev-server": "^1.16.3",
|
||||||
|
|||||||
@ -8,7 +8,8 @@
|
|||||||
<template v-if="!title">
|
<template v-if="!title">
|
||||||
<ul class="van-actionsheet__list">
|
<ul class="van-actionsheet__list">
|
||||||
<li
|
<li
|
||||||
v-for="item in actions"
|
v-for="(item, index) in actions"
|
||||||
|
:key="index"
|
||||||
class="van-actionsheet__item"
|
class="van-actionsheet__item"
|
||||||
:class="[item.className, item.loading ? 'van-actionsheet__item--loading' : '']"
|
:class="[item.className, item.loading ? 'van-actionsheet__item--loading' : '']"
|
||||||
@click.stop="handleItemClick(item)">
|
@click.stop="handleItemClick(item)">
|
||||||
|
|||||||
@ -1,7 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<a class="van-badge" :href="url" @click="handleClick" :class="{
|
<a
|
||||||
'van-badge--select': isSelect
|
class="van-badge"
|
||||||
}">
|
:class="{ 'van-badge--select': isSelect }"
|
||||||
|
:href="url"
|
||||||
|
@click="handleClick">
|
||||||
<div class="van-badge__active"></div>
|
<div class="van-badge__active"></div>
|
||||||
<div v-if="info" class="van-badge__info">{{info}}</div>
|
<div v-if="info" class="van-badge__info">{{info}}</div>
|
||||||
{{title}}
|
{{title}}
|
||||||
|
|||||||
142
packages/cell-swipe/components/CellSwipe.vue
Normal file
142
packages/cell-swipe/components/CellSwipe.vue
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
v-clickoutside:touchstart="swipeMove"
|
||||||
|
@click="swipeMove()"
|
||||||
|
@touchstart="startDrag"
|
||||||
|
@touchmove="onDrag"
|
||||||
|
@touchend="endDrag"
|
||||||
|
class="van-cell-swipe"
|
||||||
|
ref="cell">
|
||||||
|
<div class="van-cell-wrapper">
|
||||||
|
<slot>单元格内容</slot>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell-left">
|
||||||
|
<div ref="left">
|
||||||
|
<slot name="left"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell-right">
|
||||||
|
<div ref="right">
|
||||||
|
<slot name="right"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {once} from 'src/utils/dom';
|
||||||
|
import Clickoutside from 'src/utils/clickoutside';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'van-cell-swipe',
|
||||||
|
props: {
|
||||||
|
'leftWidth': {type: Number, default: 0},
|
||||||
|
'rightWidth': {type: Number, default: 0}
|
||||||
|
},
|
||||||
|
directives: {Clickoutside},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
start: {x: 0, y: 0}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
leftDefaultTransform(){
|
||||||
|
return this.translate3d(-this.leftWidth - 1);
|
||||||
|
},
|
||||||
|
rightDefaultTransform(){
|
||||||
|
return this.translate3d(this.rightWidth);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.wrap = this.$refs.cell.querySelector('.van-cell-wrapper');
|
||||||
|
this.leftElm = this.$refs.left;
|
||||||
|
this.leftWrapElm = this.leftElm.parentNode;
|
||||||
|
this.leftDefaultTransform = this.translate3d(-this.leftWidth - 1);
|
||||||
|
this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
|
||||||
|
|
||||||
|
this.rightElm = this.$refs.right;
|
||||||
|
this.rightWrapElm = this.rightElm.parentNode;
|
||||||
|
this.rightDefaultTransform = this.translate3d(this.rightWidth);
|
||||||
|
this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
resetSwipeStatus() {
|
||||||
|
this.swiping = false; // 是否正在拖动
|
||||||
|
this.opened = true; // 记录是否滑动左右 或者 注册
|
||||||
|
this.offsetLeft = 0; // 记录单次拖动的拖动距离
|
||||||
|
},
|
||||||
|
translate3d(offset) {
|
||||||
|
return `translate3d(${offset}px, 0, 0)`;
|
||||||
|
},
|
||||||
|
swipeMove(offset = 0) {
|
||||||
|
this.wrap.style.webkitTransform = this.translate3d(offset);
|
||||||
|
this.rightWrapElm.style.webkitTransform = this.translate3d(this.rightWidth + offset);
|
||||||
|
this.leftWrapElm.style.webkitTransform = this.translate3d(-this.leftWidth + offset);
|
||||||
|
offset && (this.swiping = true);
|
||||||
|
},
|
||||||
|
swipeLeaveTransition(direction) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.swipeLeave = true;
|
||||||
|
// left
|
||||||
|
if (direction > 0 && -this.offsetLeft > this.rightWidth * 0.4 && this.rightWidth > 0) {
|
||||||
|
this.swipeMove(-this.rightWidth);
|
||||||
|
this.resetSwipeStatus();
|
||||||
|
return;
|
||||||
|
// right
|
||||||
|
} else if (direction < 0 && this.offsetLeft > this.leftWidth * 0.4 && this.leftWidth > 0) {
|
||||||
|
this.swipeMove(this.leftWidth);
|
||||||
|
this.resetSwipeStatus();
|
||||||
|
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) {
|
||||||
|
console.log('startDrag')
|
||||||
|
evt = evt.changedTouches ? evt.changedTouches[0] : evt;
|
||||||
|
this.dragging = true;
|
||||||
|
this.start.x = evt.pageX;
|
||||||
|
this.start.y = evt.pageY;
|
||||||
|
},
|
||||||
|
onDrag(evt) {
|
||||||
|
console.log('onDrag')
|
||||||
|
if (this.opened) {
|
||||||
|
!this.swiping && this.swipeMove(0);
|
||||||
|
this.opened = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!this.dragging) return;
|
||||||
|
let swiping;
|
||||||
|
const e = evt.changedTouches ? evt.changedTouches[0] : evt;
|
||||||
|
const offsetTop = e.pageY - this.start.y;
|
||||||
|
const offsetLeft = this.offsetLeft = e.pageX - this.start.x;
|
||||||
|
if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
|
||||||
|
(offsetLeft > 0 && offsetLeft > this.leftWidth) ||
|
||||||
|
(offsetLeft > 0 && !this.leftWidth) ||
|
||||||
|
(offsetLeft < 0 && !this.rightWidth)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const y = Math.abs(offsetTop);
|
||||||
|
const x = Math.abs(offsetLeft);
|
||||||
|
swiping = !(x < 5 || (x >= 5 && y >= x * 1.73));
|
||||||
|
if (!swiping) return;
|
||||||
|
evt.preventDefault();
|
||||||
|
this.swipeMove(offsetLeft);
|
||||||
|
},
|
||||||
|
endDrag() {
|
||||||
|
console.log('endDrag')
|
||||||
|
if (!this.swiping) return;
|
||||||
|
this.swipeLeaveTransition(this.offsetLeft > 0 ? -1 : 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
2
packages/cell-swipe/index.js
Normal file
2
packages/cell-swipe/index.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
import CellSwipe from './components/CellSwipe.vue'
|
||||||
|
export default CellSwipe;
|
||||||
@ -18,7 +18,7 @@ export default {
|
|||||||
name: 'van-datetime-picker',
|
name: 'van-datetime-picker',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
Picker
|
'van-picker': Picker
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
import Popup from 'src/mixins/popup';
|
import Popup from 'src/mixins/popup';
|
||||||
|
|
||||||
const CANCEL_TEXT = '取消';
|
const CANCEL_TEXT = '取消';
|
||||||
const CONFIRM_TEXT = '确认';
|
const CONFIRM_TEXT = '确定';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-dialog',
|
name: 'van-dialog',
|
||||||
|
|||||||
@ -39,7 +39,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'datetime', 'password', 'textarea'];
|
const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'time', 'datetime', 'password', 'textarea'];
|
||||||
import vanCell from 'packages/cell';
|
import vanCell from 'packages/cell';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|||||||
@ -6,12 +6,14 @@ let instance;
|
|||||||
const ImagePreviewConstructor = Vue.extend(ImagePreview);
|
const ImagePreviewConstructor = Vue.extend(ImagePreview);
|
||||||
|
|
||||||
const initInstance = () => {
|
const initInstance = () => {
|
||||||
|
if (Vue.prototype.$isServer) return;
|
||||||
instance = new ImagePreviewConstructor({
|
instance = new ImagePreviewConstructor({
|
||||||
el: document.createElement('div')
|
el: document.createElement('div')
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
var ImagePreviewBox = images => {
|
var ImagePreviewBox = images => {
|
||||||
|
if (Vue.prototype.$isServer) return;
|
||||||
if (!instance) {
|
if (!instance) {
|
||||||
initInstance();
|
initInstance();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<transition name="image-fade">
|
<transition name="image-fade">
|
||||||
<div class="van-image-preview" ref="previewContainer" v-show="value">
|
<div class="van-image-preview" ref="previewContainer" v-show="value">
|
||||||
<van-swipe>
|
<van-swipe>
|
||||||
<van-swipe-item v-for="item in images">
|
<van-swipe-item v-for="(item, index) in images" :key="index">
|
||||||
<img class="van-image-preview__image" @load="handleLoad" :src="item" alt="">
|
<img class="van-image-preview__image" @load="handleLoad" :src="item" alt="">
|
||||||
</van-swipe-item>
|
</van-swipe-item>
|
||||||
</van-swipe>
|
</van-swipe>
|
||||||
|
|||||||
@ -2,7 +2,8 @@
|
|||||||
<div class="van-picker-column" :class="classNames">
|
<div class="van-picker-column" :class="classNames">
|
||||||
<div class="van-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
|
<div class="van-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
|
||||||
<div
|
<div
|
||||||
v-for="item in currentValues"
|
v-for="(item, index) in currentValues"
|
||||||
|
:key="index"
|
||||||
class="van-picker-column__item"
|
class="van-picker-column__item"
|
||||||
:class="{ 'van-picker-column__item--selected': item === currentValue }"
|
:class="{ 'van-picker-column__item--selected': item === currentValue }"
|
||||||
:style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">
|
:style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">
|
||||||
|
|||||||
@ -10,6 +10,7 @@
|
|||||||
<div class="van-picker__columns" :class="['van-picker__columns--' + columns.length]">
|
<div class="van-picker__columns" :class="['van-picker__columns--' + columns.length]">
|
||||||
<picker-column
|
<picker-column
|
||||||
v-for="(item, index) in columns"
|
v-for="(item, index) in columns"
|
||||||
|
:key="index"
|
||||||
v-model="values[index]"
|
v-model="values[index]"
|
||||||
:values="item.values"
|
:values="item.values"
|
||||||
:class-name="item.className"
|
:class-name="item.className"
|
||||||
|
|||||||
@ -1,5 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="van-search" :class="{ 'van-search--focus' : isFocus }">
|
<div
|
||||||
|
class="van-search"
|
||||||
|
v-clickoutside="handleClickoutside"
|
||||||
|
:class="{ 'van-search--focus': isFocus, 'van-search--showcase': type === 'showcase' }">
|
||||||
<div class="van-search__input-wrap">
|
<div class="van-search__input-wrap">
|
||||||
<van-icon name="search"></van-icon>
|
<van-icon name="search"></van-icon>
|
||||||
<input
|
<input
|
||||||
@ -12,12 +15,13 @@
|
|||||||
@keyup.enter="handleSearch">
|
@keyup.enter="handleSearch">
|
||||||
<van-icon name="clear" @click="handleClean" v-show="isFocus"></van-icon>
|
<van-icon name="clear" @click="handleClean" v-show="isFocus"></van-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-search__cancel" v-show="isFocus" @click="handleBack">取消</div>
|
<div class="van-search__cancel" v-show="type !== 'showcase' && isFocus" @click="handleBack">取消</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import VanIcon from 'packages/icon';
|
import VanIcon from 'packages/icon';
|
||||||
|
import Clickoutside from 'src/utils/clickoutside';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-search',
|
name: 'van-search',
|
||||||
@ -27,7 +31,11 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
placeholder: String
|
placeholder: String,
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'normal'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
@ -45,6 +53,7 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
directives: {
|
directives: {
|
||||||
|
Clickoutside,
|
||||||
refocus: {
|
refocus: {
|
||||||
update: function(el, state) {
|
update: function(el, state) {
|
||||||
if (state.value) {
|
if (state.value) {
|
||||||
@ -85,6 +94,11 @@
|
|||||||
*/
|
*/
|
||||||
handleSearch() {
|
handleSearch() {
|
||||||
this.$emit('search', this.value);
|
this.$emit('search', this.value);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleClickoutside() {
|
||||||
|
this.isFocus = false;
|
||||||
|
this.focusStatus = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
import { EventEmitter, extend, bindEvents, removeEvents } from './utils';
|
import { EventEmitter, extend, bindEvents, removeEvents } from './utils';
|
||||||
|
|
||||||
function Input(host, options) {
|
function Input(host, options) {
|
||||||
@ -24,6 +25,7 @@ Input.prototype = Object.create(new EventEmitter());
|
|||||||
|
|
||||||
extend(Input.prototype, {
|
extend(Input.prototype, {
|
||||||
bind: function(host) {
|
bind: function(host) {
|
||||||
|
if (Vue.prototype.$isServer) return;
|
||||||
bindEvents(host, 'touchstart mousedown', this.onTouchStart);
|
bindEvents(host, 'touchstart mousedown', this.onTouchStart);
|
||||||
if (this.options.listenMoving) {
|
if (this.options.listenMoving) {
|
||||||
bindEvents(window, 'touchmove mousemove', this.onTouchMove);
|
bindEvents(window, 'touchmove mousemove', this.onTouchMove);
|
||||||
@ -104,6 +106,7 @@ extend(Input.prototype, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
destroy: function() {
|
destroy: function() {
|
||||||
|
if (Vue.prototype.$isServer) return;
|
||||||
removeEvents(this.host, 'touchstart mousedown', this.onTouchStart);
|
removeEvents(this.host, 'touchstart mousedown', this.onTouchStart);
|
||||||
if (this.options.listenMoving) {
|
if (this.options.listenMoving) {
|
||||||
removeEvents(window, 'touchmove mousemove', this.onTouchMove);
|
removeEvents(window, 'touchmove mousemove', this.onTouchMove);
|
||||||
|
|||||||
@ -4,8 +4,8 @@
|
|||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-swipe__indicators" v-if="showIndicators">
|
<div class="van-swipe__indicators" v-if="showIndicators">
|
||||||
<span class="van-swipe__indicator" v-for="i in swipes.length" :class="{
|
<span class="van-swipe__indicator" v-for="(item, index) in swipes.length" :key="index" :class="{
|
||||||
'van-swipe__indicator--active': currIndex === i -1
|
'van-swipe__indicator--active': currIndex === index
|
||||||
}">
|
}">
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
'use strict';
|
import Vue from 'vue';
|
||||||
|
|
||||||
var extend = Object.assign.bind(Object);
|
var extend = Object.assign.bind(Object);
|
||||||
|
|
||||||
@ -37,17 +37,24 @@ EventEmitter.prototype = {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
|
const isSupportRequestAnimationFrame = !Vue.prototype.$isServer &&
|
||||||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
|
(window.requestAnimationFrame ||
|
||||||
function(callback, element) {
|
window.mozRequestAnimationFrame ||
|
||||||
return window.setTimeout(callback, 1000 / 60);
|
window.webkitRequestAnimationFrame ||
|
||||||
};
|
window.msRequestAnimationFrame);
|
||||||
|
const isSupportCancelAnimationFrame = !Vue.prototype.$isServer &&
|
||||||
|
(window.cancelAnimationFrame ||
|
||||||
|
window.mozCancelAnimationFrame ||
|
||||||
|
window.webkitCancelAnimationFrame ||
|
||||||
|
window.msCancelAnimationFrame);
|
||||||
|
|
||||||
const cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame ||
|
const requestAnimationFrame = isSupportRequestAnimationFrame || function(callback, element) {
|
||||||
window.webkitCancelAnimationFrame || window.msRequestAnimationFrame ||
|
return window.setTimeout(callback, 1000 / 60);
|
||||||
function(id) {
|
};
|
||||||
|
|
||||||
|
const cancelAnimationFrame = isSupportCancelAnimationFrame || function(id) {
|
||||||
clearTimeout(id);
|
clearTimeout(id);
|
||||||
};
|
};
|
||||||
|
|
||||||
const bindEvents = (elem, eventNames, fn) => {
|
const bindEvents = (elem, eventNames, fn) => {
|
||||||
eventNames = eventNames.split(/\s+/);
|
eventNames = eventNames.split(/\s+/);
|
||||||
|
|||||||
@ -7,6 +7,7 @@
|
|||||||
<div class="van-tabs__nav-bar" :style="navBarStyle" v-if="type === 'line'"></div>
|
<div class="van-tabs__nav-bar" :style="navBarStyle" v-if="type === 'line'"></div>
|
||||||
<div
|
<div
|
||||||
v-for="(tab, index) in tabs"
|
v-for="(tab, index) in tabs"
|
||||||
|
:key="index"
|
||||||
class="van-tab"
|
class="van-tab"
|
||||||
:class="{'van-tab--active': index === curActive}"
|
:class="{'van-tab--active': index === curActive}"
|
||||||
ref="tabkey"
|
ref="tabkey"
|
||||||
|
|||||||
Binary file not shown.
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vant-css",
|
"name": "vant-css",
|
||||||
"version": "0.5.11",
|
"version": "0.6.2",
|
||||||
"description": "vant css.",
|
"description": "vant css.",
|
||||||
"main": "lib/index.css",
|
"main": "lib/index.css",
|
||||||
"style": "lib/index.css",
|
"style": "lib/index.css",
|
||||||
|
|||||||
@ -181,6 +181,168 @@ module.exports = {
|
|||||||
keywords: ['wap', 'home'],
|
keywords: ['wap', 'home'],
|
||||||
src: 'wap首页.svg',
|
src: 'wap首页.svg',
|
||||||
css: 'wap-home'
|
css: 'wap-home'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['ecard', 'pay'],
|
||||||
|
src: '有赞E卡.svg',
|
||||||
|
css: 'ecard-pay',
|
||||||
|
'correct_contour_direction': true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['balance', 'pay'],
|
||||||
|
src: '余额支付.svg',
|
||||||
|
css: 'balance-pay'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['peer', 'pay'],
|
||||||
|
src: '找人代付.svg',
|
||||||
|
css: 'peer-pay'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['credit', 'pay'],
|
||||||
|
src: '信用卡支付.svg',
|
||||||
|
css: 'credit-pay'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['debit', 'pay'],
|
||||||
|
src: '借记卡支付.svg',
|
||||||
|
css: 'debit-pay'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['other', 'pay'],
|
||||||
|
src: '其他支付方式.svg',
|
||||||
|
css: 'other-pay'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['cart'],
|
||||||
|
src: '购物车.svg',
|
||||||
|
css: 'cart'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['browsing', 'history'],
|
||||||
|
src: '浏览记录.svg',
|
||||||
|
css: 'browsing-history'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['goods', 'collect'],
|
||||||
|
src: '商品收藏.svg',
|
||||||
|
css: 'goods-collect'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['shop', 'collect'],
|
||||||
|
src: '店铺收藏.svg',
|
||||||
|
css: 'shop-collect'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['receive', 'gift'],
|
||||||
|
src: '收礼物.svg',
|
||||||
|
css: 'receive-gift',
|
||||||
|
'correct_contour_direction': true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['send', 'gift'],
|
||||||
|
src: '送出赠品.svg',
|
||||||
|
css: 'send-gift'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['setting'],
|
||||||
|
src: '设置.svg',
|
||||||
|
css: 'setting'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['points'],
|
||||||
|
src: '积分.svg',
|
||||||
|
css: 'points'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['coupon'],
|
||||||
|
src: '优惠券.svg',
|
||||||
|
css: 'coupon'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['free', 'postage'],
|
||||||
|
src: '包邮.svg',
|
||||||
|
css: 'free-postage'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['discount'],
|
||||||
|
src: '折扣.svg',
|
||||||
|
css: 'discount'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['birthday', 'privilege'],
|
||||||
|
src: '生日特权.svg',
|
||||||
|
css: 'birthday-privilege'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['member', 'day', 'privilege'],
|
||||||
|
src: '会员日特权.svg',
|
||||||
|
css: 'member-day-privilege'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['balance', 'details'],
|
||||||
|
src: '余额明细.svg',
|
||||||
|
css: 'balance-details'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['cash', 'back', 'record'],
|
||||||
|
src: '返现记录.svg',
|
||||||
|
css: 'cash-back-record'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['points', 'mall'],
|
||||||
|
src: '积分商城.svg',
|
||||||
|
css: 'points-mall'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['exchange', 'record'],
|
||||||
|
src: '兑换记录.svg',
|
||||||
|
css: 'exchange-record'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['pending', 'payment'],
|
||||||
|
src: '待付款.svg',
|
||||||
|
css: 'pending-payment'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['pending', 'orders'],
|
||||||
|
src: '待接单.svg',
|
||||||
|
css: 'pending-orders'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['pending', 'deliver'],
|
||||||
|
src: '待发货.svg',
|
||||||
|
css: 'pending-deliver'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['pending', 'evaluate'],
|
||||||
|
src: '待评价.svg',
|
||||||
|
css: 'pending-evaluate'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['gift', 'card', 'pay'],
|
||||||
|
src: '礼品卡支付.svg',
|
||||||
|
css: 'gift-card-pay'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['cash', 'on', 'deliver'],
|
||||||
|
src: '货到付款.svg',
|
||||||
|
css: 'cash-on-deliver'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['underway'],
|
||||||
|
src: '进行中.svg',
|
||||||
|
css: 'underway'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['point', 'gift'],
|
||||||
|
src: '积分礼包.svg',
|
||||||
|
css: 'point-gift'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
keywords: ['after', 'sale'],
|
||||||
|
src: '售后记录.svg',
|
||||||
|
css: 'after-sale'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|||||||
27
packages/vant-css/src/cell-swipe.css
Normal file
27
packages/vant-css/src/cell-swipe.css
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
|
||||||
|
.van-cell-swipe .van-cell-wrapper, .van-cell-swipe .van-cell-left, .van-cell-swipe .van-cell-right {
|
||||||
|
-webkit-transition: -webkit-transform 150ms ease-in-out;
|
||||||
|
transition: -webkit-transform 150ms ease-in-out;
|
||||||
|
transition: transform 150ms ease-in-out;
|
||||||
|
transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-cell-swipe{
|
||||||
|
position: relative;
|
||||||
|
min-height: 48px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.van-cell-right{
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
transform: translate3d(100%,0,0);
|
||||||
|
}
|
||||||
|
.van-cell-left {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
transform: translate3d(-100%,0,0);
|
||||||
|
}
|
||||||
@ -2,11 +2,11 @@
|
|||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'vant-icon';
|
font-family: 'vant-icon';
|
||||||
src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-3f0c3903d3.eot');
|
src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-ab58022933.eot');
|
||||||
src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-3f0c3903d3.eot?#iefix') format('embedded-opentype'),
|
src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-ab58022933.eot?#iefix') format('embedded-opentype'),
|
||||||
url('https://b.yzcdn.cn/zanui/icon/vant-icon-3f0c3903d3.woff2') format('woff2'),
|
url('https://b.yzcdn.cn/zanui/icon/vant-icon-ab58022933.woff2') format('woff2'),
|
||||||
url('https://b.yzcdn.cn/zanui/icon/vant-icon-3f0c3903d3.woff') format('woff'),
|
url('https://b.yzcdn.cn/zanui/icon/vant-icon-ab58022933.woff') format('woff'),
|
||||||
url('https://b.yzcdn.cn/zanui/icon/vant-icon-3f0c3903d3.ttf') format('truetype')
|
url('https://b.yzcdn.cn/zanui/icon/vant-icon-ab58022933.ttf') format('truetype')
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-icon {
|
.van-icon {
|
||||||
@ -80,3 +80,35 @@
|
|||||||
.van-icon-password-not-view:before { content: '\e81e'; } /* '' */
|
.van-icon-password-not-view:before { content: '\e81e'; } /* '' */
|
||||||
.van-icon-wap-nav:before { content: '\e81f'; } /* '' */
|
.van-icon-wap-nav:before { content: '\e81f'; } /* '' */
|
||||||
.van-icon-wap-home:before { content: '\e820'; } /* '' */
|
.van-icon-wap-home:before { content: '\e820'; } /* '' */
|
||||||
|
.van-icon-ecard-pay:before { content: '\e821'; } /* '' */
|
||||||
|
.van-icon-balance-pay:before { content: '\e822'; } /* '' */
|
||||||
|
.van-icon-peer-pay:before { content: '\e823'; } /* '' */
|
||||||
|
.van-icon-credit-pay:before { content: '\e824'; } /* '' */
|
||||||
|
.van-icon-debit-pay:before { content: '\e825'; } /* '' */
|
||||||
|
.van-icon-other-pay:before { content: '\e826'; } /* '' */
|
||||||
|
.van-icon-cart:before { content: '\e827'; } /* '' */
|
||||||
|
.van-icon-browsing-history:before { content: '\e828'; } /* '' */
|
||||||
|
.van-icon-goods-collect:before { content: '\e829'; } /* '' */
|
||||||
|
.van-icon-shop-collect:before { content: '\e82a'; } /* '' */
|
||||||
|
.van-icon-receive-gift:before { content: '\e82b'; } /* '' */
|
||||||
|
.van-icon-send-gift:before { content: '\e82c'; } /* '' */
|
||||||
|
.van-icon-setting:before { content: '\e82d'; } /* '' */
|
||||||
|
.van-icon-points:before { content: '\e82e'; } /* '' */
|
||||||
|
.van-icon-coupon:before { content: '\e82f'; } /* '' */
|
||||||
|
.van-icon-free-postage:before { content: '\e830'; } /* '' */
|
||||||
|
.van-icon-discount:before { content: '\e831'; } /* '' */
|
||||||
|
.van-icon-birthday-privilege:before { content: '\e832'; } /* '' */
|
||||||
|
.van-icon-member-day-privilege:before { content: '\e833'; } /* '' */
|
||||||
|
.van-icon-balance-details:before { content: '\e834'; } /* '' */
|
||||||
|
.van-icon-cash-back-record:before { content: '\e835'; } /* '' */
|
||||||
|
.van-icon-points-mall:before { content: '\e836'; } /* '' */
|
||||||
|
.van-icon-exchange-record:before { content: '\e837'; } /* '' */
|
||||||
|
.van-icon-pending-payment:before { content: '\e838'; } /* '' */
|
||||||
|
.van-icon-pending-orders:before { content: '\e839'; } /* '' */
|
||||||
|
.van-icon-pending-deliver:before { content: '\e83a'; } /* '' */
|
||||||
|
.van-icon-pending-evaluate:before { content: '\e83b'; } /* '' */
|
||||||
|
.van-icon-gift-card-pay:before { content: '\e83c'; } /* '' */
|
||||||
|
.van-icon-cash-on-deliver:before { content: '\e83d'; } /* '' */
|
||||||
|
.van-icon-underway:before { content: '\e83e'; } /* '' */
|
||||||
|
.van-icon-point-gift:before { content: '\e83f'; } /* '' */
|
||||||
|
.van-icon-after-sale:before { content: '\e840'; } /* '' */
|
||||||
@ -4,6 +4,7 @@
|
|||||||
@import './reset.css';
|
@import './reset.css';
|
||||||
@import './button.css';
|
@import './button.css';
|
||||||
@import './cell.css';
|
@import './cell.css';
|
||||||
|
@import './cell-swipe.css';
|
||||||
@import './card.css';
|
@import './card.css';
|
||||||
@import './dialog.css';
|
@import './dialog.css';
|
||||||
@import './field.css';
|
@import './field.css';
|
||||||
|
|||||||
@ -12,6 +12,15 @@
|
|||||||
padding-right: 50px;
|
padding-right: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@m showcase {
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
|
||||||
|
.van-search__input-wrap {
|
||||||
|
border-color: $c-gray-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@e input-wrap {
|
@e input-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 8px 24px 8px 35px;
|
padding: 8px 24px 8px 35px;
|
||||||
|
|||||||
@ -46,6 +46,7 @@
|
|||||||
.van-toast__text {
|
.van-toast__text {
|
||||||
padding: 15px 0 20px;
|
padding: 15px 0 20px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,6 +5,7 @@ import Radio from '../packages/radio/index.js';
|
|||||||
import Cell from '../packages/cell/index.js';
|
import Cell from '../packages/cell/index.js';
|
||||||
import Icon from '../packages/icon/index.js';
|
import Icon from '../packages/icon/index.js';
|
||||||
import CellGroup from '../packages/cell-group/index.js';
|
import CellGroup from '../packages/cell-group/index.js';
|
||||||
|
import CellSwipe from '../packages/cell-swipe/index.js';
|
||||||
import Popup from '../packages/popup/index.js';
|
import Popup from '../packages/popup/index.js';
|
||||||
import Dialog from '../packages/dialog/index.js';
|
import Dialog from '../packages/dialog/index.js';
|
||||||
import Picker from '../packages/picker/index.js';
|
import Picker from '../packages/picker/index.js';
|
||||||
@ -47,6 +48,7 @@ const install = function(Vue) {
|
|||||||
Vue.component(Cell.name, Cell);
|
Vue.component(Cell.name, Cell);
|
||||||
Vue.component(Icon.name, Icon);
|
Vue.component(Icon.name, Icon);
|
||||||
Vue.component(CellGroup.name, CellGroup);
|
Vue.component(CellGroup.name, CellGroup);
|
||||||
|
Vue.component(CellSwipe.name, CellSwipe);
|
||||||
Vue.component(Popup.name, Popup);
|
Vue.component(Popup.name, Popup);
|
||||||
Vue.component(Picker.name, Picker);
|
Vue.component(Picker.name, Picker);
|
||||||
Vue.component(RadioGroup.name, RadioGroup);
|
Vue.component(RadioGroup.name, RadioGroup);
|
||||||
@ -81,7 +83,7 @@ if (typeof window !== 'undefined' && window.Vue) {
|
|||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
install,
|
install,
|
||||||
version: '0.5.11',
|
version: '0.6.2',
|
||||||
Button,
|
Button,
|
||||||
Switch,
|
Switch,
|
||||||
Field,
|
Field,
|
||||||
@ -89,6 +91,7 @@ module.exports = {
|
|||||||
Cell,
|
Cell,
|
||||||
Icon,
|
Icon,
|
||||||
CellGroup,
|
CellGroup,
|
||||||
|
CellSwipe,
|
||||||
Popup,
|
Popup,
|
||||||
Dialog,
|
Dialog,
|
||||||
Picker,
|
Picker,
|
||||||
|
|||||||
@ -67,6 +67,7 @@ export default {
|
|||||||
* 显示popup
|
* 显示popup
|
||||||
*/
|
*/
|
||||||
open() {
|
open() {
|
||||||
|
if (this.$isServer) return;
|
||||||
if (this.opened) return;
|
if (this.opened) return;
|
||||||
|
|
||||||
this.opening = true;
|
this.opening = true;
|
||||||
|
|||||||
@ -1,8 +1,11 @@
|
|||||||
import merge from 'src/utils/merge';
|
import merge from 'src/utils/merge';
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
let context;
|
let context;
|
||||||
if (window && window.popupContext) {
|
const _global = Vue.prototype.$isServer ? global : window;
|
||||||
context = window.popupContext;
|
|
||||||
|
if (_global && _global.popupContext) {
|
||||||
|
context = _global.popupContext;
|
||||||
}
|
}
|
||||||
|
|
||||||
const DEFAULT_CONTEXT = {
|
const DEFAULT_CONTEXT = {
|
||||||
@ -13,7 +16,7 @@ const DEFAULT_CONTEXT = {
|
|||||||
modalStack: []
|
modalStack: []
|
||||||
};
|
};
|
||||||
|
|
||||||
context = window.popupContext = merge({}, DEFAULT_CONTEXT, context);
|
context = _global.popupContext = merge({}, DEFAULT_CONTEXT, context);
|
||||||
|
|
||||||
const PopupContext = {
|
const PopupContext = {
|
||||||
getContext(key) {
|
getContext(key) {
|
||||||
|
|||||||
@ -1,7 +1,9 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
import { addClass } from 'src/utils/dom';
|
import { addClass } from 'src/utils/dom';
|
||||||
import PopupContext from './popup-context';
|
import PopupContext from './popup-context';
|
||||||
|
|
||||||
const getModal = function() {
|
const getModal = function() {
|
||||||
|
if (Vue.prototype.$isServer) return;
|
||||||
let modalDom = PopupContext.getContext('modalDom');
|
let modalDom = PopupContext.getContext('modalDom');
|
||||||
|
|
||||||
if (modalDom) {
|
if (modalDom) {
|
||||||
|
|||||||
42
src/utils/clickoutside.js
Normal file
42
src/utils/clickoutside.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
/**
|
||||||
|
* v-clickoutside
|
||||||
|
* @desc 点击元素外面才会触发的事件
|
||||||
|
* @example
|
||||||
|
* ```vue
|
||||||
|
* <div v-clickoutside="handleClose">
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
const clickoutsideContext = '@@clickoutsideContext';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
bind(el, binding, vnode) {
|
||||||
|
const documentHandler = function(e) {
|
||||||
|
if (vnode.context && !el.contains(e.target)) {
|
||||||
|
vnode.context[el[clickoutsideContext].methodName]();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
el[clickoutsideContext] = {
|
||||||
|
documentHandler,
|
||||||
|
methodName: binding.expression,
|
||||||
|
arg: binding.arg || 'click'
|
||||||
|
};
|
||||||
|
document.addEventListener(el[clickoutsideContext].arg, documentHandler);
|
||||||
|
},
|
||||||
|
|
||||||
|
update(el, binding) {
|
||||||
|
el[clickoutsideContext].methodName = binding.expression;
|
||||||
|
},
|
||||||
|
|
||||||
|
unbind(el) {
|
||||||
|
document.removeEventListener(
|
||||||
|
el[clickoutsideContext].arg,
|
||||||
|
el[clickoutsideContext].documentHandler);
|
||||||
|
},
|
||||||
|
|
||||||
|
install(Vue) {
|
||||||
|
Vue.directive('clickoutside', {
|
||||||
|
bind: this.bind,
|
||||||
|
unbind: this.unbind
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -55,3 +55,44 @@ export function removeClass(el, cls) {
|
|||||||
el.className = trim(curClass);
|
el.className = trim(curClass);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
export const once = function(el, event, fn) {
|
||||||
|
var listener = function() {
|
||||||
|
if (fn) {
|
||||||
|
fn.apply(this, arguments);
|
||||||
|
}
|
||||||
|
off(el, event, listener);
|
||||||
|
};
|
||||||
|
on(el, event, listener);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const on = (function() {
|
||||||
|
if (document.addEventListener) {
|
||||||
|
return function(element, event, handler) {
|
||||||
|
if (element && event && handler) {
|
||||||
|
element.addEventListener(event, handler, false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return function(element, event, handler) {
|
||||||
|
if (element && event && handler) {
|
||||||
|
element.attachEvent('on' + event, handler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
export const off = (function() {
|
||||||
|
if (document.removeEventListener) {
|
||||||
|
return function(element, event, handler) {
|
||||||
|
if (element && event) {
|
||||||
|
element.removeEventListener(event, handler, false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return function(element, event, handler) {
|
||||||
|
if (element && event) {
|
||||||
|
element.detachEvent('on' + event, handler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
debounce(func, wait, immediate) {
|
debounce(func, wait, immediate) {
|
||||||
var timeout, args, context, timestamp, result;
|
var timeout, args, context, timestamp, result;
|
||||||
@ -55,6 +57,11 @@ export default {
|
|||||||
return 'scrollTop' in element ? element.scrollTop : element.pageYOffset;
|
return 'scrollTop' in element ? element.scrollTop : element.pageYOffset;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 设置滚动高度
|
||||||
|
setScrollTop(element, value) {
|
||||||
|
'scrollTop' in element ? element.scrollTop = value : element.scrollTo(element.scrollX, value);
|
||||||
|
},
|
||||||
|
|
||||||
// 获取元素距离顶部高度
|
// 获取元素距离顶部高度
|
||||||
getElementTop(element) {
|
getElementTop(element) {
|
||||||
if (element === window) {
|
if (element === window) {
|
||||||
@ -71,5 +78,5 @@ export default {
|
|||||||
return element.getBoundingClientRect().height;
|
return element.getBoundingClientRect().height;
|
||||||
},
|
},
|
||||||
|
|
||||||
getComputedStyle: document.defaultView.getComputedStyle.bind(document.defaultView)
|
getComputedStyle: !Vue.prototype.$isServer && document.defaultView.getComputedStyle.bind(document.defaultView)
|
||||||
};
|
};
|
||||||
|
|||||||
@ -84,11 +84,11 @@ describe('ActionSheet', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const actionItem = wrapper.find('.van-actionsheet__item')[0];
|
const actionItem = wrapper.find('.van-actionsheet__item')[0];
|
||||||
actionItem.simulate('click');
|
actionItem.trigger('click');
|
||||||
expect(called).to.be.true;
|
expect(called).to.be.true;
|
||||||
|
|
||||||
const secondActionItem = wrapper.find('.van-actionsheet__item')[1];
|
const secondActionItem = wrapper.find('.van-actionsheet__item')[1];
|
||||||
secondActionItem.simulate('click');
|
secondActionItem.trigger('click');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('create actionsheet with cancel button', () => {
|
it('create actionsheet with cancel button', () => {
|
||||||
|
|||||||
@ -21,7 +21,7 @@ describe('BadgeGroup', () => {
|
|||||||
|
|
||||||
const badge = wrapper.find('.van-badge')[0];
|
const badge = wrapper.find('.van-badge')[0];
|
||||||
const eventStub = sinon.stub(badge.vNode.child, '$emit');
|
const eventStub = sinon.stub(badge.vNode.child, '$emit');
|
||||||
badge.simulate('click');
|
badge.trigger('click');
|
||||||
|
|
||||||
expect(eventStub.calledWith('click')).to.be.true;
|
expect(eventStub.calledWith('click')).to.be.true;
|
||||||
});
|
});
|
||||||
|
|||||||
@ -17,7 +17,7 @@ describe('Button', () => {
|
|||||||
expect(wrapper.hasClass('van-button--normal')).to.be.true;
|
expect(wrapper.hasClass('van-button--normal')).to.be.true;
|
||||||
|
|
||||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||||
wrapper.simulate('click');
|
wrapper.trigger('click');
|
||||||
|
|
||||||
expect(eventStub.calledOnce).to.be.true;
|
expect(eventStub.calledOnce).to.be.true;
|
||||||
expect(eventStub.calledWith('click')).to.be.true;
|
expect(eventStub.calledWith('click')).to.be.true;
|
||||||
@ -111,7 +111,7 @@ describe('Button', () => {
|
|||||||
expect(wrapper.hasClass('van-button--disabled')).to.be.true;
|
expect(wrapper.hasClass('van-button--disabled')).to.be.true;
|
||||||
|
|
||||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||||
wrapper.simulate('click');
|
wrapper.trigger('click');
|
||||||
|
|
||||||
expect(eventStub.called).to.be.false;
|
expect(eventStub.called).to.be.false;
|
||||||
});
|
});
|
||||||
@ -128,7 +128,7 @@ describe('Button', () => {
|
|||||||
expect(loading.isVueComponent).to.be.true;
|
expect(loading.isVueComponent).to.be.true;
|
||||||
|
|
||||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||||
wrapper.simulate('click');
|
wrapper.trigger('click');
|
||||||
|
|
||||||
expect(eventStub.called).to.be.false;
|
expect(eventStub.called).to.be.false;
|
||||||
});
|
});
|
||||||
|
|||||||
141
test/unit/specs/cell-swipe.spec.js
Normal file
141
test/unit/specs/cell-swipe.spec.js
Normal file
@ -0,0 +1,141 @@
|
|||||||
|
import CellSwipe from 'packages/cell-swipe';
|
||||||
|
import { mount } from 'avoriaz';
|
||||||
|
|
||||||
|
describe('CellSwipe', () => {
|
||||||
|
let wrapper;
|
||||||
|
afterEach(() => {
|
||||||
|
wrapper && wrapper.destroy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('create a CellSwipe', () => {
|
||||||
|
wrapper = mount(CellSwipe, {
|
||||||
|
propsData: {
|
||||||
|
leftWidth: 2,
|
||||||
|
rightWidth: 2
|
||||||
|
}
|
||||||
|
});
|
||||||
|
wrapper.vm.startDrag({
|
||||||
|
pageX: 0,
|
||||||
|
pageY: 0
|
||||||
|
});
|
||||||
|
wrapper.vm.onDrag({
|
||||||
|
preventDefault() {},
|
||||||
|
pageY: 0,
|
||||||
|
pageX: 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-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;
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -44,7 +44,7 @@ describe('Cell', () => {
|
|||||||
wrapper = mount(Cell);
|
wrapper = mount(Cell);
|
||||||
|
|
||||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||||
wrapper.simulate('click');
|
wrapper.trigger('click');
|
||||||
|
|
||||||
expect(eventStub.calledOnce).to.be.true;
|
expect(eventStub.calledOnce).to.be.true;
|
||||||
expect(eventStub.calledWith('click')).to.be.true;
|
expect(eventStub.calledWith('click')).to.be.true;
|
||||||
|
|||||||
@ -41,7 +41,7 @@ describe('CheckboxGroup', () => {
|
|||||||
const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
|
const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
|
||||||
|
|
||||||
const firstCheckboxLabel = wrapper.find('.van-checkbox')[0].find('.van-checkbox__label')[0];
|
const firstCheckboxLabel = wrapper.find('.van-checkbox')[0].find('.van-checkbox__label')[0];
|
||||||
firstCheckboxLabel.simulate('click');
|
firstCheckboxLabel.trigger('click');
|
||||||
|
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
@ -57,7 +57,7 @@ describe('CheckboxGroup', () => {
|
|||||||
const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
|
const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
|
||||||
|
|
||||||
const lastCheckboxLabel = wrapper.find('.van-checkbox')[3].find('.van-checkbox__label')[0];
|
const lastCheckboxLabel = wrapper.find('.van-checkbox')[3].find('.van-checkbox__label')[0];
|
||||||
lastCheckboxLabel.simulate('click');
|
lastCheckboxLabel.trigger('click');
|
||||||
|
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
@ -121,7 +121,7 @@ describe('Checkbox', () => {
|
|||||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||||
|
|
||||||
const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
|
const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
|
||||||
checkboxLabel.simulate('click');
|
checkboxLabel.trigger('click');
|
||||||
|
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
@ -145,7 +145,7 @@ describe('Checkbox', () => {
|
|||||||
expect(wrapper.vm.isDisabled).to.be.true;
|
expect(wrapper.vm.isDisabled).to.be.true;
|
||||||
|
|
||||||
const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
|
const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
|
||||||
checkboxLabel.simulate('click');
|
checkboxLabel.trigger('click');
|
||||||
|
|
||||||
expect(wrapper.vm.currentValue).to.be.false;
|
expect(wrapper.vm.currentValue).to.be.false;
|
||||||
});
|
});
|
||||||
|
|||||||
@ -60,7 +60,7 @@ describe('Field', () => {
|
|||||||
|
|
||||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||||
const input = wrapper.find('.van-field__control')[0];
|
const input = wrapper.find('.van-field__control')[0];
|
||||||
input.simulate('focus');
|
input.trigger('focus');
|
||||||
|
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
@ -79,7 +79,7 @@ describe('Field', () => {
|
|||||||
const input = wrapper.find('.van-field__control')[0];
|
const input = wrapper.find('.van-field__control')[0];
|
||||||
|
|
||||||
input.element.value = 'test';
|
input.element.value = 'test';
|
||||||
input.simulate('input');
|
input.trigger('input');
|
||||||
|
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
@ -117,7 +117,7 @@ describe('Field', () => {
|
|||||||
parseInt(textareaElement.style.paddingTop, 10)) || 0;
|
parseInt(textareaElement.style.paddingTop, 10)) || 0;
|
||||||
|
|
||||||
textareaElement.value = 'test';
|
textareaElement.value = 'test';
|
||||||
textarea.simulate('input');
|
textarea.trigger('input');
|
||||||
|
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
|
|||||||
@ -27,7 +27,7 @@ describe('Icon', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||||
wrapper.simulate('click');
|
wrapper.trigger('click');
|
||||||
|
|
||||||
expect(eventStub.calledOnce).to.be.true;
|
expect(eventStub.calledOnce).to.be.true;
|
||||||
expect(eventStub.calledWith('click')).to.be.true;
|
expect(eventStub.calledWith('click')).to.be.true;
|
||||||
|
|||||||
@ -25,9 +25,9 @@ describe('ImagePreview', () => {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const image = document.querySelector('.van-image-preview');
|
const image = document.querySelector('.van-image-preview');
|
||||||
const avImage = new Wrapper({ elm: image }, () => {}, false);
|
const avImage = new Wrapper({ elm: image }, () => {}, false);
|
||||||
avImage.simulate('click');
|
avImage.trigger('click');
|
||||||
avImage.simulate('touchstart');
|
avImage.trigger('touchstart');
|
||||||
avImage.simulate('touchend');
|
avImage.trigger('touchend');
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect(document.querySelector('.van-image-preview').__vue__.$parent.value).to.be.false;
|
expect(document.querySelector('.van-image-preview').__vue__.$parent.value).to.be.false;
|
||||||
expect(document.body.style.overflow).to.equal('');
|
expect(document.body.style.overflow).to.equal('');
|
||||||
@ -49,9 +49,9 @@ describe('ImagePreview', () => {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const image = document.querySelector('.van-image-preview');
|
const image = document.querySelector('.van-image-preview');
|
||||||
const avImage = new Wrapper({ elm: image }, () => {}, false);
|
const avImage = new Wrapper({ elm: image }, () => {}, false);
|
||||||
avImage.simulate('click');
|
avImage.trigger('click');
|
||||||
avImage.simulate('touchstart');
|
avImage.trigger('touchstart');
|
||||||
avImage.simulate('touchend');
|
avImage.trigger('touchend');
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect(document.querySelector('.van-image-preview').__vue__.$parent.value).to.be.false;
|
expect(document.querySelector('.van-image-preview').__vue__.$parent.value).to.be.false;
|
||||||
|
|||||||
@ -13,7 +13,7 @@ describe('Layout', () => {
|
|||||||
wrapper = mount(Row);
|
wrapper = mount(Row);
|
||||||
|
|
||||||
expect(wrapper.hasClass('van-row')).to.be.true;
|
expect(wrapper.hasClass('van-row')).to.be.true;
|
||||||
expect(wrapper.computed().style()).to.be.empty;
|
expect(wrapper.vm.style).to.be.empty;
|
||||||
});
|
});
|
||||||
|
|
||||||
it('create a simple column', () => {
|
it('create a simple column', () => {
|
||||||
@ -26,7 +26,7 @@ describe('Layout', () => {
|
|||||||
expect(wrapper.hasClass('van-col')).to.be.true;
|
expect(wrapper.hasClass('van-col')).to.be.true;
|
||||||
expect(wrapper.hasClass('van-col-8')).to.be.true;
|
expect(wrapper.hasClass('van-col-8')).to.be.true;
|
||||||
expect(wrapper.hasClass('van-col-offset-8')).to.be.true;
|
expect(wrapper.hasClass('van-col-offset-8')).to.be.true;
|
||||||
expect(wrapper.computed().gutter()).to.equal(0);
|
expect(wrapper.vm.gutter).to.equal(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('create a gutter row', () => {
|
it('create a gutter row', () => {
|
||||||
|
|||||||
@ -124,7 +124,7 @@ describe('Picker', () => {
|
|||||||
|
|
||||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||||
const cancelBtn = wrapper.find('.van-picker__cancel')[0];
|
const cancelBtn = wrapper.find('.van-picker__cancel')[0];
|
||||||
cancelBtn.simulate('click');
|
cancelBtn.trigger('click');
|
||||||
|
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
expect(eventStub.calledOnce).to.be.true;
|
expect(eventStub.calledOnce).to.be.true;
|
||||||
@ -145,7 +145,7 @@ describe('Picker', () => {
|
|||||||
|
|
||||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||||
const cancelBtn = wrapper.find('.van-picker__confirm')[0];
|
const cancelBtn = wrapper.find('.van-picker__confirm')[0];
|
||||||
cancelBtn.simulate('click');
|
cancelBtn.trigger('click');
|
||||||
|
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
expect(eventStub.calledOnce).to.be.true;
|
expect(eventStub.calledOnce).to.be.true;
|
||||||
|
|||||||
@ -19,12 +19,12 @@ describe('Quantity', () => {
|
|||||||
expect(wrapper.data().currentValue).to.equal(1);
|
expect(wrapper.data().currentValue).to.equal(1);
|
||||||
|
|
||||||
const plusButton = wrapper.find('.van-quantity__plus')[0];
|
const plusButton = wrapper.find('.van-quantity__plus')[0];
|
||||||
plusButton.simulate('click');
|
plusButton.trigger('click');
|
||||||
|
|
||||||
expect(wrapper.data().currentValue).to.equal(2);
|
expect(wrapper.data().currentValue).to.equal(2);
|
||||||
|
|
||||||
const minusButton = wrapper.find('.van-quantity__minus')[0];
|
const minusButton = wrapper.find('.van-quantity__minus')[0];
|
||||||
minusButton.simulate('click');
|
minusButton.trigger('click');
|
||||||
expect(wrapper.data().currentValue).to.equal(1);
|
expect(wrapper.data().currentValue).to.equal(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -40,7 +40,7 @@ describe('Quantity', () => {
|
|||||||
expect(minusButton.hasClass('van-quantity__minus--disabled')).to.be.true;
|
expect(minusButton.hasClass('van-quantity__minus--disabled')).to.be.true;
|
||||||
|
|
||||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||||
minusButton.simulate('click');
|
minusButton.trigger('click');
|
||||||
|
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
@ -51,7 +51,7 @@ describe('Quantity', () => {
|
|||||||
const plusButton = wrapper.find('.van-quantity__plus')[0];
|
const plusButton = wrapper.find('.van-quantity__plus')[0];
|
||||||
expect(plusButton.hasClass('van-quantity__plus--disabled')).to.be.true;
|
expect(plusButton.hasClass('van-quantity__plus--disabled')).to.be.true;
|
||||||
|
|
||||||
plusButton.simulate('click');
|
plusButton.trigger('click');
|
||||||
|
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
@ -109,7 +109,7 @@ describe('Quantity', () => {
|
|||||||
|
|
||||||
const input = wrapper.find('.van-quantity__input')[0];
|
const input = wrapper.find('.van-quantity__input')[0];
|
||||||
input.element.value = 2;
|
input.element.value = 2;
|
||||||
input.simulate('input');
|
input.trigger('input');
|
||||||
|
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
|
|||||||
@ -41,7 +41,7 @@ describe('RadioGroup', () => {
|
|||||||
const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
|
const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
|
||||||
|
|
||||||
const uncheckedRadioLabel = wrapper.find('.van-radio')[1].find('.van-radio__label')[0];
|
const uncheckedRadioLabel = wrapper.find('.van-radio')[1].find('.van-radio__label')[0];
|
||||||
uncheckedRadioLabel.simulate('click');
|
uncheckedRadioLabel.trigger('click');
|
||||||
|
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
@ -85,7 +85,7 @@ describe('Radio', () => {
|
|||||||
expect(wrapper.hasClass('van-radio')).to.be.true;
|
expect(wrapper.hasClass('van-radio')).to.be.true;
|
||||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||||
|
|
||||||
wrapper.simulate('click');
|
wrapper.trigger('click');
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
expect(eventStub.calledOnce).to.be.true;
|
expect(eventStub.calledOnce).to.be.true;
|
||||||
@ -107,7 +107,7 @@ describe('Radio', () => {
|
|||||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||||
|
|
||||||
const checkboxLabel = wrapper.find('.van-radio__label')[0];
|
const checkboxLabel = wrapper.find('.van-radio__label')[0];
|
||||||
checkboxLabel.simulate('click');
|
checkboxLabel.trigger('click');
|
||||||
|
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
@ -132,7 +132,7 @@ describe('Radio', () => {
|
|||||||
expect(wrapper.instance().isDisabled).to.be.true;
|
expect(wrapper.instance().isDisabled).to.be.true;
|
||||||
|
|
||||||
const checkboxLabel = wrapper.find('.van-radio__label')[0];
|
const checkboxLabel = wrapper.find('.van-radio__label')[0];
|
||||||
checkboxLabel.simulate('click');
|
checkboxLabel.trigger('click');
|
||||||
|
|
||||||
expect(wrapper.instance().currentValue).to.equal('1');
|
expect(wrapper.instance().currentValue).to.equal('1');
|
||||||
});
|
});
|
||||||
|
|||||||
@ -20,7 +20,7 @@ describe('Search', () => {
|
|||||||
wrapper = mount(Search);
|
wrapper = mount(Search);
|
||||||
|
|
||||||
const input = wrapper.find('.van-search__input')[0];
|
const input = wrapper.find('.van-search__input')[0];
|
||||||
input.simulate('focus');
|
input.trigger('focus');
|
||||||
|
|
||||||
expect(wrapper.data().isFocus).to.be.true;
|
expect(wrapper.data().isFocus).to.be.true;
|
||||||
});
|
});
|
||||||
@ -46,10 +46,10 @@ describe('Search', () => {
|
|||||||
expect(wrapper.data().value).to.be.equal('test');
|
expect(wrapper.data().value).to.be.equal('test');
|
||||||
|
|
||||||
const input = wrapper.find('.van-search__input')[0];
|
const input = wrapper.find('.van-search__input')[0];
|
||||||
input.simulate('focus');
|
input.trigger('focus');
|
||||||
|
|
||||||
const cleanBtn = wrapper.find('.van-icon-clear')[0];
|
const cleanBtn = wrapper.find('.van-icon-clear')[0];
|
||||||
cleanBtn.simulate('click');
|
cleanBtn.trigger('click');
|
||||||
expect(wrapper.data().value).to.equal('');
|
expect(wrapper.data().value).to.equal('');
|
||||||
expect(wrapper.data().focusStatus).to.be.true;
|
expect(wrapper.data().focusStatus).to.be.true;
|
||||||
});
|
});
|
||||||
@ -63,10 +63,10 @@ describe('Search', () => {
|
|||||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||||
|
|
||||||
const input = wrapper.find('.van-search__input')[0];
|
const input = wrapper.find('.van-search__input')[0];
|
||||||
input.simulate('focus');
|
input.trigger('focus');
|
||||||
|
|
||||||
const cancelBtn = wrapper.find('.van-search__cancel')[0];
|
const cancelBtn = wrapper.find('.van-search__cancel')[0];
|
||||||
cancelBtn.simulate('click');
|
cancelBtn.trigger('click');
|
||||||
|
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
expect(wrapper.data().value).to.be.equal('');
|
expect(wrapper.data().value).to.be.equal('');
|
||||||
@ -84,7 +84,7 @@ describe('Search', () => {
|
|||||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||||
|
|
||||||
const input = wrapper.find('.van-search__input')[0];
|
const input = wrapper.find('.van-search__input')[0];
|
||||||
input.simulate('keyup.enter');
|
input.trigger('keyup.enter');
|
||||||
|
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
expect(eventStub.calledOnce).to.be.true;
|
expect(eventStub.calledOnce).to.be.true;
|
||||||
@ -92,4 +92,25 @@ describe('Search', () => {
|
|||||||
done();
|
done();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('create a showcase type search', () => {
|
||||||
|
wrapper = mount(Search, {
|
||||||
|
propsData: {
|
||||||
|
type: 'showcase'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.hasClass('van-search')).to.be.true;
|
||||||
|
expect(wrapper.hasClass('van-search--showcase')).to.be.true;
|
||||||
|
|
||||||
|
const input = wrapper.find('.van-search__input')[0];
|
||||||
|
input.trigger('focus');
|
||||||
|
|
||||||
|
expect(wrapper.data().isFocus).to.be.true;
|
||||||
|
|
||||||
|
const body = document.body;
|
||||||
|
body.click();
|
||||||
|
expect(wrapper.data().isFocus).to.be.false;
|
||||||
|
expect(wrapper.data().focusStatus).to.be.false;
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -53,7 +53,7 @@ describe('Switch', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
expect(wrapper.hasClass('van-switch--on')).to.be.true;
|
expect(wrapper.hasClass('van-switch--on')).to.be.true;
|
||||||
wrapper.simulate('click');
|
wrapper.trigger('click');
|
||||||
expect(wrapper.hasClass('van-switch--on')).to.be.true;
|
expect(wrapper.hasClass('van-switch--on')).to.be.true;
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -77,7 +77,7 @@ describe('Switch', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||||
wrapper.simulate('click');
|
wrapper.trigger('click');
|
||||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -89,7 +89,7 @@ describe('Switch', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||||
wrapper.simulate('click');
|
wrapper.trigger('click');
|
||||||
expect(wrapper.hasClass('van-switch--on')).to.be.true;
|
expect(wrapper.hasClass('van-switch--on')).to.be.true;
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -103,7 +103,7 @@ describe('Switch', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||||
wrapper.simulate('click');
|
wrapper.trigger('click');
|
||||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||||
expect(stub.calledOnce).to.be.true;
|
expect(stub.calledOnce).to.be.true;
|
||||||
expect(stub.calledWith(true));
|
expect(stub.calledWith(true));
|
||||||
|
|||||||
@ -47,7 +47,7 @@ describe('Tabs', () => {
|
|||||||
|
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
const nTab = wrapper.find('.van-tab')[0];
|
const nTab = wrapper.find('.van-tab')[0];
|
||||||
nTab.simulate('click');
|
nTab.trigger('click');
|
||||||
expect(clickSpy.calledOnce).to.be.true;
|
expect(clickSpy.calledOnce).to.be.true;
|
||||||
done();
|
done();
|
||||||
});
|
});
|
||||||
@ -63,7 +63,7 @@ describe('Tabs', () => {
|
|||||||
|
|
||||||
wrapper.vm.$nextTick(() => {
|
wrapper.vm.$nextTick(() => {
|
||||||
const nTab = wrapper.find('.van-tab')[2];
|
const nTab = wrapper.find('.van-tab')[2];
|
||||||
nTab.simulate('click');
|
nTab.trigger('click');
|
||||||
expect(clickDisabledSpy.calledOnce).to.be.true;
|
expect(clickDisabledSpy.calledOnce).to.be.true;
|
||||||
done();
|
done();
|
||||||
});
|
});
|
||||||
|
|||||||
117
yarn.lock
117
yarn.lock
@ -280,11 +280,11 @@ autoprefixer@^6.3.1, autoprefixer@^6.7.5:
|
|||||||
postcss "^5.2.16"
|
postcss "^5.2.16"
|
||||||
postcss-value-parser "^3.2.3"
|
postcss-value-parser "^3.2.3"
|
||||||
|
|
||||||
avoriaz@^1.11.1:
|
avoriaz@^2.0.0:
|
||||||
version "1.11.1"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/avoriaz/-/avoriaz-1.11.1.tgz#55bf9456b998b73d82f1c74c90a3858b7088ce3f"
|
resolved "https://registry.yarnpkg.com/avoriaz/-/avoriaz-2.0.0.tgz#df0b4cd95afa6da03bed886595e36b9c1d17e201"
|
||||||
dependencies:
|
dependencies:
|
||||||
vue "^2.2.1"
|
vue-add-globals "^1.0.1"
|
||||||
|
|
||||||
aws-sign2@~0.6.0:
|
aws-sign2@~0.6.0:
|
||||||
version "0.6.0"
|
version "0.6.0"
|
||||||
@ -2072,6 +2072,12 @@ error-ex@^1.2.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
is-arrayish "^0.2.1"
|
is-arrayish "^0.2.1"
|
||||||
|
|
||||||
|
error-stack-parser@^2.0.0:
|
||||||
|
version "2.0.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.1.tgz#a3202b8fb03114aa9b40a0e3669e48b2b65a010a"
|
||||||
|
dependencies:
|
||||||
|
stackframe "^1.0.3"
|
||||||
|
|
||||||
es-abstract@^1.7.0:
|
es-abstract@^1.7.0:
|
||||||
version "1.7.0"
|
version "1.7.0"
|
||||||
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.7.0.tgz#dfade774e01bfcd97f96180298c449c8623fb94c"
|
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.7.0.tgz#dfade774e01bfcd97f96180298c449c8623fb94c"
|
||||||
@ -2694,6 +2700,14 @@ fresh@0.5.0:
|
|||||||
version "0.5.0"
|
version "0.5.0"
|
||||||
resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
|
resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
|
||||||
|
|
||||||
|
friendly-errors-webpack-plugin@^1.6.1:
|
||||||
|
version "1.6.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.6.1.tgz#e32781c4722f546a06a9b5d7a7cfa28520375d70"
|
||||||
|
dependencies:
|
||||||
|
chalk "^1.1.3"
|
||||||
|
error-stack-parser "^2.0.0"
|
||||||
|
string-length "^1.0.1"
|
||||||
|
|
||||||
fs-access@^1.0.0:
|
fs-access@^1.0.0:
|
||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/fs-access/-/fs-access-1.0.1.tgz#d6a87f262271cefebec30c553407fb995da8777a"
|
resolved "https://registry.yarnpkg.com/fs-access/-/fs-access-1.0.1.tgz#d6a87f262271cefebec30c553407fb995da8777a"
|
||||||
@ -4027,7 +4041,7 @@ loader-runner@^2.3.0:
|
|||||||
version "2.3.0"
|
version "2.3.0"
|
||||||
resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
|
resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
|
||||||
|
|
||||||
loader-utils@^0.2.10, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.5, loader-utils@^0.2.7, loader-utils@~0.2.2, loader-utils@~0.2.5:
|
loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.5, loader-utils@~0.2.2, loader-utils@~0.2.5:
|
||||||
version "0.2.17"
|
version "0.2.17"
|
||||||
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
|
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
|
||||||
dependencies:
|
dependencies:
|
||||||
@ -4036,7 +4050,7 @@ loader-utils@^0.2.10, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^
|
|||||||
json5 "^0.5.0"
|
json5 "^0.5.0"
|
||||||
object-assign "^4.0.1"
|
object-assign "^4.0.1"
|
||||||
|
|
||||||
loader-utils@^1.0.2:
|
loader-utils@^1.0.2, loader-utils@^1.1.0:
|
||||||
version "1.1.0"
|
version "1.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
|
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
|
||||||
dependencies:
|
dependencies:
|
||||||
@ -5102,12 +5116,6 @@ postcss-convert-values@^2.3.4:
|
|||||||
postcss "^5.0.11"
|
postcss "^5.0.11"
|
||||||
postcss-value-parser "^3.1.2"
|
postcss-value-parser "^3.1.2"
|
||||||
|
|
||||||
postcss-css-reset@^1.0.2:
|
|
||||||
version "1.0.2"
|
|
||||||
resolved "https://registry.yarnpkg.com/postcss-css-reset/-/postcss-css-reset-1.0.2.tgz#769f2d62d3f1f76e2600fb4f79066399bebe2bd8"
|
|
||||||
dependencies:
|
|
||||||
postcss "^5.0.19"
|
|
||||||
|
|
||||||
postcss-custom-media@^5.0.0:
|
postcss-custom-media@^5.0.0:
|
||||||
version "5.0.1"
|
version "5.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-5.0.1.tgz#138d25a184bf2eb54de12d55a6c01c30a9d8bd81"
|
resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-5.0.1.tgz#138d25a184bf2eb54de12d55a6c01c30a9d8bd81"
|
||||||
@ -5197,7 +5205,7 @@ postcss-import@^9.1.0:
|
|||||||
read-cache "^1.0.0"
|
read-cache "^1.0.0"
|
||||||
resolve "^1.1.7"
|
resolve "^1.1.7"
|
||||||
|
|
||||||
postcss-load-config@^1.2.0:
|
postcss-load-config@^1.1.0, postcss-load-config@^1.2.0:
|
||||||
version "1.2.0"
|
version "1.2.0"
|
||||||
resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
|
resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
|
||||||
dependencies:
|
dependencies:
|
||||||
@ -5461,7 +5469,7 @@ postcss-zindex@^2.0.1:
|
|||||||
postcss "^5.0.4"
|
postcss "^5.0.4"
|
||||||
uniqs "^2.0.0"
|
uniqs "^2.0.0"
|
||||||
|
|
||||||
postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.15, postcss@^5.0.16, postcss@^5.0.19, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.1.2, postcss@^5.2.15, postcss@^5.2.16, postcss@^5.2.17:
|
postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.15, postcss@^5.0.16, postcss@^5.0.19, postcss@^5.0.2, postcss@^5.0.21, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.1.2, postcss@^5.2.15, postcss@^5.2.16, postcss@^5.2.17:
|
||||||
version "5.2.17"
|
version "5.2.17"
|
||||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.17.tgz#cf4f597b864d65c8a492b2eabe9d706c879c388b"
|
resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.17.tgz#cf4f597b864d65c8a492b2eabe9d706c879c388b"
|
||||||
dependencies:
|
dependencies:
|
||||||
@ -5979,7 +5987,7 @@ resolve@1.1.x:
|
|||||||
version "1.1.7"
|
version "1.1.7"
|
||||||
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
|
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
|
||||||
|
|
||||||
resolve@^1.1.6, resolve@^1.1.7, resolve@^1.2.0:
|
resolve@^1.1.6, resolve@^1.1.7, resolve@^1.2.0, resolve@^1.3.3:
|
||||||
version "1.3.3"
|
version "1.3.3"
|
||||||
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.3.tgz#655907c3469a8680dc2de3a275a8fdd69691f0e5"
|
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.3.tgz#655907c3469a8680dc2de3a275a8fdd69691f0e5"
|
||||||
dependencies:
|
dependencies:
|
||||||
@ -6002,7 +6010,7 @@ right-align@^0.1.1:
|
|||||||
dependencies:
|
dependencies:
|
||||||
align-text "^0.1.1"
|
align-text "^0.1.1"
|
||||||
|
|
||||||
rimraf@2, rimraf@^2.2.8, rimraf@^2.4.4, rimraf@^2.5.1, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1:
|
rimraf@2, rimraf@^2.2.8, rimraf@^2.4.4, rimraf@^2.5.1, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1:
|
||||||
version "2.6.1"
|
version "2.6.1"
|
||||||
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
|
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
|
||||||
dependencies:
|
dependencies:
|
||||||
@ -6343,6 +6351,10 @@ sshpk@^1.7.0:
|
|||||||
jsbn "~0.1.0"
|
jsbn "~0.1.0"
|
||||||
tweetnacl "~0.14.0"
|
tweetnacl "~0.14.0"
|
||||||
|
|
||||||
|
stackframe@^1.0.3:
|
||||||
|
version "1.0.3"
|
||||||
|
resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.0.3.tgz#fe64ab20b170e4ce49044b126c119dfa0e5dc7cc"
|
||||||
|
|
||||||
"statuses@>= 1.3.1 < 2", statuses@~1.3.1:
|
"statuses@>= 1.3.1 < 2", statuses@~1.3.1:
|
||||||
version "1.3.1"
|
version "1.3.1"
|
||||||
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
|
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
|
||||||
@ -6380,6 +6392,12 @@ string-hash@^1.1.0:
|
|||||||
version "1.1.3"
|
version "1.1.3"
|
||||||
resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
|
resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
|
||||||
|
|
||||||
|
string-length@^1.0.1:
|
||||||
|
version "1.0.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac"
|
||||||
|
dependencies:
|
||||||
|
strip-ansi "^3.0.0"
|
||||||
|
|
||||||
string-width@^1.0.1, string-width@^1.0.2:
|
string-width@^1.0.1, string-width@^1.0.2:
|
||||||
version "1.0.2"
|
version "1.0.2"
|
||||||
resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
|
resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
|
||||||
@ -6921,15 +6939,15 @@ void-elements@^2.0.0:
|
|||||||
version "2.0.1"
|
version "2.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
|
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
|
||||||
|
|
||||||
vue-hot-reload-api@^1.3.3:
|
vue-add-globals@^1.0.1:
|
||||||
version "1.3.3"
|
version "1.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-1.3.3.tgz#54d22d83786a878493f639cc76bca7992a23be46"
|
resolved "https://registry.yarnpkg.com/vue-add-globals/-/vue-add-globals-1.0.1.tgz#151f241426e70cbc790a1f31bb0f4435d7575efc"
|
||||||
|
|
||||||
vue-hot-reload-api@^2.0.1:
|
vue-hot-reload-api@^2.1.0:
|
||||||
version "2.1.0"
|
version "2.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.1.0.tgz#9ca58a6e0df9078554ce1708688b6578754d86de"
|
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.1.0.tgz#9ca58a6e0df9078554ce1708688b6578754d86de"
|
||||||
|
|
||||||
vue-html-loader@^1.2.3:
|
vue-html-loader@^1.2.4:
|
||||||
version "1.2.4"
|
version "1.2.4"
|
||||||
resolved "https://registry.yarnpkg.com/vue-html-loader/-/vue-html-loader-1.2.4.tgz#54ce489be06065c91dc2a1173122f3e004e0a253"
|
resolved "https://registry.yarnpkg.com/vue-html-loader/-/vue-html-loader-1.2.4.tgz#54ce489be06065c91dc2a1173122f3e004e0a253"
|
||||||
dependencies:
|
dependencies:
|
||||||
@ -6943,52 +6961,47 @@ vue-lazyload@^1.0.3:
|
|||||||
version "1.0.3"
|
version "1.0.3"
|
||||||
resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.0.3.tgz#6bd881a5bf3c681e74e86190094cad104bc403fa"
|
resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.0.3.tgz#6bd881a5bf3c681e74e86190094cad104bc403fa"
|
||||||
|
|
||||||
vue-loader@^10.3.0:
|
vue-loader@^12.0.0:
|
||||||
version "10.3.0"
|
version "12.2.1"
|
||||||
resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-10.3.0.tgz#436421736e9ad0f1c481330327c376963db86a19"
|
resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-12.2.1.tgz#53f27c0973d386768f5a75156f4129b5efc6ba55"
|
||||||
dependencies:
|
dependencies:
|
||||||
consolidate "^0.14.0"
|
consolidate "^0.14.0"
|
||||||
hash-sum "^1.0.2"
|
hash-sum "^1.0.2"
|
||||||
js-beautify "^1.6.3"
|
js-beautify "^1.6.3"
|
||||||
loader-utils "^0.2.10"
|
loader-utils "^1.1.0"
|
||||||
lru-cache "^4.0.1"
|
lru-cache "^4.0.1"
|
||||||
postcss "^5.0.10"
|
postcss "^5.0.21"
|
||||||
|
postcss-load-config "^1.1.0"
|
||||||
postcss-selector-parser "^2.0.0"
|
postcss-selector-parser "^2.0.0"
|
||||||
|
resolve "^1.3.3"
|
||||||
source-map "^0.5.6"
|
source-map "^0.5.6"
|
||||||
vue-hot-reload-api "^2.0.1"
|
vue-hot-reload-api "^2.1.0"
|
||||||
vue-style-loader "^2.0.0"
|
vue-style-loader "^3.0.0"
|
||||||
vue-template-es2015-compiler "^1.2.2"
|
vue-template-es2015-compiler "^1.2.2"
|
||||||
|
|
||||||
vue-markdown-loader@^0.6.1:
|
vue-markdown-loader@^1.0.0:
|
||||||
version "0.6.2"
|
version "1.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/vue-markdown-loader/-/vue-markdown-loader-0.6.2.tgz#836792c7f9a54cdbb459080c75d0f4bbbddc4489"
|
resolved "https://registry.yarnpkg.com/vue-markdown-loader/-/vue-markdown-loader-1.0.0.tgz#255a2608e388991faa354618e4f4b642ebb7e0db"
|
||||||
dependencies:
|
dependencies:
|
||||||
cheerio "^0.20.0"
|
cheerio "^0.20.0"
|
||||||
highlight.js "^9.4.0"
|
highlight.js "^9.4.0"
|
||||||
loader-utils "^0.2.15"
|
loader-utils "^0.2.15"
|
||||||
markdown-it "^6.0.5"
|
markdown-it "^6.0.5"
|
||||||
rimraf "^2.5.2"
|
|
||||||
|
|
||||||
vue-router@^2.0.0:
|
vue-router@^2.5.0:
|
||||||
version "2.4.0"
|
version "2.5.3"
|
||||||
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.4.0.tgz#56a635e1434a1966ac095f2a485bebdcfc36cec5"
|
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.5.3.tgz#073783f564b6aece6c8a59c63e298dc2aabfb51b"
|
||||||
|
|
||||||
vue-style-loader@^1.0.0:
|
vue-style-loader@^3.0.0:
|
||||||
version "1.0.0"
|
version "3.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-1.0.0.tgz#abeb7bd0f46313083741244d3079d4f14449e049"
|
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.0.1.tgz#c8b639bb2f24baf9d78274dc17e4f264c1deda08"
|
||||||
dependencies:
|
|
||||||
loader-utils "^0.2.7"
|
|
||||||
|
|
||||||
vue-style-loader@^2.0.0:
|
|
||||||
version "2.0.5"
|
|
||||||
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-2.0.5.tgz#f0efac992febe3f12e493e334edb13cd235a3d22"
|
|
||||||
dependencies:
|
dependencies:
|
||||||
hash-sum "^1.0.2"
|
hash-sum "^1.0.2"
|
||||||
loader-utils "^1.0.2"
|
loader-utils "^1.0.2"
|
||||||
|
|
||||||
vue-template-compiler@2.1.8:
|
vue-template-compiler@2.3.4:
|
||||||
version "2.1.8"
|
version "2.3.4"
|
||||||
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.1.8.tgz#12dd1cc63793f59be580c694a61610cb9369d629"
|
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.3.4.tgz#5a88ac2c5e4d5d6218e6aa80e7e221fb7e67894c"
|
||||||
dependencies:
|
dependencies:
|
||||||
de-indent "^1.0.2"
|
de-indent "^1.0.2"
|
||||||
he "^1.1.0"
|
he "^1.1.0"
|
||||||
@ -6997,13 +7010,9 @@ vue-template-es2015-compiler@^1.2.2, vue-template-es2015-compiler@^1.4.2:
|
|||||||
version "1.5.2"
|
version "1.5.2"
|
||||||
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.5.2.tgz#a0a6c50c941d2a4abda963f2f42c337ac450ee95"
|
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.5.2.tgz#a0a6c50c941d2a4abda963f2f42c337ac450ee95"
|
||||||
|
|
||||||
vue@2.1.8:
|
vue@2.3.4:
|
||||||
version "2.1.8"
|
version "2.3.4"
|
||||||
resolved "https://registry.yarnpkg.com/vue/-/vue-2.1.8.tgz#ae30aa86024fccf5535292ce414e7b4c221a1756"
|
resolved "https://registry.yarnpkg.com/vue/-/vue-2.3.4.tgz#5ec3b87a191da8090bbef56b7cfabd4158038171"
|
||||||
|
|
||||||
vue@^2.2.1:
|
|
||||||
version "2.2.6"
|
|
||||||
resolved "https://registry.yarnpkg.com/vue/-/vue-2.2.6.tgz#451714b394dd6d4eae7b773c40c2034a59621aed"
|
|
||||||
|
|
||||||
watchpack@^1.3.1:
|
watchpack@^1.3.1:
|
||||||
version "1.3.1"
|
version "1.3.1"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user