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

.babelrc

@@ -1,9 +1,12 @@
 {
   "presets": [
-    "es2015"
+    [
+      "es2015",
+      { "modules": false }
+    ]
   ],
   "plugins": [
     "transform-runtime",
     "transform-vue-jsx"
   ]
-}
+}

README.md

@@ -9,62 +9,76 @@
 
 [![Build Status](https://travis-ci.org/youzan/vant.svg?branch=master)](https://travis-ci.org/youzan/vant) [![Coverage Status](https://img.shields.io/codecov/c/github/youzan/vant/dev.svg)](https://codecov.io/github/youzan/vant?branch=dev) [![npm version](https://img.shields.io/npm/v/vant.svg?style=flat)](https://www.npmjs.com/package/vant) [![downloads](https://img.shields.io/npm/dt/vant.svg)](https://www.npmjs.com/package/vant) 
  
-## 一、安装
+[访问中文版](./README.zh-CN.md)
+
+## Install
 
 ```shell
 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';
+   ```
  
  
-### 1. 导入所有组件
+### Import all components
  
 ```javascript
 import Vue from 'vue';
 import vant from 'vant';
-// 你也可以使用自己的主题
 import 'vant/lib/vant-css/index.css';
 
 Vue.use(vant);
 ```
  
-### 2. 按需导入组件
+## Development
 
-```javascript
+### Add a new component
-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);
-```
-
-## 三、开发
-
-### 1. 新建一个组件
 
 ```shell
 make init componentName
 ```
 
-### 2. 示例预览
+### Start coding
 
-在`docs/nav.config.json`文件里合适的地方写入组件声明，根据组件类型（JS组件，CSS组件，Form等）进行区分 在`docs/examples-docs`目录里新建同名的md文件，如`waterfall.md`，在项目的根目录下执行以下命令，启动server：
+Start development mode:
 
 ```shell
 npm run dev
 ```
 
-浏览器访问[http://localhost:8080](http://localhost:8080)就可以看到所有组件的示例了。
+Visit [http://localhost:8080](http://localhost:8080) to see an example of all components.
 
-## 四、手机预览
+## Preview
 
-可以手机扫码以下二维码访问手机端demo：
+You can scan the following QR code to access the demo：
 
 ![zanui_vue_mobile_qrcode](https://img.yzcdn.cn/v2/image/youzanyun/zanui/pc/zanui_vue_mobile_preview_03.png)
  
-## 五、开源协议
+## LICENSE
 
-本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。
+[MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)

README.zh-CN.md

@@ -0,0 +1,82 @@
+<p>
+    <a href="https://github.com/youzan/"><img alt="有赞logo" width="36px" src="https://img.yzcdn.cn/public_files/2017/02/09/e84aa8cbbf7852688c86218c1f3bbf17.png" alt="youzan">
+    </a>
+</p>
+<p align="center">
+    <img alt="项目logo" src="https://img.yzcdn.cn/upload_files/2017/04/20/FlkVrSlOr-SGK9qQqtilN6-IFZyT.png">
+</p>
+<p align="center">A Vue.js 2.0 Mobile UI at YouZan</p>
+
+[![Build Status](https://travis-ci.org/youzan/vant.svg?branch=master)](https://travis-ci.org/youzan/vant) [![Coverage Status](https://img.shields.io/codecov/c/github/youzan/vant/dev.svg)](https://codecov.io/github/youzan/vant?branch=dev) [![npm version](https://img.shields.io/npm/v/vant.svg?style=flat)](https://www.npmjs.com/package/vant) [![downloads](https://img.shields.io/npm/dt/vant.svg)](https://www.npmjs.com/package/vant) 
+ 
+## 一、安装
+
+```shell
+npm i -S vant
+```
+ 
+## 二、使用
+ 
+ 
+### 使用 [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);
+```
+
+## 三、开发
+
+### 1. 新建一个组件
+
+```shell
+make init componentName
+```
+
+### 2. 示例预览
+
+在`docs/nav.config.json`文件里合适的地方写入组件声明，根据组件类型（JS组件，CSS组件，Form等）进行区分 在`docs/examples-docs`目录里新建同名的md文件，如`waterfall.md`，在项目的根目录下执行以下命令，启动server：
+
+```shell
+npm run dev
+```
+
+浏览器访问[http://localhost:8080](http://localhost:8080)就可以看到所有组件的示例了。
+
+## 四、手机预览
+
+可以手机扫码以下二维码访问手机端demo：
+
+![zanui_vue_mobile_qrcode](https://img.yzcdn.cn/v2/image/youzanyun/zanui/pc/zanui_vue_mobile_preview_03.png)
+ 
+## 五、开源协议
+
+本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。

build/bin/build-entry.js

@@ -3,18 +3,23 @@ var fs = require('fs');
 var render = require('json-templater/string');
 var uppercamelcase = require('uppercamelcase');
 var path = require('path');
-var chalk = require('chalk');
 
 var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
 var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
-var ISNTALL_COMPONENT_TEMPLATE = '  Vue.component({{name}}.name, {{name}});';
+var ISNTALL_COMPONENT_TEMPLATE = '  {{name}}';
 var MAIN_TEMPLATE = `{{include}}
 
+const version = '{{version}}';
+const components = [
+{{components}}
+];
+
 const install = function(Vue) {
-  /* istanbul ignore if */
   if (install.installed) return;
 
-{{install}}
+  components.forEach(component => {
+    Vue.component(component.name, component);
+  });
 };
 
 /* istanbul ignore if */
@@ -22,9 +27,14 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 
-module.exports = {
+export {
   install,
-  version: '{{version}}',
+  version,
+{{list}}
+};
+export default {
+  install,
+  version,
 {{list}}
 };
 `;
@@ -66,11 +76,11 @@ ComponentNames.forEach(name => {
 
 var template = render(MAIN_TEMPLATE, {
   include: includeComponentTemplate.join('\n'),
-  install: installTemplate.join('\n'),
+  list: listTemplate.join(',\n'),
-  version: process.env.VERSION || require('../../package.json').version,
+  components: installTemplate.join(',\n') || ' ',
-  list: listTemplate.join(',\n')
+  version: process.env.VERSION || require('../../package.json').version
 });
 
 fs.writeFileSync(OUTPUT_PATH, template);
-console.log(chalk.green('[build entry] DONE:' + OUTPUT_PATH));
+console.log('[build entry] DONE:' + OUTPUT_PATH);
 

build/bin/build-lib.js

@@ -0,0 +1,91 @@
+/**
+ * Build npm lib
+ * Steps:
+ * 1. 清理目录
+ * 2. 构建 JS 入口文件
+ * 3. 打包 JS 文件：vant.js && vant.min.js
+ * 4. 构建 CSS 文件：vant-css
+ * 5. 构建每个组件对应的 [component].js
+ * 6. 生成每个组件目录下的 style 入口
+ * 7. 编译 utils
+ */
+
+const fs = require('fs');
+const path = require('path');
+const components = require('../../components.json');
+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 
+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');
+
+// build [component].js
+log('Starting', 'build:component');
+exec('npm run build:components --silent');
+log('Finished', 'build:component');
+
+// build vant-css
+log('Starting', 'build:vant-css');
+exec('npm run build:vant-css --silent');
+log('Finished', 'build:vant-css');
+
+// build style entrys
+log('Starting', 'build:style-entries');
+Object.keys(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 = [];
+  if (fs.existsSync(cssPath)) {
+    content.push(`require('../../vant-css/${componentName}.css');`);
+  }
+  mkdir(dir);
+  writeFile(file, content.join('\n'));
+});
+log('Finished', 'build:style-entries');
+
+// build utils 
+log('Starting', 'build:utils');
+exec('npm run build:utils --silent');
+log('Finished', 'build:utils');
+
+// helpers
+function log(status, action, breakLine) {
+  const now = new Date();
+  const clock = `${breakLine ? '\n' : ''}[${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}]`;
+  console.log(`${chalk.gray(clock)} ${status} '${action ? chalk.cyan.bold(action ) : ''}'`);
+}
+
+function padZero(num) {
+  return (num < 10 ? '0' : '') + num;
+}
+
+function writeFile(pathname, content) {
+  if (!fs.existsSync(pathname)) {
+    fs.closeSync(fs.openSync(pathname, 'w'));
+  }
+  fs.writeFileSync(pathname, content, { encoding: 'utf8' });
+}
+
+function mkdir(pathname) {
+  if (!fs.existsSync(pathname)) {
+    fs.mkdirSync(pathname);
+  }
+}

build/genExamples.js

@@ -11,8 +11,6 @@ function extract(watch = false) {
   });
 }
 
-extract();
+module.exports = function watch(isProduction) {
-
+  extract(!isProduction);
-module.exports = function watch() {
-  extract(true);
 };

build/strip-tags.js

@@ -1,34 +0,0 @@
-/*!
- * strip-tags <https://github.com/jonschlinkert/strip-tags>
- *
- * Copyright (c) 2015 Jon Schlinkert, contributors.
- * Licensed under the MIT license.
- */
-
-'use strict';
-
-var cheerio = require('cheerio');
-
-exports.strip = function(str, tags) {
-  var $ = cheerio.load(str, {decodeEntities: false});
-
-  if (!tags || tags.length === 0) {
-    return str;
-  }
-
-  tags = !Array.isArray(tags) ? [tags] : tags;
-  var len = tags.length;
-
-  while (len--) {
-    $(tags[len]).remove();
-  }
-
-  return $.html();
-};
-
-exports.fetch = function(str, tag) {
-  var $ = cheerio.load(str, {decodeEntities: false});
-  if (!tag) return str;
-
-  return $(tag).html();
-};

build/utils/postcss_pipe.js

@@ -1,29 +0,0 @@
-var config = {
-    'bem': {
-        'shortcuts': {'component': 'b', 'modifier': 'm', 'descendent': 'e'},
-        'separators': {'descendent': '__', 'modifier': '--'}
-    }
-};
-
-// https://github.com/trysound/postcss-easy-import
-var partialImport = require('postcss-easy-import')();
-
-// 这不是bem，虽然名字叫bem，其实它是suit
-// https://github.com/saladcss/saladcss-bem
-var bem = require('saladcss-bem')(config.bem);
-
-// https://github.com/jonathantneal/precss
-var precss = require('precss')();
-
-// https://github.com/postcss/autoprefixer
-var autoprefixer = require('autoprefixer')();
-
-module.exports = function (webpack) {
-  // 顺序很重要
-  return [
-    partialImport,
-    bem,
-    precss,
-    autoprefixer
-  ];
-};

build/webpack.build.js

@@ -1,13 +1,13 @@
-var webpack = require('webpack');
+const webpack = require('webpack');
-var getPostcssPlugin = require('./utils/postcss_pipe');
+const config = require('./webpack.config.dev.js');
-var config = require('./webpack.config.dev.js');
+const isMinify = process.argv.indexOf('-p') !== -1;
 
 config.entry = {
   'vant': './src/index.js'
 };
 
 config.output = {
-  filename: './lib/[name].js',
+  filename: isMinify ? './lib/[name].min.js' : './lib/[name].js',
   library: 'vant',
   libraryTarget: 'umd',
   umdNamedDefine: true
@@ -30,18 +30,13 @@ config.plugins = [
     minimize: true,
     debug: false,
     options: {
-      postcss: getPostcssPlugin,
-      babel: {
-        presets: ['es2015'],
-        plugins: ['transform-runtime', 'transform-vue-jsx']
-      },
       vue: {
         autoprefixer: false,
-        preserveWhitespace: false,
+        preserveWhitespace: false
-        postcss: getPostcssPlugin
       }
     }
-  })
+  }),
+  new webpack.optimize.ModuleConcatenationPlugin()
 ];
 
 delete config.devtool;

build/webpack.build.min.js

@@ -1,20 +0,0 @@
-var webpack = require('webpack');
-var config = require('./webpack.build.js');
-
-config.entry = {
-  'index': './src/index.js'
-};
-
-config.plugins = config.plugins.concat([
-  new webpack.optimize.UglifyJsPlugin({
-    compress: {
-      warnings: false
-    },
-    output: {
-      comments: false
-    },
-    sourceMap: false
-  })
-]);
-
-module.exports = config;

build/webpack.components.js

@@ -1,10 +1,16 @@
-var path = require('path');
+const path = require('path');
-var Components = require('../components.json');
+const Components = require('../components.json');
-var config = require('./webpack.build.js');
+const config = require('./webpack.build.js');
+const webpack = require('webpack');
 
 delete config.devtool;
 
-config.entry = Components;
+const entry = {};
+Object.keys(Components).forEach(key => {
+  entry[key + '/index'] = Components[key];
+});
+
+config.entry = entry;
 
 config.externals = {
   vue: {
@@ -18,8 +24,8 @@ config.externals = {
 config.output = {
   path: path.join(__dirname, '../lib'),
   filename: '[name].js',
-  libraryTarget: 'umd',
+  libraryExport: "default",
-  umdNamedDefine: true
+  libraryTarget: 'umd'
 };
 
 module.exports = config;

build/webpack.config.dev.js

@@ -1,44 +1,19 @@
-var webpack = require('webpack');
+const webpack = require('webpack');
-var path = require('path');
+const path = require('path');
-var slugify = require('transliteration').slugify;
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
-var striptags = require('./strip-tags');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
-var getPostcssPlugin = require('./utils/postcss_pipe');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-var ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const isProduction = process.env.NODE_ENV === 'production';
-const watchExample = require('./genExamples');
+const styleLoaders = [
-
+  { loader: 'css-loader' },
-if (!isProduction) {
+  { loader: 'postcss-loader', options: { sourceMap: true } }
-  watchExample();  
+];
-}
+require('./genExamples')(isProduction);
-
-var StyleExtractPlugin;
-if (process.env.NODE_ENV === 'production') {
-  StyleExtractPlugin = new ExtractTextPlugin('[name].[hash:8].css');
-} else {
-  StyleExtractPlugin = new ExtractTextPlugin('[name].css');
-}
-
-function convert(str) {
-  str = str.replace(/(&#x)(\w{4});/gi, function($0) {
-    return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
-  });
-  return str;
-}
-
-function wrap(render) {
-  return function() {
-    return render.apply(this, arguments)
-      .replace(/\<code v-pre class=\"/, '<code v-pre class="hljs ');
-  };
-};
 
 module.exports = {
   entry: {
-    'vendor': ['vue', 'vue-router', 'zan-doc'],
     'vant-docs': './docs/src/index.js',
     'vant-examples': './docs/src/examples.js'
   },
@@ -46,7 +21,8 @@ module.exports = {
     path: path.join(__dirname, '../docs/dist'),
     publicPath: '/',
     filename: '[name].js',
-    umdNamedDefine: true
+    umdNamedDefine: true,
+    chunkFilename: 'async.[name].js'
   },
   devServer: {
     historyApiFallback: {
@@ -54,37 +30,41 @@ module.exports = {
         { from: /^\/zanui\/vue\/examples/, to: '/examples.html' },
         { from: /^\/zanui\/vue/, to: '/index.html' }
       ]
-    }
+    },
+    stats: 'errors-only'
   },
   resolve: {
-    modules: [
+    modules: [path.join(__dirname, '../node_modules'), 'node_modules'],
-      path.join(__dirname, '../node_modules'),
-      'node_modules'
-    ],
     extensions: ['.js', '.vue', '.css'],
     alias: {
-      'vue$': 'vue/dist/vue.runtime.common.js',
+      vue: 'vue/dist/vue.runtime.esm.js',
-      'src': path.join(__dirname, '../src'),
+      src: path.join(__dirname, '../src'),
-      'packages': path.join(__dirname, '../packages'),
+      packages: path.join(__dirname, '../packages'),
-      'lib': path.join(__dirname, '../lib'),
+      lib: path.join(__dirname, '../lib'),
-      'components': path.join(__dirname, '../docs/src/components')
+      components: path.join(__dirname, '../docs/src/components')
     }
   },
   module: {
     loaders: [
       {
         test: /\.vue$/,
-        use: [{
+        use: [
-          loader: 'vue-loader',
+          {
-          options: {
+            loader: 'vue-loader',
-            loaders: {
+            options: {
-              css: ExtractTextPlugin.extract({
+              loaders: {
-                use: 'css-loader!postcss-loader',
+                postcss: ExtractTextPlugin.extract({
-                fallback: 'vue-style-loader'
+                  use: styleLoaders,
-              })
+                  fallback: 'vue-style-loader'
+                }),
+                css: ExtractTextPlugin.extract({
+                  use: styleLoaders,
+                  fallback: 'vue-style-loader'
+                })
+              }
             }
           }
-        }]
+        ]
       },
       {
         test: /\.js$/,
@@ -93,9 +73,7 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
+        use: ExtractTextPlugin.extract({ use: styleLoaders })
-          use: 'css-loader!postcss-loader'
-        })
       },
       {
         test: /\.md/,
@@ -113,34 +91,29 @@ module.exports = {
     new webpack.LoaderOptionsPlugin({
       minimize: true,
       options: {
-        postcss: getPostcssPlugin,
-        babel: {
-          presets: ['es2015'],
-          plugins: ['transform-runtime', 'transform-vue-jsx']
-        },
         vue: {
-          autoprefixer: false,
+          autoprefixer: false
-          postcss: getPostcssPlugin
         },
         vueMarkdown: {
           use: [
-            [require('markdown-it-container'), 'demo', {
+            [
-              validate: function(params) {
+              require('markdown-it-container'),
-                return params.trim().match(/^demo\s*(.*)$/);
+              'demo',
-              },
+              {
+                validate: function(params) {
+                  return params.trim().match(/^demo\s*(.*)$/);
+                },
 
-              render: function(tokens, idx) {
+                render: function(tokens, idx) {
-                if (tokens[idx].nesting === 1) {
+                    return tokens[idx].nesting === 1 
-                  return `<demo-block class="demo-box"><div class="highlight" slot="highlight">`;
+                      ? `<demo-block class="demo-box"><div class="highlight" slot="highlight"å>`
+                      :`</div></demo-block>\n`;
                 }
-                return `</div></demo-block>\n`;
               }
-            }]
+            ]
           ],
           preprocess: function(MarkdownIt, source) {
-            MarkdownIt.renderer.rules.table_open = function() {
+            MarkdownIt.renderer.rules.table_open = () => '<table class="zan-doc-table">';
-              return '<table class="zan-doc-table">';
-            };
             return source;
           }
         }
@@ -158,9 +131,16 @@ module.exports = {
       filename: 'examples.html',
       inject: true
     }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: 2
+    }),
     new webpack.HotModuleReplacementPlugin(),
     new OptimizeCssAssetsPlugin(),
-    StyleExtractPlugin,
+    new ExtractTextPlugin({
+      filename: isProduction ? '[name].[hash:8].css' : '[name].css',
+      allChunks: true
+    }),
     new FriendlyErrorsPlugin()
   ]
 };

build/webpack.config.prod.js

@@ -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: [

docs/assets/docs.css

@@ -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;
-  }
-}

docs/examples-docs/actionsheet.md

@@ -1,27 +1,21 @@
 <style>
-@component-namespace demo {
+.demo-actionsheet {
-  @b actionsheet {
+  .actionsheet-wx {
-    .actionsheet-wx {
+    color: #06BF04;
-      color: #06BF04;
+  }
-    }
 
-    .van-button {
+  .van-button {
-      margin-left: 15px;
+    margin-left: 15px;
-    }
+  }
 
-    .title-actionsheet p {
+  .title-actionsheet p {
-      padding: 20px;
+    padding: 20px;
-    }
   }
 }
 </style>
 
 <script>
-import MobileComputed from 'components/mobile-computed';
-
 export default {
-  mixins: [MobileComputed],
-
   data() {
     return {
       show1: false,
@@ -61,37 +55,6 @@ export default {
 
 ## ActionSheet 行动按钮
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法
@@ -199,11 +162,6 @@ export default {
 ```
 :::
 
-点击以下按钮查看手机端效果：
-
-<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
-<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
-
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |

docs/examples-docs/badge.md

@@ -1,14 +1,12 @@
 <style>
-@component-namespace demo {
+.demo-badge {
-  @b badge {
+  .badge-group-wrapper {
-    .badge-group-wrapper {
+    padding: 30px 20px;
-      padding: 30px 20px;
+    background-color: #fff;
-      background-color: #fff;
+  }
-    }
 
-    .van-badge-group {
+  .van-badge-group {
-      margin: 0 auto;
+    margin: 0 auto;
-    }
   }
 }
 </style>
@@ -30,39 +28,6 @@
 
 ## 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';
-
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/button.md

@@ -1,20 +1,18 @@
 <style>
-@component-namespace demo {
+.demo-button {
-  @b button {
+  .van-button {
-    .van-button {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    user-select: none;
-      user-select: none;
+  }
-    }
+  .van-row {
-    .van-row {
+    padding: 0 15px;
-      padding: 0 15px;
+    margin-bottom: 20px;
-      margin-bottom: 20px;
+  }
-    }
+  .van-col-24 {
-    .van-col-24 {
+    margin-bottom: 20px;
-      margin-bottom: 20px;
 
-      &:last-child {
+    &:last-child {
-        margin-bottom: 0;
+      margin-bottom: 0;
-      }
     }
   }
 }
@@ -22,37 +20,6 @@
 
 ## Button 按钮
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Button`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Button`组件了：
-
-```js
-import Vue from 'vue';
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 按钮功能

docs/examples-docs/card.md

@@ -1,36 +1,5 @@
 ## Card 图文组件
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Card`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Card`组件了：
-
-```js
-import Vue from 'vue';
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/cell-swipe.md

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

docs/examples-docs/cell.md

@@ -10,39 +10,6 @@ export default {
 
 ## Cell 单元格
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Cell`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Cell`组件了：
-
-```js
-import Vue from 'vue';
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/changelog.md

@@ -1,5 +1,79 @@
 ## 更新日志
 
+## [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)
+
+**合并的 Pull Request (可能有不兼容改动):**
+
+- not require reset.css by default [\#72](https://github.com/youzan/vant/pull/72) ([chenjiahan](https://github.com/chenjiahan))
+- 补充 babel-plugin-import 文档 [\#71](https://github.com/youzan/vant/pull/71) ([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)
+
+**修复:**
+
+- fix: one page swiper broken [\#68](https://github.com/youzan/vant/pull/68) ([Raistlin916](https://github.com/Raistlin916))
+
+**处理的 Issue:**
+
+- 安装业务组件导致基础组件css样式文件引入失败 [\#65](https://github.com/youzan/vant/issues/65)
+
+## [v0.7.3](https://github.com/youzan/vant/tree/v0.7.3) (2017-08-04)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.7.2...v0.7.3)
+
+**处理的 Issue:**
+
+- datetime-picker的问题 [\#45](https://github.com/youzan/vant/issues/45)
+
+**合并的 Pull Request (可能有不兼容改动):**
+
+- fix: utils 修复babel编译 [\#67](https://github.com/youzan/vant/pull/67) ([pangxie1991](https://github.com/pangxie1991))
+- README.md使用英文文档 [\#66](https://github.com/youzan/vant/pull/66) ([cookfront](https://github.com/cookfront))
+
+## [v0.7.2](https://github.com/youzan/vant/tree/v0.7.2) (2017-07-31)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.6.6...v0.7.2)
+
+**非兼容更新和新特性:**
+
+- 支持 babel-plugin-import [\#62](https://github.com/youzan/vant/pull/62) ([chenjiahan](https://github.com/chenjiahan))
+- 依赖更新 && 构建调整 [\#60](https://github.com/youzan/vant/pull/60) ([chenjiahan](https://github.com/chenjiahan))
+- Switch 组件: 个人建议加了动画效果 [\#59](https://github.com/youzan/vant/pull/59) ([BosenY](https://github.com/BosenY))
+- 文档改版 [\#55](https://github.com/youzan/vant/pull/55) ([chenjiahan](https://github.com/chenjiahan))
+- 新增：Card 组件增加 centered 属性 [\#54](https://github.com/youzan/vant/pull/54) ([chenjiahan](https://github.com/chenjiahan))
+
+**修复:**
+
+- fix: datetimepicker cancel event not work [\#64](https://github.com/youzan/vant/pull/64) ([chenjiahan](https://github.com/chenjiahan))
+- 修复：popup多层级van-modal未插入到正确的位置 [\#63](https://github.com/youzan/vant/pull/63) ([cookfront](https://github.com/cookfront))
+- 新增几个图标 && 修复tabs组件为空报错的问题 [\#61](https://github.com/youzan/vant/pull/61) ([cookfront](https://github.com/cookfront))
+- Fix: deploy doc fail [\#56](https://github.com/youzan/vant/pull/56) ([chenjiahan](https://github.com/chenjiahan))
+
+**处理的 Issue:**
+
+- SVG's SMIL animations deprecated  [\#46](https://github.com/youzan/vant/issues/46)
+
+## [v0.6.6](https://github.com/youzan/vant/tree/v0.6.6) (2017-07-15)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.6.5...v0.6.6)
+
+**非兼容更新和新特性:**
+
+- 新增：Field 增加blur事件 && Field 支持尾部icon [\#53](https://github.com/youzan/vant/pull/53) ([pangxie1991](https://github.com/pangxie1991))
+
 ## [v0.6.5](https://github.com/youzan/vant/tree/v0.6.5) (2017-07-11)
 [Full Changelog](https://github.com/youzan/vant/compare/v0.6.4...v0.6.5)
 

docs/examples-docs/checkbox.md

@@ -1,12 +1,10 @@
 <style>
-@component-namespace demo {
+.demo-checkbox {
-  @b checkbox {
+  .van-checkbox-wrapper {
-    .van-checkbox-wrapper {
+    padding: 0 20px;
-      padding: 0 20px;
 
-      .van-checkbox {
+    .van-checkbox {
-        margin: 10px 0;
+      margin: 10px 0;
-      }
     }
   }
 }
@@ -37,39 +35,6 @@ 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';
-
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/datetime-picker.md

@@ -5,20 +5,21 @@ export default {
       minHour: 10,
       maxHour: 20,
       minDate: new Date(),
-      currentDate: null
+      currentDate1: null,
+      currentDate2: null,
+      currentDate3: null
     };
   },
 
   methods: {
     handlePickerChange(picker, values) {
-      // picker.setColumnValues(1, citys[values[0]]);
       console.log(values);
     },
     handlePickerCancel() {
-      alert('picker cancel');
+      console.log('picker cancel');
     },
     handlePickerConfirm() {
-      alert('picker confirm');
+      console.log('picker confirm');
     }
   }
 };
@@ -26,36 +27,6 @@ export default {
 
 ## Datetime Picker 时间选择
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Radio`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Radio`组件了：
-
-```js
-import Vue from 'vue';
-import { DatetimePicker } from 'vant';
-
-Vue.component(DatetimePicker.name, DatetimePicker);
-```
-
-#### 局部注册
-
-如果你只是想在某个组件中使用，你可以在对应组件中注册`DatetimePicker`组件，这样只能在你注册的组件中使用`DatetimePicker`：
-
-```js
-import { DatetimePicker } from 'vant';
-
-export default {
-  components: {
-    'van-datetime-picker': DatetimePicker
-  }
-};
-```
-
-
 ### 代码演示
 
 #### 基础用法
@@ -63,7 +34,7 @@ export default {
 :::demo 基础用法
 ```html
 <van-datetime-picker
-  v-model="currentDate"
+  v-model="currentDate1"
   type="datetime"
   format="yyyy.mm.dd hh时 mm分"
   :min-hour="minHour"
@@ -98,7 +69,7 @@ export default {
 :::demo 选择日期
 ```html
 <van-datetime-picker
-  v-model="currentDate"
+  v-model="currentDate2"
   type="date"
   format="yyyy.mm.dd hh时 mm分"
   :min-hour="minHour"
@@ -114,13 +85,13 @@ export default {
 :::demo 选择时间
 ```html
 <van-datetime-picker
-  v-model="currentDate"
+  v-model="currentDate3"
   type="time"
   format="yyyy.mm.dd hh时 mm分"
   :min-hour="minHour"
   :max-hour="maxHour"
   :min-date="minDate"
-  @change="handlePickerChange">  
+  @change="handlePickerChange">
 </van-datetime-picker>
 ```
 :::
@@ -145,6 +116,14 @@ export default {
 | defaultIndex | 初始选中值的索引，默认为0 |
 | className | 为对应列添加特殊的`class` |
 
+### Event
+
+| 事件名称       | 说明      | 回调参数 |
+|-----------|-----------|-----------|
+| change | 当值变化时触发的事件 | picker 实例 |
+| confirm | 点击完成按钮时触发的事件 | 当前 value |
+| cancel | 点击取消按钮时触发的事件 | - |
+
 ### change事件
 
 在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：

docs/examples-docs/dialog.md

@@ -1,20 +1,15 @@
 <style>
-@component-namespace demo {
+.demo-dialog {
-  @b dialog {
+  .van-button {
-    .van-button {
+    margin: 15px;
-      margin: 15px;
-    }
   }
 }
 </style>
 
 <script>
 import { Dialog } from 'src/index';
-import MobileComputed from 'components/mobile-computed';
 
 export default {
-  mixins: [MobileComputed],
-
   methods: {
     handleAlertClick() {
       Dialog.alert({
@@ -120,11 +115,6 @@ export default {
 ```
 :::
 
-点击以下按钮查看手机端效果：
-
-<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
-<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
-
 ### 方法
 
 #### Dialog.alert(options)

docs/examples-docs/field.md

@@ -1,9 +1,7 @@
 <style>
-@component-namespace demo {
+.demo-field {
-  @b field {
+  .van-field-wrapper {
-    .van-field-wrapper {
+    padding: 0 10px;
-      padding: 0 10px;
-    }
   }
 }
 </style>
@@ -31,37 +29,6 @@ export default {
 
 表单中`input`或`textarea`的输入框。
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Field`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Field`组件了：
-
-```js
-import Vue from 'vue';
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/icon.md

@@ -1,57 +1,24 @@
 <style>
-@component-namespace demo {
+.demo-icon {
-  @b icon {
+  .examples {
-    .examples {
+    max-height: none;
-      max-height: none;
+  }
-    }
 
-    .van-col {
+  .van-col {
-      text-align: center;
+    text-align: center;
-      height: 120px;
+    height: 120px;
-    }
+  }
 
-    .van-icon {
+  .van-icon {
-      font-size: 45px;
+    font-size: 45px;
-      display: block;
+    display: block;
-      margin: 15px 0;
+    margin: 15px 0;
-    }
   }
 } 
 </style>
 
 ## Icon 图标
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Icon`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Icon`组件了：
-
-```js
-import Vue from 'vue';
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法
@@ -331,6 +298,46 @@ export default {
     <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>
 ```
 :::

docs/examples-docs/image-preview.md

@@ -1,20 +1,15 @@
 <style>
-@component-namespace demo {
+.demo-image-preview {
-  @b image-preview {
+  .van-button {
-    .van-button {
+    margin-left: 15px;
-      margin-left: 15px;
-    }
   }
 }
 </style>
 
 <script>
 import { ImagePreview } from 'src/index';
-import MobileComputed from 'components/mobile-computed';
 
 export default {
-  mixins: [MobileComputed],
-
   methods: {
     handleImagePreview() {
       ImagePreview([
@@ -62,11 +57,6 @@ export default {
 ```
 :::
 
-点击以下按钮查看手机端效果：
-
-<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
-<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
-
 ### 方法参数
 
 | 参数名       | 说明      | 类型 |

docs/examples-docs/layout.md

@@ -1,12 +1,10 @@
 <style>
-@component-namespace demo {
+.demo-layout {
-  @b layout {
+  .van-row {
-    .van-row {
+    padding: 0 20px;
-      padding: 0 20px;
+  }
-    }
+  .van-col {
-    .van-col {
+    margin-bottom: 10px;
-      margin-bottom: 10px;
-    }
   }
 }
 
@@ -32,41 +30,6 @@
 
 主要提供了`van-row`和`van-col`两个组件来进行行列布局。
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Row`和`Col`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Row`和`Col`组件了：
-
-```js
-import Vue from 'vue';
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 常规用法

docs/examples-docs/lazyload.md

@@ -1,17 +1,15 @@
 <style>
-@component-namespace demo {
+.demo-lazyload {
-  @b lazyload {
+  .lazy-img {
-    .lazy-img {
+    display: block;
-      display: block;
+    width: 100%;
-      width: 100%;
+    height: auto;
-      height: auto;
+  }
-    }
 
-    .lazy-background {
+  .lazy-background {
-      height: 300px;
+    height: 300px;
-      background-size: cover;
+    background-size: cover;
-      background-repeat: no-repeat;
+    background-repeat: no-repeat;
-    }
   }
 }
 </style>

docs/examples-docs/loading.md

@@ -1,58 +1,25 @@
 <style>
-@component-namespace demo {
+.demo-loading {
-  @b loading {
+  .van-loading {
-    .van-loading {
+    margin: 0 auto;
-      margin: 0 auto;
+  }
-    }
 
-    .circle-loading {
+  .circle-loading {
-      margin: 20px auto;
+    margin: 20px auto;
-    }
+  }
 
-    .demo-loading__example--with-bg {
+  .demo-loading__example--with-bg {
-      background-color: rgba(17, 17, 17, 0.7);
+    background-color: rgba(17, 17, 17, 0.7);
-      margin: 0 auto;
+    margin: 0 auto;
-      width: 120px;
+    width: 120px;
-      padding: 45px 0;
+    padding: 45px 0;
-      border-radius: 10px;
+    border-radius: 10px;
-    }
   }
 }
 </style>
 
 ## Loading 加载
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Loading`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Loading`组件了：
-
-```js
-import Vue from 'vue';
-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

docs/examples-docs/panel.md

@@ -1,67 +1,34 @@
 <style>
-@component-namespace demo {
+.demo-panel {
-  @b panel {
+  .van-panel-sum {
-    .van-panel-sum {
+    background: #fff;
-      background: #fff;
+    text-align: right;
-      text-align: right;
+    font-size: 14px;
-      font-size: 14px;
+    color: #333;
-      color: #333;
+    line-height: 30px;
-      line-height: 30px;
+    padding-right: 15px;
-      padding-right: 15px;
 
-      span {
+    span {
-        color: red;
+      color: red;
-      }
     }
+  }
 
-    .van-panel-buttons {
+  .van-panel-buttons {
-      text-align: right;
+    text-align: right;
 
-      .van-button {
+    .van-button {
-        margin-left: 5px;
+      margin-left: 5px;
-      }
     }
+  }
 
-    .panel-content {
+  .panel-content {
-      padding: 20px;
+    padding: 20px;
-    }
   }
 }
 </style>
 
 ## Panel 面板
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Panel`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Panel`组件了：
-
-```js
-import Vue from 'vue';
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/picker.md

@@ -38,37 +38,6 @@ export default {
 
 ## Picker 选择器
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Picker`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Picker`组件了：
-
-```js
-import Vue from 'vue';
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/popup.md

@@ -1,48 +1,43 @@
 <style>
-@component-namespace demo {
+.demo-popup {
-  @b popup {
+  .van-button {
-    .van-button {
+    margin: 10px 15px;
-      margin: 10px 15px;
+  }
-    }
 
-    .van-popup-1 {
+  .van-popup-1 {
-      width: 60%;
+    width: 60%;
-      box-sizing: border-box;
+    box-sizing: border-box;
-      padding: 20px;
+    padding: 20px;
-      border-radius: 5px;
+    border-radius: 5px;
-      text-align: center;
+    text-align: center;
-    }
+  }
 
-    .van-popup-2 {
+  .van-popup-2 {
-      width: 100%;
+    width: 100%;
-      height: 200px;
+    height: 200px;
-      box-sizing: border-box;
+    box-sizing: border-box;
-      padding: 20px;
+    padding: 20px;
-    }
+  }
 
-    .van-popup-3 {
+  .van-popup-3 {
-      line-height: 50px;
+    line-height: 50px;
-      text-align: center;
+    text-align: center;
-      background-color: rgba(0, 0, 0, 0.701961);
+    background-color: rgba(0, 0, 0, 0.701961);
-      color: #fff;
+    color: #fff;
-    }
+  }
 
-    .van-popup-4,
+  .van-popup-4,
-    .van-popup-5 {
+  .van-popup-5 {
-      width: 100%;
+    width: 100%;
-      height: 100%;
+    height: 100%;
-    }
   }
 }
 </style>
 
 <script>
-import MobileComputed from 'components/mobile-computed';
 import Dialog from 'packages/dialog';
 
 export default {
-  mixins: [MobileComputed],
-
   data() {
     return {
       popupShow1: false,
@@ -80,37 +75,6 @@ export default {
 
 ## Popup 弹出菜单
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Popup`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Popup`组件了：
-
-```js
-import Vue from 'vue';
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法
@@ -188,11 +152,6 @@ export default {
 ```
 :::
 
-点击以下按钮查看手机端效果：
-
-<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
-<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
-
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |

docs/examples-docs/progress.md

@@ -1,48 +1,15 @@
 <style>
-  @component-namespace demo {
+.demo-progress {
-    @b progress {
+  &__wrapper {
-      @e wrapper {
+    padding: 5px;
-        padding: 5px;
+    margin: 20px 10px;
-        margin: 20px 10px;
+  }
-      }
+} 
-    }
-  } 
 </style>
 
 
 ## Progress 进度条
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Progress`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Progress`组件了：
-
-```js
-import Vue from 'vue';
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/quantity.md

@@ -1,13 +1,11 @@
 <style>
-@component-namespace demo {
+.demo-quantity {
-  @b quantity {
+  .van-quantity {
-    .van-quantity {
+    margin-left: 15px;
-      margin-left: 15px;
+  }
-    }
 
-    .curr-quantity {
+  .curr-quantity {
-      margin: 15px;
+    margin: 15px;
-    }
   }
 }
 </style>
@@ -25,37 +23,6 @@ export default {
 
 ## Quantity 数量选择
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Quantity`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Quantity`组件了：
-
-```js
-import Vue from 'vue';
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/quickstart.md

@@ -2,8 +2,6 @@
 
 一套基于`Vue.js 2.0`的 Mobile 组件库
 
-[查看业务组件库 Captain-UI](https://www.youzanyun.com/zanui/captain/component/quickstart)
-
 ### 安装
 
 ```shell
@@ -12,26 +10,39 @@ 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);
+Vue.use(vant);
-```
-
-#### 按需引入
-
-```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);
 ```
 
 ### 自定义主题
@@ -42,7 +53,7 @@ Vue.component(Cell.name, Cell);
 
 可以通过Github或npm来下载主题：
 
-```shell
+```bash
 # npm
 npm i vant-css -D
 

docs/examples-docs/radio.md

@@ -1,12 +1,10 @@
 <style>
-@component-namespace demo {
+.demo-radio {
-  @b radio {
+  .van-radios {
-    .van-radios {
+    padding: 0 20px;
-      padding: 0 20px;
 
-      .van-radio {
+    .van-radio {
-        margin: 10px 0;
+      margin: 10px 0;
-      }
     }
   }
 }
@@ -27,38 +25,6 @@ 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';
-
-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
-  }
-};
-```
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/search.md

@@ -16,37 +16,6 @@ export default {
 
 ## Search 搜索
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Search`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Search`组件了：
-
-```js
-import Vue from 'vue';
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/steps.md

@@ -1,13 +1,11 @@
 <style>
-@component-namespace demo {
+.demo-steps {
-  @b steps {
+  .steps-success {
-    .steps-success {
+    color: #06bf04;
-      color: #06bf04;
+  }
-    }
 
-    .van-button {
+  .van-button {
-      margin: 15px 0 0 15px;
+    margin: 15px 0 0 15px;
-    }
   }
 }
 </style>
@@ -30,39 +28,6 @@ export default {
 
 ## Steps 步骤条
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/swipe.md

@@ -1,12 +1,10 @@
 <style>
-@component-namespace demo {
+.demo-swipe {
-  @b swipe {
+  .van-swipe {
-    .van-swipe {
+    height: 200px;
-      height: 200px;
 
-      img {
+    img {
-        width: 100%;
+      width: 100%;
-      }
     }
   }
 }
@@ -37,39 +35,6 @@ 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';
-
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/switch.md

@@ -1,20 +1,18 @@
 <style>
-  @component-namespace demo {
+.demo-switch {
-    @b switch {
+  .van-switch {
-      .van-switch {
+    float: left;
-        float: left;
+    margin: 0 15px;
-        margin: 0 15px;
-      }
-
-      @e text {
-        display: inline-block;
-        line-height: 32px;
-        float: left;
-        font-size: 14px;
-        color: #333;
-      }
-    }
   }
+
+  &__text {
+    display: inline-block;
+    line-height: 32px;
+    float: left;
+    font-size: 14px;
+    color: #333;
+  }
+}
 </style>
 
 <script>
@@ -45,37 +43,6 @@ export default {
 
 ## Switch 开关
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Switch`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Switch`组件了：
-
-```js
-import Vue from 'vue';
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/tab.md

@@ -1,26 +1,24 @@
 <style>
-@component-namespace demo {
+.demo-tab {
-  @b tab {
+  .van-tab__pane {
-    .van-tab__pane {
+    background-color: #fff;
-      background-color: #fff;
+    padding: 20px;
-      padding: 20px;
+  }
-    }
 
-    .van-tabs--card .van-tab__pane {
+  .van-tabs--card .van-tab__pane {
-      background-color: transparent;
+    background-color: transparent;
-    }
+  }
 
-    .custom-tabwrap .van-tab-active {
+  .custom-tabwrap .van-tab-active {
-      color: #20a0ff;
+    color: #20a0ff;
-    }
+  }
-    .custom-tabwrap .van-tabs-nav-bar {
+  .custom-tabwrap .van-tabs-nav-bar {
-      background: #20a0ff;
+    background: #20a0ff;
-    }
+  }
-    .custom-pane {
+  .custom-pane {
-      text-align: center;
+    text-align: center;
-      height: 50px;
+    height: 50px;
-      line-height: 50px;
+    line-height: 50px;
-    }
   }
 }
 </style>
@@ -51,39 +49,6 @@ export default {
 
 ## Tab 标签
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Tab`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tab`组件了：
-
-```js
-import Vue from 'vue';
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/tag.md

@@ -10,37 +10,6 @@
 
 ## Tag 标记
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Tag`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tag`组件了：
-
-```js
-import Vue from 'vue';
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/toast.md

@@ -1,9 +1,7 @@
 <style>
-@component-namespace demo {
+.demo-toast {
-  @b toast {
+  .van-button {
-    .van-button {
+    margin: 15px;
-      margin: 15px;
-    }
   }
 }
 </style>

docs/examples-docs/uploader.md

@@ -16,37 +16,6 @@ export default {
 
 ## Uploader 图片上传
 
-### 使用指南
-
-如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
-
-#### 全局注册
-
-你可以在全局注册`Uploader`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Uploader`组件了：
-
-```js
-import Vue from 'vue';
-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
-  }
-};
-```
-
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/waterfall.md

@@ -66,28 +66,26 @@ export default {
 </script>
 
 <style>
-@component-namespace demo {
+.demo-waterfall {
-  @b waterfall {
+  .waterfall {
-    .waterfall {
+    max-height: 360px;
-      max-height: 360px;
+    overflow: scroll;
-      overflow: scroll;
+    border-top: 1px solid #e5e5e5;
-      border-top: 1px solid #e5e5e5;
+  }
-    }
+  .waterfall-item {
-    .waterfall-item {
+    line-height: 50px;
-      line-height: 50px;
+    border-bottom: 1px solid #e5e5e5;
-      border-bottom: 1px solid #e5e5e5;
+    background: #fff;
-      background: #fff;
+  }
-    }
+  .page-desc {
-    .page-desc {
+    padding: 5px 0;
-      padding: 5px 0;
+    line-height: 1.4;
-      line-height: 1.4;
+    font-size: 14px;
-      font-size: 14px;
+    text-align: center;
-      text-align: center;
+    color: #666;
-      color: #666;
+  }
-    }
+  .van-loading {
-    .van-loading {
+    margin: 10px auto;
-      margin: 10px auto;
-    }
   }
 }
 </style>

docs/src/components/example-block.vue

@@ -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>

docs/src/components/mobile-computed.js

@@ -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
-    };
-  }
-};

docs/src/components/mobile-nav.vue

@@ -62,82 +62,79 @@ export default {
 };
 </script>
 
-<style>
+<style lang="postcss">
-@component-namespace mobile {
+.mobile-nav-group {
-  @b nav-group {
+  border-radius: 2px;
-    border-radius: 2px;
+  margin-bottom: 15px;
-    margin-bottom: 15px;
+  background-color: #fff;
-    background-color: #fff;
+  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
-    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
 
-    @e basetitle {
+  &__basetitle {
-      padding-left: 20px;
+    padding-left: 20px;
+  }
+
+  &__title {
+    font-size: 16px;
+    color: #333;
+    line-height: 56px;
+    position: relative;
+    user-select: none;
+
+    &--open {
+      color: #999;
     }
 
-    @e title {
+    a {
-      font-size: 16px;
       color: #333;
-      line-height: 56px;
+      display: block;
-      position: relative;
       user-select: none;
+      padding-left: 20px;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-      @m open {
+      &:active {
-        color: #999;
+        background: #ECECEC;
       }
 
-      a {
+      > p {
-        color: #333;
+        border-top: 1px solid #e5e5e5;
-        display: block;
-        user-select: none;
-        padding-left: 20px;
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-        &:active {
-          background: #ECECEC;
-        }
-
-        > p {
-          border-top: 1px solid #e5e5e5;
-        }
-      }
-
-      .van-icon-arrow {
-        position: absolute;
-        font-size: 12px;
-        line-height: 1;
-        top: 24px;
-        right: 20px;
       }
     }
 
-    @e list-wrapper {
+    .van-icon-arrow {
-      height: 0;
+      position: absolute;
-      overflow: hidden;
+      font-size: 12px;
-
+      line-height: 1;
-      @m open {
+      top: 24px;
-        height: auto;
+      right: 20px;
-      }
-    }
-
-    @e list {
-      transform: translateY(-50%);
-      transition: transform .2s ease-out;
-
-      @m open {
-        transform: translateY(0);
-      }
-    }
-
-    li {
-      list-style: none;
-    }
-
-    ul {
-      padding: 0;
-      margin: 0;
-      overflow: hidden;
     }
   }
-}
 
+  &__list-wrapper {
+    height: 0;
+    overflow: hidden;
+
+    &--open {
+      height: auto;
+    }
+  }
+
+  &__list {
+    transform: translateY(-50%);
+    transition: transform .2s ease-out;
+
+    &--open {
+      transform: translateY(0);
+    }
+  }
+
+  li {
+    list-style: none;
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+}
 </style>

docs/src/components/mobile-popup.vue

@@ -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>

docs/src/doc.config.js

@@ -30,6 +30,10 @@ module.exports = {
                 "path": "/changelog",
                 "title": "更新日志",
                 noExample: true
+              },
+              {
+                "title": "业务组件",
+                "link": "/zanui/captain/component/quickstart"
               }
             ]
           }

docs/src/index.js

@@ -2,17 +2,8 @@ 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() {
@@ -22,11 +13,7 @@ function isMobile() {
 }
 
 Vue.use(VueRouter);
-Vue.use(ZanUI);
 Vue.use(ZanDoc);
-Vue.use(ZanUI.Lazyload, {
-  lazyComponent: true
-});
 Vue.component('demo-block', DemoBlock);
 
 const routesConfig = routes();

docs/src/router.config.js

@@ -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 => {
+        group.list.forEach(addRoute);
-          addRoute(nav);
-        });
       });
     } else if (nav.children) {
-      nav.children.forEach(nav => {
+      nav.children.forEach(addRoute);
-        addRoute(nav);
-      });
     } else {
       addRoute(nav);
     }
   });
 
   function addRoute(page) {
-    const component = isExample
+    const { path } = page;
-      ? require(`../examples-dist${page.path}.vue`)
+    if (path) {
-      : require(`../examples-docs${page.path}.md`);
+      const name = path.replace('/', '');
-    route.push({
+      route.push({
-      path: '/component' + page.path,
+        path: '/component' + path,
-      component: component.default || component
+        component: isExample ? componentDemos[name] : componentDocs[name]
-    });
+      });
+    }
   }
 
-  // console.log(route);
-
   return route;
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vant",
-  "version": "0.6.6",
+  "version": "0.7.9",
   "description": "有赞vue wap组件库",
   "main": "lib/vant.js",
   "style": "lib/vant-css/index.css",
@@ -12,17 +12,16 @@
   ],
   "scripts": {
     "bootstrap": "yarn || npm i",
-    "dev": "npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.dev.js --content-base ./",
+    "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",
+    "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js --presets=es2015",
-    "build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js && cp-cli packages/vant-css/lib lib/vant-css",
+    "build:components": "cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.components.js --color",
-    "build:components": "webpack --progress --hide-modules --config build/webpack.components.js",
+    "build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js --color && cp -R packages/vant-css/lib/ lib/vant-css",
-    "build:vant": "webpack --progress --hide-modules --config build/webpack.build.js && webpack --progress --hide-modules --config build/webpack.build.min.js",
+    "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",
-    "build:example": "node build/genExamples.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",
-    "deploy:docs": "rimraf docs/dist && npm run build:example && cross-env NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.prod.js",
+    "deploy:docs": "rimraf docs/dist && cross-env NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.prod.js",
-    "dist": "npm run clean && npm run build:file && npm run lint && npm run build:vant && npm run build:components && npm run build:utils && npm run build:vant-css",
+    "dist": "node build/bin/build-lib.js",
     "clean": "rimraf lib && rimraf packages/*/lib",
     "lint": "felint lint src/**/*.js packages/**/*.{js,vue} build/**/*.js",
     "test": "karma start test/unit/karma.conf.js --single-run",
@@ -43,98 +42,79 @@
   "license": "ISC",
   "dependencies": {
     "raf.js": "0.0.4",
-    "vue-lazyload": "^1.0.3"
+    "vue-lazyload": "^1.0.6"
   },
   "peerDependencies": {
-    "vue": "2.3.4"
+    "vue": "2.4.2"
   },
   "devDependencies": {
-    "autoprefixer": "^6.7.5",
+    "autoprefixer": "^7.1.2",
-    "avoriaz": "^2.0.0",
+    "avoriaz": "2.0.0",
     "babel-cli": "^6.14.0",
-    "babel-core": "^6.17.0",
+    "babel-core": "^6.25.0",
-    "babel-eslint": "^6.1.2",
+    "babel-loader": "^7.1.1",
-    "babel-helper-vue-jsx-merge-props": "^2.0.2",
+    "babel-plugin-module-resolver": "^2.7.1",
-    "babel-loader": "^6.2.5",
-    "babel-plugin-module-resolver": "^2.2.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.15.0",
-    "babel-plugin-transform-vue-jsx": "^3.3.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
     "babel-polyfill": "^6.23.0",
     "babel-preset-es2015": "^6.16.0",
-    "babel-runtime": "^6.11.0",
+    "babel-runtime": "^6.25.0",
-    "chai": "^3.5.0",
+    "chai": "^4.1.1",
-    "chalk": "^1.1.3",
     "cheerio": "^0.22.0",
-    "codecov": "^2.1.0",
+    "codecov": "^2.2.0",
-    "copy-webpack-plugin": "^4.0.1",
+    "cross-env": "^5.0.5",
-    "cp-cli": "^1.0.2",
+    "css-loader": "^0.28.4",
-    "cross-env": "^3.1.3",
+    "eslint-plugin-vue": "^2.1.0",
-    "css-loader": "^0.24.0",
+    "extract-text-webpack-plugin": "2.1.2",
-    "decamelize": "^1.2.0",
-    "eslint-loader": "^1.7.1",
-    "eslint-plugin-vue": "^2.0.1",
-    "extract-text-webpack-plugin": "^2.0.0-beta.5",
     "felint": "^0.5.0-alpha.3",
-    "file-loader": "^0.9.0",
     "file-save": "^0.2.0",
     "friendly-errors-webpack-plugin": "^1.6.1",
-    "gh-pages": "^0.12.0",
+    "gh-pages": "^1.0.0",
     "gulp": "^3.9.1",
     "gulp-util": "^3.0.8",
-    "highlight.js": "^9.8.0",
+    "highlight.js": "^9.12.0",
-    "html-loader": "^0.4.3",
+    "html-webpack-plugin": "^2.29.0",
-    "html-webpack-plugin": "^2.22.0",
-    "inject-loader": "^3.0.0-beta2",
     "isparta-loader": "^2.0.0",
-    "json-loader": "^0.5.4",
     "json-templater": "^1.0.4",
-    "karma": "^1.5.0",
+    "karma": "^1.7.0",
-    "karma-chrome-launcher": "^2.0.0",
+    "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-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.30",
+    "karma-spec-reporter": "^0.0.31",
-    "karma-webpack": "^2.0.2",
+    "karma-webpack": "^2.0.4",
-    "lerna": "2.0.0-beta.31",
+    "lerna": "^2.0.0",
-    "lolex": "^1.5.1",
+    "markdown-it": "^8.3.2",
-    "markdown-it": "^6.1.1",
-    "markdown-it-anchor": "^2.5.0",
     "markdown-it-container": "^2.0.0",
-    "mocha": "^3.2.0",
+    "mocha": "^3.4.2",
-    "optimize-css-assets-webpack-plugin": "^1.3.0",
+    "optimize-css-assets-webpack-plugin": "^3.0.0",
-    "postcss": "^5.1.2",
+    "postcss": "^6.0.8",
-    "postcss-easy-import": "^2.0.0",
+    "postcss-easy-import": "^2.1.0",
-    "postcss-loader": "^1.3.3",
+    "postcss-loader": "^2.0.6",
-    "precss": "^1.4.0",
+    "precss": "^2.0.0",
-    "prismjs": "^1.5.1",
+    "progress-bar-webpack-plugin": "^1.10.0",
-    "progress-bar-webpack-plugin": "^1.9.3",
     "rimraf": "^2.5.4",
-    "run-sequence": "^1.2.2",
+    "run-sequence": "^2.1.0",
-    "saladcss-bem": "^0.0.1",
+    "sinon": "^2.4.1",
-    "sinon": "^1.17.7",
+    "sinon-chai": "^2.12.0",
-    "sinon-chai": "^2.8.0",
+    "style-loader": "^0.18.2",
-    "style-loader": "^0.13.1",
+    "uppercamelcase": "^3.0.0",
-    "theaterjs": "^3.0.0",
+    "url-loader": "^0.5.9",
-    "transliteration": "^1.1.11",
+    "vue": "^2.4.2",
-    "uppercamelcase": "^1.1.0",
-    "url-loader": "^0.5.7",
-    "vue": "2.3.4",
     "vue-hot-reload-api": "^2.1.0",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^12.0.0",
+    "vue-loader": "^13.0.4",
-    "vue-markdown-loader": "^1.0.0",
+    "vue-markdown-loader": "^2.0.0",
-    "vue-router": "^2.5.0",
+    "vue-router": "^2.7.0",
     "vue-style-loader": "^3.0.0",
-    "vue-template-compiler": "2.3.4",
+    "vue-template-compiler": "^2.4.2",
-    "vue-template-es2015-compiler": "^1.4.2",
+    "vue-template-es2015-compiler": "^1.5.3",
-    "webpack": "^2.2.1",
+    "webpack": "^3.5.1",
-    "webpack-dev-server": "^1.16.3",
+    "webpack-dev-server": "^2.7.1",
-    "webpack-merge": "^2.0.0",
+    "webpack-merge": "^4.1.0",
-    "webpack-node-externals": "^1.5.4",
+    "zan-doc": "0.1.12"
-    "webpack-vendor-chunk-plugin": "^1.0.0",
-    "zan-doc": "^0.1.0"
   }
 }

packages/actionsheet/README.md

@@ -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)

packages/badge/README.md

@@ -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)

packages/button/README.md

@@ -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)

packages/card/README.md

@@ -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)

packages/cell-swipe/index.js

@@ -1,2 +1,3 @@
-import CellSwipe from './components/CellSwipe.vue'
+import CellSwipe from './src/cell-swipe';
+
 export default CellSwipe;

packages/cell/README.md

@@ -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)

packages/checkbox/README.md

@@ -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)

packages/col/README.md

@@ -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)

packages/datetime-picker/README.md

@@ -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)

packages/datetime-picker/src/datetime-picker.vue

@@ -5,6 +5,7 @@
     :visible-item-count="visibleItemCount"
     @change="handlePickerChange"
     @confirm="handlePickerConfirm"
+    @cancel="$emit('cancel')"
     showToolbar>
   </van-picker>
 </template>
@@ -85,7 +86,6 @@ export default {
       if (!isEqual) this.innerValue = val;
     },
     innerValue(val) {
-      console.log(val + '!!!');
       this.updateColumnValue(val);
       this.$emit('input', val);
     }
@@ -217,12 +217,11 @@ export default {
     isShortMonth(month) {
       return [4, 6, 9, 11].indexOf(month) > -1;
     },
-    handlePickerConfirm(values) {
+    handlePickerConfirm() {
       this.$emit('confirm', this.innerValue);
     },
     handlePickerChange(picker) {
       const values = picker.$children.filter(child => child.currentValue !== undefined).map(child => child.currentValue);
-      console.log(values);
       let value;
 
       if (this.type === 'time') {
@@ -243,7 +242,7 @@ export default {
       }
       value = this.correctValue(value);
       this.innerValue = value;
-      console.log(value, this.innerValue);
+      this.$emit('change', picker);
     },
     updateColumnValue(value) {
       let values = [];

packages/dialog/README.md

@@ -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)

packages/field/README.md

@@ -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)

packages/icon/README.md

@@ -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)

packages/image-preview/README.md

@@ -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)

packages/lazyload/README.md

@@ -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)

packages/loading/README.md

@@ -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)

packages/panel/README.md

@@ -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)

packages/picker/README.md

@@ -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)

packages/popup/README.md

@@ -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)

packages/progress/README.md

@@ -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)

packages/quantity/README.md

@@ -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)

packages/radio/README.md

@@ -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)

packages/row/README.md

@@ -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)

packages/search/README.md

@@ -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)

packages/steps/README.md

@@ -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)

packages/swipe/README.md

@@ -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)

packages/swipe/src/scroll.js

@@ -69,12 +69,6 @@ extend(Scroll.prototype, {
     var leftOffset = offset - wrapWidth;
     var rightOffset = offset + wrapWidth;
 
-    page = this.getCurrentPage();
-    if (page) {
-      page.style['-webkit-transform'] = 'translate3d(' + offset + 'px, 0, 0)';
-      page.style['display'] = 'block';
-    }
-
     leftPage = this.pages[this.mapLoopPage(currentOffsetPage - 1)];
     if (leftPage) {
       if (Math.abs(leftOffset) <= wrapWidth) {
@@ -96,6 +90,12 @@ extend(Scroll.prototype, {
         }
       }
     }
+
+    page = this.getCurrentPage();
+    if (page) {
+      page.style['-webkit-transform'] = 'translate3d(' + offset + 'px, 0, 0)';
+      page.style['display'] = 'block';
+    }
   },
 
   movePage: function(dist, isEnd) {

packages/swipe/src/swipe-item.vue

@@ -10,6 +10,13 @@ export default {
 
   beforeCreate() {
     this.$parent.swipes.push(this);
+  },
+
+  destroyed() {
+    const index = this.$parent.swipes.indexOf(this)
+    if (index > -1) {
+      this.$parent.swipes.splice(index, 1)
+    }
   }
 };
 </script>

packages/swipe/src/swipe.vue

@@ -61,10 +61,28 @@ export default {
     }).on('autoPlay', function(dist, isEnd) {
       scroll.movePage(dist.x, isEnd);
     });
+    this.dummy = dummy
   },
 
-  updated() {
+  watch: {
-    this.scroll.update();
+    swipes(value) {
+      if (this.autoPlay && value.length > 1) {
+        this.dummy.initMove()
+      } else {
+        this.dummy.clearMove()
+      }
+      this.scroll.update();
+      return value
+    },
+
+    autoPlay(value) {
+      if (value && this.swipes.length > 1) {
+        this.dummy.initMove()
+      } else {
+        this.dummy.clearMove()
+      }
+      return value
+    }
   },
 
   methods: {

packages/switch/README.md

@@ -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)

packages/tab/README.md

@@ -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)

packages/tab/src/tabs.vue

@@ -92,7 +92,7 @@
        * `type`为`line`时，tab下方的横线的样式
        */
       navBarStyle() {
-        if (!this.isReady || this.type !== 'line') return;
+        if (!this.isReady || this.type !== 'line' || !this.$refs.tabkey) return;
 
         const tabKey = this.curActive;
         const elem = this.$refs.tabkey[tabKey];

packages/tag/README.md

@@ -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)

packages/toast/README.md

@@ -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)

packages/toast/src/toast.js

@@ -1,7 +1,8 @@
 import Vue from 'vue';
 import merge from 'src/utils/merge';
+import ToastComponent from './toast.vue';
 
-const ToastConstructor = Vue.extend(require('./toast.vue'));
+const ToastConstructor = Vue.extend(ToastComponent);
 let instance;
 
 const getInstance = () => {
@@ -24,6 +25,7 @@ var Toast = (options = {}) => {
   const duration = options.duration || 3000;
 
   const instance = getInstance();
+
   instance.closed = false;
   clearTimeout(instance.timer);
   instance.type = options.type ? options.type : 'text';

packages/toast/src/toast.vue

@@ -1,24 +1,18 @@
 <template>
   <transition name="van-toast-fade">
     <div class="van-toast-wrapper" v-show="visible">
-      <div class="van-toast" :class="['van-toast--' + displayStyle]">
+      <div :class="['van-toast', 'van-toast--' + displayStyle]">
         <!-- 只显示文字 -->
-        <template v-if="displayStyle === 'text'" >
+        <div v-if="displayStyle === 'text'" class="van-toast__text">{{ message }}</div>
-          <div class="van-toast__text">{{message}}</div>
-        </template>
         <!-- 加载中 -->
-        <template v-if="displayStyle === 'loading'">
+        <van-loading v-if="displayStyle === 'loading' && type === 'loading'" type="gradient-circle" color="white"></van-loading>
-            <van-loading v-if="type === 'loading'" type="gradient-circle" color="white"></van-loading>
-        </template>
         <!-- 图案加文字 -->
         <template v-if="displayStyle === 'default'">
           <van-icon class="van-toast__icon" :name="type"></van-icon>
-          <div class="van-toast__text">{{message}}</div>
+          <div class="van-toast__text">{{ message }}</div>
         </template>
         <!-- 传入html -->
-        <template v-if="displayStyle === 'html'">
+        <div v-if="displayStyle === 'html'" class="van-toast__text" v-html="message"></div>
-          <div class="van-toast__text" v-html="message"></div>
-        </template>
       </div>
       <div class="van-toast__overlay" v-if="forbidClick"></div>
     </div>

packages/vant-css/gulpfile.js

@@ -1,11 +1,10 @@
 var gulp = require('gulp');
 var postcss = require('gulp-postcss');
 var cssmin = require('gulp-cssmin');
-var postcssPlugin = require('../../build/utils/postcss_pipe')();
 
 gulp.task('compile', function() {
   return gulp.src('./src/*.css')
-    .pipe(postcss(postcssPlugin))
+    .pipe(postcss())
     .pipe(cssmin())
     .pipe(gulp.dest('./lib'));
 });

packages/vant-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vant-css",
-  "version": "0.6.6",
+  "version": "0.7.9",
   "description": "vant css.",
   "main": "lib/index.css",
   "style": "lib/index.css",
@@ -14,13 +14,12 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "autoprefixer": "^6.7.5",
+    "autoprefixer": "^7.1.2",
     "gulp": "^3.9.1",
-    "gulp-cssmin": "^0.1.7",
+    "gulp-cssmin": "^0.2.0",
-    "gulp-postcss": "^6.1.1",
+    "gulp-postcss": "^7.0.0",
-    "postcss-easy-import": "^2.0.0",
+    "postcss-easy-import": "^2.1.0",
-    "precss": "^1.4.0",
+    "precss": "^2.0.0"
-    "saladcss-bem": "^0.0.1"
   },
   "dependencies": {}
 }

packages/vant-css/scripts/fount-config.js

@@ -341,8 +341,58 @@ module.exports = {
     },
     {
       keywords: ['after', 'sale'],
-      src: '售后记录.svg',
+      src: '售后.svg',
       css: 'after-sale'
+    },
+    {
+      keywords: ['edit', 'data'],
+      src: '编辑资料.svg',
+      css: 'edit-data'
+    },
+    {
+      keywords: ['question'],
+      src: '答疑.svg',
+      css: 'question'
+    },
+    {
+      keywords: ['delete'],
+      src: '删除.svg',
+      css: 'delete'
+    },
+    {
+      keywords: ['records'],
+      src: '记录.svg',
+      css: 'records'
+    },
+    {
+      keywords: ['description'],
+      src: '描述.svg',
+      css: 'description'
+    },
+    {
+      keywords: ['card'],
+      src: '卡.svg',
+      css: 'card'
+    },
+    {
+      keywords: ['gift', 'card'],
+      src: '礼卡.svg',
+      css: 'gift-card'
+    },
+    {
+      keywords: ['coupon'],
+      src: '优惠券卡.svg',
+      css: 'coupon'
+    },
+    {
+      keywords: ['clock'],
+      src: '时钟.svg',
+      css: 'clock'
+    },
+    {
+      keywords: ['gold-coin'],
+      src: '金币.svg',
+      css: 'gold-coin'
     }
   ]
 };

packages/vant-css/src/actionsheet.css

@@ -2,74 +2,72 @@
 @import './mixins/border_retina.css';
 @import './popup.css';
 
-@component-namespace van {
+.van-actionsheet {
-  @b actionsheet {
+  position: fixed;
-    position: fixed;
+  width: 100%;
-    width: 100%;
+  top: auto;
-    top: auto;
+  bottom: 0;
-    bottom: 0;
+  right: auto;
-    right: auto;
+  left: 50%;
-    left: 50%;
+  transform: translate3d(-50%, 0, 0);
-    transform: translate3d(-50%, 0, 0);
+  backface-visibility: hidden;
-    backface-visibility: hidden;
+  transition: .2s ease-out;
-    transition: .2s ease-out;
+  background-color: #e0e0e0;
-    background-color: #e0e0e0;
 
-    @m withtitle {
+  &--withtitle {
-      background-color: $c-white;
+    background-color: $c-white;
+  }
+
+  &__item {
+    line-height: 50px;
+    height: 50px;
+    text-align: center;
+    color: $c-black;
+    font-size: 16px;
+    position: relative;
+    background-color: $c-white;
+
+    &::after {
+      @mixin border-retina (top);
+    }
+  }
+
+  &__subname {
+    color: $c-gray-darker;
+    font-size: 12px;
+  }
+
+  &__loading {
+    margin: 0 auto;
+    display: inline-block;
+  }
+
+  &__button {
+    display: block;
+    margin-top: 5px;
+    line-height: 50px;
+    color: $c-black;
+    font-size: 16px;
+    text-align: center;
+    background-color: $c-white;
+  }
+
+  &__header {
+    line-height: 44px;
+    color: $c-black;
+    text-align: center;
+    position: relative;
+
+    &::after {
+      @mixin border-retina (top, bottom);
     }
 
-    @e item {
+    .van-icon-close {
-      line-height: 50px;
+      position: absolute;
-      height: 50px;
+      font-size: 22px;
-      text-align: center;
+      line-height: 22px;
-      color: $c-black;
+      top: 11px;
-      font-size: 16px;
+      right: 15px;
-      position: relative;
-      background-color: $c-white;
-
-      &::after {
-        @mixin border-retina (top);
-      }
-    }
-
-    @e subname {
-      color: $c-gray-darker;
-      font-size: 12px;
-    }
-
-    @e loading {
-      margin: 0 auto;
-      display: inline-block;
-    }
-
-    @e button {
-      display: block;
-      margin-top: 5px;
-      line-height: 50px;
-      color: $c-black;
-      font-size: 16px;
-      text-align: center;
-      background-color: $c-white;
-    }
-
-    @e header {
-      line-height: 44px;
-      color: $c-black;
-      text-align: center;
-      position: relative;
-
-      &::after {
-        @mixin border-retina (top, bottom);
-      }
-
-      .van-icon-close {
-        position: absolute;
-        font-size: 22px;
-        line-height: 22px;
-        top: 11px;
-        right: 15px;
-      }
     }
   }
 }

packages/vant-css/src/badge.css

@@ -1,77 +1,77 @@
 @import './common/var.css';
 @import './mixins/border_retina.css';
 
-@component-namespace van {
+.van-badge {
-  @b badge-group {
+
+  display: block;
+  overflow: hidden;
+  position: relative;
+  padding: 20px 12px;
+  box-sizing: border-box;
+  line-height: 1.4;
+  background-color: $c-background;
+  color: $c-gray-darker;
+  font-size: 14px;
+  text-decoration: none;
+  word-break: break-all;
+
+  &-group {
     position: relative;
     width: 85px;
+
     &::after {
       @mixin border-retina (top);
     }
   }
 
-  @b badge {
+  &--select {
-    display: block;
+    font-weight: bold;
-    overflow: hidden;
+    color: $c-black;
-    position: relative;
+    background-color: $c-white;
-    padding: 20px 12px;
+    .van-badge__active {
-    box-sizing: border-box;
+      display: block;
-    line-height: 1.4;
-    background-color: $c-background;
-    color: $c-gray-darker;
-    font-size: 14px;
-    text-decoration: none;
-    word-break: break-all;
-
-    @m select {
-      font-weight: bold;
-      color: $c-black;
-      background-color: $c-white;
-      .van-badge__active {
-        display: block;
-      }
-      &::after {
-        @mixin border-retina (top);
-        @mixin border-retina (right);
-        @mixin border-retina (left);
-      }
     }
-
-    @e active {
-      display: none;
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 3px;
-      height: 100%;
-      background-color: #FF4444;
-    }
-
-    @e info {
-      position: absolute;
-      top: 2px;
-      right: 2px;
-      font-size: 10px;
-      transform:scale(0.8);
-      text-align: center;
-      box-sizing: border-box;
-      padding: 0 6px;
-      min-width: 18px;
-      height: 18px;
-      line-height: 18px;
-      border-radius: 9px;
-      background-color: #FF4444;
-      color: $c-white;
-    }
-
     &::after {
-      @mixin border-retina (bottom);
+      @mixin border-retina (top);
+      @mixin border-retina (right);
+      @mixin border-retina (left);
     }
+  }
 
-    &:last-child {
+  &__active {
-      &::after {
+    display: none;
-        border-bottom: 0;
+    position: absolute;
-      }
+    left: 0;
+    top: 0;
+    width: 3px;
+    height: 100%;
+    background-color: #FF4444;
+  }
+
+  &__info {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    font-size: 10px;
+    transform:scale(0.8);
+    text-align: center;
+    box-sizing: border-box;
+    padding: 0 6px;
+    min-width: 18px;
+    height: 18px;
+    line-height: 18px;
+    border-radius: 9px;
+    background-color: #FF4444;
+    color: $c-white;
+  }
+
+  &::after {
+    @mixin border-retina (bottom);
+  }
+
+  &:last-child {
+    &::after {
+      border-bottom: 0;
     }
   }
 }

packages/vant-css/src/base.css

@@ -0,0 +1,5 @@
+/**
+ * 基本样式入口
+ */
+
+@import './reset.css';

packages/vant-css/src/button.css

@@ -1,154 +1,152 @@
 @import './common/var.css';
 @import './loading.css';
 
-@component-namespace van {
+.van-button {
-  @b button {
+  position: relative;
-    position: relative;
+  padding: 0;
-    padding: 0;
+  display: inline-block;
+  height: 45px;
+  line-height: 43px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 16px;
+  text-align: center;
+  appearance: none;
+  outline: 0;
+  overflow: hidden;
+
+  &::after {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #000;
+    opacity: 0;
+  }
+
+  &:not(.is-disabled):active::after {
+    opacity: .3;
+  }
+
+  &__icon-loading {
     display: inline-block;
-    height: 45px;
+    width: 16px;
-    line-height: 43px;
+    height: 16px;
-    border-radius: 4px;
+    vertical-align: middle;
-    box-sizing: border-box;
+  }
+
+  &--default {
+    color: $button-default-color;
+    background-color: $button-default-background-color;
+    border: 1px solid $button-default-border-color;
+
+    &:active {
+      border-color: #cacaca;
+      background-color: $c-gray-light;
+      color: $c-gray-dark;
+    }
+  }
+
+  &--primary {
+    color: $button-primary-color;
+    background-color: $button-primary-background-color;
+    border: 1px solid $button-primary-border-color;
+
+    &:active {
+      border-color: #00AA00;
+      background-color: #00AA00;
+      color: #66CC66;
+    }
+  }
+
+  &--danger {
+    color: $button-danger-color;
+    background-color: $button-danger-background-color;
+    border: 1px solid $button-danger-border-color;
+
+    &:active {
+      border-color: #D43333;
+      background-color: #D43333;
+    }
+  }
+
+  &--large {
+    width: 100%;
+    height: 50px;
+    line-height: 48px;
     font-size: 16px;
-    text-align: center;
+  }
-    appearance: none;
-    outline: 0;
-    overflow: hidden;
 
-    &::after {
+  &--normal {
-      content: " ";
+    padding: 0 15px;
-      position: absolute;
+    font-size: 14px;
-      top: 0;
+  }
-      left: 0;
+
-      right: 0;
+  &--small {
-      bottom: 0;
+    min-width: 60px;
-      background-color: #000;
+    height: 30px;
-      opacity: 0;
+    line-height: 28px;
+    font-size: 12px;
+  }
+
+  /*
+    mini图标默认宽度50px，文字不能超过4个
+  */
+  &--mini {
+    display: inline-block;
+    width: 50px;
+    height: 22px;
+    line-height: 20px;
+    font-size: 10px;
+
+    & + .van-button--mini {
+      margin-left: 5px;
+    }
+  }
+
+  &--disabled {
+    color: $button-disabled-color;
+    background-color: $button-disabled-background-color;
+    border: 1px solid $button-disabled-border-color;
+  }
+
+  &--block {
+    display: block;
+    width: 100%;
+  }
+
+  &--loading {
+    .van-button__text {
+      display: none;
+    }
+  }
+
+  &--bottom-action {
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    border: 0;
+    border-radius: 0;
+    background-color: $bottom-action-button-default-background-color;
+    color: $bottom-action-button-default-color;
+    font-size: 16px;
+
+    &:active {
+      border-color: #DD6F44;
+      background-color: #DD6F44;
+      color: #fff;
     }
 
-    &:not(.is-disabled):active::after {
+    &.van-button--primary {
-      opacity: .3;
+      background-color: $bottom-action-button-primary-background-color;
-    }
+      color: $bottom-action-button-primary-color;
-
-    @e icon-loading {
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      vertical-align: middle;
-    }
-
-    @m default {
-      color: $button-default-color;
-      background-color: $button-default-background-color;
-      border: 1px solid $button-default-border-color;
-
-      &:active {
-        border-color: #cacaca;
-        background-color: $c-gray-light;
-        color: $c-gray-dark;
-      }
-    }
-
-    @m primary {
-      color: $button-primary-color;
-      background-color: $button-primary-background-color;
-      border: 1px solid $button-primary-border-color;
-
-      &:active {
-        border-color: #00AA00;
-        background-color: #00AA00;
-        color: #66CC66;
-      }
-    }
-
-    @m danger {
-      color: $button-danger-color;
-      background-color: $button-danger-background-color;
-      border: 1px solid $button-danger-border-color;
 
       &:active {
         border-color: #D43333;
         background-color: #D43333;
       }
     }
-
-    @m large {
-      width: 100%;
-      height: 50px;
-      line-height: 48px;
-      font-size: 16px;
-    }
-
-    @m normal {
-      padding: 0 15px;
-      font-size: 14px;
-    }
-
-    @m small {
-      min-width: 60px;
-      height: 30px;
-      line-height: 28px;
-      font-size: 12px;
-    }
-
-    /*
-      mini图标默认宽度50px，文字不能超过4个
-     */
-    @m mini {
-      display: inline-block;
-      width: 50px;
-      height: 22px;
-      line-height: 20px;
-      font-size: 10px;
-
-      & + .van-button--mini {
-        margin-left: 5px;
-      }
-    }
-
-    @m disabled {
-      color: $button-disabled-color;
-      background-color: $button-disabled-background-color;
-      border: 1px solid $button-disabled-border-color;
-    }
-
-    @m block {
-      display: block;
-      width: 100%;
-    }
-
-    @m loading {
-      .van-button__text {
-        display: none;
-      }
-    }
-
-    @m bottom-action {
-      width: 100%;
-      height: 50px;
-      line-height: 50px;
-      border: 0;
-      border-radius: 0;
-      background-color: $bottom-action-button-default-background-color;
-      color: $bottom-action-button-default-color;
-      font-size: 16px;
-
-      &:active {
-        border-color: #DD6F44;
-        background-color: #DD6F44;
-        color: #fff;
-      }
-
-      &.van-button--primary {
-        background-color: $bottom-action-button-primary-background-color;
-        color: $bottom-action-button-primary-color;
-
-        &:active {
-          border-color: #D43333;
-          background-color: #D43333;
-        }
-      }
-    }
   }
 }

packages/vant-css/src/cell-swipe.css

@@ -1,27 +1,30 @@
-
+.van-cell {
-.van-cell-swipe .van-cell-wrapper, .van-cell-swipe .van-cell-left, .van-cell-swipe .van-cell-right {
+  &-swipe {
-    -webkit-transition: -webkit-transform 150ms ease-in-out;
-    transition: -webkit-transform 150ms ease-in-out;
-    transition: transform 150ms ease-in-out;
-    transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
-}
-
-.van-cell-swipe{
     position: relative;
     min-height: 48px;
     overflow: hidden;
-}
+
-.van-cell-right{
+    .van-cell-wrapper,
+    .van-cell-left,
+    .van-cell-right {
+      transition: transform 150ms ease-in-out;
+    }
+  }
+
+  &-left,
+  &-right {
     position: absolute;
     height: 100%;
-    right: 0;
     top: 0;
-    transform: translate3d(100%,0,0);
+  }
-}
+
-.van-cell-left {
+  &-left {
-    position: absolute;
-    height: 100%;
     left: 0;
-    top: 0;
+    transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%,0,0);
+  }
-}
+
+  &-right {
+    right: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+}