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

Merge remote-tracking branch 'upstream/dev' into dev

Browse Source
This commit is contained in:
Raistlin916 2017-09-01 14:19:10 +08:00
commit e2d67b4e09
325 changed files with 7724 additions and 6921 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.babelrc
View File

@ -1,12 +1,9 @@
{
"presets": [
[
"es2015",
{ "modules": false }
]
],
"plugins": [
"transform-runtime",
"transform-vue-jsx"
]
}
"presets": [["env", { "modules": false, "loose": true }]],
"plugins": ["transform-vue-jsx", "transform-runtime", "transform-object-rest-spread"],
"env": {
"commonjs": {
"presets": [["env", { "modules": "commonjs", "loose": true }]]
}
}
}

0
CHANGELOG.md
View File

37
README.md
View File

@ -18,6 +18,31 @@ npm i -S vant
```
## Usage
### Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
```js
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "vant", "style": true }]
]
}
```
Then you can import components from vant, equivalent to import manually below.
```js
// import js and css modularly, parsed by babel-plugin-import
import { Button } from 'vant';
```
### Manually import
```jsx
import { Button } from 'vant';
import 'vant/lib/vant-css/button.css';
```
### Import all components
@ -30,18 +55,6 @@ import 'vant/lib/vant-css/index.css';
Vue.use(vant);
```
### On demand
```javascript
import Vue from 'vue';
import { Button, Cell } from 'vant';
import 'vant/lib/vant-css/button.css';
import 'vant/lib/vant-css/cell.css';
Vue.component(Button.name, Button);
Vue.component(Cell.name, Cell);
```
## Development
### Add a new component

40
README.zh-CN.md
View File

@ -18,28 +18,40 @@ npm i -S vant
## 二、使用
### 1. 导入所有组件
### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
```js
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "vant", "style": true }]
]
}
```
  接着你可以直接引入 vant 组件，等价于下方的按需引入组件
```js
  // 模块化地引入 js 和 css, 通过 babel-plugin-import 插件解析
  import { Button } from 'vant';
```
### 按需引入组件
```jsx
import { Button } from 'vant/lib/button';
import 'vant/lib/vant-css/button.css';
```
### 导入所有组件
```javascript
import Vue from 'vue';
import vant from 'vant';
// 你也可以使用自己的主题
import 'vant/lib/vant-css/index.css';
Vue.use(vant);
```
### 2. 按需导入组件
```javascript
import Vue from 'vue';
import { Button, Cell } from 'vant';
import 'vant/lib/vant-css/button.css';
import 'vant/lib/vant-css/cell.css';
Vue.component(Button.name, Button);
Vue.component(Cell.name, Cell);
```
## 三、开发

25
build/bin/build-all.js
View File

@ -1,25 +0,0 @@
'use strict';
const components = require('../../components.json');
const execSync = require('child_process').execSync;
const existsSync = require('fs').existsSync;
const path = require('path');
const componentPaths = [];
delete components.font;
Object.keys(components).forEach(key => {
const filePath = path.join(__dirname, `../../packages/${key}/webpack.conf.js`);
if (existsSync(filePath)) {
componentPaths.push(`packages/${key}/webpack.conf.js`);
}
});
const paths = componentPaths.join(',');
const cli = `node_modules/.bin/webpack build -c ${paths} -p`;
execSync(cli, {
stdio: 'inherit'
});

52
build/bin/build-components.js Normal file
View File

@ -0,0 +1,52 @@
/**
* 编译 components 到 lib 目录
*/
const fs = require('fs-extra');
const path = require('path');
const compiler = require('vue-sfc-compiler');
const libDir = path.resolve(__dirname, '../../lib');
const srcDir = path.resolve(__dirname, '../../packages');
require('shelljs/global');
// 清空 lib 目录
fs.emptyDirSync(libDir);
// 复制 packages
fs.copySync(srcDir, libDir);
// 编译所有 .vue 文件到 .js
compileVueFiles(libDir);
// babel 编译
exec('cross-env BABEL_ENV=commonjs babel lib --out-dir lib');
function compileVueFiles(dir) {
const files = fs.readdirSync(dir);
files.forEach(file => {
const absolutePath = path.resolve(dir, file);
// 移除 vant-css
if (file.indexOf('vant-css') !== -1) {
fs.removeSync(absolutePath);
}
// 遍历文件夹
else if (isDir(absolutePath)) {
return compileVueFiles(absolutePath);
}
// 编译 .vue 文件
else if (/\.vue$/.test(file)) {
const source = fs.readFileSync(absolutePath, 'utf-8');
fs.removeSync(absolutePath);
const outputVuePath = absolutePath + '.js';
const outputJsPath = absolutePath.replace('.vue', '.js');
const output = fs.existsSync(outputJsPath) ? outputVuePath : outputJsPath;
fs.outputFileSync(output, compiler(source));
}
});
}
function isDir(dir) {
return fs.lstatSync(dir).isDirectory();
}

13
build/bin/build-entry.js
View File

@ -1,11 +1,11 @@
var Components = require('../../components.json');
var Components = require('./get-components')();
var fs = require('fs');
var render = require('json-templater/string');
var uppercamelcase = require('uppercamelcase');
var path = require('path');
var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
var OUTPUT_PATH = path.join(__dirname, '../../packages/index.js');
var IMPORT_TEMPLATE = 'import {{name}} from \'./{{package}}\';';
var ISNTALL_COMPONENT_TEMPLATE = ' {{name}}';
var MAIN_TEMPLATE = `{{include}}
@ -34,20 +34,17 @@ export {
};
export default {
install,
version,
{{list}}
version
};
`;
delete Components.font;
var ComponentNames = Object.keys(Components);
var includeComponentTemplate = [];
var installTemplate = [];
var listTemplate = [];
ComponentNames.forEach(name => {
Components.forEach(name => {
var componentName = uppercamelcase(name);
includeComponentTemplate.push(render(IMPORT_TEMPLATE, {

48
build/bin/build-lib.js
View File

@ -3,56 +3,46 @@
* Steps:
* 1. 清理目录
* 2. 构建 JS 入口文件
* 3. 打包 JS 文件：vant.js && vant.min.js
* 4. 构建 CSS 文件：vant-css
* 5. 构建每个组件对应的 [component].js
* 3. 代码格式校验
* 4. 构建每个组件对应的 [component].js
* 5. 构建 vant-css
* 6. 生成每个组件目录下的 style 入口
* 7. 编译 utils
* 7. 打包 JS 文件：vant.js && vant.min.js
*/
const fs = require('fs');
const path = require('path');
const components = require('../../components.json');
const components = require('./get-components')();
const chalk = require('chalk');
require('shelljs/global');
// clean dir
log('Starting', 'clean');
exec('npm run clean --silent');
log('Finished', 'clean');
// build entry
log('Starting', 'build:entry');
exec('npm run build:file --silent');
log('Finished', 'build:entry');
// lint
// 1. lint
log('Starting', 'lint');
exec('npm run lint --silent');
log('Finished', 'lint');
// build vant.js
log('Starting', 'build:vant');
exec('npm run build:vant --silent');
log('Finished', 'build:vant');
// 2. build entry
log('Starting', 'build:entry');
exec('npm run build:file --silent');
log('Finished', 'build:entry');
// build [component].js
// 3. build [component].js
log('Starting', 'build:component');
exec('npm run build:components --silent');
log('Finished', 'build:component');
// build vant-css
// 4. build vant-css
log('Starting', 'build:vant-css');
exec('npm run build:vant-css --silent');
log('Finished', 'build:vant-css');
// build style entrys
// 5. build style entrys
log('Starting', 'build:style-entries');
Object.keys(components).forEach((componentName) => {
components.forEach((componentName) => {
const dir = path.join(__dirname, '../../lib/', componentName, '/style');
const file = path.join(dir, 'index.js');
const cssPath = path.join(__dirname, '../../lib/vant-css/', `${componentName}.css`);
const content = [`require('../../vant-css/base.css');`];
const content = [];
if (fs.existsSync(cssPath)) {
content.push(`require('../../vant-css/${componentName}.css');`);
}
@ -61,10 +51,10 @@ Object.keys(components).forEach((componentName) => {
});
log('Finished', 'build:style-entries');
// build utils
log('Starting', 'build:utils');
exec('npm run build:utils --silent');
log('Finished', 'build:utils');
// 6. build vant.js
log('Starting', 'build:vant');
exec('npm run build:vant --silent');
log('Finished', 'build:vant');
// helpers
function log(status, action, breakLine) {

8
build/bin/get-components.js Normal file
View File

@ -0,0 +1,8 @@
const fs = require('fs');
const path = require('path');
module.exports = function() {
const dirs = fs.readdirSync(path.resolve(__dirname, '../../packages'));
const excludes = ['index.js', 'vant-css', 'mixins', 'utils'];
return dirs.filter(dirName => excludes.indexOf(dirName) === -1)
}

19
build/bin/init.js
View File

@ -28,21 +28,4 @@ gulp.task('copy', function(callback) {
});
});
// 添加到 components.json
gulp.task('addComponents', function(callback) {
const componentsFile = require('../../components.json');
if (componentsFile[name]) {
console.error(`${name} 已存在.`);
process.exit(1);
}
componentsFile[name] = `./packages/${name}/index.js`;
fileSave(path.join(__dirname, '../../components.json'))
.write(JSON.stringify(componentsFile, null, ' '), 'utf8')
.end('\n');
gutil.log('-------> components.json文件更新成功');
gutil.log(gutil.colors.yellow('-------> 请无视下面的make报错'));
});
runSequence('copy', 'addComponents');
runSequence('copy');

16
build/genExamples.js
View File

@ -1,16 +0,0 @@
const path = require('path');
const docConfig = require('../docs/src/doc.config');
const { extractExample } = require('zan-doc/src/helper');
function extract(watch = false) {
extractExample({
src: path.resolve(__dirname, '../docs/examples-docs'),
dist: path.resolve(__dirname, '../docs/examples-dist'),
nav: docConfig['zh-CN'].nav,
watch
});
}
module.exports = function watch(isProduction) {
extract(!isProduction);
};

2
build/webpack.build.js
View File

@ -3,7 +3,7 @@ const config = require('./webpack.config.dev.js');
const isMinify = process.argv.indexOf('-p') !== -1;
config.entry = {
'vant': './src/index.js'
'vant': './packages/index.js'
};
config.output = {

31
build/webpack.components.js
View File

@ -1,31 +0,0 @@
const path = require('path');
const Components = require('../components.json');
const config = require('./webpack.build.js');
const webpack = require('webpack');
delete config.devtool;
const entry = {};
Object.keys(Components).forEach(key => {
entry[key + '/index'] = Components[key];
});
config.entry = entry;
config.externals = {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
};
config.output = {
path: path.join(__dirname, '../lib'),
filename: '[name].js',
libraryExport: "default",
libraryTarget: 'umd'
};
module.exports = config;

28
build/webpack.config.dev.js
View File

@ -6,15 +6,23 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
const docConfig = require('../docs/src/doc.config');
const { extractExample } = require('zan-doc/src/helper');
const styleLoaders = [
{ loader: 'css-loader' },
{ loader: 'postcss-loader', options: { sourceMap: true } }
];
require('./genExamples')(isProduction);
// extract [components].vue from [components].md
extractExample({
src: path.resolve(__dirname, '../docs/examples-docs'),
dist: path.resolve(__dirname, '../docs/examples-dist'),
nav: docConfig['zh-CN'].nav,
watch: !isProduction
});
module.exports = {
entry: {
vendor: ['vue', 'vue-router', 'zan-doc'],
'vant-docs': './docs/src/index.js',
'vant-examples': './docs/src/examples.js'
},
@ -22,9 +30,11 @@ module.exports = {
path: path.join(__dirname, '../docs/dist'),
publicPath: '/',
filename: '[name].js',
umdNamedDefine: true
umdNamedDefine: true,
chunkFilename: 'async.[name].js'
},
devServer: {
host: '0.0.0.0',
historyApiFallback: {
rewrites: [
{ from: /^\/zanui\/vue\/examples/, to: '/examples.html' },
@ -37,8 +47,7 @@ module.exports = {
modules: [path.join(__dirname, '../node_modules'), 'node_modules'],
extensions: ['.js', '.vue', '.css'],
alias: {
vue$: 'vue/dist/vue.esm.js',
src: path.join(__dirname, '../src'),
vue: 'vue/dist/vue.runtime.esm.js',
packages: path.join(__dirname, '../packages'),
lib: path.join(__dirname, '../lib'),
components: path.join(__dirname, '../docs/src/components')
@ -52,6 +61,7 @@ module.exports = {
{
loader: 'vue-loader',
options: {
preserveWhitespace: false,
loaders: {
postcss: ExtractTextPlugin.extract({
use: styleLoaders,
@ -68,7 +78,7 @@ module.exports = {
},
{
test: /\.js$/,
exclude: /node_modules|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
exclude: /node_modules|vue-router\/|vue-loader\//,
loader: 'babel-loader'
},
{
@ -105,7 +115,7 @@ module.exports = {
},
render: function(tokens, idx) {
return tokens[idx].nesting === 1
return tokens[idx].nesting === 1
? `<demo-block class="demo-box"><div class="highlight" slot="highlight"å>`
:`</div></demo-block>\n`;
}
@ -131,6 +141,10 @@ module.exports = {
filename: 'examples.html',
inject: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: 2
}),
new webpack.HotModuleReplacementPlugin(),
new OptimizeCssAssetsPlugin(),
new ExtractTextPlugin({

5
build/webpack.config.prod.js
View File

@ -6,9 +6,10 @@ var devConfig = require('./webpack.config.dev.js');
module.exports = merge(devConfig, {
output: {
path: path.join(__dirname, '../docs/dist'),
publicPath: 'https://b.yzcdn.cn/zanui/vue',
publicPath: 'https://b.yzcdn.cn/zanui/vue/',
filename: '[name].[hash:8].js',
umdNamedDefine: true
umdNamedDefine: true,
chunkFilename: 'async.[name].[chunkhash:8].js'
},
devtool: false,
plugins: [

40
components.json
View File

@ -1,40 +0,0 @@
{
"button": "./packages/button/index.js",
"switch": "./packages/switch/index.js",
"field": "./packages/field/index.js",
"radio": "./packages/radio/index.js",
"cell": "./packages/cell/index.js",
"icon": "./packages/icon/index.js",
"cell-group": "./packages/cell-group/index.js",
"cell-swipe": "./packages/cell-swipe/index.js",
"popup": "./packages/popup/index.js",
"dialog": "./packages/dialog/index.js",
"picker": "./packages/picker/index.js",
"radio-group": "./packages/radio-group/index.js",
"waterfall": "./packages/waterfall/index.js",
"loading": "./packages/loading/index.js",
"panel": "./packages/panel/index.js",
"card": "./packages/card/index.js",
"steps": "./packages/steps/index.js",
"tag": "./packages/tag/index.js",
"checkbox": "./packages/checkbox/index.js",
"checkbox-group": "./packages/checkbox-group/index.js",
"badge-group": "./packages/badge-group/index.js",
"badge": "./packages/badge/index.js",
"search": "./packages/search/index.js",
"step": "./packages/step/index.js",
"tabs": "./packages/tabs/index.js",
"tab": "./packages/tab/index.js",
"lazyload": "./packages/lazyload/index.js",
"image-preview": "./packages/image-preview/index.js",
"col": "./packages/col/index.js",
"row": "./packages/row/index.js",
"actionsheet": "./packages/actionsheet/index.js",
"quantity": "./packages/quantity/index.js",
"progress": "./packages/progress/index.js",
"toast": "./packages/toast/index.js",
"uploader": "./packages/uploader/index.js",
"swipe": "./packages/swipe/index.js",
"swipe-item": "./packages/swipe-item/index.js",
"datetime-picker": "./packages/datetime-picker/index.js"
}

206
docs/assets/docs.css
View File

@ -1,206 +0,0 @@
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
body {
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
background-color: #f8f8f8;
}
a {
color: #4078c0;
text-decoration: none;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
ul, ol {
list-style: none;
}
code.hljs {
line-height: 1.5;
font-family: Menlo, Monaco, Consolas, Courier, monospace;
font-size: 12px;
padding: 20px;
background-color: #f8f8f8;
border: solid 1px #E5E5E5;
margin-bottom: 25px;
border-radius: 4px;
-webkit-font-smoothing: auto;
}
.clearfix {
&::before {
display: table;
content: "";
}
&::after {
display: table;
content: "";
clear: both;
}
}
.main-content {
margin: 130px 20px 40px;
padding-top: 20px;
}
.page-container {
background-color: #fff;
position: relative;
display: flex;
width: 100%;
overflow: hidden;
}
.page-content {
box-sizing: border-box;
flex: 1;
section {
padding: 0 40px;
> h1,
> h2,
> h3,
> h4,
> h5,
> h6 {
color: #333;
line-height: 1.5;
margin: 20px 0;
font-weight: normal;
.header-anchor {
float: left;
margin-left: -20px;
opacity: 0;
cursor: pointer;
&:hover {
opacity: .4;
}
}
}
> h1 {
font-size: 40px;
}
> h2 {
font-size: 36px;
}
> h3 {
font-size: 30px;
}
> h4 {
font-size: 24px;
}
> h5 {
font-size: 14px
}
> h6 {
font-size: 14px;
color: #666;
}
> p {
font-size: 14px;
line-height: 20px;
color: #666;
margin: 14px 0;
}
> ul li,
> ol li {
color: #666;
font-size: 14px;
line-height: 20px;
margin: 10px 0 10px 20px;
padding-left: 20px;
position: relative;
&::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
box-sizing: border-box;
border: 2px solid #999;
border-radius: 50%;
top: 6px;
left: 0;
}
li {
margin-left: 0;
}
}
}
p > code,
.table code,
li > code {
background-color: #F2F2F2;
display: inline-block;
border: 1px solid #E5E5E5;
padding: 2px 4px;
color: #333;
margin: 0 3px;
}
}
.table {
border-collapse: collapse;
width: 100%;
background-color: #fff;
color: #333;
font-size: 14px;
margin-bottom: 45px;
th {
text-align: left;
border: 1px solid #E5E5E5;
background-color: #F2F2F2;
padding: 10px;
&:first-child {
padding-left: 10px;
}
}
td {
border: 1px solid #E5E5E5;
padding: 10px;
}
}

56
docs/examples-docs/actionsheet.md
View File

@ -15,11 +15,7 @@
</style>
<script>
import MobileComputed from 'components/mobile-computed';
export default {
mixins: [MobileComputed],
data() {
return {
show1: false,
@ -57,37 +53,13 @@ export default {
}
</script>
## ActionSheet 行动按钮
## Actionsheet 行动按钮
### 使用指南
``` javascript
import { Actionsheet } from 'vant';
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`ActionSheet`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`ActionSheet`组件了：
```js
import Vue from 'vue';
import { ActionSheet } from 'vant';
import 'vant/lib/vant-css/actionSheet.css';
Vue.component(ActionSheet.name, ActionSheet);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`ActionSheet`组件，这样只能在你注册的组件中使用`ActionSheet`：
```js
import { ActionSheet } from 'vant';
import 'vant/lib/vant-css/actionSheet.css';
export default {
components: {
'van-actionSheet': ActionSheet
}
};
Vue.component(Actionsheet.name, Actionsheet);
```
### 代码演示
@ -141,11 +113,11 @@ export default {
```
:::
#### 带取消按钮的ActionSheet
#### 带取消按钮的 Actionsheet
如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`ActionSheet`关闭。
如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。
:::demo 带取消按钮的ActionSheet
:::demo 带取消按钮的 Actionsheet
```html
<van-button @click="show2 = true">弹出带取消按钮的actionsheet</van-button>
<van-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
@ -184,11 +156,11 @@ export default {
```
:::
#### 带标题的ActionSheet
#### 带标题的 Actionsheet
如果传入了`title`属性，且不为空，则另外一种样式的`ActionSheet`，里面内容需要自定义。
如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。
:::demo 带标题的ActionSheet
:::demo 带标题的 Actionsheet
```html
<van-button @click="show3 = true">弹出带标题的actionsheet</van-button>
<van-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
@ -197,11 +169,6 @@ export default {
```
:::
点击以下按钮查看手机端效果：
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
@ -210,10 +177,11 @@ export default {
| title | 标题 | `String` | | |
| cancelText | 取消按钮文案 | `String` | | |
| overlay | 是否显示遮罩 | `Boolean` | | |
| closeOnClickOverlay | 点击遮罩是否关闭`ActionSheet` | `Boolean` | | |
| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | | |
### actions
`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
| key | 说明 |

129
docs/examples-docs/badge.md
View File

@ -1,112 +1,89 @@
<style>
.demo-badge {
.badge-group-wrapper {
padding: 30px 20px;
.van-badge-group {
width: auto;
margin: 0 15px;
padding: 20px 0;
background-color: #fff;
&::after {
display: none;
}
}
.van-badge-group {
.van-badge {
width: 85px;
margin: 0 auto;
}
}
</style>
<script>
export default {
data() {
return {
activeKey: '2'
};
},
methods: {
onItemClick(e, data) {
this.activeKey = data.mark;
}
export default {
data() {
return {
activeKey: 0
};
},
methods: {
onClick(key) {
this.activeKey = key;
}
};
}
};
</script>
## Badge 徽章
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Badge`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Badge`组件了：
```js
import Vue from 'vue';
import { Badge, BadgeGroup } from 'vant';
import 'vant/lib/vant-css/badge.css';
``` javascript
import { Badge } from 'vant';
Vue.component(Badge.name, Badge);
Vue.component(BadgeGroup.name, BadgeGroup);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Badge`组件，这样只能在你注册的组件中使用`Badge`：
```js
import { Badge, BadgeGroup } from 'vant';
import 'vant/lib/vant-css/badge.css';
export default {
components: {
'van-badge': Badge,
'van-badge-group': BadgeGroup
}
};
```
### 代码演示
#### 基础用法
默认情况下激活第一个`badge`。
通过在`van-badge-group`上设置`active-key`属性来控制选中的`badge`
:::demo 基础用法
```html
<div class="badge-group-wrapper">
<van-badge-group>
<van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
<van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
<van-badge title="火炽寿司" @click="onItemClick"></van-badge>
<van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
</van-badge-group>
</div>
<van-badge-group :active-key="activeKey">
<van-badge title="热销榜" @click="onClick"></van-badge>
<van-badge title="花式寿司" @click="onClick" info="8"></van-badge>
<van-badge title="火炽寿司" @click="onClick" info="99"></van-badge>
<van-badge title="手握寿司" @click="onClick" info="199"></van-badge>
</van-badge-group>
```
``` javascript
export default {
data() {
return {
activeKey: 0
};
},
methods: {
onClick(key) {
this.activeKey = key;
}
}
};
```
:::
#### 选中某个badge
如果想默认选中某个`badge`，你可以在`van-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。
### BadgeGroup API
:::demo 选中某个badge
```html
<div class="badge-group-wrapper">
<van-badge-group :active-key="2">
<van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
<van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
<van-badge title="火炽寿司" @click="onItemClick"></van-badge>
<van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
</van-badge-group>
</div>
```
:::
### z-badge-group API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| active-key | 激活的`badge`的索引 | `string` | `0`但必须子badge里的mark是有`0`位索引 | |
| active-key | 选中`badge`的索引 | `String | Number` | `0` | - |
### z-badge API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
### Badge API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| title | badge的文案标题 | `string` | `''` | `required` |
| info | 当前badge的提示消息 | `string` | `''` | |
| url | 跳转链接 | `string` | 链接直接跳转或者hash | |
| title | 内容 | `String` | `''` | - |
| info | 提示消息 | `String` | `''` | - |
| url | 跳转链接 | `String` | - | - |

175
docs/examples-docs/button.md
View File

@ -1,19 +1,25 @@
<style>
.demo-button {
.van-button {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
user-select: none;
}
.van-row {
padding: 0 15px;
margin-bottom: 20px;
}
.van-col-24 {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
&--large,
&--bottom-action {
margin-bottom: 15px;
}
&--small,
&--normal {
margin-right: 10px;
}
}
.zan-doc-demo-block {
padding: 0 15px;
}
.zan-doc-demo-block__subtitle {
padding-left: 0;
}
}
</style>
@ -21,137 +27,75 @@
## Button 按钮
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Button`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Button`组件了：
```js
import Vue from 'vue';
``` javascript
import { Button } from 'vant';
import 'vant/lib/vant-css/button.css';
Vue.component(Button.name, Button);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Button`组件，这样只能在你注册的组件中使用`Button`：
```js
import { Button } from 'vant';
import 'vant/lib/vant-css/button.css';
export default {
components: {
'van-button': Button
}
};
```
### 代码演示
#### 按钮功能
#### 按钮类型
只接受`primary`, `default`, `danger`三种类型，默认`default`。
支持`default`、`primary`、`danger`三种类型，默认为`default`
:::demo 按钮功能
:::demo 按钮类型
```html
<van-row>
<van-col span="24">
<van-button block>default</van-button>
</van-col>
<van-col span="24">
<van-button type="primary" block>primary</van-button>
</van-col>
<van-col span="24">
<van-button type="danger" block>danger</van-button>
</van-col>
</van-row>
```
:::
#### 禁用状态
在组件上加上`disabled`属性即可，此时按钮不可点击。
:::demo 禁用状态
```html
<van-row>
<van-col span="24">
<van-button disabled block>diabled</van-button>
</van-col>
</van-row>
<van-button type="default">Default</van-button>
<van-button type="primary">Primary</van-button>
<van-button type="danger">Danger</van-button>
```
:::
#### 按钮尺寸
只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。`large`按钮默认100%宽度。
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
:::demo 按钮尺寸
```html
<van-row>
<van-col span="24">
<van-button size="large">large</van-button>
</van-col>
<van-col span="24">
<van-button size="normal">normal</van-button>
</van-col>
<van-col span="24">
<van-button size="small">small</van-button>
</van-col>
<van-col span="24">
<van-button size="mini">mini</van-button>
</van-col>
</van-row>
<van-button size="large">Large</van-button>
<van-button size="normal">Normal</van-button>
<van-button size="small">Small</van-button>
<van-button size="mini">Mini</van-button>
```
:::
#### 禁用状态
通过`disabled`属性来禁用按钮，此时按钮不可点击
:::demo 禁用状态
```html
<van-button disabled>Diabled</van-button>
```
:::
#### 加载状态
:::demo 加载状态
```html
<van-button loading />
```
:::
#### 自定义按钮标签
按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。
按钮标签默认为`button`，可以使用`tag`属性来修改按钮标签
:::demo 自定义按钮标签
```html
<van-row>
<van-col span="24">
<van-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</van-button>
</van-col>
</van-row>
```
:::
#### loading按钮
`loading`状态的按钮。
:::demo loading按钮
```html
<van-row>
<van-col span="24">
<van-button type="primary" loading block>loading</van-button>
</van-col>
<van-col span="24">
<van-button loading block></van-button>
</van-col>
</van-row>
<van-button tag="a" href="https://www.youzan.com" target="_blank">
a 标签按钮
</van-button>
```
:::
#### 页面底部操作按钮
一般用于`fixed`在底部的区域或是`popup`弹层的底部，一般只使用`primary`和`normal`两种状态。
:::demo 页面底部操作按钮
```html
<van-row>
<van-col span="24">
<van-button type="primary" bottom-action>立即购买</van-button>
</van-col>
</van-row>
<van-button type="primary" bottom-action>立即购买</van-button>
<van-row>
<van-col span="12">
<van-button bottom-action>加入购物车</van-button>
@ -167,10 +111,11 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| type | 按钮类型 | `string` | `default` | `primary`, `danger` |
| size | 按钮尺寸 | `string` | `normal` | `large`, `small`, `mini` |
| tag | 按钮标签 | `string` | `button` | 任何有意义的`html`标签, 如`a`, `span`等 |
| diabled | 按钮是否禁用 | `boolean` | `false` | |
| block | 按钮是否显示为块级元素 | `boolean` | `false` | |
| bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean` | `false` | |
| type | 按钮类型 | `String` | `default` | `primary` `danger` |
| size | 按钮尺寸 | `String` | `normal` | `large` `small` `mini` |
| tag | 按钮标签 | `String` | `button` | 任意`HTML`标签 |
| nativeType | 按钮类型（原生） | `String` | `''` | - |
| diabled | 是否禁用 | `Boolean` | `false` | - |
| loading | 是否显示为加载状态 | `Boolean` | `false` | - |
| block | 是否为块级元素 | `Boolean` | `false` | - |
| bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | - |

64
docs/examples-docs/card.md
View File

@ -1,49 +1,29 @@
<script>
export default {
data() {
return {
imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
}
}
}
</script>
## Card 图文组件
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Card`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Card`组件了：
```js
import Vue from 'vue';
``` javascript
import { Card } from 'vant';
import 'vant/lib/vant-css/card.css';
Vue.component(Card.name, Card);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Card`组件，这样只能在你注册的组件中使用`Card`：
```js
import { Card } from 'vant';
import 'vant/lib/vant-css/card.css';
export default {
components: {
'van-card': Card
}
};
```
### 代码演示
#### 基础用法
当没有底部按钮时，右侧内容会居中显示。
:::demo 基础用法
```html
<van-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="描述"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
</van-card>
<van-card title="商品名称" desc="商品描述" :thumb="imageURL" />
```
:::
@ -53,10 +33,9 @@ export default {
:::demo 高级用法
```html
<van-card
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<van-card :thumb="imageURL">
<div class="van-card__row" slot="title">
<h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<h4 class="van-card__title">商品名称</h4>
<span class="van-card__price">¥ 2.00</span>
</div>
<div class="van-card__row" slot="desc">
@ -74,11 +53,10 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| thumb | 左侧图片 | `string` | | |
| title | 标题 | `string` | | |
| desc | 描述 | `string` | | |
| centered | 内容是否垂直居中 | `string` | `false` | |
| thumb | 左侧图片 | `String` | - | - |
| title | 标题 | `String` | - | - |
| desc | 描述 | `String` | - | - |
| centered | 内容是否垂直居中 | `String` | `false` | - |
### Slot
@ -86,6 +64,6 @@ export default {
|-----------|-----------|
| title | 自定义标题 |
| desc | 自定义描述 |
| tags | 自定义tags |
| thumb | 自定义thumb |
| footer | 自定义footer |
| tags | 自定义 tags |
| thumb | 自定义 thumb |
| footer | 自定义 footer |

59
docs/examples-docs/cell-swipe.md
View File

@ -1,6 +1,6 @@
<style>
.swipe-delete-btn {
background-color: #FF4444;
.van-cell-swipe__left,
.van-cell-swipe__right {
color: #FFFFFF;
font-size: 16px;
width: 65px;
@ -9,49 +9,22 @@
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;
.van-cell-swipe__left {
background-color: #FF4444;
}
.van-cell-swipe__right {
background-color: #84c483;
}
</style>
## CellSwipe 滑动单元格
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Cell Swipe`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Cell Swipe`组件了：
```js
import Vue from 'vue';
``` javascript
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
}
};
```
### 代码演示
#### 基础用法
@ -59,32 +32,26 @@ export default {
:::demo 基础用法
```html
<van-cell-swipe :right-width="65" :left-width="65">
<span slot="left">选择</span>
<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>
<span slot="right">删除</span>
</van-cell-swipe>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| right-width | 右侧滑动按钮宽度 | `number` | 0 | |
| left-width | 左侧滑动按钮宽度 | `number` | 0 | |
| left-width | 左侧滑动区域宽度 | `Number` | `0` | - |
| right-width | 右侧滑动区域宽度 | `Number` | `0` | - |
### Slot
| name | 描述 |
|-----------|-----------|
| - | 自定义显示内容 |
| right | 右侧滑动内容 |
| left | 左侧滑动内容 |
| right | 右侧滑动内容 |

111
docs/examples-docs/cell.md
View File

@ -8,125 +8,95 @@ export default {
};
</script>
<style>
.demo-cell {
.van-cell-text {
margin-right: 5px;
}
.van-cell__right-icon {
font-size: 16px;
}
.van-cell-text,
.van-tag--danger {
vertical-align: middle;
}
}
</style>
## Cell 单元格
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Cell`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Cell`组件了：
```js
import Vue from 'vue';
``` javascript
import { Cell, CellGroup } from 'vant';
import 'vant/lib/vant-css/cell.css';
Vue.component(CellGroup.name, CellGroup);
Vue.component(Cell.name, Cell);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Cell`组件，这样只能在你注册的组件中使用`Cell`：
```js
import { Cell } from 'vant';
import 'vant/lib/vant-css/cell.css';
export default {
components: {
'van-cell-group': CellGroup,
'van-cell': Cell
}
};
Vue.component(CellGroup.name, CellGroup);
```
### 代码演示
#### 基础用法
你可以将`van-cell-group`组件看成一个容器即可。
将`van-cell-group`组件看成一个容器即可
:::demo 基础用法
```html
<van-cell-group>
<van-cell title="单元格1" value="单元格1内容"></van-cell>
<van-cell title="单元格2" value="单元格2内容"></van-cell>
<van-cell title="单元格2" value="单元格2内容" label="描述信息"></van-cell>
</van-cell-group>
```
:::
#### 只设置value
只设置`value`时会向左对齐。
只设置`value`时会向左对齐
:::demo 只设置value
```html
<van-cell-group>
<van-cell value="单元格1内容"></van-cell>
<van-cell value="单元格2内容"></van-cell>
<van-cell value="单元格内容"></van-cell>
</van-cell-group>
```
:::
#### 标题带描述信息
传入`label`属性，属性值为描述信息的值。
:::demo 标题带描述信息
#### 展示图标
通过`icon`属性在标题左侧展示图标
:::demo 展示图标
```html
<van-cell-group>
<van-cell title="单元格1" label="描述信息" value="查看专栏" is-link url="javascript:void(0)" @click="handleClick"></van-cell>
<van-cell title="单元格2" label="描述信息" value="查看专栏" is-link></van-cell>
<van-cell title="单元格" icon="location"></van-cell>
</van-cell-group>
```
:::
#### 带图标
#### 展示箭头
传入`isLink`属性则会在右侧显示箭头
传入`icon`属性。
:::demo 带图标
:::demo 展示箭头
```html
<van-cell-group>
<van-cell title="起码运动馆" icon="home"></van-cell>
<van-cell title="线下门店" icon="location"></van-cell>
</van-cell-group>
```
:::
#### 可点击的链接
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
:::demo 可点击的链接
```html
<van-cell-group>
<van-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></van-cell>
<van-cell title="线下门店" icon="location" url="http://youzan.com" is-link></van-cell>
<van-cell title="单元格1" is-link></van-cell>
<van-cell title="单元格2" is-link value="内容"></van-cell>
</van-cell-group>
```
:::
#### 高级用法
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`、`icon`、`title`和`right-icon`的`slot`。
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容
:::demo 高级用法
```html
<van-cell-group>
<van-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
<van-cell value="进入店铺" icon="home" is-link>
<template slot="title">
<span class="van-cell-text">起码运动馆</span>
<van-tag type="danger">官方</van-tag>
</template>
</van-cell>
<van-cell title="线下门店" icon="location" url="http://youzan.com" is-link></van-cell>
<van-cell title="线下门店" icon="location" is-link></van-cell>
<van-cell title="其他">
<template slot="right-icon">
<van-icon name="passed" class="van-cell__right-icon" style="font-size: 16px;"></van-icon>
<van-icon name="search" class="van-cell__right-icon"></van-icon>
</template>
</van-cell>
</van-cell-group>
@ -137,12 +107,13 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| icon | 左侧图标 | `string` | | |
| title | 左侧标题 | `string` | | |
| value | 右侧内容 | `string` | | |
| isLink | 是否为链接，链接会在右侧出现箭头 | `boolean` | | |
| url | 跳转链接 | `string` | | |
| label | 描述信息，显示在标题下方 | `string` | | |
| icon | 左侧图标 | `String` | - | - |
| title | 左侧标题 | `String` | - | - |
| value | 右侧内容 | `String` | - | - |
| label | 标题下方的描述信息 | `String` | - | - |
| url | 跳转链接 | `String` | - | - |
| isLink | 是否展示右侧箭头 | `Boolean` | `false` | - |
| required | 是否显示表单必填符号 | `Boolean` | `false` | - |
### Slot

96
docs/examples-docs/changelog.md
View File

@ -1,5 +1,101 @@
## 更新日志
## [v0.8.6](https://github.com/youzan/vant/tree/v0.8.6) (2017-08-24)
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.5...v0.8.6)
**非兼容更新和新特性:**
- dalete merge && class operating methods [\#88](https://github.com/youzan/vant/pull/88) ([chenjiahan](https://github.com/chenjiahan))
- directory adjust: delete entry index.js [\#87](https://github.com/youzan/vant/pull/87) ([chenjiahan](https://github.com/chenjiahan))
- Button: reduce unnecessary styles [\#86](https://github.com/youzan/vant/pull/86) ([chenjiahan](https://github.com/chenjiahan))
- Layout: optimize doc [\#85](https://github.com/youzan/vant/pull/85) ([chenjiahan](https://github.com/chenjiahan))
**修复:**
- Fix datetime-picker init value [\#89](https://github.com/youzan/vant/pull/89) ([w91](https://github.com/w91))
**处理的 Issue:**
- When 'showIndicators' set to 'false' The second image does not show [\#80](https://github.com/youzan/vant/issues/80)
## [v0.8.5](https://github.com/youzan/vant/tree/v0.8.5) (2017-08-21)
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.4...v0.8.5)
**非兼容更新和新特性:**
- Doc: add usage guide && top progress [\#83](https://github.com/youzan/vant/pull/83) ([chenjiahan](https://github.com/chenjiahan))
**修复:**
- Popup: not preventScroll by default [\#84](https://github.com/youzan/vant/pull/84) ([chenjiahan](https://github.com/chenjiahan))
- fix: swipe sometimes will change to drag image [\#81](https://github.com/youzan/vant/pull/81) ([pangxie1991](https://github.com/pangxie1991))
**处理的 Issue:**
- Href link does not work [\#82](https://github.com/youzan/vant/issues/82)
- Swipe image not displayed [\#79](https://github.com/youzan/vant/issues/79)
## [v0.8.4](https://github.com/youzan/vant/tree/v0.8.4) (2017-08-18)
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.3...v0.8.4)
**修复:**
- fix: field 计算autosize，需要nextTick [\#78](https://github.com/youzan/vant/pull/78) ([pangxie1991](https://github.com/pangxie1991))
## [v0.8.3](https://github.com/youzan/vant/tree/v0.8.3) (2017-08-18)
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.1...v0.8.3)
**修复:**
- fix: dialog wrong z-index [\#77](https://github.com/youzan/vant/pull/77) ([chenjiahan](https://github.com/chenjiahan))
## [v0.8.1](https://github.com/youzan/vant/tree/v0.8.1) (2017-08-18)
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.0...v0.8.1)
**非兼容更新和新特性:**
- field 增加icon slot支持 [\#76](https://github.com/youzan/vant/pull/76) ([pangxie1991](https://github.com/pangxie1991))
## [v0.8.0](https://github.com/youzan/vant/tree/v0.8.0) (2017-08-17)
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.10...v0.8.0)
**非兼容更新和新特性:**
- Optimize component building, reduce dist file size [\#74](https://github.com/youzan/vant/pull/74) ([chenjiahan](https://github.com/chenjiahan))
## [v0.7.10](https://github.com/youzan/vant/tree/v0.7.10) (2017-08-16)
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.8...v0.7.10)
**修复:**
- fix: 修复popup和dialog同时出现时，几率出现dialog被挡住的情况 [\#75](https://github.com/youzan/vant/pull/75) ([pangxie1991](https://github.com/pangxie1991))
- 修复：popup滚动穿透 [\#73](https://github.com/youzan/vant/pull/73) ([cookfront](https://github.com/cookfront))
## [v0.7.8](https://github.com/youzan/vant/tree/v0.7.8) (2017-08-10)
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.7...v0.7.8)
**非兼容更新和新特性:**
- 补充 babel-plugin-import 文档 [\#71](https://github.com/youzan/vant/pull/71) ([chenjiahan](https://github.com/chenjiahan))
**修复:**
- not require reset.css by default [\#72](https://github.com/youzan/vant/pull/72) ([chenjiahan](https://github.com/chenjiahan))
## [v0.7.7](https://github.com/youzan/vant/tree/v0.7.7) (2017-08-09)
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.6...v0.7.7)
**修复:**
- Fixed: one page Swipe components error [\#70](https://github.com/youzan/vant/pull/70) ([Raistlin916](https://github.com/Raistlin916))
## [v0.7.6](https://github.com/youzan/vant/tree/v0.7.6) (2017-08-08)
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.5...v0.7.6)
**非兼容更新和新特性:**
- 新增几个icon [\#69](https://github.com/youzan/vant/pull/69) ([cookfront](https://github.com/cookfront))
## [v0.7.5](https://github.com/youzan/vant/tree/v0.7.5) (2017-08-08)
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.3...v0.7.5)

30
docs/examples-docs/checkbox.md
View File

@ -36,36 +36,10 @@ export default {
## Checkbox 复选框
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Checkbox`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Checkbox`组件了：
```js
import Vue from 'vue';
import { Checkbox, CheckboxGroup } from 'vant';
import 'vant/lib/vant-css/checkbox.css';
``` javascript
import { Checkbox } from 'vant';
Vue.component(Checkbox.name, Checkbox);
Vue.component(CheckboxGroup.name, CheckboxGroup);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Checkbox`组件，这样只能在你注册的组件中使用`Checkbox`：
```js
import { Checkbox, CheckboxGroup } from 'vant';
import 'vant/lib/vant-css/checkbox.css';
export default {
components: {
'van-checkbox': Checkbox,
'van-checkbox-group': CheckboxGroup
}
};
```
### 代码演示

63
docs/examples-docs/datetime-picker.md
View File

@ -5,15 +5,16 @@ export default {
minHour: 10,
maxHour: 20,
minDate: new Date(),
currentDate1: null,
maxDate: new Date(2019, 10, 1),
currentDate1: new Date(2018, 0, 1),
currentDate2: null,
currentDate3: null
};
},
methods: {
handlePickerChange(picker, values) {
console.log(values);
handlePickerChange(picker) {
console.log(picker);
},
handlePickerCancel() {
console.log('picker cancel');
@ -25,38 +26,15 @@ export default {
};
</script>
## Datetime Picker 时间选择
## DatetimePicker 时间选择
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Radio`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Radio`组件了：
```js
import Vue from 'vue';
``` javascript
import { DatetimePicker } from 'vant';
Vue.component(DatetimePicker.name, DatetimePicker);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`DatetimePicker`组件，这样只能在你注册的组件中使用`DatetimePicker`：
```js
import { DatetimePicker } from 'vant';
export default {
components: {
'van-datetime-picker': DatetimePicker
}
};
```
### 代码演示
#### 基础用法
@ -66,10 +44,10 @@ export default {
<van-datetime-picker
v-model="currentDate1"
type="datetime"
format="yyyy.mm.dd hh时 mm分"
:min-hour="minHour"
:max-hour="maxHour"
:min-date="minDate"
:max-date="maxDate"
@change="handlePickerChange">
</van-datetime-picker>
@ -80,13 +58,14 @@ export default {
minHour: 10,
maxHour: 20,
minDate: new Date(),
currentDate: null
maxDate: new Date(2019, 10, 1),
currentDate: new Date(2018, 0, 1)
};
},
methods: {
handlePickerChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
handlePickerChange(picker) {
console.log(picker);
}
}
};
@ -101,7 +80,6 @@ export default {
<van-datetime-picker
v-model="currentDate2"
type="date"
format="yyyy.mm.dd hh时 mm分"
:min-hour="minHour"
:max-hour="maxHour"
:min-date="minDate"
@ -117,7 +95,6 @@ export default {
<van-datetime-picker
v-model="currentDate3"
type="time"
format="yyyy.mm.dd hh时 mm分"
:min-hour="minHour"
:max-hour="maxHour"
:min-date="minDate"
@ -132,19 +109,11 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
| itemHeight | 选中元素区高度 | Number | 44 | |
| columns | 对象数组，配置每一列显示的数据 | Array | | |
| showToolbar | 是否在组件顶部显示一个toolbar | Boolean | true | |
### columns
`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
| key | 说明 |
|-----------|-----------|
| values | 列中对应的备选值 |
| defaultIndex | 初始选中值的索引，默认为0 |
| className | 为对应列添加特殊的`class` |
| type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' |
| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | |
| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | |
| minHour | 可选的最小小时 | Number | 0 | |
| maxHour | 可选的最大小时 | Number | 23 | |
### Event

169
docs/examples-docs/deep-select.md Normal file
View File

@ -0,0 +1,169 @@
<script>
export default {
data() {
return {
items: [{
text: '所有城市',
children: [{
text: '杭州',
id: 1001
}, {
text: '温州',
id: 1002
}, {
text: '海南',
id: 1100
}, {
text: '宁波',
id: 1003
}, {
text: '义乌',
id: 1004
}, {
text: '无锡',
id: 1011
}, {
text: '常州',
id: 1012
}, {
text: '大连',
id: 1031
}, {
text: '诸暨',
id: 1005
}]
}, {
text: '浙江',
children: [{
text: '杭州',
id: 1001
}, {
text: '温州',
id: 1002
}, {
text: '宁波',
id: 1003
}, {
text: '义乌',
id: 1004
}]
}, {
text: '江苏',
children: [{
text: '无锡',
id: 1011
}, {
text: '常州',
id: 1012
}]
}],
mainActiveIndex: 0,
activeId: 1001
};
},
methods: {
onNavClick(index) {
this.mainActiveIndex = index;
},
onItemClick(data) {
console.log(data);
this.activeId = data.id;
}
}
}
</script>
## DeepSelect 分类选择组件
### 使用指南
``` javascript
import { DeepSelect } from 'vant';
Vue.component(DeepSelect.name, DeepSelect);
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<van-deep-select
:items="items"
:main-active-index="mainActiveIndex"
:active-id="activeId"
@navclick="onNavClick"
@itemclick="onItemClick"
></van-deep-select>
```
```javascript
export default {
data() {
return {
items: items,
// 左侧高亮元素的index
mainActiveIndex: 0,
// 被选中元素的id
activeId: 1001
};
},
methods: {
onNavClick(index) {
this.mainActiveIndex = index;
},
onItemClick(data) {
console.log(data);
this.activeId = data.id;
}
}
}
</script>
```
:::
### API
#### 传入参数
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| items | 分类显示所需的数据，具体数据结构可看 数据结构 | Array | [] | |
| mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | |
| activeId | 右侧选择项，高亮的数据id | Number | 0 | |
#### 事件
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| navclick | 左侧导航点击时，触发的事件 | index：被点击的导航的索引 |
| itemclick | 右侧选择项被点击时，会触发的事件 | data: 该点击项的数据 |
### 数据格式
#### items 分类显示所需数据的数据结构
`items` 整体为一个数组，数组内包含一系列描述分类的 object。
每个分类里，text表示当前分类的名称。children 表示分类里的可选项，为数组结构，id被用来唯一标识每个选项
```javascript
[
{
// 导航名称
text: '所有城市',
// 该导航下所有的可选项
children: [
{
// 可选项的名称
text: '温州',
// 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
id: 1002
},
{
// 可选项的名称
text: '杭州',
// 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
id: 1001
}
]
}
]
```

105
docs/examples-docs/dialog.md
View File

@ -7,38 +7,31 @@
</style>
<script>
import { Dialog } from 'src/index';
import MobileComputed from 'components/mobile-computed';
import { Dialog } from 'packages/index';
const message = '弹窗内容';
export default {
mixins: [MobileComputed],
methods: {
handleAlertClick() {
onClickAlert() {
Dialog.alert({
title: 'alert标题',
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
}).then((action) => {
console.log(action);
title: '标题',
message
});
},
handleAlert2Click() {
onClickAlert2() {
Dialog.alert({
message: '无标题alert'
}).then((action) => {
console.log(action);
message
});
},
handleConfirmClick() {
onClickConfirm() {
Dialog.confirm({
title: 'confirm标题',
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
}).then((action) => {
title: '标题',
message
}).catch(action => {
console.log(action);
}, (error) => {
console.log(error);
});
}
}
@ -49,8 +42,6 @@ export default {
### 使用指南
`Dialog`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它，它接受一个数组作为参数，数组中的每一项对应了图片链接。
```js
import { Dialog } from 'vant';
```
@ -59,30 +50,30 @@ import { Dialog } from 'vant';
#### 消息提示
用于提示一些消息，只包含一个确认按钮。
用于提示一些消息，只包含一个确认按钮
:::demo 消息提示
```html
<van-button @click="handleAlertClick">alert</van-button>
<van-button @click="handleAlert2Click">无标题alert</van-button>
<van-button @click="onClickAlert">Alert</van-button>
<van-button @click="onClickAlert2">无标题 Alert</van-button>
<script>
export default {
methods: {
handleAlertClick() {
onClickAlert() {
Dialog.alert({
title: 'alert标题',
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
}).then((action) => {
console.log(action);
title: '标题',
message: '弹窗内容'
}).then(() => {
// on close
});
},
handleAlert2Click() {
onClickAlert2() {
Dialog.alert({
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
}).then((action) => {
console.log(action);
message: '弹窗内容'
}).then(() => {
// on close
});
}
}
@ -93,23 +84,23 @@ export default {
#### 消息确认
用于确认消息，包含取消和确认按钮。
用于确认消息，包含取消和确认按钮
:::demo 消息确认
```html
<van-button @click="handleConfirmClick">confirm</van-button>
<van-button @click="onClickConfirm">Confirm</van-button>
<script>
export default {
methods: {
handleConfirmClick() {
onClickConfirm() {
Dialog.confirm({
title: 'confirm标题',
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
}).then((action) => {
console.log(action);
}, (error) => {
console.log(error);
title: '标题',
message: '弹窗内容'
}).then(() => {
// on confirm
}).catch(() => {
// on cancel
});
}
}
@ -118,26 +109,24 @@ export default {
```
:::
点击以下按钮查看手机端效果：
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
### 方法
#### Dialog.alert(options)
消息提示时使用该方法。
#### Dialog.confirm(options)
消息确认时使用该方法。
| 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------|
| Dialog.alert | options | `Promise` | 展示消息提示弹窗 |
| Dialog.confirm | options | `Promise` | 展示消息确认弹窗 |
| Dialog.close | - | `void` | 关闭弹窗 |
### Options
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| title | 标题 | `string` | | |
| message | 内容 | `string` | | |
| confirmButtonText | 确认按钮的文案 | `string` | `确认` | |
| cancelButtonText | 取消按钮的文案 | `string` | `取消` | |
| title | 标题 | `String` | | |
| message | 内容 | `String` | | |
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | |
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | |
| confirmButtonText | 确认按钮的文案 | `String` | `确认` | |
| cancelButtonText | 取消按钮的文案 | `String` | `取消` | |
| overlay | 是否展示蒙层 | `Boolean` | `true` | |
| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | |
| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | |

124
docs/examples-docs/express-way.md Normal file
View File

@ -0,0 +1,124 @@
## ExpressWay 配送方式
<script>
import { Toast, CellGroup } from 'packages/index';
export default {
data() {
return {
currentExpressType: 1,
expressList: [{
'postage': 10050,
'postage_desc': '由商家门店提供配送服务, 起送价 0.01 元',
'postage_title': '同城配送',
'express_type': 1
}, {
'postage': 0,
'postage_desc': '由商家选择合作快递为您服务',
'postage_title': '快递发货',
'express_type': 2,
'postage_warn_desc': '3天后发货'
}]
};
},
methods: {
onChange(item, index) {
Toast('配送方式更换为:' + item.postage_title);
}
},
components: {
[CellGroup.name]: CellGroup
}
}
</script>
### 使用指南
``` javascript
import { ExpressWay } from 'vant';
Vue.component(ExpressWay.name, ExpressWay);
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<template>
<van-cell-group>
<van-express-way
v-model="currentExpressType"
:express-list="expressList"
@change="onChange"
/>
</van-cell-group>
</tempalte>
<script>
export default {
data() {
return {
currentExpressType: 1,
expressList: [{
'postage': 10050,
'postage_desc': '由商家门店提供配送服务, 起送价 0.01 元',
'postage_title': '同城配送',
'express_type': 1
}]
};
},
methods: {
onChange(item) {
Toast(`配送方式更换为:${item.postage_title}`);
}
}
}
</script>
```
:::
#### 不可修改配送方式
:::demo 不可修改配送方式
```html
<van-cell-group>
<van-express-way
:value="1"
:express-list="expressList"
:editable="false"
@change="onChange"
/>
</van-cell-group>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前选择的配送类型 | `Number` | | 是 |
| expressList | 配送方式列表数据 | `Array` | | 是 |
| cellTitle | Cell 标题 | `String` | `配送方式` | 否 |
| actionsheetTitle | Actionsheet 标题 | `String` | `配送方式` | 否 |
| editable | 能否修改配送方式 | `Boolean` | `true` | 否 |
### 数据格式
#### expressList中的配送方式字段说明
| key | 说明 | 类型 |
|-----------|-----------|-----------|
| postage | 运费，以分为单位 | Number |
| postage_title | 配送方式 | String |
| postage_desc | 描述信息 | String |
| express_type | 配送类型 | Number |
| postage_warn_desc | 提示信息 | String |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| change | 修改配送方式时触发 | item: 对应的数据, index：对应的索引 |

42
docs/examples-docs/field.md
View File

@ -30,36 +30,12 @@ export default {
表单中`input`或`textarea`的输入框。
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Field`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Field`组件了：
```js
import Vue from 'vue';
``` javascript
import { Field } from 'vant';
import 'vant/lib/vant-css/field.css';
Vue.component(Field.name, Field);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Field`组件，这样只能在你注册的组件中使用`Field`：
```js
import { Field } from 'vant';
import 'vant/lib/vant-css/field.css';
export default {
components: {
'van-field': Field
}
};
```
### 代码演示
#### 基础用法
@ -78,7 +54,15 @@ export default {
:on-icon-click="onIconClick"
@blur="onFieldBlur"
required></van-field>
<van-field type="password" label="密码：" placeholder="请输入密码" required></van-field>
<van-field
type="password"
label="密码："
placeholder="请输入密码"
required>
<template slot="icon">
<van-icon name="search"></van-icon>
</template>
</van-field>
<van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
</van-cell-group>
```
@ -163,3 +147,9 @@ export default {
| icon | 输入框尾部图标 | `string` | | icon中支持的类型 |
| onIconClick | 点击图标的回调函数 | `function` | | |
### Slot
| name | 描述 |
|-----------|-----------|
| icon | 自定义icon |

88
docs/examples-docs/goods-action.md Normal file
View File

@ -0,0 +1,88 @@
<script>
import { Toast } from 'packages';
export default {
methods: {
onClickMiniBtn() {
Toast('点击图标');
},
onClickBigBtn() {
Toast('点击按钮');
}
}
}
</script>
<style>
.demo-goods-action {
.van-goods-action {
position: relative;
}
}
</style>
## GoodsAction 商品操作组件
### 使用指南
``` javascript
import {
GoodsAction,
GoodsActionBigBtn,
GoodsActionMiniBtn
} from 'vant';
Vue.component(GoodsAction.name, GoodsAction);
Vue.component(GoodsActionBigBtn.name, GoodsActionBigBtn);
Vue.component(GoodsActionMiniBtn.name, GoodsActionMiniBtn);
```
### 代码演示
:::demo
```html
<van-goods-action>
<van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
客服
</van-goods-action-mini-btn>
<van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn">
购物车
</van-goods-action-mini-btn>
<van-goods-action-big-btn @click="onClickBigBtn">
加入购物车
</van-goods-action-big-btn>
<van-goods-action-big-btn @click="onClickBigBtn" primary>
立即购买
</van-goods-action-big-btn>
</van-goods-action>
```
```javascript
export default {
methods: {
onClickMiniBtn() {
Toast('点击图标');
},
onClickBigBtn() {
Toast('点击按钮');
}
}
}
```
:::
### API
#### GoodsActionMiniBtn
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| icon | 图标 | `String` | - | Icon 组件支持的所有图标 |
| iconClass | 图标额外类名 | `String` | `''` | - |
| url | 跳转链接 | `String` | `javascript:;` | - |
#### GoodsActionBigBtn
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| url | 跳转链接 | `String` | `javascript:;` | - |
| primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` | - |

461
docs/examples-docs/icon.md
View File

@ -1,375 +1,152 @@
<style>
.demo-icon {
font-size: 0;
.examples {
max-height: none;
}
.van-col {
text-align: center;
height: 120px;
height: 100px;
float: none;
display: inline-block;
color: rgba(69, 90, 100, .8);
}
.van-icon {
font-size: 45px;
display: block;
font-size: 32px;
margin: 15px 0;
display: block;
}
span {
font-size: 14px;
}
}
</style>
<script>
import Vue from 'vue';
import { Icon } from 'packages';
const icons = [
'close',
'location',
'clock',
'gold-coin',
'chat',
'exchange',
'upgrade',
'edit',
'contact',
'passed',
'points',
'delete',
'records',
'logistics',
'check',
'checked',
'gift',
'like-o',
'like',
'qr',
'qr-invalid',
'shop',
'photograph',
'add',
'add2',
'photo',
'cart',
'arrow',
'search',
'clear',
'success',
'fail',
'wechat',
'alipay',
'password-view',
'wap-nav',
'password-not-view',
'wap-home',
'ecard-pay',
'balance-pay',
'peer-pay',
'credit-pay',
'debit-pay',
'other-pay',
'cart',
'browsing-history',
'goods-collect',
'shop-collect',
'receive-gift',
'send-gift',
'setting',
'coupon',
'free-postage',
'discount',
'birthday-privilege',
'member-day-privilege',
'balance-details',
'cash-back-record',
'points-mall',
'exchange-record',
'pending-payment',
'pending-orders',
'pending-deliver',
'pending-evaluate',
'cash-on-deliver',
'gift-card-pay',
'underway',
'point-gift',
'after-sale',
'edit-data',
'question',
'description',
'card',
'gift-card',
'coupon'
];
Vue.component('van-icon-inner', Icon);
Vue.component('van-icon', {
props: ['name'],
render(h) {
return (
<div>
{icons.map(icon => (
<van-col span="8">
<van-icon-inner name={icon}></van-icon-inner>
<span>{icon}</span>
</van-col>
))}
</div>
)
}
});
export default {};
</script>
## Icon 图标
### 使用指南
如果你已经按照快速上手中引入了整个，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Icon`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Icon`组件了：
```js
import Vue from 'vue';
``` javascript
import { Icon } from 'vant';
import 'vant/lib/vant-css/icon.css';
Vue.component(Icon.name, Icon);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Icon`组件，这样只能在你注册的组件中使用`Icon`：
```js
import { Icon } from 'vant';
import 'vant/lib/vant-css/icon.css';
export default {
components: {
'van-icon': Icon
}
};
```
### 代码演示
#### 基础用法
设置`name`属性为对应的图标名称即可：
设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表
:::demo 基础用法
```html
<van-icon name="qr-invalid" style="text-align: center"></van-icon>
```
:::
#### 所有Icons
以下目前有的所有图标及其名称：
:::demo 所有Icon
```html
<van-row>
<van-col span="8">
<van-icon name="qr-invalid"></van-icon>
<span>qr-invalid</span>
</van-col>
<van-col span="8">
<van-icon name="qr"></van-icon>
<span>qr</span>
</van-col>
<van-col span="8">
<van-icon name="exchange"></van-icon>
<span>exchange</span>
</van-col>
<van-col span="8">
<van-icon name="close"></van-icon>
<span>close</span>
</van-col>
<van-col span="8">
<van-icon name="location"></van-icon>
<span>location</span>
</van-col>
<van-col span="8">
<van-icon name="upgrade"></van-icon>
<span>upgrade</span>
</van-col>
<van-col span="8">
<van-icon name="check"></van-icon>
<span>check</span>
</van-col>
<van-col span="8">
<van-icon name="checked"></van-icon>
<span>checked</span>
</van-col>
<van-col span="8">
<van-icon name="like-o"></van-icon>
<span>like-o</span>
</van-col>
<van-col span="8">
<van-icon name="like" style="color: red;"></van-icon>
<span>like</span>
</van-col>
<van-col span="8">
<van-icon name="chat"></van-icon>
<span>chat</span>
</van-col>
<van-col span="8">
<van-icon name="shop"></van-icon>
<span>shop</span>
</van-col>
<van-col span="8">
<van-icon name="photograph"></van-icon>
<span>photograph</span>
</van-col>
<van-col span="8">
<van-icon name="add"></van-icon>
<span>add</span>
</van-col>
<van-col span="8">
<van-icon name="add2"></van-icon>
<span>add2</span>
</van-col>
<van-col span="8">
<van-icon name="photo"></van-icon>
<span>photo</span>
</van-col>
<van-col span="8">
<van-icon name="edit"></van-icon>
<span>edit</span>
</van-col>
<van-col span="8">
<van-icon name="passed"></van-icon>
<span>passed</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="arrow"></van-icon>
<span>arrow</span>
</van-col>
<van-col span="8">
<van-icon name="gift"></van-icon>
<span>gift</span>
</van-col>
<van-col span="8">
<van-icon name="search"></van-icon>
<span>search</span>
</van-col>
<van-col span="8">
<van-icon name="clear"></van-icon>
<span>clear</span>
</van-col>
<van-col span="8">
<van-icon name="success"></van-icon>
<span>success</span>
</van-col>
<van-col span="8">
<van-icon name="fail"></van-icon>
<span>fail</span>
</van-col>
<van-col span="8">
<van-icon name="contact"></van-icon>
<span>contact</span>
</van-col>
<van-col span="8">
<van-icon name="wechat"></van-icon>
<span>wechat</span>
</van-col>
<van-col span="8">
<van-icon name="alipay"></van-icon>
<span>alipay</span>
</van-col>
<van-col span="8">
<van-icon name="password-view"></van-icon>
<span>password-view</span>
</van-col>
<van-col span="8">
<van-icon name="wap-nav"></van-icon>
<span>wap-nav</span>
</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-icon name="wap-home"></van-icon>
<span>wap-home</span>
</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-col span="8">
<van-icon name="edit-data"></van-icon>
<span>edit-data</span>
</van-col>
<van-col span="8">
<van-icon name="question"></van-icon>
<span>question</span>
</van-col>
<van-col span="8">
<van-icon name="delete"></van-icon>
<span>delete</span>
</van-col>
<van-col span="8">
<van-icon name="records"></van-icon>
<span>records</span>
</van-col>
<van-col span="8">
<van-icon name="description"></van-icon>
<span>description</span>
</van-col>
<van-col span="8">
<van-icon name="card"></van-icon>
<span>card</span>
</van-col>
<van-col span="8">
<van-icon name="gift-card"></van-icon>
<span>gift-card</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="clock"></van-icon>
<span>clock</span>
</van-col>
<van-col span="8">
<van-icon name="gold-coin"></van-icon>
<span>gold-coin</span>
</van-col>
</van-row>
<van-icon name="success"></van-icon>
```
:::
@ -377,4 +154,4 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| name | icon名称 | `string` | `''` | |
| name | icon名称 | `String` | `''` | - |

26
docs/examples-docs/image-preview.md
View File

@ -7,14 +7,11 @@
</style>
<script>
import { ImagePreview } from 'src/index';
import MobileComputed from 'components/mobile-computed';
import { ImagePreview } from 'packages/index';
export default {
mixins: [MobileComputed],
methods: {
handleImagePreview() {
showImagePreview() {
ImagePreview([
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
@ -41,30 +38,23 @@ import { ImagePreview } from 'vant';
:::demo 基础用法
```html
<van-button @click="handleImagePreview">预览图片</van-button>
<script>
import { ImagePreview } from 'src/index';
<van-button @click="showImagePreview">预览图片</van-button>
```
```javascript
export default {
methods: {
handleImagePreview() {
showImagePreview() {
ImagePreview([
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]);
}
}
};
</script>
```
:::
点击以下按钮查看手机端效果：
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
### 方法参数
| 参数名 | 说明 | 类型 |

83
docs/examples-docs/invalid-goods.md Normal file
View File

@ -0,0 +1,83 @@
## InvalidGoods 不可用商品列表
<script>
const item = {
sku: [{ v: '商品SKU1' }, { v: '商品SKU2' }],
num: 2,
sku_id: 123,
title: "商品名称",
price: 12200,
unavailable_desc: '超出配送区域',
img_url: 'https://img.yzcdn.cn/upload_files/2017/06/29/FnPSAKkEeh4FnDA09oIbmnlzWQrw.png',
};
export default {
data() {
return {
goods: [item, item, item]
}
}
}
</script>
### 使用指南
``` javascript
import { InvalidGoods } from 'vant';
Vue.component(InvalidGoods.name, InvalidGoods);
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<template>
<van-invalid-goods :goods="goods" />
<tempalte/>
<script>
const item = {
num: 2,
sku_id: 123,
price: 12200,
title: "商品名称",
img_url: 'https://img.yzcdn.cn/...',
unavailable_desc: '超出配送区域',
sku: [
{ v: '商品SKU1' },
{ v: '商品SKU2' }
]
};
export default {
data() {
return {
goods: [item, item, item]
}
}
}
</script>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| goods | 商品数据 | `Array` | | 是 |
| title | 标题 | `String` | `以下商品无法一起购买，点击查看原因` | 否 |
| actionsheetTitle | 弹出层标题 | `String` | `以下商品无法一起下单` | 否 |
### 数据格式
#### data中的商品字段说明
| key | 说明 | 类型 |
|-----------|-----------|-----------|
| num | 商品数量 | `Number` |
| sku_id | 商品 id | `Number` |
| price | 商品价格，以分为单位 | `Number` |
| title | 商品标题 | `String` |
| img_url | 商品图片 url | `String` |
| unavailable_desc | 不可用原因 | `String` |
| sku | 商品 sku | `Array` |

118
docs/examples-docs/layout.md
View File

@ -1,121 +1,75 @@
<style>
.demo-layout {
.van-row {
padding: 0 20px;
padding: 0 15px;
}
.van-col {
margin-bottom: 10px;
}
}
.gray {
height: 30px;
line-height: 30px;
font-size: 12px;
background: #666;
color: #fff;
text-align: center;
}
.white {
height: 30px;
font-size: 13px;
line-height: 30px;
font-size: 12px;
background: #fff;
color: #333;
text-align: center;
margin-bottom: 10px;
background-clip: content-box;
&:nth-child(odd) {
background-color: #39a9ed;
}
&:nth-child(even) {
background-color: #66c6f2;
}
}
}
</style>
## Layout 布局
主要提供了`van-row`和`van-col`两个组件来进行行列布局。
提供了`van-row`和`van-col`两个组件来进行行列布局
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Row`和`Col`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Row`和`Col`组件了：
```js
import Vue from 'vue';
``` javascript
import { Row, Col } from 'vant';
import 'vant/lib/vant-css/col.css';
import 'vant/lib/vant-css/row.css';
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Row`和`Col`组件，这样只能在你注册的组件中使用`Row`和`Col`：
```js
import { Row, Col } from 'vant';
import 'vant/lib/vant-css/col.css';
import 'vant/lib/vant-css/row.css';
export default {
components: {
'van-row': Row,
'van-col': Col
}
};
```
### 代码演示
#### 常规用法
#### 基本用法
Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比
此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
:::demo 常规用法
:::demo 基本用法
```html
<van-row>
<van-col span="8">
<div class="gray">span: 8</div>
</van-col>
<van-col span="8">
<div class="white">span: 8</div>
</van-col>
<van-col span="8">
<div class="gray">span: 8</div>
</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
<van-row>
<van-col span="4">
<div class="gray">span: 4</div>
</van-col>
<van-col span="10" offset="4">
<div class="gray">offset: 4, span: 10</div>
</van-col>
<van-col span="4">span: 4</van-col>
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
</van-row>
<van-row>
<van-col offset="12" span="12">
<div class="gray">offset: 12, span: 12</div>
</van-col>
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
</van-row>
```
:::
#### 在列元素之间增加间距
#### 设置列元素间距
列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`van-row`上添加`gutter`属性来设置列元素之间的间距。
通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
:::demo 在列元素之间增加间距
```html
<van-row gutter="20">
<van-col span="8">
<div class="gray">span: 8</div>
</van-col>
<van-col span="8">
<div class="gray">span: 8</div>
</van-col>
<van-col span="8">
<div class="gray">span: 8</div>
</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
```
:::
@ -125,10 +79,12 @@ Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设
#### Row
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | |
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | - |
| prefix | className 前缀 | `String` | `van` | - |
#### Column
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| span | 列元素宽度 | `String | Number` | - | |
| offset | 列元素偏移宽度 | `String | Number` | - | |
| span | 列元素宽度 | `String | Number` | - | - |
| offset | 列元素偏移距离 | `String | Number` | - | - |
| prefix | className 前缀 | `String` | `van` | - |

79
docs/examples-docs/loading.md
View File

@ -1,19 +1,8 @@
<style>
.demo-loading {
.van-loading {
margin: 0 auto;
}
.circle-loading {
margin: 20px auto;
}
.demo-loading__example--with-bg {
background-color: rgba(17, 17, 17, 0.7);
margin: 0 auto;
width: 120px;
padding: 45px 0;
border-radius: 10px;
display: inline-block;
margin: 10px 0 10px 20px;
}
}
</style>
@ -21,71 +10,29 @@
## Loading 加载
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Loading`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Loading`组件了：
```js
import Vue from 'vue';
``` javascript
import { Loading } from 'vant';
import 'vant/lib/vant-css/loading.css';
Vue.component(Loading.name, Loading);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Loading`组件，这样只能在你注册的组件中使用`Loading`：
```js
import { Loading } from 'vant';
import 'vant/lib/vant-css/loading.css';
export default {
components: {
'van-loading': Loading
}
};
```
### 代码演示
#### 渐变深色spinner
#### 单色 spinner
:::demo 渐变深色spinner
:::demo 单色 spinner
```html
<van-loading class="some-customized-class"></van-loading>
<van-loading type="circle" color="white"></van-loading>
<van-loading type="circle" color="black"></van-loading>
```
:::
#### 渐变浅色spinner
#### 渐变色 spinner
:::demo 渐变浅色spinner
:::demo 渐变色 spinner
```html
<div class="demo-loading__example demo-loading__example--with-bg">
<van-loading class="some-customized-class" :color="'white'"></van-loading>
</div>
<style>
.demo-loading__example--with-bg {
background-color: rgba(17, 17, 17, 0.7);
width: 120px;
padding: 45px 0;
border-radius: 10px;
}
</style>
```
:::
#### 单色spinner
:::demo 单色spinner
```html
<van-loading class="circle-loading" :type="'circle'" :color="'white'"></van-loading>
<van-loading class="circle-loading" :type="'circle'" :color="'black'"></van-loading>
<van-loading type="gradient-circle" color="black"></van-loading>
<van-loading type="gradient-circle" color="white"></van-loading>
```
:::
@ -93,5 +40,5 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| color | `loading`颜色 | `string` | `black` | `black`, `white` |
| type | `loading`类型 | `string` | `gradient-circle` | `gradient-circle`, `circle` |
| color | 颜色 | `string` | `black` | `black` `white` |
| type | 类型 | `string` | `gradient-circle` | `gradient-circle` `circle` |

69
docs/examples-docs/notice-bar.md Normal file
View File

@ -0,0 +1,69 @@
<style>
.demo-notice-bar {
.van-notice-bar:not(:first-of-type) {
margin-top: 15px;
}
}
</style>
## NoticeBar 通告栏
### 使用指南
``` javascript
import { NoticeBar } from 'vant';
Vue.component(NoticeBar.name, NoticeBar);
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<van-notice-bar text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。">
```
:::
#### 禁用滚动
文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
:::demo 禁用滚动
```html
<van-notice-bar :scrollable="false">
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
</van-notice-bar>
```
:::
#### 通告栏模式
默认模式为空，支持`closeable`和`link`。
:::demo 通告栏模式
```html
<!-- closeable 模式，在右侧显示关闭按钮 -->
<van-notice-bar mode="closeable">
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
</van-notice-bar>
<!-- link 模式，在右侧显示链接箭头 -->
<van-notice-bar mode="link">
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
</van-notice-bar>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| mode | 通告栏模式 | String | `''` | `closeable` `link` |
| delay | 动画延迟时间，单位秒 | Number | `1` | - |
| speed | 滚动速率，单位px | Number | `40` | - |
| scrollable | 是否滚动 | Boolean | `true` | - |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| click | 点击事件回调 | - |

235
docs/examples-docs/order-goods.md Normal file
View File

@ -0,0 +1,235 @@
## OrderGoods 下单页商品列表
<script>
const item1 = {
img_url: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg',
pay_price: 1050,
title: '商品 A',
num: '1'
};
const item2 = {
points_price: 200,
pay_price: 50,
img_url: '//img.yzcdn.cn/upload_files/2017/07/02/e89d56cd92ad8ce3b9d8e1babc3758b6.jpg',
title: '商品 B',
num: '15',
sku: [{ v: '商品SKU1' }, { v: '商品SKU2' }]
}
const item3 = {
pay_price: 50,
img_url: '//img.yzcdn.cn/upload_files/2017/07/02/e89d56cd92ad8ce3b9d8e1babc3758b6.jpg',
title: '商品 C',
num: '15',
is_presale: true,
delivery_time: '三天后发货',
show_delivery_time: true,
is_presale: true,
is_present: true,
message: {
'留言1': '留言1内容',
'留言2': 'https://img.yzcdn.cn/upload_files/2017/07/02/e89d56cd92ad8ce3b9d8e1babc3758b6.jpg'
}
};
export default {
data() {
return {
itemList1: [item1],
itemList2: [item2],
itemList3: [item3],
itemListMulti: [item1, item2, item3],
emptyItemList: [],
message1: '',
message2: '',
message3: '',
message4: ''
}
}
}
</script>
### 使用指南
``` javascript
import { OrderGoods } from 'vant';
Vue.component(OrderGoods.name, OrderGoods);
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<template>
<van-order-goods
v-model="message1"
shop-name="起码运动馆"
:price="1050"
:item-list="itemList1"
/>
</template>
<script>
export default {
data() {
return {
message1: '',
itemList1: [{
img_url: '//img.yzcdn.cn/...',
pay_price: 1050,
title: '商品 A',
num: '1'
}]
}
}
}
</script>
```
:::
#### 积分商品
:::demo 积分商品
```html
<template>
<van-order-goods
v-model="message2"
shop-name="起码运动馆"
:item-list="itemList2"
:price="50"
:points="200"
/>
</template>
<script>
export default {
data() {
return {
message2: '',
itemList2: [{
points_price: 200,
pay_price: 50,
img_url: '//img.yzcdn.cn/...',
title: '商品 B',
num: '15',
sku: [
{ v: '商品SKU1' },
{ v: '商品SKU2' }
]
}]
}
}
}
</script>
```
:::
#### 预售商品
:::demo 预售商品
```html
<template>
<van-order-goods
v-model="message3"
shop-name="起码运动馆"
:price="1050"
:item-list="itemList3"
/>
</template>
<script>
export default {
data() {
return {
message3: '',
itemList3: [{
pay_price: 50,
img_url: '//img.yzcdn.cn/...',
title: '商品 C',
num: '15',
delivery_time: '三天后发货',
show_delivery_time: true,
is_presale: true,
is_present: true
}]
}
}
}
</script>
```
:::
#### 商品为空
:::demo 商品为空
```html
<van-order-goods shop-name="起码运动馆" :item-list="[]" />
```
:::
#### 多个商品
:::demo 多个商品
```html
<van-order-goods
v-model="message4"
shop-name="起码运动馆"
:item-list="itemListMulti"
:price="1050"
:message-editable="false"
/>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| shop-name | 店铺名称 | `String` | |
| shop-link | 店铺链接 | `String` | |
| header-icon | 店铺名称左侧的图标类型 | `String` | `shop` |
| header-badge | 店铺名称右侧的徽章链接 | `String` | |
| item-list | 商品列表 | `Array` | `[]` |
| empty-icon | 商品列表为空时的图标 | `String` | |
| empty-message | 商品列表为空时的提示文案 | `String` | `当前没有可购买的商品，请重新选择` |
| empty-button-text | 商品列表为空时的按钮文案 | `String` | `返回重新选择` |
| v-model | 买家留言 | `String` | `''` |
| show-total-price | 是否显示价格栏 | `Boolean` | `true` |
| show-message | 是否显示留言栏 | `Boolean` | `true` |
| message-editable | 留言是否可以编辑 | `Boolean` | `true` |
| price | 合计金额（单位分） | `Number` | |
| points | 合计积分 | `Number` | |
### 数据格式
#### itemList 中的配送方式字段说明
| key | 说明 | 类型 |
|-----------|-----------|-----------|
| title | 商品名称 | `String` |
| img_url | 图片地址 | `String` |
| delivery_time | 发货时间 | `String` |
| num | 商品数量 | `Number` |
| points_price | 积分价格 | `Number` |
| pay_price（单位分） | 金额 | `Number` |
| sku | 商品 sku | `Array` |
| message | 商品留言 | `Array` |
| is_presale | 是否为预售 | `Boolean` |
| is_present | 是否为赠品 | `Boolean` |
| is_period_buy | 是否为周期购 | `Boolean` |
| show_delivery_time | 是否显示发货时间 | `Boolean` |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| clickEmptyButton | 点击商品为空时的按钮时触发 | - |
### Slot
| name | 描述 |
|-----------|-----------|
| 默认 | 在商品列表和留言之间插入内容 |
| top | 在标题和商品列表之间插入内容 |
| bottom | 在合计价格下方插入内容 |

88
docs/examples-docs/panel.md
View File

@ -1,19 +1,6 @@
<style>
.demo-panel {
.van-panel-sum {
background: #fff;
text-align: right;
font-size: 14px;
color: #333;
line-height: 30px;
padding-right: 15px;
span {
color: red;
}
}
.van-panel-buttons {
.van-panel__footer {
text-align: right;
.van-button {
@ -21,7 +8,7 @@
}
}
.panel-content {
.van-panel__content {
padding: 20px;
}
}
@ -30,80 +17,33 @@
## Panel 面板
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Panel`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Panel`组件了：
```js
import Vue from 'vue';
``` javascript
import { Panel } from 'vant';
import 'vant/lib/vant-css/panel.css';
Vue.component(Panel.name, Panel);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Panel`组件，这样只能在你注册的组件中使用`Panel`：
```js
import { Panel } from 'vant';
import 'vant/lib/vant-css/panel.css';
export default {
components: {
'van-panel': Panel
}
};
```
### 代码演示
#### 基础用法
面板只是一个容器，里面可以放入自定义的内容。
面板只是一个容器，里面可以放入自定义的内容
:::demo 基础用法
```html
<van-panel title="标题" desc="标题描述" status="状态">
<div class="panel-content">
panel内容
</div>
<div>Panel内容</div>
</van-panel>
```
:::
#### 高级用法
使用`slot`自定义内容。比如在自定义内容中放入一个`van-card`。
使用`slot`自定义内容
:::demo 高级用法
```html
<van-panel title="标题" desc="标题描述" status="状态">
<van-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="van-card__row" slot="title">
<h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="van-card__price">¥ 2.00</span>
</div>
<div class="van-card__row" slot="desc">
<h4 class="van-card__desc">商品sku</h4>
<span class="van-card__num">x 2</span>
</div>
<div class="van-card__footer" slot="footer">
<van-button size="mini">按钮一</van-button>
<van-button size="mini">按钮二</van-button>
</div>
</van-card>
<div class="van-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
<div class="van-panel-buttons" slot="footer">
<div>Panel内容</div>
<div slot="footer">
<van-button size="small">按钮一</van-button>
<van-button size="small" type="danger">按钮二</van-button>
</div>
@ -113,11 +53,11 @@ export default {
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| title | 标题 | `string` | | |
| desc | 描述 | `string` | | |
| status | 状态 | `string` | | |
| title | 标题 | `String` | - | - |
| desc | 描述 | `String` | - | - |
| status | 状态 | `String` | - | - |
### Slot
@ -125,5 +65,5 @@ export default {
| name | 描述 |
|-----------|-----------|
| - | 自定义内容 |
| header | 自定义header |
| footer | 自定义footer |
| header | 自定义 header |
| footer | 自定义 footer |

87
docs/examples-docs/pay-order.md Normal file
View File

@ -0,0 +1,87 @@
## PayOrder 支付订单
<script>
import { Toast } from 'packages/index';
export default {
methods: {
onClickButton() {
Toast('点击按钮');
}
}
}
</script>
<style>
.demo-pay-order {
.van-pay-order {
position: relative;
}
}
</style>
### 使用指南
``` javascript
import { PayOrder } from 'vant';
Vue.component(PayOrder.name, PayOrder);
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<van-pay-order
:price="3050"
button-text="提交订单"
@submit="onClickButton"
/>
```
:::
#### 禁用状态
禁用状态下不会触发`submit`事件
:::demo 禁用状态
```html
<van-pay-order
disabled
:price="3050"
button-text="提交订单"
tip="您的收货地址不支持同城送, 我们已为您推荐快递"
@submit="onClickButton"
/>
```
:::
#### 加载状态
加载状态下不会触发`submit`事件
:::demo 加载状态
```html
<van-pay-order
loading
:price="3050"
button-text="提交订单"
@submit="onClickButton"
/>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| price | 价格（单位分） | `Number` | | 是 |
| button-text | 按钮文字 | `String` | | 是 |
| button-type | 按钮类型 | `String` | `danger` | 否 |
| tip | 提示文案 | `String` | | 否 |
| disabled | 是否禁用按钮 | `Boolean` | `false` | 否 |
| loading | 是否显示加载中的按钮 | `Boolean` | `false` | 否 |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| submit | 按钮点击事件回调 | - |

26
docs/examples-docs/picker.md
View File

@ -39,36 +39,12 @@ export default {
## Picker 选择器
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Picker`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Picker`组件了：
```js
import Vue from 'vue';
``` javascript
import { Picker } from 'vant';
import 'vant/lib/vant-css/picker.css';
Vue.component(Picker.name, Picker);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Picker`组件，这样只能在你注册的组件中使用`Picker`：
```js
import { Picker } from 'vant';
import 'vant/lib/vant-css/picker.css';
export default {
components: {
'van-picker': Picker
}
};
```
### 代码演示
#### 基础用法

46
docs/examples-docs/popup.md
View File

@ -35,12 +35,9 @@
</style>
<script>
import MobileComputed from 'components/mobile-computed';
import Dialog from 'packages/dialog';
export default {
mixins: [MobileComputed],
data() {
return {
popupShow1: false,
@ -79,36 +76,12 @@ export default {
## Popup 弹出菜单
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Popup`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Popup`组件了：
```js
import Vue from 'vue';
``` javascript
import { Popup } from 'vant';
import 'vant/lib/vant-css/popup.css';
Vue.component(Popup.name, Popup);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Popup`组件，这样只能在你注册的组件中使用`Popup`：
```js
import { Popup } from 'vant';
import 'vant/lib/vant-css/popup.css';
export default {
components: {
'van-popup': Popup
}
};
```
### 代码演示
#### 基础用法
@ -186,18 +159,13 @@ export default {
```
:::
点击以下按钮查看手机端效果：
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| value | 利用`v-model`绑定当前组件是否显示 | `boolean` | `false` | `true`, `false` |
| overlay | 是否显示背景遮罩层 | `boolean` | `true` | `true`, `false` |
| lockOnScroll | 背景是否跟随滚动 | `boolean` | `false` | `true`, `false` |
| position | 弹出菜单位置 | `string` | | `top`, `bottom`, `right`, `left` |
| closeOnClickOverlay | 点击遮罩层是否关闭弹出菜单 | `boolean` | `true` | `true`, `false` |
| transition | 弹出菜单的`transition` | `string` | `popup-slide` | |
| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
| position | 弹出菜单位置 | `String` | - | `top`, `bottom`, `right`, `left` |
| closeOnClickOverlay | 点击遮罩层是否关闭弹出菜单 | `Boolean` | `true` | - |
| transition | 弹出菜单的`transition` | `String` | `popup-slide` | |

89
docs/examples-docs/progress.md
View File

@ -1,101 +1,55 @@
<style>
.demo-progress {
&__wrapper {
padding: 5px;
.van-progress {
margin: 20px 10px;
}
}
</style>
## Progress 进度条
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Progress`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Progress`组件了：
```js
import Vue from 'vue';
``` javascript
import { Progress } from 'vant';
import 'vant/lib/vant-css/progress.css';
Vue.component(Progress.name, Progress);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Progress`组件，这样只能在你注册的组件中使用`Progress`：
```js
import { Progress } from 'vant';
import 'vant/lib/vant-css/progress.css';
export default {
components: {
'van-progress': Progress
}
};
```
### 代码演示
#### 基础用法
默认情况进度条为蓝色，使用`percentage`属性来设置当前进度。
进度条默认为蓝色，使用`percentage`属性来设置当前进度
:::demo 基础用法
```html
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
</div>
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
</div>
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
</div>
<van-progress :percentage="0"></van-progress>
<van-progress :percentage="46"></van-progress>
<van-progress :percentage="100"></van-progress>
```
:::
#### Inactive
#### 进度条置灰
是否置灰进度条，一般用于进度条被取消时。
:::demo Inactive
:::demo 进度条置灰
```html
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo1" inactive :percentage="0"></van-progress>
</div>
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo2" inactive :percentage="46"></van-progress>
</div>
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo1" inactive :percentage="100"></van-progress>
</div>
<van-progress inactive :percentage="0"></van-progress>
<van-progress inactive :percentage="46"></van-progress>
<van-progress inactive :percentage="100"></van-progress>
```
:::
#### 自定义颜色和文字
#### 样式定制
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
:::demo 自定义颜色和文字
:::demo 样式定制
```html
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
</div>
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
</div>
<div class="demo-progress__wrapper">
<van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
</div>
<van-progress pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
<van-progress pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
<van-progress pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
```
:::
@ -103,9 +57,8 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| inactive | 是否置灰 | `boolean` | `false` | `true`, `false` |
| percentage | 进度百分比 | `number` | `false` | `0-100` |
| pivotText | 文字显示 | `string` | 百分比文字 | - |
| color | 进度条颜色 | `string` | `#38f` | hexvalue |
| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |
| inactive | 是否置灰 | `boolean` | `false` | |
| percentage | 进度百分比 | `number` | `false` | `0-100` |
| pivotText | 文字显示 | `string` | 百分比文字 | - |
| color | 进度条颜色 | `string` | `#38f` | hexvalue |
| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |

26
docs/examples-docs/quantity.md
View File

@ -24,36 +24,12 @@ export default {
## Quantity 数量选择
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Quantity`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Quantity`组件了：
```js
import Vue from 'vue';
``` javascript
import { Quantity } from 'vant';
import 'vant/lib/vant-css/quantity.css';
Vue.component(Quantity.name, Quantity);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Quantity`组件，这样只能在你注册的组件中使用`Quantity`：
```js
import { Quantity } from 'vant';
import 'vant/lib/vant-css/quantity.css';
export default {
components: {
'van-quantity': Quantity
}
};
```
### 代码演示
#### 基础用法

53
docs/examples-docs/quickstart.md
View File

@ -1,8 +1,6 @@
## Vant
一套基于`Vue.js 2.0`的 Mobile 组件库
[查看业务组件库 Captain-UI](/zanui/captain/component/quickstart)
基于`Vue 2.0`的 Mobile 组件库
### 安装
@ -12,37 +10,50 @@ npm i vant -S
### 引入组件
#### 完整引入
#### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
```js
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "vant", "style": true }]
]
}
```
  接着你可以直接引入 vant 组件，等价于下方的按需引入组件
```js
// 模块化地引入 js 和 css, 通过 babel-plugin-import 插件解析
import { Button } from 'vant';
```
#### 按需引入组件
```jsx
import { Button } from 'vant/lib/button';
import 'vant/lib/vant-css/button.css';
```
#### 导入所有组件
```javascript
import Vue from 'vue';
import ZanUI from 'vant';
import vant from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(ZanUI);
```
#### 按需引入
```javascript
import Vue from 'vue';
import { Button, Cell } from 'vant';
import 'vant/lib/vant-css/button.css';
import 'vant/lib/vant-css/cell.css';
Vue.component(Button.name, Button);
Vue.component(Cell.name, Cell);
Vue.use(vant);
```
### 自定义主题
`Vant`默认提供一套主题，`CSS`命名采用`BEM`的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法：
`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法：
#### 下载主题
可以通过Github或npm来下载主题：
可以通过 Github 或 npm 来下载主题：
```shell
```bash
# npm
npm i vant-css -D

29
docs/examples-docs/radio.md
View File

@ -26,37 +26,12 @@ export default {
## Radio 单选框
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Radio`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Radio`组件了：
```js
import Vue from 'vue';
import { Radio, RadioGroup } from 'vant';
import 'vant/lib/vant-css/radio.css';
``` javascript
import { Radio } from 'vant';
Vue.component(Radio.name, Radio);
Vue.component(RadioGroup.name, RadioGroup);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Radio`组件，这样只能在你注册的组件中使用`Radio`：
```js
import { Radio, RadioGroup } from 'vant';
import 'vant/lib/vant-css/radio.css';
export default {
components: {
'van-radio': Radio,
'van-radio-group': RadioGroup
}
};
```
### 代码演示
#### 基础用法

26
docs/examples-docs/search.md
View File

@ -17,36 +17,12 @@ export default {
## Search 搜索
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Search`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Search`组件了：
```js
import Vue from 'vue';
``` javascript
import { Search } from 'vant';
import 'vant/lib/vant-css/search.css';
Vue.component(Search.name, Search);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Search`组件，这样只能在你注册的组件中使用`Search`：
```js
import { Search } from 'vant';
import 'vant/lib/vant-css/search.css';
export default {
components: {
'van-search': Search
}
};
```
### 代码演示
#### 基础用法

98
docs/examples-docs/steps.md
View File

@ -1,12 +1,17 @@
<style>
.demo-steps {
.steps-success {
.steps-success,
.van-icon-location {
color: #06bf04;
}
.van-button {
margin: 15px 0 0 15px;
}
.van-steps__message + p {
margin-bottom: 10px;
}
}
</style>
@ -20,7 +25,7 @@ export default {
methods: {
nextStep() {
if (++this.active > 3) this.active = 0;
this.active = ++this.active % 4;
}
}
}
@ -29,36 +34,11 @@ export default {
## Steps 步骤条
### 使用指南
``` javascript
import { Step, Steps } from 'vant';
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Steps`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Steps`组件了：
```js
import Vue from 'vue';
import { Steps, Step } from 'vant';
import 'vant/lib/vant-css/steps.css';
Vue.component(Steps.name, Steps);
Vue.component(Step.name, Step);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Steps`组件，这样只能在你注册的组件中使用`Steps`：
```js
import { Steps, Step } from 'vant';
import 'vant/lib/vant-css/steps.css';
export default {
components: {
'van-steps': Steps,
'van-step': Step
}
};
Vue.component(Steps.name, Steps);
```
### 代码演示
@ -67,7 +47,7 @@ export default {
:::demo 基础用法
```html
<van-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
<van-steps :active="active">
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
@ -86,7 +66,7 @@ export default {
methods: {
nextStep() {
if (++this.active > 3) this.active = 0;
this.active = ++this.active % 4;
}
}
}
@ -94,13 +74,19 @@ export default {
```
:::
#### 只显示步骤条
#### 物流描述
当你不设置`title`或`description`属性时，就会只显示步骤条，而没有步骤的详细信息。
通过`title`和`description`属性来定义物流描述信息
:::demo 只显示步骤条
:::demo 物流描述
```html
<van-steps :active="active">
<van-steps
:active="active"
icon="logistics"
icon-class="steps-success"
title="等待商家发货"
description="物流描述"
>
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
@ -109,38 +95,37 @@ export default {
```
:::
#### 竖式步骤条
#### 竖向步骤条
可以通过设置`direction`属性来改变步骤条的显示方式，可选值有`vertical/horizontal`。
可以通过设置`direction`属性来改变步骤条的显示方式
:::demo 只显示步骤条
:::demo 竖向步骤条
```html
<van-steps direction="vertical" :active="0" active-color="#f60">
<van-step>
<h3>【城市】最新的物流状态之类的表述哈哈哈哈</h3>
<p>2016-07-12 12:12:12</p>
<h3>【城市】物流状态1</h3>
<p>2016-07-12 12:40</p>
</van-step>
<van-step>
<h3>【城市】已经过了的物流状态我是折行我是折行我是折行联系电话：158630099999</h3>
<p>2016-07-12 12:12:12</p>
<h3>【城市】物流状态2</h3>
<p>2016-07-11 10:00</p>
</van-step>
<van-step>
<h3>未发货</h3>
<p>2016-07-12 12:12:12</p>
<h3>快件已发货</h3>
<p>2016-07-10 09:30</p>
</van-step>
</van-steps>
```
:::
### 高级用法
可以使用具名`slot`增加自定义内容，其中包含`icon`和`message-extra`。
使用`slot`增加自定义内容
:::demo 高级用法
```html
<van-steps :active="active" title="等待商家发货">
<van-icon slot="icon" name="like"></van-icon>
<p slot="message-extra">流程</p>
<van-icon slot="icon" name="location"></van-icon>
<p slot="message-extra">物流进度</p>
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
@ -153,13 +138,13 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| active | 当前激活的步骤，从0开始 | `number` | | |
| icon | 当前步骤的icon | `string` | | |
| iconClass | 当前步骤栏为icon添加的类 | `string` | | |
| title | 当前步骤从标题 | `string` | | |
| description | 当前步骤描述 | `string` | | |
| direction | 显示方向 | `string` | `horizontal` | `vertical/horizontal` |
| activeColor | `active`状态时的颜色 | `string` | `#06bf04` | |
| active | 当前步骤，起始值为0 | `Number` | | |
| icon | 当前步骤的icon | `String` | | |
| iconClass | 当前步骤栏为icon添加的类 | `String` | | |
| title | 当前步骤从标题 | `String` | | |
| description | 当前步骤描述 | `String` | | |
| direction | 显示方向 | `String` | `horizontal` | `vertical` |
| activeColor | active状态颜色 | `String` | `#06bf04` | |
### Steps Slot
@ -167,4 +152,3 @@ export default {
|-----------|-----------|
| icon | 自定义icon区域 |
| message-extra | 状态栏添加额外的元素 |

57
docs/examples-docs/swipe.md
View File

@ -36,36 +36,10 @@ export default {
## Swipe 轮播
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Swipe`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Swipe`组件了：
```js
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import 'vant/lib/vant-css/swipe.css';
``` javascript
import { Swipe } from 'vant';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Swipe`组件，这样只能在你注册的组件中使用`Swipe`：
```js
import { Swipe, SwipeItem } from 'vant';
import 'vant/lib/vant-css/swipe.css';
export default {
components: {
'van-swipe': Swipe,
'van-swipe-item': SwipeItem
}
};
```
### 代码演示
@ -97,6 +71,33 @@ export default {
```
:::
#### 隐藏指示器
需要设置`show-indicators`属性为`false`，即会隐藏指示器。
:::demo 隐藏指示器
```html
<van-swipe :show-indicators="false">
<van-swipe-item v-for="(img, index) in autoImages" :key="index">
<img v-lazy="img" alt="">
</van-swipe-item>
</van-swipe>
<script>
export default {
data() {
return {
autoImages: [
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
]
};
}
};
</script>
```
:::
#### 自动轮播
需要设置`auto-play`属性为`true`，即会自动轮播。

81
docs/examples-docs/switch-cell.md Normal file
View File

@ -0,0 +1,81 @@
## SwitchCell 开关单元格
`SwitchCell`组件是对`Switch`和`Cell`组件的封装
<script>
export default {
data() {
return {
checked: true
}
}
}
</script>
### 使用指南
``` javascript
import { SwitchCell } from 'vant';
Vue.component(SwitchCell.name, SwitchCell);
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<template>
<van-cell-group>
<van-switch-cell v-model="checked" title="标题" />
</van-cell-group>
</template>
<script>
export default {
data() {
return {
checked: true
}
}
}
</script>
```
:::
#### 禁用状态
通过`disabled`属性可以将组件设置为禁用状态
:::demo 禁用状态
```html
<van-cell-group>
<van-switch-cell v-model="checked" :disabled="true" title="标题" />
</van-cell-group>
```
:::
#### 加载状态
通过`loading`属性可以将组件设置为加载状态
:::demo 加载状态
```html
<van-cell-group>
<van-switch-cell v-model="checked" :loading="true" title="标题" />
</van-cell-group>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 开关状态 | `Boolean` | | |
| title | 左侧标题 | `String` | `''` | |
| loading | 是否为加载状态 | `Boolean` | `false` | |
| disabled | 是否为禁用状态 | `Boolean` | `false` | |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| change | 开关状态切换回调 | checked: 是否选中开关 |

26
docs/examples-docs/switch.md
View File

@ -44,36 +44,12 @@ export default {
## Switch 开关
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Switch`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Switch`组件了：
```js
import Vue from 'vue';
``` javascript
import { Switch } from 'vant';
import 'vant/lib/vant-css/switch.css';
Vue.component(Switch.name, Switch);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Switch`组件，这样只能在你注册的组件中使用`Switch`：
```js
import { Switch } from 'vant';
import 'vant/lib/vant-css/switch.css';
export default {
components: {
'van-switch': Switch
}
};
```
### 代码演示
#### 基础用法

27
docs/examples-docs/tab.md
View File

@ -50,38 +50,13 @@ export default {
## Tab 标签
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Tab`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tab`组件了：
```js
import Vue from 'vue';
``` javascript
import { Tab, Tabs } from 'vant';
import 'vant/lib/vant-css/tab.css';
Vue.component(Tab.name, Tab);
Vue.component(Tabs.name, Tabs);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Tab`组件，这样只能在你注册的组件中使用`Tab`：
```js
import { Tab, Tabs } from 'vant';
import 'vant/lib/vant-css/tab.css';
export default {
components: {
'van-tab': Tab,
'van-tabs': Tabs
}
};
```
### 代码演示
#### 基础用法

99
docs/examples-docs/tag.md
View File

@ -1,87 +1,60 @@
<style>
.tags-container {
padding: 5px 15px;
.demo-tag {
.van-tag + .van-tag {
margin-left: 10px;
}
.van-tag {
&:first-of-type {
margin-left: 15px;
}
}
}
</style>
## Tag 标记
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Tag`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tag`组件了：
```js
import Vue from 'vue';
``` javascript
import { Tag } from 'vant';
import 'vant/lib/vant-css/tag.css';
Vue.component(Tag.name, Tag);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Tag`组件，这样只能在你注册的组件中使用`Tag`：
```js
import { Tag } from 'vant';
import 'vant/lib/vant-css/tag.css';
export default {
components: {
'van-tag': Tag
}
};
```
### 代码演示
#### 基础用法
`Tag`默认是灰色，另外还有有三种类型，`danger`、`success`、`primary`，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。
通过 type 属性控制 Tag 颜色，默认为灰色
:::demo 基础用法
```html
<div class="tags-container">
<van-tag>返现</van-tag>
</div>
<div class="tags-container">
<van-tag type="danger">返现</van-tag>
<van-tag type="success">四字标签</van-tag>
<van-tag type="primary">一</van-tag>
</div>
<van-tag>标签</van-tag>
<van-tag type="danger">标签</van-tag>
<van-tag type="success">标签</van-tag>
<van-tag type="primary">标签</van-tag>
```
:::
#### 高级用法
#### 空心样式
设置`plain`属性设置为空心样式
设置`plain`为`true`时表示空心的`tag`，还可以设置`mark`为`true`，表示是否为标记。
:::demo 高级用法
:::demo 空心样式
```html
<div class="tags-container">
<van-tag>返现</van-tag>
<van-tag plain>返现</van-tag>
</div>
<div class="tags-container">
<van-tag type="danger">返现</van-tag>
<van-tag plain type="danger">返现</van-tag>
</div>
<div class="tags-container">
<van-tag type="primary">返现</van-tag>
<van-tag plain type="primary">返现</van-tag>
</div>
<div class="tags-container">
<van-tag type="success">返现</van-tag>
<van-tag plain type="success">返现</van-tag>
</div>
<van-tag plain>标签</van-tag>
<van-tag plain type="danger">标签</van-tag>
<van-tag plain type="primary">标签</van-tag>
<van-tag plain type="success">标签</van-tag>
```
:::
#### 标记样式
通过`mark`设置为标记样式
:::demo 标记样式
```html
<van-tag mark>标签</van-tag>
<van-tag mark type="danger">标签</van-tag>
<van-tag mark type="primary">标签</van-tag>
<van-tag mark type="success">标签</van-tag>
```
:::
@ -89,12 +62,12 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| plain | 是否是空心tag | `boolean` | `false` | |
| mark | 是否是标记 | `boolean` | `false` | |
| type | tag类型 | `string` | `''` | `primary`, `success`, `danger` |
| type | 类型 | `String` | `''`| `primary` `success` `danger` |
| plain | 是否为空心样式 | `Boolean` | `false` | |
| mark | 是否为标记样式 | `Boolean` | `false` | |
### Slot
| name | 描述 |
|-----------|-----------|
| - | 自定义tag显示内容 |
| - | 自定义 Tag 显示内容 |

8
docs/examples-docs/toast.md
View File

@ -7,7 +7,7 @@
</style>
<script>
import { Toast } from 'src/index';
import { Toast } from 'packages/index';
export default {
methods: {
@ -85,7 +85,7 @@ import { Toast } from 'vant';
<van-button @click="showCustomizedToast(5000)">倒数5秒</van-button>
<script>
import { Toast } from 'src/index';
import { Toast } from 'packages/index';
export default {
methods: {
@ -137,7 +137,7 @@ export default {
<van-button @click="closeToast">关闭</van-button>
<script>
import { Toast } from 'src/index';
import { Toast } from 'packages/index';
export default {
methods: {
@ -161,7 +161,7 @@ export default {
<van-button @click="showHtmlToast">打开</van-button>
<script>
import { Toast } from 'src/index';
import { Toast } from 'packages/index';
export default {
methods: {

26
docs/examples-docs/uploader.md
View File

@ -17,36 +17,12 @@ export default {
## Uploader 图片上传
### 使用指南
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
#### 全局注册
你可以在全局注册`Uploader`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Uploader`组件了：
```js
import Vue from 'vue';
``` javascript
import { Uploader } from 'vant';
import 'vant/lib/vant-css/uploader.css';
Vue.component(Uploader.name, Uploader);
```
#### 局部注册
如果你只是想在某个组件中使用，你可以在对应组件中注册`Uploader`组件，这样只能在你注册的组件中使用`Uploader`：
```js
import { Uploader } from 'vant';
import 'vant/lib/vant-css/uploader.css';
export default {
components: {
'van-uploader': Uploader
}
};
```
### 代码演示
#### 基础用法

114
docs/src/ExamplesApp.vue
View File

@ -54,96 +54,42 @@ export default {
</script>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
body {
-webkit-font-smoothing: antialiased;
}
a {
color: #4078c0;
text-decoration: none;
}
body, html {
height: 100%;
}
body, html {
height: 100%;
}
.examples-container {
height: 100%;
overflow: auto;
position: relative;
-webkit-overflow-scrolling: touch;
body {
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
&::-webkit-scrollbar {
width: 0;
}
}
.examples-container {
height: 100%;
overflow: auto;
background: #f8f8f8;
position: relative;
-webkit-overflow-scrolling: touch;
}
.page-back {
display: inline-block;
.footer {
margin-top: 30px;
width: 100%;
padding: 10px 0 20px;
background: #f8f8f8;
&.footer-fixed {
position: absolute;
top: 12px;
left: 10px;
width: 40px;
height: 40px;
text-align: center;
color: #333;
transform: rotate(180deg);
i {
font-size: 24px;
line-height: 40px;
}
bottom: 0;
left: 0;
}
}
.demo-title {
font-size: 16px;
display: block;
line-height: 1;
padding: 20px 15px 0;
}
.demo-sub-title {
font-size: 14px;
font-weight: normal;
color: #999;
padding: 0 15px;
margin: 30px 0 10px;
}
.footer {
margin-top: 30px;
width: 100%;
padding: 10px 0 20px;
background: #f8f8f8;
&.footer-fixed {
position: absolute;
bottom: 0;
left: 0;
}
}
.zanui-logo {
display: block;
margin: 0 auto;
width: 150px;
height: auto;
}
.zanui-logo {
display: block;
margin: 0 auto;
width: 150px;
height: auto;
}
</style>

1
docs/src/ExamplesDocsApp.vue
View File

@ -7,7 +7,6 @@
</template>
<script>
import 'highlight.js/styles/color-brewer.css';
import docConfig from './doc.config';
export default {

2
docs/src/components/demo-block.vue
View File

@ -6,6 +6,8 @@
<script>
export default {
name: 'demo-block',
computed: {
component() {
return this.$route.path.split('/').pop();

2
docs/src/components/demo-list.vue
View File

@ -13,7 +13,7 @@
</template>
<script>
import docConfig from '../doc.config.js';
import docConfig from '../doc.config';
import MobileNav from './mobile-nav';
export default {

14
docs/src/components/example-block.vue
View File

@ -1,14 +0,0 @@
<template>
<div class="example-block">
<h2 class="demo-sub-title" v-text="title"></h2>
<slot></slot>
</div>
</template>
<script>
export default {
props: {
title: String
}
};
</script>

19
docs/src/components/mobile-computed.js
View File

@ -1,19 +0,0 @@
import MobilePopup from './mobile-popup.vue';
export default {
components: {
MobilePopup
},
computed: {
mobileUrl() {
return '/zanui/vue/examples' + location.pathname.slice(10);
}
},
data() {
return {
mobileShow: false
};
}
};

51
docs/src/components/mobile-popup.vue
View File

@ -1,51 +0,0 @@
<template>
<van-popup v-model="currentValue" :lock-on-scroll="true">
<div class="mobile-popup">
<iframe :src="url" class="mobile-popup-iframe"></iframe>
</div>
</van-popup>
</template>
<script>
export default {
props: {
url: String,
value: {}
},
data() {
return {
currentValue: this.value
};
},
watch: {
currentValue(val) {
this.$emit('input', val);
},
value(val) {
console.log(val);
this.currentValue = val;
}
}
};
</script>
<style>
.mobile-popup {
width: 375px;
height: 650px;
background: url(https://b.yzcdn.cn/v2/image/wap/zanui-mobile-container.png) no-repeat;
}
.mobile-popup-iframe {
width: 100%;
box-sizing: border-box;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
position: relative;
top: 64px;
height: 586px;
}
</style>

125
docs/src/doc.config.js
View File

@ -26,6 +26,10 @@ module.exports = {
"title": "快速上手",
noExample: true
},
{
"title": "业务组件",
"link": "/zanui/captain/component/quickstart"
},
{
"path": "/changelog",
"title": "更新日志",
@ -36,7 +40,7 @@ module.exports = {
]
},
{
"name": "Vant组件",
"name": "组件",
"showInMobile": true,
"groups": [
{
@ -46,13 +50,17 @@ module.exports = {
"path": "/layout",
"title": "Layout 布局"
},
{
"path": "/badge",
"title": "Badge 徽章"
},
{
"path": "/button",
"title": "Button 按钮"
},
{
"path": "/icon",
"title": "Icon 图标"
"path": "/card",
"title": "Card 图文组件"
},
{
"path": "/cell",
@ -60,43 +68,55 @@ module.exports = {
},
{
"path": "/cell-swipe",
"title": "Cell Swipe 滑动单元格"
"title": "CellSwipe 滑动单元格"
},
{
"path": "/progress",
"title": "Progress 进度条"
"path": "/icon",
"title": "Icon 图标"
},
{
"path": "/card",
"title": "Card 图文组件"
"path": "/image-preview",
"title": "ImagePreview 图片预览"
},
{
"path": "/panel",
"title": "Panel 面板"
"path": "/lazyload",
"title": "Lazyload 图片懒加载"
},
{
"path": "/loading",
"title": "Loading 加载"
},
{
"path": "/notice-bar",
"title": "NoticeBar 通告栏"
},
{
"path": "/panel",
"title": "Panel 面板"
},
{
"path": "/popup",
"title": "Popup 弹出菜单"
},
{
"path": "/progress",
"title": "Progress 进度条"
},
{
"path": "/quantity",
"title": "Quantity 数量选择"
},
{
"path": "/steps",
"title": "Steps 步骤条"
},
{
"path": "/tag",
"title": "Tag 标记"
},
{
"path": "/badge",
"title": "Badge 徽章"
},
{
"path": "/tab",
"title": "Tab 标签"
},
{
"path": "/popup",
"title": "Popup 弹出菜单"
"path": "/tag",
"title": "Tag 标记"
},
{
"path": "/swipe",
@ -106,21 +126,9 @@ module.exports = {
"path": "/search",
"title": "Search 搜索"
},
{
"path": "/quantity",
"title": "Quantity 数量选择"
},
{
"path": "/waterfall",
"title": "Waterfall 瀑布流"
},
{
"path": "/image-preview",
"title": "ImagePreview 图片预览"
},
{
"path": "/lazyload",
"title": "Lazyload 图片懒加载"
}
]
},
@ -128,8 +136,8 @@ module.exports = {
"groupName": "表单",
"list": [
{
"path": "/switch",
"title": "Switch 开关"
"path": "/checkbox",
"title": "Checkbox 复选框"
},
{
"path": "/field",
@ -140,8 +148,8 @@ module.exports = {
"title": "Radio 单选框"
},
{
"path": "/checkbox",
"title": "Checkbox 复选框"
"path": "/switch",
"title": "Switch 开关"
},
{
"path": "/uploader",
@ -157,20 +165,53 @@ module.exports = {
"title": "Actionsheet 行动按钮"
},
{
"path": "/toast",
"title": "Toast 轻提示"
"path": "/datetime-picker",
"title": "DatetimePicker 时间选择"
},
{
"path": "/dialog",
"title": "Dialog 弹出框"
},
{
"path": "/picker",
"title": "Picker 选择器"
},
{
"path": "/datetime-picker",
"title": "Datetime Picker 时间选择"
"path": "/toast",
"title": "Toast 轻提示"
}
]
},
{
"groupName": "业务组件",
"list": [
{
"path": "/deep-select",
"title": "DeepSelect 分类选择组件"
},
{
"path": "/dialog",
"title": "Dialog 弹出框"
"path": "/express-way",
"title": "ExpressWay 配送方式"
},
{
"path": "/goods-action",
"title": "GoodsAction 商品操作"
},
{
"path": "/invalid-goods",
"title": "InvalidGoods 不可用商品列表"
},
{
"path": "/order-goods",
"title": "OrderGoods 下单页商品列表"
},
{
"path": "/pay-order",
"title": "PayOrder 提交订单栏"
},
{
"path": "/switch-cell",
"title": "SwitchCell 开关单元格"
}
]
}

12
docs/src/examples.js
View File

@ -2,15 +2,15 @@ import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './ExamplesApp';
import routes from './router.config';
import ZanUI from 'src/index';
import Vant, { Lazyload } from 'packages';
import ZanDoc from 'zan-doc';
import DemoList from './components/demo-list';
import 'packages/vant-css/src/index.css';
import 'zan-doc/src/helper/touch-simulator';
import DemoList from './components/demo-list.vue';
Vue.use(ZanUI);
Vue.use(Vant);
Vue.use(ZanDoc);
Vue.use(ZanUI.Lazyload, {
Vue.use(Lazyload, {
lazyComponent: true
});
Vue.use(VueRouter);
@ -30,7 +30,7 @@ router.beforeEach((to, from, next) => {
if (container) {
document.querySelector('.examples-container').scrollTop = 0;
}
next()
next();
});
new Vue({ // eslint-disable-line

35
docs/src/index.js
View File

@ -2,32 +2,18 @@ import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './ExamplesDocsApp';
import routes from './router.config';
import ZanUI from 'src/index.js';
import ZanDoc from 'zan-doc';
import packageJson from '../../package.json';
import DemoBlock from './components/demo-block';
const global = {
version: packageJson.version
};
window._global = global;
import '../assets/docs.css';
import 'packages/vant-css/src/index.css';
function isMobile() {
const isMobile = (function() {
var platform = navigator.userAgent.toLowerCase();
return (/(android|bb\d+|meego).+mobile|kdtunion|weibo|m2oapp|micromessenger|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i).test(platform) ||
(/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i).test(platform.substr(0, 4));
}
})();
Vue.use(VueRouter);
Vue.use(ZanUI);
Vue.use(ZanDoc);
Vue.use(ZanUI.Lazyload, {
lazyComponent: true
});
Vue.component('demo-block', DemoBlock);
Vue.component(DemoBlock.name, DemoBlock);
const routesConfig = routes();
routesConfig.push({
@ -42,19 +28,20 @@ const router = new VueRouter({
});
router.beforeEach((route, redirect, next) => {
if (route.path !== '/') {
window.scrollTo(0, 0);
}
const pathname = '/zanui/vue/examples';
if (isMobile()) {
window.location.replace(pathname);
if (isMobile) {
window.location.replace('/zanui/vue/examples');
return;
}
document.title = route.meta.title || document.title;
next();
});
router.afterEach(() => {
if (!isMobile) {
window.scrollTo(0, 0);
}
});
new Vue({ // eslint-disable-line
render: h => h(App),
router

27
docs/src/router.config.js
View File

@ -1,4 +1,6 @@
const navs = require('./doc.config')['zh-CN'].nav;
import componentDocs from '../examples-dist/entry-docs';
import componentDemos from '../examples-dist/entry-demos';
const registerRoute = (isExample) => {
let route = [];
@ -9,31 +11,26 @@ const registerRoute = (isExample) => {
if (nav.groups) {
nav.groups.forEach(group => {
group.list.forEach(nav => {
addRoute(nav);
});
group.list.forEach(addRoute);
});
} else if (nav.children) {
nav.children.forEach(nav => {
addRoute(nav);
});
nav.children.forEach(addRoute);
} else {
addRoute(nav);
}
});
function addRoute(page) {
const component = isExample
? require(`../examples-dist${page.path}.vue`)
: require(`../examples-docs${page.path}.md`);
route.push({
path: '/component' + page.path,
component: component.default || component
});
const { path } = page;
if (path) {
const name = path.replace('/', '');
route.push({
path: '/component' + path,
component: isExample ? componentDemos[name] : componentDocs[name]
});
}
}
// console.log(route);
return route;
};

4
lerna.json
View File

@ -1,4 +0,0 @@
{
"lerna": "2.0.0-beta.31",
"version": "independent"
}

64
package.json
View File

@ -1,6 +1,6 @@
{
"name": "vant",
"version": "0.7.6",
"version": "0.8.7",
"description": "有赞vue wap组件库",
"main": "lib/vant.js",
"style": "lib/vant-css/index.css",
@ -11,12 +11,11 @@
"packages"
],
"scripts": {
"bootstrap": "yarn || npm i",
"bootstrap": "yarn || npm i && cd ./packages/vant-css/ && yarn || npm i && cd ../../",
"dev": "npm run build:file && webpack-dev-server --inline --config build/webpack.config.dev.js --content-base ./",
"build:file": "node build/bin/build-entry.js",
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js --presets=es2015",
"build:components": "cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.components.js --color",
"build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js --color && cp -R packages/vant-css/lib/ lib/vant-css",
"build:components": "node build/bin/build-components.js --color",
"build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js --color && mkdir lib/vant-css && cp -R packages/vant-css/lib/ lib/vant-css",
"build:vant": "cross-env NODE_ENV=production webpack --progress --hide-modules --color --config build/webpack.build.js && cross-env NODE_ENV=production webpack -p --progress --hide-modules --color --config build/webpack.build.js",
"deploy": "npm run deploy:docs && npm run deploy:cdn && gh-pages -d docs/dist --remote youzan && rimraf docs/dist",
"deploy:cdn": "superman cdn /zanui/vue docs/dist/*.js docs/dist/*.css",
@ -27,6 +26,7 @@
"test": "karma start test/unit/karma.conf.js --single-run",
"test:coverage": "open test/unit/coverage/lcov-report/index.html",
"test:watch": "karma start test/unit/karma.conf.js",
"test:single": "node ./test/unit/selector.js",
"release": "npm run bootstrap && sh build/release.sh"
},
"repository": {
@ -41,57 +41,60 @@
"author": "youzanfe",
"license": "ISC",
"dependencies": {
"raf.js": "0.0.4",
"vue-lazyload": "^1.0.6"
"babel-runtime": "6.x",
"vue-lazyload": "^1.1.2"
},
"peerDependencies": {
"vue": "2.4.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"autoprefixer": "^7.1.3",
"avoriaz": "2.0.0",
"babel-cli": "^6.14.0",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-helper-vue-jsx-merge-props": "^2.0.2",
"babel-loader": "^7.1.2",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.16.0",
"babel-runtime": "^6.25.0",
"chai": "^4.1.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"chai": "^4.1.1",
"cheerio": "^0.22.0",
"codecov": "^2.2.0",
"cross-env": "^5.0.1",
"css-loader": "^0.28.4",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"eslint-plugin-vue": "^2.1.0",
"extract-text-webpack-plugin": "2.1.2",
"extract-text-webpack-plugin": "2.0.0",
"felint": "^0.5.0-alpha.3",
"file-loader": "^0.11.2",
"file-save": "^0.2.0",
"friendly-errors-webpack-plugin": "^1.6.1",
"gh-pages": "^1.0.0",
"gulp": "^3.9.1",
"gulp-cssmin": "^0.2.0",
"gulp-postcss": "^7.0.0",
"gulp-util": "^3.0.8",
"highlight.js": "^9.12.0",
"html-webpack-plugin": "^2.29.0",
"isparta-loader": "^2.0.0",
"json-templater": "^1.0.4",
"karma": "^1.7.0",
"karma": "^1.7.1",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-sinon-chai": "^1.2.4",
"karma-sinon-chai": "^1.3.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "^0.0.31",
"karma-webpack": "^2.0.4",
"lerna": "^2.0.0",
"markdown-it": "^8.3.1",
"markdown-it": "^8.4.0",
"markdown-it-container": "^2.0.0",
"mocha": "^3.4.2",
"optimize-css-assets-webpack-plugin": "^3.0.0",
"postcss": "^6.0.8",
"optimize-css-assets-webpack-plugin": "^3.1.1",
"postcss": "^6.0.10",
"postcss-easy-import": "^2.1.0",
"postcss-loader": "^2.0.6",
"precss": "^2.0.0",
@ -104,17 +107,16 @@
"uppercamelcase": "^3.0.0",
"url-loader": "^0.5.9",
"vue": "^2.4.2",
"vue-hot-reload-api": "^2.1.0",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.0.2",
"vue-markdown-loader": "^2.0.0",
"vue-loader": "^13.0.4",
"vue-markdown-loader": "^2.1.0",
"vue-router": "^2.7.0",
"vue-sfc-compiler": "^0.0.2",
"vue-style-loader": "^3.0.0",
"vue-template-compiler": "^2.4.2",
"vue-template-es2015-compiler": "^1.5.3",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1",
"webpack-merge": "^4.1.0",
"zan-doc": "^0.1.4"
"zan-doc": "^0.2.10"
}
}

8
packages/actionsheet/CHANGELOG.md
View File

@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版

26
packages/actionsheet/README.md
View File

@ -1,26 +0,0 @@
# @youzan/<%= name %>
!!! 请在此处填写你的文档最简单描述 !!!
[![version][version-image]][download-url]
[![download][download-image]][download-url]
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
## Demo
## Usage
## API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |
## License
[MIT](https://opensource.org/licenses/MIT)

3
packages/actionsheet/index.js
View File

@ -1,3 +0,0 @@
import ActionSheet from './src/actionsheet';
export default ActionSheet;

74
packages/actionsheet/index.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<transition name="van-actionsheet-float">
<div :class="['van-actionsheet', { 'van-actionsheet--withtitle': title }]" v-show="value">
<div class="van-actionsheet__header" v-if="title">
<h3 v-text="title" />
<van-icon name="close" @click.stop="$emit('input', false)" />
</div>
<ul v-if="!title" class="van-actionsheet__list">
<li
v-for="(item, index) in actions"
:key="index"
:class="['van-actionsheet__item', item.className, { 'van-actionsheet__item--loading': item.loading }]"
@click.stop="onClickItem(item)">
<template v-if="!item.loading">
<span class="van-actionsheet__name">{{ item.name }}</span>
<span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
</template>
<van-loading v-else class="van-actionsheet__loading" type="circle" color="black" />
</li>
</ul>
<div class="van-actionsheet__item van-actionsheet__cancel" @click.stop="$emit('input', false)" v-if="cancelText">{{ cancelText }}</div>
<div class="van-actionsheet__content" v-else>
<slot></slot>
</div>
</div>
</transition>
</template>
<script>
import Popup from '../mixins/popup';
import Icon from '../icon';
import Loading from '../loading';
export default {
name: 'van-actionsheet',
mixins: [Popup],
components: {
[Icon.name]: Icon,
[Loading.name]: Loading
},
props: {
value: Boolean,
actions: {
type: Array,
default: () => []
},
title: String,
cancelText: String,
overlay: {
type: Boolean,
default: true
},
closeOnClickOverlay: {
type: Boolean,
default: true
}
},
mounted() {
this.value && this.open();
},
methods: {
onClickItem(item) {
if (typeof item.callback === 'function') {
item.callback(item);
}
}
}
};
</script>

10
packages/actionsheet/package.json
View File

@ -1,10 +0,0 @@
{
"name": "<%= name %>",
"version": "<%= version %>",
"description": "<%= description %>",
"main": "./lib/index.js",
"author": "<%= author %>",
"license": "<%= license %>",
"devDependencies": {},
"dependencies": {}
}

100
packages/actionsheet/src/actionsheet.vue
View File

@ -1,100 +0,0 @@
<template>
<transition name="actionsheet-float">
<div class="van-actionsheet" :class="[ title ? 'van-actionsheet--withtitle' : '' ]" v-show="currentValue">
<div class="van-actionsheet__header" v-if="title">
<h3 v-text="title"></h3>
<van-icon name="close" @click.stop="currentValue = false"></van-icon>
</div>
<template v-if="!title">
<ul class="van-actionsheet__list">
<li
v-for="(item, index) in actions"
:key="index"
class="van-actionsheet__item"
:class="[item.className, item.loading ? 'van-actionsheet__item--loading' : '']"
@click.stop="handleItemClick(item)">
<template v-if="!item.loading">
<span class="van-actionsheet__name">{{ item.name }}</span>
<span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
</template>
<template v-else>
<van-loading class="van-actionsheet__loading" type="circle" color="black"></van-loading>
</template>
</li>
</ul>
<a class="van-actionsheet__button" @click.stop="currentValue = false" v-if="cancelText">{{ cancelText }}</a>
</template>
<template v-else>
<div class="van-actionsheet__content">
<slot></slot>
</div>
</template>
</div>
</transition>
</template>
<script>
import Popup from 'src/mixins/popup';
import VanLoading from 'packages/loading';
import VanIcon from 'packages/icon';
export default {
name: 'van-actionsheet',
mixins: [Popup],
components: {
VanLoading,
VanIcon
},
props: {
value: {},
actions: {
type: Array,
default: () => []
},
title: String,
cancelText: String,
overlay: {
type: Boolean,
default: true
},
closeOnClickOverlay: {
type: Boolean,
default: true
}
},
data() {
return {
currentValue: this.value
};
},
watch: {
currentValue(val) {
this.$emit('input', val);
},
value(val) {
this.currentValue = val;
}
},
mounted() {
if (this.value) {
this.currentValue = true;
this.open();
}
},
methods: {
handleItemClick(item) {
if (item.callback && typeof item.callback === 'function') {
item.callback(item);
}
}
}
};
</script>

3
packages/badge-group/index.js
View File

@ -1,3 +0,0 @@
import BadgeGroup from '../badge/src/badge-group';
export default BadgeGroup;

25
packages/badge-group/index.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<div class="van-badge-group">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'van-badge-group',
props: {
// 当前激活 tab 面板的 key
activeKey: {
type: [Number, String],
default: 0
}
},
data() {
return {
badges: []
};
}
};
</script>

8
packages/badge/CHANGELOG.md
View File

@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版

26
packages/badge/README.md
View File

@ -1,26 +0,0 @@
# @youzan/<%= name %>
!!! 请在此处填写你的文档最简单描述 !!!
[![version][version-image]][download-url]
[![download][download-image]][download-url]
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
## Demo
## Usage
## API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |
## License
[MIT](https://opensource.org/licenses/MIT)

3
packages/badge/index.js
View File

@ -1,3 +0,0 @@
import Badge from './src/badge';
export default Badge;

22
packages/badge/src/badge.vue → packages/badge/index.vue
View File

@ -1,13 +1,9 @@
<template>
<a
class="van-badge"
:class="{ 'van-badge--select': isSelect }"
:href="url"
@click="handleClick">
<div class="van-badge__active"></div>
<div v-if="info" class="van-badge__info">{{info}}</div>
{{title}}
</a>
<a :class="['van-badge', { 'van-badge--select': isSelect }]" :href="url" @click="onClick">
<div class="van-badge__active"></div>
<div v-if="info" class="van-badge__info">{{ info }}</div>
{{ title }}
</a>
</template>
<script>
@ -40,12 +36,8 @@ export default {
},
methods: {
handleClick(e) {
this.$emit('click', e, {
title: this.title,
url: this.url,
info: this.info
});
onClick() {
this.$emit('click', this.$parent.badges.indexOf(this));
}
}
};

10
packages/badge/package.json
View File

@ -1,10 +0,0 @@
{
"name": "<%= name %>",
"version": "<%= version %>",
"description": "<%= description %>",
"main": "./lib/index.js",
"author": "<%= author %>",
"license": "<%= license %>",
"devDependencies": {},
"dependencies": {}
}

25
packages/badge/src/badge-group.vue
View File

@ -1,25 +0,0 @@
<template>
<div class="van-badge-group">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'van-badge-group',
props: {
// 当前激活 tab 面板的 key
activeKey: {
type: [Number, String],
default: 0
}
},
data() {
return {
badges: []
};
}
};
</script>

8
packages/button/CHANGELOG.md
View File

@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版

26
packages/button/README.md
View File

@ -1,26 +0,0 @@
# @youzan/<%= name %>
!!! 请在此处填写你的文档最简单描述 !!!
[![version][version-image]][download-url]
[![download][download-image]][download-url]
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
## Demo
## Usage
## API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |
## License
[MIT](https://opensource.org/licenses/MIT)

77
packages/button/index.js
View File

@ -1,3 +1,76 @@
import Button from './src/button';
import Loading from '../loading';
export default Button;
const ALLOWED_SIZE = ['mini', 'small', 'normal', 'large'];
const ALLOWED_TYPE = ['default', 'danger', 'primary'];
export default {
name: 'van-button',
components: {
[Loading.name]: Loading
},
props: {
block: Boolean,
loading: Boolean,
disabled: Boolean,
nativeType: String,
bottomAction: Boolean,
tag: {
type: String,
default: 'button'
},
type: {
type: String,
default: 'default',
validator: value => ALLOWED_TYPE.indexOf(value) > -1
},
size: {
type: String,
default: 'normal',
validator: value => ALLOWED_SIZE.indexOf(value) > -1
}
},
methods: {
onClick(event) {
if (!this.loading && !this.disabled) {
this.$emit('click', event);
}
}
},
render(h) {
const { type, loading, disabled, tag: Tag } = this;
return (
<Tag
type={this.nativeType}
disabled={disabled}
class={[
'van-button',
'van-button--' + type,
'van-button--' + this.size,
{
'van-button--disabled': disabled,
'van-button--loading': loading,
'van-button--block': this.block,
'van-button--bottom-action': this.bottomAction
}
]}
onClick={this.onClick}
>
{loading
? <van-loading
class="van-button__icon-loading"
type="circle"
color={type === 'default' ? 'black' : 'white'}
/>
: null}
<span class="van-button__text">
{this.$slots.default}
</span>
</Tag>
);
}
};

10
packages/button/package.json
View File

@ -1,10 +0,0 @@
{
"name": "@youzan/van-button",
"version": "0.0.1",
"description": "button component",
"main": "./index.js",
"author": "niunai",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}

93
packages/button/src/button.js
View File

@ -1,93 +0,0 @@
/**
* @module components/button
* @desc 按钮
* @param {string} [type=default] - 显示类型，接受 default, primary, danger
* @param {boolean} [disabled=false] - 禁用
* @param {string} [size=normal] - 尺寸，接受 normal, mini, small, large
* @param {string} [native-type] - 原生 type 属性
* @param {slot} - 显示文本
*
* @example
* <van-button size="large" type="primary">按钮</van-button>
*/
import VanLoading from 'packages/loading';
const ALLOWED_SIZE = ['mini', 'small', 'normal', 'large'];
const ALLOWED_TYPE = ['default', 'danger', 'primary'];
export default {
name: 'van-button',
components: {
'van-loading': VanLoading
},
props: {
disabled: Boolean,
loading: Boolean,
block: Boolean,
bottomAction: Boolean,
tag: {
type: String,
default: 'button'
},
nativeType: String,
type: {
type: String,
default: 'default',
validator(value) {
return ALLOWED_TYPE.indexOf(value) > -1;
}
},
size: {
type: String,
default: 'normal',
validator(value) {
return ALLOWED_SIZE.indexOf(value) > -1;
}
}
},
methods: {
handleClick(e) {
if (this.loading || this.disabled) return;
this.$emit('click', e);
}
},
render(h) {
const { type, nativeType, size, disabled, loading, block, bottomAction } = this;
const Tag = this.tag;
return (
<Tag
type={nativeType}
disabled={disabled}
class={[
'van-button',
'van-button--' + type,
'van-button--' + size,
{
'van-button--disabled': disabled,
'van-button--loading': loading,
'van-button--block': block,
'van-button--bottom-action': bottomAction
}
]}
onClick={this.handleClick}
>
{
loading
? <van-loading
class="van-button__icon-loading"
type="circle"
color={type === 'default' ? 'black' : 'white'}>
</van-loading>
: null
}
<span class="van-button__text">{this.$slots.default}</span>
</Tag>
);
}
};

8
packages/card/CHANGELOG.md
View File

@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版

26
packages/card/README.md
View File

@ -1,26 +0,0 @@
# @youzan/<%= name %>
!!! 请在此处填写你的文档最简单描述 !!!
[![version][version-image]][download-url]
[![download][download-image]][download-url]
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
## Demo
## Usage
## API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |
## License
[MIT](https://opensource.org/licenses/MIT)

3
packages/card/index.js
View File

@ -1,3 +0,0 @@
import Card from './src/card';
export default Card;

0
packages/card/src/card.vue → packages/card/index.vue
View File

10
packages/card/package.json
View File

@ -1,10 +0,0 @@
{
"name": "@youzan/van-card",
"version": "0.0.1",
"description": "card component",
"main": "./index.js",
"author": "zhangmin <zhangmin@youzan.com>",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}

3
packages/cell-group/index.js
View File

@ -1,3 +0,0 @@
import CellGroup from '../cell/src/cell-group';
export default CellGroup;

0
packages/cell/src/cell-group.vue → packages/cell-group/index.vue
View File

142
packages/cell-swipe/components/CellSwipe.vue
View File

@ -1,142 +0,0 @@
<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
View File

@ -1,2 +0,0 @@
import CellSwipe from './components/CellSwipe.vue'
export default CellSwipe;

121
packages/cell-swipe/index.vue Normal file
View File

@ -0,0 +1,121 @@
<template>
<div
v-clickoutside:touchstart="swipeMove"
class="van-cell-swipe"
@click="swipeMove()"
@touchstart="startDrag"
@touchmove="onDrag"
@touchend="endDrag"
@touchcancel="endDrag"
>
<div class="van-cell-swipe__wrapper" :style="wrapperStyle" @transitionend="swipe = false">
<div class="van-cell-swipe__left" v-if="leftWidth">
<slot name="left"></slot>
</div>
<slot></slot>
<div class="van-cell-swipe__right" v-if="rightWidth">
<slot name="right"></slot>
</div>
</div>
</div>
</template>
<script>
import Clickoutside from '../utils/clickoutside';
export default {
name: 'van-cell-swipe',
props: {
leftWidth: {
type: Number,
default: 0
},
rightWidth: {
type: Number,
default: 0
}
},
directives: {
Clickoutside
},
data() {
return {
offset: 0
};
},
computed: {
wrapperStyle() {
return {
transform: `translate3d(${this.offset}px, 0, 0)`
};
}
},
methods: {
resetSwipeStatus() {
this.swiping = false; // 是否正在拖动
this.opened = true; // 记录是否滑动左右 或者 注册
},
swipeMove(offset = 0) {
this.offset = offset;
offset && (this.swiping = true);
},
swipeLeaveTransition(direction) {
const { offset, leftWidth, rightWidth } = this;
// right
if (direction > 0 && -offset > rightWidth * 0.4 && rightWidth > 0) {
this.swipeMove(-rightWidth);
this.resetSwipeStatus();
// left
} else if (direction < 0 && offset > leftWidth * 0.4 && leftWidth > 0) {
this.swipeMove(leftWidth);
this.resetSwipeStatus();
} else {
this.swipeMove();
}
},
startDrag(event) {
this.startX = event.changedTouches[0].pageX;
this.startY = event.changedTouches[0].pageY;
},
onDrag(event) {
if (this.opened) {
!this.swiping && this.swipeMove();
this.opened = false;
return;
}
const offsetTop = event.changedTouches[0].pageY - this.startY;
const offsetLeft = event.changedTouches[0].pageX - this.startX;
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);
const swiping = !(x < 5 || (x >= 5 && y >= x * 1.73));
if (swiping) {
event.preventDefault();
this.swipeMove(offsetLeft);
};
},
endDrag() {
if (this.swiping) {
this.swipeLeaveTransition(this.offset > 0 ? -1 : 1);
};
}
}
};
</script>

8
packages/cell/CHANGELOG.md
View File

@ -1,8 +0,0 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版

26
packages/cell/README.md
View File

@ -1,26 +0,0 @@
# @youzan/<%= name %>
!!! 请在此处填写你的文档最简单描述 !!!
[![version][version-image]][download-url]
[![download][download-image]][download-url]
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
## Demo
## Usage
## API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |
## License
[MIT](https://opensource.org/licenses/MIT)

3
packages/cell/index.js
View File

@ -1,3 +0,0 @@
import Cell from './src/cell';
export default Cell;

Some files were not shown because too many files have changed in this diff Show More