[new feature] add i18n support (#310)

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [new feature] add i18n support

* feat: Extract demos from markdown

* feat: Base components demos

* [new feature] complete demo extract & translate

* [fix] text cases

* fix: add deepAssign test cases

* fix: changelog detail

* [new feature] AddressEdit support i18n

.github/CONTRIBUTING.zh-CN.md

@@ -30,7 +30,7 @@ npm run dev
 
 - 仓库的组件代码都位于 `packages` 下，每个组件一个文件夹
 - 所有的组件样式代码都位于 `packages/vant-css/src` 下，`vant-css` 也会在发布时单独发包
-- `docs/examples-docs` 目录下是文档网站的代码，根据语言划分为 zh-CN 和 en-US，本地开发时可以在根目录下运行 `npm run dev` 开启文档网站。
+- `docs/markdown` 目录下是文档网站的代码，根据语言划分为 zh-CN 和 en-US，本地开发时可以在根目录下运行 `npm run dev` 开启文档网站。
 
 项目目录大致如下：
 
@@ -58,7 +58,7 @@ vant
 
 - 添加文档
 
-新组件的文档编写，需要在 `docs/examples-docs` 下各个语言中新建对应同名文档 `button.md`，并在 `docs/src/doc.config.js` 中进行文档路径配置
+新组件的文档编写，需要在 `docs/markdown` 下各个语言中新建对应同名文档 `button.md`，在 `docs/demos` 下创建组件示例，并在 `docs/src/doc.config.js` 中进行配置组件名称
 
 - 添加测试代码
 
@@ -67,7 +67,7 @@ vant
 
 ## 组件文档如何编写
 
-`docs/examples-docs` 下根据语言划分了组件文档，每个组件需要在各语言中编辑对应的文档。组件文档采用 markdown 格式，内容包括使用示例以及 `API` 等。具体书写规范请参考 [组件文档书写规范](./MARKDOWN.md)。
+`docs/markdown` 下根据语言划分了组件文档，每个组件需要在各语言中编辑对应的文档。组件文档采用 markdown 格式，内容包括使用示例以及 `API` 等。具体书写规范请参考 [组件文档书写规范](./MARKDOWN.md)。
 
 #### API 说明
 
@@ -106,5 +106,5 @@ vant
 `z-index` 优先级（从高到低）：
 
 * 特殊组件：Toast 永远在最上面，[3000, +∞)
-* ‘用完就关’ 的组件：Dialog, Pop, Actionsheet, image-preview 等 [2000, 3000)
+* ‘用完就关’ 的组件：Dialog, Pop, Actionsheet, ImagePreview 等 [2000, 3000)
 * 其他：组件内部用来控制层次的 z-index 的区间 [-10, 10]，尽可能写小，一般1，2，3这种就够了。

.github/MARKDOWN.md

@@ -18,11 +18,9 @@
 
 #### 代码演示
 
-另起一个二级标题，正文可以是 markdown 和示例的混合。示例的结构如下:
+另起一个二级标题，示例的结构如下:
 
-    // 在 demo 端之外放置的 script 会直接运行
+  ```javascript
-    // 在 script 中声明的 vue 变量，在 demo 中都可以直接使用
-    <script>
     export default {
       data() {
         return {
@@ -30,15 +28,13 @@
         };
       }
     };
-    </script>
+  ```
 
-    :::demo 基础用法（必须以:::demo开头，后面的描述可选，如果有的话控制在一两句话，不要过长）
+  ```html
-    ```html                             // :::demo后面必须接代码段，否则不会识别为示例
+    <van-button :size="size">
-      <van-button :size="size">         // 在内容区直接写 vue 中 template 段代码即可
       Large
     </van-button>
   ```
-    :::                                 // 示例结束的标记，必须接在代码段之后，否则不会识别为示例
     
 代码演示的几个书写原则：
 

build/bin/build-entry.js

@@ -1,28 +1,37 @@
-var Components = require('./get-components')();
+const Components = require('./get-components')();
-var fs = require('fs');
+const fs = require('fs');
-var render = require('json-templater/string');
+const path = require('path');
-var uppercamelcase = require('uppercamelcase');
+const uppercamelize = require('uppercamelcase');
-var path = require('path');
+const version = process.env.VERSION || require('../../package.json').version;
+const tips = '// This file is auto gererated by build/bin/build-entry.js';
 
-var OUTPUT_PATH = path.join(__dirname, '../../packages/index.js');
+function buildVantEntry() {
-var IMPORT_TEMPLATE = 'import {{name}} from \'./{{package}}\';';
+  const uninstallComponents = [
-var ISNTALL_COMPONENT_TEMPLATE = '  {{name}}';
+    'Lazyload',
-var MAIN_TEMPLATE = `{{include}}
+    'Waterfall',
-
+    'Dialog',
-const version = '{{version}}';
+    'Toast',
-const components = [
+    'ImagePreview',
-{{components}}
+    'Locale'
   ];
 
-const install = function(Vue) {
+  const importList = Components.map(name => `import ${uppercamelize(name)} from './${name}';`);
-  if (install.installed) return;
+  const exportList = Components.map(name => `${uppercamelize(name)}`);
+  const intallList = exportList.filter(name => !~uninstallComponents.indexOf(uppercamelize(name)));
+  const content = `${tips}
+${importList.join('\n')}
 
+const version = '${version}';
+const components = [
+  ${intallList.join(',\n  ')}
+];
+
+const install = Vue => {
   components.forEach(component => {
     Vue.component(component.name, component);
   });
 };
 
-/* istanbul ignore if */
 if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
@@ -30,54 +39,72 @@ if (typeof window !== 'undefined' && window.Vue) {
 export {
   install,
   version,
-{{list}}
+  ${exportList.join(',\n  ')}
 };
+
 export default {
   install,
   version
 };
 `;
 
-delete Components.font;
+  fs.writeFileSync(path.join(__dirname, '../../packages/index.js'), content);
-
-var includeComponentTemplate = [];
-var installTemplate = [];
-var listTemplate = [];
-
-Components.forEach(name => {
-  var componentName = uppercamelcase(name);
-
-  includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
-    name: componentName,
-    package: name
-  }));
-
-  if ([
-    // directives
-    'Lazyload',
-    'Waterfall',
-
-    // services
-    'Dialog',
-    'Toast',
-    'ImagePreview'
-  ].indexOf(componentName) === -1) {
-    installTemplate.push(render(ISNTALL_COMPONENT_TEMPLATE, {
-      name: componentName,
-      component: name
-    }));
 }
 
-  listTemplate.push(`  ${componentName}`);
+function buildDemoEntry() {
+  const dir = path.join(__dirname, '../../docs/demos/views');
+  const demos = fs.readdirSync(dir)
+    .filter(name => ~name.indexOf('.vue'))
+    .map(name => name.replace('.vue', ''))
+    .map(name => `'${name}': r => require.ensure([], () => r(wrapper(require('./views/${name}'), '${name}')), '${name}')`);
+
+  const content = `${tips}
+import './common';
+
+function wrapper(component, name) {
+  component = component.default;
+  component.name = 'demo-' + name;
+  return component;
+}
+
+export default {
+  ${demos.join(',\n  ')}
+};
+`;
+  fs.writeFileSync(path.join(dir, '../index.js'), content);
+}
+
+function buildDocsEntry() {
+  const dir = path.join(__dirname, '../../docs/markdown');
+  const cnDocs = fs.readdirSync(path.join(dir, 'zh-CN')).map(name => 'zh-CN/' + name);
+  const enDocs = fs.readdirSync(path.join(dir, 'en-US')).map(name => 'en-US/' + name);
+  const docs = [...cnDocs, ...enDocs]
+    .filter(name => name.indexOf('.md') !== -1)
+    .map(name => name.replace('.md', ''))
+    .map(name => `'${name}': wrapper(r => require.ensure([], () => r(require('./${name}.md')), '${name}'))`);
+
+  const content = `${tips}
+import progress from 'nprogress';
+import 'nprogress/nprogress.css';
+
+function wrapper(component) {
+  return function(r) {
+    progress.start();
+    component(r).then(() => {
+      progress.done();
+    }).catch(() => {
+      progress.done();
     });
+  };
+}
 
-var template = render(MAIN_TEMPLATE, {
+export default {
-  include: includeComponentTemplate.join('\n'),
+  ${docs.join(',\n  ')}
-  list: listTemplate.join(',\n'),
+};
-  components: installTemplate.join(',\n') || ' ',
+`;
-  version: process.env.VERSION || require('../../package.json').version
+  fs.writeFileSync(path.join(dir, './index.js'), content);
-});
+}
-
-fs.writeFileSync(OUTPUT_PATH, template);
-console.log('[build entry] DONE:' + OUTPUT_PATH);
 
+buildVantEntry();
+buildDemoEntry();
+buildDocsEntry();

build/webpack.config.dev.js

@@ -6,20 +6,11 @@ const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 const isProduction = process.env.NODE_ENV === 'production';
 const docConfig = require('../docs/src/doc.config');
-const { extractExample } = require('zan-doc/src/helper');
 const styleLoaders = [
   { loader: 'css-loader' },
   { loader: 'postcss-loader', options: { sourceMap: true } }
 ];
 
-// extract [components].vue from [components].md
-extractExample({
-  src: path.resolve(__dirname, '../docs/examples-docs'),
-  dist: path.resolve(__dirname, '../docs/examples-dist'),
-  nav: docConfig,
-  watch: !isProduction
-});
-
 module.exports = {
   entry: {
     vendor: ['packages'],
@@ -89,15 +80,7 @@ module.exports = {
         test: /\.md/,
         loader: 'vue-markdown-loader',
         options: {
-          preventExtract: true,
+          preventExtract: true
-          use: [[require('markdown-it-container'), 'demo']],
-          preprocess(MarkdownIt, source) {
-            const styleRegexp = /<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/i;
-            const scriptRegexp = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/i;
-            MarkdownIt.renderer.rules.table_open = () =>
-              '<table class="zan-doc-table">';
-            return source.replace(styleRegexp, '').replace(scriptRegexp, '');
-          }
         }
       },
       {

docs/demos/common.js

@@ -0,0 +1,72 @@
+/**
+ * Demo Common Mixin && i18n
+ */
+
+import Vue from 'vue';
+import { Locale, Toast, Dialog } from 'packages';
+import { DemoBlock, DemoSection } from 'vant-doc';
+import camelize from 'packages/utils/camelize';
+
+const demoBaseMixin = {
+  beforeCreate() {
+    const { name, i18n } = this.$options;
+    if (name && i18n) {
+      const formattedI18n = {};
+      const camelizedName = camelize(name);
+      Object.keys(i18n).forEach(key => {
+        formattedI18n[key] = { [camelizedName]: i18n[key] };
+      });
+      Locale.add(formattedI18n);
+    }
+  }
+};
+
+window.Toast = Toast;
+window.Dialog = Dialog;
+Vue.mixin(Locale.i18n);
+Vue.mixin(demoBaseMixin);
+Vue.component('demo-block', DemoBlock);
+Vue.component('demo-section', DemoSection);
+
+Locale.add({
+  'zh-CN': {
+    red: '红色',
+    orange: '橙色',
+    yellow: '黄色',
+    tab: '标签',
+    tag: '标签',
+    desc: '描述信息',
+    back: '返回',
+    title: '标题',
+    status: '状态',
+    button: '按钮',
+    option: '选项',
+    search: '搜索',
+    content: '内容',
+    custom: '自定义',
+    loading: '加载状态',
+    disabled: '禁用状态',
+    basicUsage: '基础用法',
+    advancedUsage: '高级用法'
+  },
+  'en-US': {
+    red: 'Red',
+    orange: 'Orange',
+    yellow: 'Yellow',
+    tab: 'Tab',
+    tag: 'Tag',
+    desc: 'Description',
+    back: 'Back',
+    title: 'Title',
+    status: 'Status',
+    button: 'Button',
+    option: 'Option',
+    search: 'Search',
+    content: 'Content',
+    custom: 'Custom',
+    loading: 'Loading',
+    disabled: 'Disabled',
+    basicUsage: 'Basic Usage',
+    advancedUsage: 'Advanced Usage'
+  }
+});

docs/demos/index.js

@@ -0,0 +1,57 @@
+// This file is auto gererated by build/bin/build-entry.js
+import './common';
+
+function wrapper(component, name) {
+  component = component.default;
+  component.name = 'demo-' + name;
+  return component;
+}
+
+export default {
+  'actionsheet': r => require.ensure([], () => r(wrapper(require('./views/actionsheet'), 'actionsheet')), 'actionsheet'),
+  'address-edit': r => require.ensure([], () => r(wrapper(require('./views/address-edit'), 'address-edit')), 'address-edit'),
+  'address-list': r => require.ensure([], () => r(wrapper(require('./views/address-list'), 'address-list')), 'address-list'),
+  'area': r => require.ensure([], () => r(wrapper(require('./views/area'), 'area')), 'area'),
+  'badge': r => require.ensure([], () => r(wrapper(require('./views/badge'), 'badge')), 'badge'),
+  'button': r => require.ensure([], () => r(wrapper(require('./views/button'), 'button')), 'button'),
+  'card': r => require.ensure([], () => r(wrapper(require('./views/card'), 'card')), 'card'),
+  'cell-swipe': r => require.ensure([], () => r(wrapper(require('./views/cell-swipe'), 'cell-swipe')), 'cell-swipe'),
+  'cell': r => require.ensure([], () => r(wrapper(require('./views/cell'), 'cell')), 'cell'),
+  'checkbox': r => require.ensure([], () => r(wrapper(require('./views/checkbox'), 'checkbox')), 'checkbox'),
+  'contact': r => require.ensure([], () => r(wrapper(require('./views/contact'), 'contact')), 'contact'),
+  'coupon': r => require.ensure([], () => r(wrapper(require('./views/coupon'), 'coupon')), 'coupon'),
+  'datetime-picker': r => require.ensure([], () => r(wrapper(require('./views/datetime-picker'), 'datetime-picker')), 'datetime-picker'),
+  'dialog': r => require.ensure([], () => r(wrapper(require('./views/dialog'), 'dialog')), 'dialog'),
+  'field': r => require.ensure([], () => r(wrapper(require('./views/field'), 'field')), 'field'),
+  'goods-action': r => require.ensure([], () => r(wrapper(require('./views/goods-action'), 'goods-action')), 'goods-action'),
+  'icon': r => require.ensure([], () => r(wrapper(require('./views/icon'), 'icon')), 'icon'),
+  'image-preview': r => require.ensure([], () => r(wrapper(require('./views/image-preview'), 'image-preview')), 'image-preview'),
+  'layout': r => require.ensure([], () => r(wrapper(require('./views/layout'), 'layout')), 'layout'),
+  'lazyload': r => require.ensure([], () => r(wrapper(require('./views/lazyload'), 'lazyload')), 'lazyload'),
+  'loading': r => require.ensure([], () => r(wrapper(require('./views/loading'), 'loading')), 'loading'),
+  'nav-bar': r => require.ensure([], () => r(wrapper(require('./views/nav-bar'), 'nav-bar')), 'nav-bar'),
+  'notice-bar': r => require.ensure([], () => r(wrapper(require('./views/notice-bar'), 'notice-bar')), 'notice-bar'),
+  'number-keyboard': r => require.ensure([], () => r(wrapper(require('./views/number-keyboard'), 'number-keyboard')), 'number-keyboard'),
+  'panel': r => require.ensure([], () => r(wrapper(require('./views/panel'), 'panel')), 'panel'),
+  'password-input': r => require.ensure([], () => r(wrapper(require('./views/password-input'), 'password-input')), 'password-input'),
+  'picker': r => require.ensure([], () => r(wrapper(require('./views/picker'), 'picker')), 'picker'),
+  'popup': r => require.ensure([], () => r(wrapper(require('./views/popup'), 'popup')), 'popup'),
+  'progress': r => require.ensure([], () => r(wrapper(require('./views/progress'), 'progress')), 'progress'),
+  'pull-refresh': r => require.ensure([], () => r(wrapper(require('./views/pull-refresh'), 'pull-refresh')), 'pull-refresh'),
+  'radio': r => require.ensure([], () => r(wrapper(require('./views/radio'), 'radio')), 'radio'),
+  'search': r => require.ensure([], () => r(wrapper(require('./views/search'), 'search')), 'search'),
+  'sku': r => require.ensure([], () => r(wrapper(require('./views/sku'), 'sku')), 'sku'),
+  'stepper': r => require.ensure([], () => r(wrapper(require('./views/stepper'), 'stepper')), 'stepper'),
+  'steps': r => require.ensure([], () => r(wrapper(require('./views/steps'), 'steps')), 'steps'),
+  'submit-bar': r => require.ensure([], () => r(wrapper(require('./views/submit-bar'), 'submit-bar')), 'submit-bar'),
+  'swipe': r => require.ensure([], () => r(wrapper(require('./views/swipe'), 'swipe')), 'swipe'),
+  'switch-cell': r => require.ensure([], () => r(wrapper(require('./views/switch-cell'), 'switch-cell')), 'switch-cell'),
+  'switch': r => require.ensure([], () => r(wrapper(require('./views/switch'), 'switch')), 'switch'),
+  'tab': r => require.ensure([], () => r(wrapper(require('./views/tab'), 'tab')), 'tab'),
+  'tabbar': r => require.ensure([], () => r(wrapper(require('./views/tabbar'), 'tabbar')), 'tabbar'),
+  'tag': r => require.ensure([], () => r(wrapper(require('./views/tag'), 'tag')), 'tag'),
+  'toast': r => require.ensure([], () => r(wrapper(require('./views/toast'), 'toast')), 'toast'),
+  'tree-select': r => require.ensure([], () => r(wrapper(require('./views/tree-select'), 'tree-select')), 'tree-select'),
+  'uploader': r => require.ensure([], () => r(wrapper(require('./views/uploader'), 'uploader')), 'uploader'),
+  'waterfall': r => require.ensure([], () => r(wrapper(require('./views/waterfall'), 'waterfall')), 'waterfall')
+};

docs/demos/views/actionsheet.vue

@@ -0,0 +1,81 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-button @click="show1 = true">{{ $t('button1') }}</van-button>
+      <van-actionsheet v-model="show1" :actions="actions" />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-button @click="show2 = true">{{ $t('button2') }}</van-button>
+      <van-actionsheet v-model="show2" :actions="actions" :cancelText="$t('cancel')" />
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-button @click="show3 = true">{{ $t('button3') }}</van-button>
+      <van-actionsheet v-model="show3" :title="$t('title')">
+        <p>{{ $t('content') }}</p>
+      </van-actionsheet>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      button1: '弹出 Actionsheet',
+      button2: '弹出带取消按钮的 Actionsheet',
+      button3: '弹出带标题的 Actionsheet',
+      title2: '带取消按钮的 Actionsheet',
+      title3: '带标题的 Actionsheet'
+    },
+    'en-US': {
+      button1: 'Show Actionsheet',
+      button2: 'Show Actionsheet with cancel button',
+      button3: 'Show Actionsheet with title',
+      title2: 'Actionsheet with cancel button',
+      title3: 'Actionsheet with title'
+    }
+  },
+
+  data() {
+    return {
+      show1: false,
+      show2: false,
+      show3: false
+    };
+  },
+
+  computed: {
+    actions() {
+      return [
+        { name: this.$t('option'), callback: this.onClick },
+        { name: this.$t('option') },
+        { name: this.$t('option'), loading: true }
+      ];
+    }
+  },
+
+  methods: {
+    onClick(item) {
+      Toast(item.name);
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-actionsheet {
+  .actionsheet-wx {
+    color: #06bf04;
+  }
+
+  .van-button {
+    margin-left: 15px;
+  }
+
+  p {
+    padding: 20px;
+  }
+}
+</style>

docs/demos/views/address-edit.vue

@@ -0,0 +1,69 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-address-edit
+        :areaList="areaList"
+        :showPostal="true"
+        :showSetDefault="true"
+        :showSearchResult="true"
+        :searchResult="searchResult"
+        @save="onSave"
+        @delete="onDelete"
+        @change-detail="onChangeDetail"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+import areaList from '../mock/area.json';
+
+export default {
+  i18n: {
+    'zh-CN': {
+
+    },
+    'en-US': {
+
+    }
+  },
+
+  data() {
+    return {
+      areaList,
+      searchResult: []
+    };
+  },
+
+  methods: {
+    onSave() {
+      Toast('save');
+    },
+
+    onDelete() {
+      Toast('delete');
+    },
+
+    onChangeDetail(val) {
+      if (val) {
+        this.searchResult = [{
+          name: '黄龙万科中心',
+          address: '杭州市西湖区'
+        }, {
+          name: '黄龙万科中心H座'
+        }, {
+          name: '黄龙万科中心H座',
+          address: '杭州市西湖区'
+        }];
+      } else {
+        this.searchResult = [];
+      }
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss">
+
+</style>

docs/demos/views/address-list.vue

@@ -0,0 +1,60 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-address-list
+        v-model="chosenAddressId"
+        :list="list"
+        @add="onAdd"
+        @edit="onEdit"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+
+    },
+    'en-US': {
+
+    }
+  },
+
+  data() {
+    return {
+      chosenAddressId: '1',
+      list: [
+        {
+          id: '1',
+          name: '张三',
+          tel: '13000000000',
+          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
+        },
+        {
+          id: '2',
+          name: '李四',
+          tel: '1310000000',
+          address: '浙江省杭州市拱墅区莫干山路 50 号'
+        },
+        {
+          id: '3',
+          name: '王五',
+          tel: '1320000000',
+          address: '浙江省杭州市滨江区江南大道 15 号'
+        }
+      ]
+    }
+  },
+
+  methods: {
+    onAdd() {
+      Toast('新增收货地址');
+    },
+    onEdit(item, index) {
+      Toast('编辑收货地址:' + index);
+    }
+  }
+};
+</script>

docs/demos/views/area.vue

@@ -0,0 +1,38 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-area :areaList="areaList" />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-area :areaList="areaList" value="110101" />
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-area :areaList="areaList" :columnsNum="2" />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+import AreaList from '../mock/area.json';
+
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '选中省市县',
+      title3: '配置显示列'
+    },
+    'en-US': {
+      title2: 'Initial Value',
+      title3: 'Columns Number'
+    }
+  },
+
+  data() {
+    return {
+      areaList: AreaList
+    };
+  }
+};
+</script>

docs/demos/views/badge.vue

@@ -0,0 +1,54 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-badge-group :activeKey="activeKey">
+        <van-badge :title="$t('title')" @click="onClick"></van-badge>
+        <van-badge :title="$t('title')" @click="onClick" info="8"></van-badge>
+        <van-badge :title="$t('title')" @click="onClick" info="99"></van-badge>
+        <van-badge :title="$t('title')" @click="onClick" info="199"></van-badge>
+      </van-badge-group>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title: '标签名称'
+    }
+  },
+
+  data() {
+    return {
+      activeKey: 0
+    };
+  },
+
+  methods: {
+    onClick(key) {
+      this.activeKey = key;
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-badge {
+  .van-badge-group {
+    width: auto;
+    margin: 0 15px;
+    padding: 20px 0;
+    background-color: #fff;
+
+    &::after {
+      display: none;
+    }
+  }
+
+  .van-badge {
+    width: 85px;
+    margin: 0 auto;
+  }
+}
+</style>

docs/demos/views/button.vue

@@ -0,0 +1,92 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('title1')">
+      <van-button type="default">Default</van-button>
+      <van-button type="primary">Primary</van-button>
+      <van-button type="danger">Danger</van-button>
+    </demo-block>
+    
+    <demo-block :title="$t('title2')">
+      <van-button size="large">Large</van-button>
+      <van-button size="normal">Normal</van-button>
+      <van-button size="small">Small</van-button>
+      <van-button size="mini">Mini</van-button>
+    </demo-block>
+
+    <demo-block :title="$t('disabled')">
+      <van-button disabled>Diabled</van-button>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-button loading></van-button>
+      <van-button loading type="primary"></van-button>
+    </demo-block>
+
+    <demo-block :title="$t('title4')">
+      <van-button tag="a" href="https://www.youzan.com" target="_blank">
+        {{ $t('button') }}
+      </van-button>
+    </demo-block>
+
+    <demo-block :title="$t('title5')">
+      <van-button type="primary" bottomAction>{{ $t('button') }}</van-button>
+
+      <van-row>
+        <van-col span="12">
+          <van-button bottomAction>{{ $t('button') }}</van-button>
+        </van-col>
+        <van-col span="12">
+          <van-button type="primary" bottomAction>{{ $t('button') }}</van-button>
+        </van-col>
+      </van-row>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title1: '按钮类型',
+      title2: '按钮尺寸',
+      title3: '加载状态',
+      title4: '自定义按钮标签',
+      title5: '页面底部操作按钮'
+    },
+    'en-US': {
+      title1: 'Type',
+      title2: 'Size',
+      title3: 'Loading',
+      title4: 'Custom Tag',
+      title5: 'Action Button'
+    }
+  }
+}
+</script>
+
+
+<style lang="postcss">
+.demo-button {
+  .van-button {
+    user-select: none;
+
+    &--large,
+    &--bottom-action {
+      margin-bottom: 15px;
+    }
+
+    &--small,
+    &--normal {
+      margin-right: 10px;
+    }
+  }
+
+  .van-doc-demo-block {
+    padding: 0 15px;
+  }
+
+  .van-doc-demo-block__title {
+    padding-left: 0;
+  }
+}
+</style>

docs/demos/views/card.vue

@@ -0,0 +1,38 @@
+<template>
+  <demo-section background="#fff">
+    <demo-block :title="$t('basicUsage')">
+      <van-card
+        :title="$t('title')"
+        :desc="$t('desc')"
+        num="2"
+        price="2.00"
+        :thumb="imageURL"
+      />
+    </demo-block> 
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-card
+        :title="$t('title')"
+        :desc="$t('desc')"
+        num="2"
+        price="2.00"
+        :thumb="imageURL"
+      >
+        <div slot="footer">
+          <van-button size="mini">{{ $t('button') }}</van-button>
+          <van-button size="mini">{{ $t('button') }}</van-button>
+        </div>
+      </van-card>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
+    }
+  }
+}
+</script>

docs/demos/views/cell-swipe.vue

@@ -0,0 +1,51 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-cell-swipe :right-width="65" :left-width="65">
+        <span slot="left">{{ $t('button1') }}</span>
+        <van-cell-group>
+          <van-cell :title="$t('title')" :value="$t('content')"></van-cell>
+        </van-cell-group>
+        <span slot="right">{{ $t('button2') }}</span>
+      </van-cell-swipe>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      button1: '选择',
+      button2: '删除',
+      title: '单元格'
+    },
+    'en-US': {
+      button1: 'Select',
+      button2: 'Delete',
+      title: 'Cell'
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-cell-swipe {
+  .van-cell-swipe__left,
+  .van-cell-swipe__right {
+      color: #FFFFFF;
+      font-size: 16px;
+      width: 65px;
+      height: 44px;
+      display: inline-block;
+      text-align: center;
+      line-height: 44px;
+  }
+  .van-cell-swipe__left {
+    background-color: #FF4444;  
+  }
+  .van-cell-swipe__right {
+    background-color: #84c483;
+  }
+}
+</style>

docs/demos/views/cell.vue

@@ -0,0 +1,86 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-cell-group>
+        <van-cell :title="$t('cell')" :value="$t('content')" />
+        <van-cell :title="$t('cell')" :value="$t('content')" :label="$t('desc')" />
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-cell-group>
+        <van-cell :value="$t('content')" />
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-cell-group>
+        <van-cell :title="$t('cell')" icon="location" />
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('title4')">
+      <van-cell-group>
+        <van-cell :title="$t('cell')" is-link />
+        <van-cell :title="$t('cell')" is-link :value="$t('content')" />
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-cell-group>
+        <van-cell :value="$t('content')" icon="shop" is-link>
+          <template slot="title">
+            <span class="van-cell-text">{{ $t('cell') }}</span>
+            <van-tag type="danger">{{ $t('tag') }}</van-tag>
+          </template>
+        </van-cell>
+        <van-cell :title="$t('cell')" icon="location" is-link />
+        <van-cell :title="$t('cell')">
+          <template slot="right-icon">
+            <van-icon name="search" class="van-cell__right-icon"></van-icon>
+          </template>
+        </van-cell>
+      </van-cell-group>
+    </demo-block>
+  </demo-section>  
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      cell: '单元格',
+      title2: '只设置 value',
+      title3: '展示图标',
+      title4: '展示箭头'
+    },
+    'en-US': {
+      cell: 'Cell title',
+      title2: 'Value only',
+      title3: 'Left Icon',
+      title4: 'Link'
+    }
+  },
+
+  methods: {
+    handleClick() {
+      console.log('cell click');
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-cell {
+  .van-cell-text {
+    margin-right: 5px;
+  }
+  .van-cell__right-icon {
+    font-size: 16px;
+  }
+  .van-cell-text,
+  .van-tag--danger {
+    vertical-align: middle;
+  }
+}
+</style>

docs/demos/views/checkbox.vue

@@ -0,0 +1,77 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-checkbox v-model="checkbox1">{{ $t('checkbox') }} 1</van-checkbox>
+    </demo-block>
+
+    <demo-block :title="$t('disabled')">
+      <van-checkbox v-model="checkbox2" disabled>{{ $t('checkbox') }} 2</van-checkbox>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-checkbox-group v-model="result">
+        <van-checkbox
+          v-for="(item, index) in list"
+          :key="index"
+          :name="item"
+        >
+          {{ $t('checkbox') }} {{ item }}
+        </van-checkbox>
+      </van-checkbox-group>
+    </demo-block>
+
+    <demo-block :title="$t('title4')">
+      <van-checkbox-group v-model="result">
+        <van-cell-group>
+          <van-cell v-for="(item, index) in list" :key="index">
+            <van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
+          </van-cell>
+        </van-cell-group>
+      </van-checkbox-group>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      checkbox: '复选框',
+      title3: 'Checkbox 组',
+      title4: '与 Cell 组件一起使用'
+    },
+    'en-US': {
+      checkbox: 'Checkbox',
+      title3: 'Checkbox Group',
+      title4: 'Inside a Cell'
+    }
+  },
+
+  data() {
+    return {
+      checkbox1: true,
+      checkbox2: true,
+      list: [
+        'a',
+        'b',
+        'c'
+      ],
+      result: ['a', 'b']
+    };
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-checkbox {
+  .van-checkbox {
+    margin: 10px 0 0 20px;
+  }
+
+  .van-cell {
+    .van-checkbox {
+      margin: 0;
+    }
+  }
+}
+</style>

docs/demos/views/contact.vue

@@ -0,0 +1,116 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-contact-card
+        :type="cardType"
+        :name="currentContact.name"
+        :tel="currentContact.tel"
+        @click="showList = true"
+      />
+
+      <van-popup v-model="showList" position="bottom">
+        <van-contact-list
+          v-model="chosenContactId"
+          :list="list"
+          @add="onAdd"
+          @edit="onEdit"
+          @select="onSelect"
+        />
+      </van-popup>
+
+      <van-popup v-model="showEdit" position="bottom">
+        <van-contact-edit
+          :contactInfo="editingContact"
+          :isEdit="isEdit"
+          @save="onSave"
+          @delete="onDelete"
+        />
+      </van-popup>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+
+    },
+    'en-US': {
+
+    }
+  },
+
+  data() {
+    return {
+      chosenContactId: null,
+      editingContact: {},
+      showList: false,
+      showEdit: false,
+      isEdit: false,
+      list: [{
+        name: '张三',
+        tel: '13000000000',
+        id: 0
+      }]
+    };
+  },
+
+  computed: {
+    cardType() {
+      return this.chosenContactId !== null ? 'edit' : 'add';
+    },
+
+    currentContact() {
+      const id = this.chosenContactId;
+      return id !== null ? this.list.filter(item => item.id === id)[0] : {};
+    }
+  },
+
+  methods: {
+    onAdd() {
+      this.editingContact = { id: this.list.length };
+      this.isEdit = false;
+      this.showEdit = true;
+    },
+
+    onEdit(item) {
+      this.isEdit = true;
+      this.showEdit = true;
+      this.editingContact = item;
+    },
+
+    onSelect() {
+      this.showList = false;
+    },
+
+    onSave(info) {
+      this.showEdit = false;
+      this.showList = false;
+
+      if (this.isEdit) {
+        this.list = this.list.map(item => item.id === info.id ? info : item);
+      } else {
+        this.list.push(info);
+      }
+      this.chosenContactId = info.id;
+    },
+
+    onDelete(info) {
+      this.showEdit = false;
+      this.list = this.list.filter(item => item.id !== info.id);
+      if (this.chosenContactId === info.id) {
+        this.chosenContactId = null;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-contact {
+  .van-popup {
+    height: 100%;
+  }
+}
+</style>

docs/demos/views/coupon.vue

@@ -0,0 +1,96 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-coupon-cell
+        :coupons="coupons"
+        :chosenCoupon="chosenCoupon"
+        @click="showList = true"
+      />
+
+      <van-popup v-model="showList" position="bottom">
+        <van-coupon-list
+          :coupons="coupons"
+          :chosenCoupon="chosenCoupon"
+          :disabledCoupons="disabledCoupons"
+          @change="onChange"
+          @exchange="onExchange"
+        />
+      </van-popup>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+const coupon = {
+  available: 1,
+  discount: 0,
+  denominations: 150,
+  origin_condition: 0,
+  reason: '',
+  value: 150,
+  condition: '下单立减 1.50 元',
+  name: '新手专用优惠券',
+  start_at: 1489104000,
+  end_at: 1514592000
+};
+
+const discountCoupon = {
+  ...coupon,
+  discount: 88,
+  denominations: 0,
+  origin_condition: 50,
+  value: 12,
+  condition: '下单即享 8.8 折'
+};
+
+const disabledCoupon = {
+  ...coupon,
+  avaliable: 0,
+  reason: '未满足使用门槛'
+};
+
+const disabledDiscountCoupon = {
+  ...discountCoupon,
+  avaliable: 0,
+  reason: '未满足使用门槛'
+};
+
+export default {
+  i18n: {
+    'zh-CN': {
+
+    },
+    'en-US': {
+
+    }
+  },
+
+  data() {
+    return {
+      showList: false,
+      chosenCoupon: -1,
+      coupons: [coupon, discountCoupon],
+      disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
+    };
+  },
+
+  methods: {
+    onChange(index) {
+      this.showList = false;      
+      this.chosenCoupon = index;
+    },
+    onExchange(code) {
+      Toast('兑换成功');
+      this.coupons.push(coupon);
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-coupon {
+  .van-popup {
+    height: 100%;
+  }
+}
+</style>

docs/demos/views/datetime-picker.vue

@@ -0,0 +1,61 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-datetime-picker
+        v-model="currentDate1"
+        type="datetime"
+        :minHour="minHour"
+        :maxHour="maxHour"
+        :minDate="minDate"
+        :maxDate="maxDate"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-datetime-picker
+        v-model="currentDate2"
+        type="date"
+        :minHour="minHour"
+        :maxHour="maxHour"
+        :minDate="minDate"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-datetime-picker
+        v-model="currentDate3"
+        type="time"
+        :minHour="minHour"
+        :maxHour="maxHour"
+        :minDate="minDate"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '选择日期',
+      title3: '选择时间'
+    },
+    'en-US': {
+      title2: 'Date Picker',
+      title3: 'Time Picker'
+    }
+  },
+
+  data() {
+    return {
+      minHour: 10,
+      maxHour: 20,
+      minDate: new Date(),
+      maxDate: new Date(2019, 10, 1),
+      currentDate1: new Date(2018, 0, 1),
+      currentDate2: null,
+      currentDate3: null
+    };
+  }
+};
+</script>

docs/demos/views/dialog.vue

@@ -0,0 +1,60 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('title1')">
+      <van-button @click="onClickAlert">Alert</van-button>
+      <van-button @click="onClickAlert2">{{ $t('alert2') }}</van-button>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-button @click="onClickConfirm">Confirm</van-button>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title1: '消息提示',
+      title2: '消息确认',
+      alert2: '无标题 Alert'
+    },
+    'en-US': {
+      title1: 'Alert dialog',
+      title2: 'Confirm dialog',
+      alert2: 'Alert without title'
+    }
+  },
+
+  methods: {
+    onClickAlert() {
+      Dialog.alert({
+        title: this.$t('title'),
+        message: this.$t('content')
+      });
+    },
+
+    onClickAlert2() {
+      Dialog.alert({
+        message: this.$t('content')
+      });
+    },
+
+    onClickConfirm() {
+      Dialog.confirm({
+        title: this.$t('title'),
+        message: this.$t('content')
+      })
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss">
+.demo-dialog {
+  .van-button {
+    margin: 15px;
+  }
+}
+</style>

docs/demos/views/field.vue

@@ -0,0 +1,105 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-cell-group>
+        <van-field v-model="value" :placeholder="$t('usernamePlaceholder')"></van-field>
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-cell-group>
+        <van-field
+          v-model="username"
+          :label="$t('username')"
+          icon="clear"
+          :placeholder="$t('usernamePlaceholder')"
+          required
+          @clickIcon="username = ''"
+        >
+        </van-field>
+
+        <van-field
+          v-model="password"
+          type="password"
+          :label="$t('password')"
+          :placeholder="$t('passwordPlaceholder')"
+          required>
+        </van-field>
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-cell-group>
+        <van-field :value="$t('inputDisabled')" :label="$t('username')" disabled></van-field>
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('title4')">
+      <van-cell-group>
+        <van-field :label="$t('username')" :placeholder="$t('usernamePlaceholder')" error></van-field>
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('title5')">
+      <van-cell-group>
+        <van-field
+          v-model="message"
+          :label="$t('message')"
+          type="textarea"
+          :placeholder="$t('messagePlaceholder')"
+          rows="1"
+          autosize
+        >
+        </van-field>
+      </van-cell-group>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '自定义类型',
+      title3: '禁用输入框',
+      title4: '错误提示',
+      title5: '高度自适应',
+      username: '用户名',
+      password: '密码',
+      message: '留言',
+      usernamePlaceholder: '请输入用户名',
+      passwordPlaceholder: '请输入密码',
+      messagePlaceholder: '请输入留言',
+      inputDisabled: '输入框已禁用'
+    },
+    'en-US': {
+      title2: 'Custom type',
+      title3: 'Disabled',
+      title4: 'Error info',
+      title5: 'Auto resize',
+      username: 'Username',
+      password: 'Password',
+      message: 'Message',
+      usernamePlaceholder: 'Username',
+      passwordPlaceholder: 'Password',
+      messagePlaceholder: 'Message',
+      inputDisabled: 'Disabled'
+    }
+  },
+
+  data() {
+    return {
+      value: '',
+      password: '',
+      username: '',
+      message: ''
+    };
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-field {
+  padding-bottom: 30px;
+}
+</style>

docs/demos/views/goods-action.vue

@@ -0,0 +1,52 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-goods-action>
+        <van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
+          客服
+        </van-goods-action-mini-btn>
+        <van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn">
+          购物车
+        </van-goods-action-mini-btn>
+        <van-goods-action-big-btn @click="onClickBigBtn">
+          加入购物车
+        </van-goods-action-big-btn>
+        <van-goods-action-big-btn @click="onClickBigBtn" primary>
+          立即购买
+        </van-goods-action-big-btn>
+      </van-goods-action>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+
+    },
+    'en-US': {
+
+    }
+  },
+
+  methods: {
+    onClickMiniBtn() {
+      Toast('点击图标');
+    },
+
+    onClickBigBtn() {
+      Toast('点击按钮');
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss">
+.demo-goods-action {
+  .van-goods-action {
+    position: relative;
+  }
+}
+</style>

docs/demos/views/icon.vue

@@ -1,6 +1,15 @@
-<script>
+<template>
-import Vue from 'vue';
+  <demo-section>
+    <demo-block :title="$t('title')">
+      <van-col span="8" v-for="icon in icons" :key="icon">
+        <van-icon :name="icon"></van-icon>
+        <span>{{ icon }}</span>
+      </van-col>
+    </demo-block>
+  </demo-section>
+</template>
 
+<script>
 const icons = [
   'close',
   'location',
@@ -86,56 +95,43 @@ const icons = [
   'phone'
 ];
 
-const IconListConstructor = Vue.extend({
-  render(h) {
-    return (
-      <div>
-        {icons.map(icon => (
-          <van-col span="8">
-            <van-icon name={icon}></van-icon>
-            <span>{icon}</span>
-          </van-col>
-        ))}
-      </div>
-    )
-  }
-});
-
 export default {
-  mounted() {
+  i18n: {
-    const IconList = new IconListConstructor({
+    'zh-CN': {
-      el: document.createElement('div')  
+      title: '图标列表'
-    });
+    },
-    const block = document.querySelector('.zan-doc-demo-block');
+    'en-US': {
-    if (block) {
+      title: 'Icon List'
-      block.appendChild(IconList.$el);
+    }
+  },
+
+  data() {
+    this.icons = icons;
+    return {};
   }
 }
-};
 </script>
 
-## Icon
+<style lang="postcss">
+.demo-icon {
+  font-size: 0;
 
-### Install
+  .van-col {
-``` javascript
+    text-align: center;
-import { Icon } from 'vant';
+    height: 100px;
+    float: none;
+    display: inline-block;
+  }
 
-Vue.component(Icon.name, Icon);
+  .van-icon {
-```
+    display: block;
+    font-size: 32px;
+    margin: 15px 0;
+    color: rgba(69, 90, 100, .8);
+  }
 
-### Usage
+  span {
-
+    font-size: 14px;
-#### Basic Usage
+  }
-View all usable icons on the right.
+} 
-
+</style>
-:::demo Icon List
-```html
-<van-icon name="success" />
-```
-:::
-
-### API
-
-| Attribute | Description | Type | Default | Accepted Values |
-|-----------|-----------|-----------|-------------|-------------|
-| name | Icon name | `String` | `''` | - |

docs/demos/views/image-preview.vue

@@ -0,0 +1,51 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-button @click="showImagePreview">{{ $t('button1') }}</van-button>
+    </demo-block>
+
+    <demo-block :title="$t('button2')">
+      <van-button @click="showImagePreview(1)">{{ $t('button2') }}</van-button>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+import { ImagePreview } from 'packages';
+
+export default {
+  i18n: {
+    'zh-CN': {
+      button1: '预览图片',
+      button2: '指定初始位置'
+    },
+    'en-US': {
+      button1: 'Show Images',
+      button2: 'Custom Start Position'
+    }
+  },
+
+  methods: {
+    showImagePreview(position) {
+      ImagePreview([
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
+        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
+      ], typeof position === 'number' ? position : 0);
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-image-preview {
+  .van-button {
+    margin-left: 15px;
+  }
+}
+.van-image-preview {
+  img {
+    pointer-events: none;
+  }
+}
+</style>

docs/demos/views/layout.vue

@@ -0,0 +1,65 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-row>
+        <van-col span="8">span: 8</van-col>
+        <van-col span="8">span: 8</van-col>
+        <van-col span="8">span: 8</van-col>
+      </van-row>
+
+      <van-row>
+        <van-col span="4">span: 4</van-col>
+        <van-col span="10" offset="4">offset: 4, span: 10</van-col>
+      </van-row>
+
+      <van-row>
+        <van-col offset="12" span="12">offset: 12, span: 12</van-col>
+      </van-row>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-row gutter="20">
+        <van-col span="8">span: 8</van-col>
+        <van-col span="8">span: 8</van-col>
+        <van-col span="8">span: 8</van-col>
+      </van-row>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '在列元素之间增加间距'
+    },
+    'en-US': {
+      title2: 'Column Spacing'
+    }
+  }
+}
+</script>
+
+<style lang="postcss">
+.demo-layout {
+  .van-row {
+    padding: 0 15px;
+  }
+  .van-col {
+    color: #fff;
+    font-size: 13px;
+    line-height: 30px;
+    text-align: center;
+    margin-bottom: 10px;
+    background-clip: content-box;
+
+    &:nth-child(odd) {
+      background-color: #39a9ed;
+    }
+
+    &:nth-child(even) {
+      background-color: #66c6f2;
+    }
+  }
+}
+</style>

docs/demos/views/lazyload.vue

@@ -0,0 +1,82 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <img v-for="img in imageList" v-lazy="img" />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <div v-for="img in backgroundImageList" v-lazy:background-image="img" />
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <lazy-component>
+        <img v-for="img in componentImageList" v-lazy="img" />
+      </lazy-component>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '背景图懒加载',
+      title3: '懒加载模块'
+    },
+    'en-US': {
+      title2: 'Lazyload Background Image',
+      title3: 'Lazyload Component'
+    }
+  },
+
+  data() {
+    return {
+      imageList: [
+        'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
+      ],
+      backgroundImageList: [
+        'https://img.yzcdn.cn/public_files/2017/09/05/bac1903e863834ace25773f3554b6890.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/138c32d4384b5e4a78dc4e1ba58e6a80.jpg'
+      ],
+      componentImageList: [
+        'https://img.yzcdn.cn/public_files/2017/09/05/100a7845756a70af2df513bdd1307d0e.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/8a4f5be8289cb3a7434fc19a3de780a2.jpg'
+      ]
+    };
+  },
+
+  methods: {
+    handleComponentShow() {
+      console.log('component show');
+    }
+  }
+}
+</script>
+
+<style lang="postcss">
+.demo-lazyload {
+  padding: 0 15px;
+
+  img,
+  div[lazy] {
+    padding: 15px;
+    width: 100%;
+    height: 250px;
+    margin: 10px 0 0;
+    background-color: white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    background-size: 315px 250px;
+    background-position: 15px;
+    background-repeat: no-repeat;
+    box-sizing: border-box;
+  }
+
+  .van-doc-demo-block__title,
+  .van-doc-demo-section__title {
+    padding-left: 0;
+  }
+}
+</style>

docs/demos/views/loading.vue

@@ -0,0 +1,44 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('title1')">
+      <van-loading type="circle" color="black" />
+      <van-loading type="circle" color="white" />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-loading type="gradient-circle" color="black" />
+      <van-loading type="gradient-circle" color="white" />
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-loading type="spinner" color="black" />
+      <van-loading type="spinner" color="white" />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title1: '单色圆环',
+      title2: '渐变色圆环',
+      title3: 'Spinner'
+    },
+    'en-US': {
+      title1: 'Solid Circle',
+      title2: 'Gradient Circle',
+      title3: 'Spinner'
+    }
+  }
+}
+</script>
+
+<style lang="postcss">
+.demo-loading {
+  .van-loading {
+    display: inline-block;
+    margin: 10px 0 10px 20px;
+  }
+}
+</style>

docs/demos/views/nav-bar.vue

@@ -0,0 +1,18 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-nav-bar
+        :title="$t('title')"
+        :leftText="$t('back')"
+        :rightText="$t('button')"
+        leftArrow
+      />
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-nav-bar :title="$t('title')" :leftText="$t('back')" leftArrow>
+        <van-icon name="search" slot="right" />
+      </van-nav-bar>
+    </demo-block>
+  </demo-section>
+</template>

docs/demos/views/notice-bar.vue

@@ -0,0 +1,44 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-notice-bar
+        :text="$t('text')"
+        leftIcon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-notice-bar :scrollable="false" :text="$t('text')" />
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-notice-bar mode="closeable" :text="$t('text')" />
+      <van-notice-bar mode="link" :text="$t('text')" />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '禁用滚动',
+      title3: '通告栏模式',
+      text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
+    },
+    'en-US': {
+      title2: 'Disable scroll',
+      title3: 'Mode',
+      text: 'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.'
+    }
+  }
+}
+</script>
+
+<style lang="postcss">
+.demo-notice-bar {
+  .van-notice-bar:not(:first-of-type) {
+    margin-top: 15px;
+  }
+}
+</style>

docs/demos/views/number-keyboard.vue

@@ -0,0 +1,59 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-button @touchstart.native.stop="showKeyboard = true">
+        {{ $t('button1') }}
+      </van-button>
+
+      <van-button @touchstart.native.stop="showKeyboard = false">
+        {{ $t('button2') }}
+      </van-button>
+
+      <van-number-keyboard
+        :show="showKeyboard"
+        @blur="showKeyboard = false"
+        @input="onInput"
+        @delete="onDelete"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      button1: '弹出键盘',
+      button2: '收起键盘'
+    },
+    'en-US': {
+      button1: 'Show Keyboard',
+      button2: 'Hide Keyboard'
+    }
+  },
+
+  data() {
+    return {
+      showKeyboard: true
+    };
+  },
+
+  methods: {
+    onInput(value) {
+      Toast('Input: ' + value);
+    },
+    onDelete() {
+      Toast('Delete');
+    }
+  }
+}
+</script>
+
+
+<style lang="postcss">
+.demo-number-keyboard {
+  .van-button {
+    margin-left: 15px;
+  }
+}
+</style>

docs/demos/views/panel.vue

@@ -0,0 +1,35 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')">
+        <div>{{ $t('content') }}</div>
+      </van-panel>
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')">
+        <div>{{ $t('content') }}</div>
+        <div slot="footer">
+          <van-button size="small">{{ $t('button') }}</van-button>
+          <van-button size="small" type="danger">{{ $t('button') }}</van-button>
+        </div>
+      </van-panel>
+    </demo-block>
+  </demo-section>
+</template>
+
+<style lang="postcss">
+.demo-panel {
+  .van-panel__footer {
+    text-align: right;
+
+    .van-button {
+      margin-left: 5px;
+    }
+  }
+
+  .van-panel__content {
+    padding: 20px;
+  }
+}
+</style>

docs/demos/views/password-input.vue

@@ -0,0 +1,47 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-password-input
+        :value="value"
+        :info="$t('info')"
+        @focus="showKeyboard = true"
+      />
+
+      <van-number-keyboard
+        :show="showKeyboard"
+        @input="onInput"
+        @delete="onDelete"
+        @blur="showKeyboard = false"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      info: '密码为 6 位数字'
+    },
+    'en-US': {
+      info: 'Some tips'
+    }
+  },
+
+  data() {
+    return {
+      value: '',
+      showKeyboard: true
+    };
+  },
+
+  methods: {
+    onInput(key) {
+      this.value = (this.value + key).slice(0, 6);
+    },
+    onDelete() {
+      this.value = this.value.slice(0, this.value.length - 1);
+    }
+  }
+};
+</script>

docs/demos/views/picker.vue

@@ -0,0 +1,74 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-picker :columns="columns" @change="onChange" />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-picker
+        showToolbar
+        :title="$t('area')"
+        :columns="columns"
+        @change="onChange"
+        @cancel="onCancel"
+        @confirm="onConfirm"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      area: '地区选择',
+      title2: '带 toolbar 的 Picker',
+      column: {
+        '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州'],
+        '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩']
+      }
+    },
+    'en-US': {
+      area: 'Title',
+      title2: 'Picker with toolbar',
+      column: {
+        'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+        'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
+      }
+    }
+  },
+
+  computed: {
+    columns() {
+      const column = this.$t('column');
+      return [
+        {
+          values: Object.keys(column),
+          className: 'column1'
+        },
+        {
+          values: column[Object.keys(column)[0]],
+          className: 'column2'
+        }
+      ];
+    }
+  },
+
+  methods: {
+    onChange(picker, values) {
+      picker.setColumnValues(1, this.$t('column')[values[0]]);
+    },
+    onCancel() {
+      Toast('picker cancel');
+    },
+    onConfirm() {
+      Toast('picker confirm');
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss">
+
+</style>

docs/demos/views/popup.vue

@@ -0,0 +1,112 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-button @click="show1 = true">{{ $t('button1') }}</van-button>
+      <van-popup v-model="show1">{{ $t('content') }}</van-popup>
+    </demo-block>
+
+    <demo-block :title="$t('position')">
+      <van-button @click="show2 = true;">{{ $t('button2') }}</van-button>
+      <van-popup v-model="show2" position="bottom">
+        <van-button @click="showDialog">{{ $t('button3') }}</van-button>
+      </van-popup>
+
+      <van-button @click="show3 = true">{{ $t('button4') }}</van-button>
+      <van-popup v-model="show3" position="top" :overlay="false">
+        {{ $t('content') }}
+      </van-popup>
+
+      <van-button @click="show4 = true">{{ $t('button5') }}</van-button>
+      <van-popup v-model="show4" position="right" :overlay="false">
+        <van-button @click="show4 = false">{{ $t('button6') }}</van-button>
+      </van-popup>
+    </demo-block>
+  </demo-section> 
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      position: '弹出位置',
+      button1: '弹出 Popup',
+      button2: '底部弹出',
+      button3: '弹出 Dialog',
+      button4: '顶部弹出',
+      button5: '右侧弹出',
+      button6: '关闭弹层'
+    },
+    'en-US': {
+      position: 'Position',
+      button1: 'Show Popup',
+      button2: 'From Bottom',
+      button3: 'Show Dialog',
+      button4: 'From Top',
+      button5: 'From Right',
+      button6: 'Close Popup'
+    }
+  },
+
+  data() {
+    return {
+      show1: false,
+      show2: false,
+      show3: false,
+      show4: false
+    }
+  },
+
+  watch: {
+    show3(val) {
+      if (val) {
+        setTimeout(() => {
+          this.show3 = false;
+        }, 2000);
+      }
+    }
+  },
+
+  methods: {
+    showDialog() {
+      Dialog.confirm({
+        title: 'confirm标题',
+        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
+      })
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-popup {
+  .van-button {
+    margin: 10px 0 10px 15px;
+  }
+
+  .van-popup {
+    width: 60%;
+    padding: 20px;
+    border-radius: 5px;
+    box-sizing: border-box;
+
+    &--bottom {
+      width: 100%;
+      height: 200px;
+    }
+
+    &--top {
+      color: #fff;
+      width: 100%;
+      border-radius: 0;
+      line-height: 20px;
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+
+    &--left,
+    &--right {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

docs/demos/views/progress.vue

@@ -0,0 +1,48 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-progress :percentage="0" />
+      <van-progress :percentage="46" />
+      <van-progress :percentage="100" />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-progress inactive :percentage="0" />
+      <van-progress inactive :percentage="46" />
+      <van-progress inactive :percentage="100" />
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-progress :pivotText="$t('red')" color="#ed5050" :percentage="26" />
+      <van-progress :pivotText="$t('orange')" color="#f60" :percentage="46" />
+      <van-progress :pivotText="$t('yellow')" color="#f09000" :percentage="66" />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '进度条置灰',
+      title3: '样式定制'
+    },
+    'en-US': {
+      title2: 'Inactive',
+      title3: 'Custom Style'
+    }
+  }
+}
+</script>
+
+<style lang="postcss">
+.demo-progress {
+  .van-progress {
+    margin: 20px 10px;
+
+    &:first-of-type {
+      margin-top: 10px;
+    }
+  }
+} 
+</style>

docs/demos/views/pull-refresh.vue

@@ -0,0 +1,49 @@
+<template>
+  <van-pull-refresh v-model="isLoading">
+    <demo-section name="pull-refresh" background="#fff">
+      <demo-block :title="$t('basicUsage')">
+        <p>{{ $t('text') }}: {{ count }}</p>
+      </demo-block>
+    </demo-section>
+  </van-pull-refresh>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      text: '刷新次数'
+    },
+    'en-US': {
+      text: 'Refresh Count'
+    }
+  },
+
+  data() {
+    return {
+      count: 0,
+      isLoading: false
+    };
+  },
+
+  watch: {
+    isLoading() {
+      if (this.isLoading) {
+        setTimeout(() => {
+          Toast('刷新成功');
+          this.isLoading = false;
+          this.count++;
+        }, 500);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-pull-refresh {
+  p {
+    margin: 10px 0 0 15px;
+  }
+}
+</style>

docs/demos/views/radio.vue

@@ -0,0 +1,77 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <div class="van-radios">
+        <van-radio name="1" v-model="radio1">{{ $t('radio') }} 1</van-radio>
+        <van-radio name="2" v-model="radio1">{{ $t('radio') }} 2</van-radio>
+      </div>
+    </demo-block>
+
+    <demo-block :title="$t('disabled')">
+      <div class="van-radios">
+        <van-radio name="1" v-model="radio2" disabled>{{ $t('text1') }}</van-radio>
+        <van-radio name="2" v-model="radio2" disabled>{{ $t('text2') }}</van-radio>
+      </div>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <div class="van-radios">
+        <van-radio-group v-model="radio3">
+          <van-radio name="1">{{ $t('radio') }} 1</van-radio>
+          <van-radio name="2">{{ $t('radio') }} 2</van-radio>
+        </van-radio-group>
+      </div>
+    </demo-block>
+
+    <demo-block :title="$t('title4')">
+      <van-radio-group v-model="radio4">
+        <van-cell-group>
+          <van-cell><van-radio name="1">{{ $t('radio') }}1</van-radio></van-cell>
+          <van-cell><van-radio name="2">{{ $t('radio') }}2</van-radio></van-cell>
+        </van-cell-group>
+      </van-radio-group>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      radio: '单选框',
+      text1: '未选中禁用',
+      text2: '选中且禁用',
+      title3: 'Radio 组',
+      title4: '与 Cell 组件一起使用'
+    },
+    'en-US': {
+      radio: 'Radio',
+      text1: 'Disabled',
+      text2: 'Disabled and checked',
+      title3: 'Radio Group',
+      title4: 'Inside a Cell'
+    }
+  },
+
+  data() {
+    return {
+      radio1: '1',
+      radio2: '2',
+      radio3: '1',
+      radio4: '1'
+    };
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-radio {
+  .van-radios {
+    padding: 0 20px;
+
+    .van-radio {
+      margin: 10px 0;
+    }
+  }
+}
+</style>

docs/demos/views/search.vue

@@ -0,0 +1,68 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-search :placeholder="$t('placeholder')" v-model="value" />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <form action="/">
+        <van-search
+          v-model="value"
+          :placeholder="$t('placeholder')"
+          :showAction="true"
+          @search="onSearch"
+          @cancel="onCancel">
+        </van-search>
+      </form>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-search
+        v-model="value"
+        :showAction="true"
+        @search="onSearch">
+        <div slot="action" @click="onSearch">{{ $t('search') }}</div>
+      </van-search>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '监听对应事件',
+      title3: '自定义行动按钮',
+      placeholder: '请输入商品名称'
+    },
+    'en-US': {
+      title2: 'Listen to Events',
+      title3: 'Custom Button',
+      placeholder: 'Placeholder'
+    }
+  },
+
+  data() {
+    return {
+      value: '',
+    };
+  },
+
+  methods: {
+    onSearch() {
+      Toast(this.value);
+    },
+    onCancel() {
+      Toast(this.$t('cancel'));
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-search {
+  .van-search__action div {
+    padding: 0 10px;
+  }
+}
+</style>

docs/demos/views/sku.vue

@@ -0,0 +1,115 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <div class="sku-container">
+        <van-sku
+          v-model="showBase"
+          :sku="sku"
+          :goods="goods"
+          :goodsId="goodsId"
+          :hideStock="sku.hide_stock"
+          :quota="quota"
+          :quotaUsed="quotaUsed"
+          :resetStepperOnHide="resetStepperOnHide"
+          :disableStepperInput="disableStepperInput"
+          @buy-clicked="handleBuyClicked"
+          @add-cart="handleAddCartClicked"
+        >
+        </van-sku>
+        <van-button type="primary" @click="showBase = true" block>基础用法</van-button>
+      </div>
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <div class="sku-container">
+        <van-sku
+          v-model="showCustomAction"
+          stepperTitle="我要买"
+          :sku="sku"
+          :goods="goods"
+          :goodsId="goodsId"
+          :hideStock="sku.hide_stock"
+          :showAddCartBtn="true"
+          :quota="quota"
+          :quotaUsed="quotaUsed"
+          :resetStepperOnHide="true"
+          :initialSku="initialSku"
+          @buy-clicked="handleBuyClicked"
+          @add-cart="handleAddCartClicked"
+        >
+          <!-- 隐藏sku messages -->
+          <template slot="sku-messages"></template>
+          <!-- 自定义sku actions -->
+          <template slot="sku-actions" slot-scope="props">
+            <div class="van-sku-actions">
+              <button class="van-sku__add-cart-btn" @click="handlePointClicked">
+                积分兑换
+              </button>
+              <!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
+              <button class="van-sku__buy-btn" @click="props.skuEventBus.$emit('sku:buy')">
+                买买买
+              </button>
+            </div>
+          </template>
+        </van-sku>
+        <van-button type="primary" @click="showCustomAction = true" block>自定义sku actions</van-button>
+      </div>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+import data from '../mock/sku';
+
+const goods = data.goods_info;
+goods.picture = goods.picture[0];
+
+export default {
+  i18n: {
+    'zh-CN': {
+
+    },
+    'en-US': {
+
+    }
+  },
+
+  data() {
+    return {
+      showBase: false,
+      showCustomAction: false,
+      sku: data.sku,
+      goods: goods,
+      goodsId: data.goods_id,
+      quota: data.quota,
+      quotaUsed: data.quota_used,
+      disableStepperInput: true,
+      resetStepperOnHide: true,
+      initialSku: {
+        s1: '30349',
+        s2: '1193'
+      }
+    };
+  },
+
+  methods: {
+    handleBuyClicked(data) {
+      Toast(JSON.stringify(data));
+    },
+    handleAddCartClicked(data) {
+      Toast(JSON.stringify(data));
+    },
+    handlePointClicked() {
+      Toast('积分兑换');
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-sku {
+  .sku-container {
+    padding: 0 15px;
+  }
+}
+</style>

docs/demos/views/stepper.vue

@@ -0,0 +1,34 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-stepper v-model="stepper1" />
+    </demo-block>
+
+    <demo-block :title="$t('disabled')">
+      <van-stepper v-model="stepper1" disabled />
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-stepper v-model="stepper2" min="5" max="40" step="2" defaultValue="9" />
+    </demo-block>
+  </demo-section>  
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      stepper1: 1,
+      stepper2: null,
+    };
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-stepper {
+  .van-stepper {
+    margin-left: 15px;
+  }
+}
+</style>

docs/demos/views/steps.vue

@@ -0,0 +1,113 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-steps :active="active">
+        <van-step>{{ $t('step1') }}</van-step>
+        <van-step>{{ $t('step2') }}</van-step>
+        <van-step>{{ $t('step3') }}</van-step>
+        <van-step>{{ $t('step4') }}</van-step>
+      </van-steps>
+
+      <van-button @click="nextStep">{{ $t('nextStep') }}</van-button>
+    </demo-block> 
+
+    <demo-block :title="$t('title2')">
+      <van-steps
+        :active="active"
+        icon="logistics"
+        icon-class="steps-success"
+        :title="$t('title')"
+        :description="$t('desc')"
+      >
+        <van-step>{{ $t('step1') }}</van-step>
+        <van-step>{{ $t('step2') }}</van-step>
+        <van-step>{{ $t('step3') }}</van-step>
+        <van-step>{{ $t('step4') }}</van-step>
+      </van-steps>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-steps direction="vertical" :active="0" active-color="#f60">
+      <van-step>
+        <h3>{{ $t('status1') }}</h3>
+        <p>2016-07-12 12:40</p>
+      </van-step>
+      <van-step>
+        <h3>{{ $t('status2') }}</h3>
+        <p>2016-07-11 10:00</p>
+      </van-step>
+      <van-step>
+        <h3>{{ $t('status3') }}</h3>
+        <p>2016-07-10 09:30</p>
+      </van-step>
+    </van-steps>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      nextStep: '下一步',
+      step1: '买家下单',
+      step2: '商家接单',
+      step3: '买家提货',
+      step4: '交易完成',
+      title2: '物流描述',
+      title3: '竖向步骤条',
+      status1: '【城市】物流状态1',
+      status2: '【城市】物流状态',
+      status3: '快件已发货'
+    },
+    'en-US': {
+      nextStep: 'Next Step',
+      step1: 'Step1',
+      step2: 'Step2',
+      step3: 'Step3',
+      step4: 'Step4',
+      title2: 'Description',
+      title3: 'Vertical Steps',
+      status1: '【City】Status1',
+      status2: '【City】Status2',
+      status3: '【City】Status3'
+    }
+  },
+
+  data() {
+    return {
+      active: 0
+    };
+  },
+
+  methods: {
+    nextStep() {
+      this.active = ++this.active % 4;
+    }
+  }
+}
+</script>
+
+<style lang="postcss">
+.demo-steps {
+  .steps-success,
+  .van-icon-location {
+    color: #06bf04;
+  }
+
+  .van-button {
+    margin: 15px 0 0 15px;
+  }
+
+  .van-steps__message + p {
+    margin-bottom: 10px;
+  }
+
+  p,
+  h3 {
+    margin: 0;
+    font-size: inherit;
+    font-weight: normal;
+  }
+}
+</style>

docs/demos/views/submit-bar.vue

@@ -0,0 +1,76 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-submit-bar
+        :price="3050"
+        buttonText="提交订单"
+        @submit="onClickButton"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('disabled')">
+      <van-submit-bar
+        disabled
+        :price="3050"
+        buttonText="提交订单"
+        tip="您的收货地址不支持同城送, 我们已为您推荐快递"
+        @submit="onClickButton"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('loading')">
+      <van-submit-bar
+        loading
+        :price="3050"
+        buttonText="提交订单"
+        @submit="onClickButton"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-submit-bar
+        :price="3050"
+        buttonText="提交订单"
+        @submit="onClickButton"
+      >
+        <span slot="tip">
+          您的收货地址不支持同城送, <span class="van-edit-address" @click="onClickEditAddress">修改地址 ></span>
+        </span>
+      </van-submit-bar>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+
+    },
+    'en-US': {
+
+    }
+  },
+
+  methods: {
+    onClickButton() {
+      Toast('点击按钮');
+    },
+
+    onClickEditAddress() {
+      Toast('修改地址');
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-submit-bar {
+  .van-submit-bar {
+    position: relative;
+  }
+  .van-edit-address {
+    color: #38F;
+  }
+}
+</style>

docs/demos/views/swipe.vue

@@ -0,0 +1,80 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-swipe :autoplay="3000">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-swipe :autoplay="3000">
+        <van-swipe-item v-for="(image, index) in images" :key="index">
+          <img v-lazy="image" />
+        </van-swipe-item>
+      </van-swipe>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '图片懒加载'
+    },
+    'en-US': {
+      title2: 'Image Lazyload'
+    }
+  },
+
+  data() {
+    return {
+      images: [
+        'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
+      ]
+    };
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-swipe {
+  padding-bottom: 30px;
+
+  .van-swipe {
+    cursor: pointer;
+
+    &-item {
+      color: #fff;
+      min-height: 140px;
+      font-size: 20px;
+      text-align: center;
+      line-height: 150px;
+
+      &:nth-child(even) {
+        background-color: #39a9ed;
+      }
+
+      &:nth-child(odd) {
+        background-color: #66c6f2;
+      }
+    }
+
+    img {
+      width: 100%;
+      height: 240px;
+      display: block;
+      padding: 30px 60px;
+      box-sizing: border-box;
+      background-color: #fff;
+      pointer-events: none;
+    }
+  }
+}
+</style>

docs/demos/views/switch-cell.vue

@@ -0,0 +1,45 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-cell-group>
+        <van-switch-cell v-model="checked" :title="$t('title')" />
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('disabled')">
+      <van-cell-group>
+        <van-switch-cell v-model="checked" disabled :title="$t('title')" />
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('loading')">
+      <van-cell-group>
+        <van-switch-cell v-model="checked" loading :title="$t('title')" />
+      </van-cell-group>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+
+    },
+    'en-US': {
+      
+    }
+  },
+
+  data() {
+    return {
+      checked: true
+    };
+  }
+};
+</script>
+
+
+<style lang="postcss">
+
+</style>

docs/demos/views/switch.vue

@@ -0,0 +1,61 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-switch v-model="checked" />
+    </demo-block>
+
+    <demo-block :title="$t('disabled')">
+      <van-switch v-model="checked" disabled />
+    </demo-block>
+
+    <demo-block :title="$t('loading')">
+      <van-switch v-model="checked" loading />
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-switch :value="checked2" @input="onInput" />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title: '提醒',
+      message: '是否切换开关？'
+    },
+    'en-US': {
+      title: 'Confirm',
+      message: 'Are you sure to toggle switch?'
+    }
+  },
+
+  data() {
+    return {
+      checked: true,
+      checked2: true
+    };
+  },
+
+  methods: {
+    onInput(checked) {
+      Dialog.confirm({
+        title: this.$t('title'),
+        message: this.$t('message')
+      }).then(() => {
+        this.checked2 = checked;
+      });
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss">
+.demo-switch {
+  .van-switch {
+    margin: 0 15px;
+  }
+}
+</style>

docs/demos/views/tab.vue

@@ -0,0 +1,112 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-tabs :active="active">
+        <van-tab :title="$t('tab') + index" v-for="index in 4" :key="index">
+          {{ $t('content') }} {{ index }}
+        </van-tab>
+      </van-tabs>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-tabs>
+        <van-tab v-for="index in 8" :title="$t('tab') + index" :key="index">
+          {{ $t('content') }} {{ index }}
+        </van-tab>
+      </van-tabs>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-tabs @disabled="onClickDisabled">
+        <van-tab v-for="index in 4" :title="$t('tab') + index" :disabled="index === 2" :key="index">
+          {{ $t('content') }} {{ index }}
+        </van-tab>
+      </van-tabs>
+    </demo-block>
+
+    <demo-block :title="$t('title4')">
+      <van-tabs type="card">
+        <van-tab v-for="index in 4" :title="$t('tab') + index" :key="index">
+          {{ $t('content') }} {{ index }}
+        </van-tab>
+      </van-tabs>
+    </demo-block>
+
+    <demo-block :title="$t('title5')">
+      <van-tabs @click="handleTabClick">
+        <van-tab v-for="index in 4" :title="$t('tab') + index" :key="index">
+          {{ $t('content') }} {{ index }}
+        </van-tab>
+      </van-tabs>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      tab: '选项 ',
+      title2: '横向滚动',
+      title3: '禁用标签',
+      title4: '样式风格',
+      title5: '点击事件'
+    },
+    'en-US': {
+      tab: 'Tab ',
+      content: 'content of tab',
+      title2: 'Swipe Tabs',
+      title3: 'Disabled Tab',
+      title4: 'Card Style',
+      title5: 'Click Event'
+    }
+  },
+
+  data() {
+    return {
+      active: 2
+    };
+  },
+
+  mounted() {
+    setTimeout(() => {
+      this.active = 3;
+    }, 1000);
+  },
+
+  methods: {
+    onClickDisabled() {
+      Toast('Disabled!');
+    },
+
+    handleTabClick(index) {
+      Toast(index);
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-tab {
+  .van-tab__pane {
+    background-color: #fff;
+    padding: 20px;
+  }
+
+  .van-tabs--card .van-tab__pane {
+    background-color: transparent;
+  }
+
+  .custom-tabwrap .van-tab-active {
+    color: #20a0ff;
+  }
+  .custom-tabwrap .van-tabs-nav-bar {
+    background: #20a0ff;
+  }
+  .custom-pane {
+    text-align: center;
+    height: 50px;
+    line-height: 50px;
+  }
+}
+</style>

docs/demos/views/tabbar.vue

@@ -0,0 +1,60 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-tabbar v-model="active">
+        <van-tabbar-item icon="shop">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="chat" dot>{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="records" info="5">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="gold-coin" info="20">{{ $t('tab') }}</van-tabbar-item>
+      </van-tabbar>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-tabbar v-model="active2">
+        <van-tabbar-item icon="shop">
+          <span>{{ $t('custom') }}</span>
+          <img slot="icon" :src="active2 === 0 ? icon.active : icon.normal" />
+        </van-tabbar-item>
+        <van-tabbar-item icon="chat">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="records">{{ $t('tab') }}</van-tabbar-item>
+      </van-tabbar>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '自定义图标'
+    },
+    'en-US': {
+      title2: 'Custom icon'
+    }
+  },
+
+  data() {
+    return {
+      active: 0,
+      active2: 0,
+      icon: {
+        normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
+        active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
+      }
+    }
+  }
+}
+</script>
+
+
+<style lang="postcss">
+.demo-tabbar {
+  .van-tabbar {
+    position: relative;
+
+    &-item {
+      cursor: pointer;
+    }
+  }
+}
+</style>

docs/demos/views/tag.vue

@@ -0,0 +1,53 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-tag>{{ $t('tag') }}</van-tag>
+      <van-tag type="danger">{{ $t('tag') }}</van-tag>
+      <van-tag type="success">{{ $t('tag') }}</van-tag>
+      <van-tag type="primary">{{ $t('tag') }}</van-tag>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-tag plain>{{ $t('tag') }}</van-tag>
+      <van-tag plain type="danger">{{ $t('tag') }}</van-tag>
+      <van-tag plain type="primary">{{ $t('tag') }}</van-tag>
+      <van-tag plain type="success">{{ $t('tag') }}</van-tag>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-tag mark>{{ $t('tag') }}</van-tag>
+      <van-tag mark type="danger">{{ $t('tag') }}</van-tag>
+      <van-tag mark type="primary">{{ $t('tag') }}</van-tag>
+      <van-tag mark type="success">{{ $t('tag') }}</van-tag>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '空心样式',
+      title3: '标记样式'
+    },
+    'en-US': {
+      title2: 'Plain style',
+      title3: 'Mark style'
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-tag {
+  .van-tag + .van-tag {
+    margin-left: 10px;
+  }
+
+  .van-tag {
+    &:first-of-type {
+      margin-left: 15px;
+    }
+  }
+}
+</style>

docs/demos/views/toast.vue

@@ -0,0 +1,95 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('title1')">
+      <van-button @click="showToast">{{ $t('title1') }}</van-button>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-button @click="showLoadingToast">{{ $t('title2') }}</van-button>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-button @click="showSuccessToast">{{ $t('success') }}</van-button>
+      <van-button @click="showFailToast">{{ $t('fail') }}</van-button>
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-button @click="showCustomizedToast">{{ $t('advancedUsage') }}</van-button>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title1: '文字提示',
+      title2: '加载提示',
+      title3: '成功/失败提示',
+      success: '成功提示',
+      fail: '失败提示',
+      text1: '我是提示文案，建议不超过十五字~',
+      text2: '成功文案',
+      text3: '失败文案',
+      text4: second => `倒计时 ${second} 秒`
+    },
+    'en-US': {
+      title1: 'Text',
+      title2: 'Loading',
+      title3: 'Success/Fail',
+      success: 'Success',
+      fail: 'Fail',
+      text1: 'Some messages',
+      text2: 'Success',
+      text3: 'Fail',
+      text4: second => `${second} seconds`
+    }
+  },
+
+  methods: {
+    showToast() {
+      Toast(this.$t('text1'));
+    },
+
+    showLoadingToast() {
+      Toast.loading({ mask: true });
+    },
+
+    showSuccessToast() {
+      Toast.success(this.$t('text2'));
+    },
+
+    showFailToast() {
+      Toast.fail(this.$t('text3'));
+    },
+
+    showCustomizedToast(duration) {
+      const toast = Toast.loading({
+        duration: 0,
+        forbidClick: true,
+        message: this.$t('text4')(3)
+      });
+
+      let second = 3;
+      const timer = setInterval(() => {
+        second--;
+        if (second) {
+          toast.message = this.$t('text4')(second);
+        } else {
+          clearInterval(timer);
+          Toast.clear();
+        }
+      }, 1000);
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss">
+.demo-toast {
+  .van-button {
+    margin-left: 15px;
+  }
+}
+</style>

docs/demos/views/tree-select.vue

@@ -0,0 +1,119 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-tree-select
+        :items="items"
+        :mainActiveIndex="mainActiveIndex"
+        :activeId="activeId"
+        @navclick="onNavClick"
+        @itemclick="onItemClick"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      group1: '所有城市',
+      group2: '浙江',
+      group3: '江苏',
+      city1: [{
+        text: '杭州',
+        id: 1001
+      }, {
+        text: '温州',
+        id: 1002
+      }, {
+        text: '宁波',
+        id: 1003
+      }, {
+        text: '义乌',
+        id: 1004
+      }],
+      city2: [{
+        text: '无锡',
+        id: 1011
+      }, {
+        text: '常州',
+        id: 1012
+      }, {
+        text: '莆田',
+        id: 1013
+      }, {
+        text: '三明',
+        id: 1014
+      }]
+    },
+    'en-US': {
+      group1: 'All',
+      group2: 'Group1',
+      group3: 'Group2',
+      city1: [{
+        text: 'Delaware',
+        id: 1001
+      }, {
+        text: 'Florida',
+        id: 1002
+      }, {
+        text: 'Georqia',
+        id: 1003
+      }, {
+        text: 'Indiana',
+        id: 1004
+      }],
+      city2: [{
+        text: 'Alabama',
+        id: 1011
+      }, {
+        text: 'Kansas',
+        id: 1012
+      }, {
+        text: 'Louisiana',
+        id: 1013
+      }, {
+        text: 'Texas',
+        id: 1014
+      }]
+    }
+  },
+
+  data() {
+    return {
+      mainActiveIndex: 0,
+      activeId: 1001
+    };
+  },
+
+  computed: {
+    items() {
+      return [{
+        text: this.$t('group1'),
+        children: [...this.$t('city1'), ...this.$t('city2')]
+      }, {
+        text: this.$t('group2'),
+        children: this.$t('city1')
+      }, {
+        text: this.$t('group3'),
+        children: this.$t('city2')
+      }];
+    }
+  },
+
+  methods: {
+    onNavClick(index) {
+      this.mainActiveIndex = index;
+    },
+    onItemClick(data) {
+      console.log(data);
+      this.activeId = data.id;
+    }
+  }
+}
+</script>
+
+
+<style lang="postcss">
+
+</style>

docs/demos/views/uploader.vue

@@ -0,0 +1,31 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <div class="demo-uploader-container">
+        <van-uploader :after-read="logContent">
+          <van-icon name="photograph" />
+        </van-uploader>
+      </div>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  methods: {
+    logContent(file) {
+      console.log(file);
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss">
+.demo-uploader {
+  &-container {
+    padding: 10px 20px;
+    font-size: 20px;
+  }
+}
+</style>

docs/demos/views/waterfall.vue

@@ -0,0 +1,77 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <p class="page-desc">{{ $t('text') }}</p>
+      <ul
+        v-waterfall-lower="loadMore"
+        waterfall-disabled="disabled"
+        waterfall-offset="400">
+        <li v-for="item in list">{{ item }}</li>
+      </ul>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+import { Waterfall } from 'packages';
+
+export default {
+  i18n: {
+    'zh-CN': {
+      text: '当即将滚动到元素底部时，会自动加载更多'
+    },
+    'en-US': {
+      text: 'This list will load items will scroll to bottom.'
+    }
+  },
+
+  data() {
+    return {
+      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      disabled: false
+    };
+  },
+
+  directives: {
+    WaterfallLower: Waterfall('lower')
+  },
+
+  methods: {
+    loadMore() {
+      this.disabled = true;
+      setTimeout(() => {
+        for (let i = 0; i < 5; i ++) {
+          this.list.push(this.list.length);
+        }
+        this.disabled = false;
+      }, 200);
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss">
+.demo-waterfall {
+  ul {
+    max-height: 360px;
+    overflow: scroll;
+    border-top: 1px solid #e5e5e5;
+  }
+
+  li {
+    line-height: 50px;
+    border-bottom: 1px solid #e5e5e5;
+    background: #fff;
+    text-align: center;
+  }
+
+  .page-desc {
+    padding: 5px 0;
+    line-height: 1.4;
+    font-size: 14px;
+    text-align: center;
+    color: #666;
+  }
+}
+</style>

docs/examples-docs/en-US/dialog.md

@@ -1,126 +0,0 @@
-<script>
-import { Dialog } from 'packages';
-
-const message = 'Content';
-
-export default {
-  methods: {
-    onClickAlert() {
-      Dialog.alert({
-        message,
-        title: 'Title',
-        confirmButtonText: 'ok'
-      });
-    },
-
-    onClickAlert2() {
-      Dialog.alert({
-        message,
-        confirmButtonText: 'ok'
-      });
-    },
-
-    onClickConfirm() {
-      Dialog.confirm({
-        title: 'Title',
-        message,
-        confirmButtonText: 'ok',
-        cancelButtonText: 'cancel'
-      }).catch(action => {
-        console.log(action);
-      });
-    }
-  }
-};
-</script>
-
-## Dialog
-
-### Install
-
-```js
-import { Dialog } from 'vant';
-```
-
-### Usage
-
-#### Alert dialog
-Used to prompt for some messages, only including one confirm button
-
-:::demo Alert dialog
-```html
-<van-button @click="onClickAlert">Alert</van-button>
-<van-button @click="onClickAlert2">Alert without title</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    onClickAlert() {
-      Dialog.alert({
-        title: 'Title',
-        message: 'Content'
-      }).then(() => {
-        // on close
-      });
-    },
-
-    onClickAlert2() {
-      Dialog.alert({
-        message: 'Content'
-      }).then(() => {
-        // on close
-      });
-    }
-  }
-};
-```
-:::
-
-#### Confirm dialog
-Used to confirm some messages, including a confirm button and a cancel button
-
-:::demo Confirm dialog
-```html
-<van-button @click="onClickConfirm">Confirm</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    onClickConfirm() {
-      Dialog.confirm({
-        title: 'Title',
-        message: 'Content'
-      }).then(() => {
-        // on confirm
-      }).catch(() => {
-        // on cancel
-      });
-    }
-  }
-};
-```
-:::
-
-### Methods
-
-| Name | Attribute | Return value | Description |
-|-----------|-----------|-----------|-------------|
-| Dialog.alert | options | `Promise` | Show alert dialog |
-| Dialog.confirm | options | `Promise` | Show confim dialog |
-| Dialog.close | - | `void` | Close dialog |
-
-### Options
-
-| Attribute | Description | Type | Default | Accepted Values |
-|-----------|-----------|-----------|-------------|-------------|
-| title | Title | `String` | - | - |
-| message | Message | `String` | - | - |
-| showConfirmButton | Whether to show confirm button | `Boolean` |  `true` | - |
-| showCancelButton | Whether to show cancel button | `Boolean` |  `false` | - |
-| confirmButtonText | Confirm button text | `String` |  `确认` | - |
-| cancelButtonText | Cancel button test | `String` | `取消` | - |
-| overlay | Whether to show overlay | `Boolean` | `true` | - |
-| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` | - |
-| lockOnScroll | Whether to lock body scroll | `Boolean` | `true` | - |

docs/examples-docs/en-US/image-preview.md

@@ -1,52 +0,0 @@
-<script>
-import { ImagePreview } from 'packages';
-
-export default {
-  methods: {
-    showImagePreview() {
-      ImagePreview([
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
-        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
-      ]);
-    }
-  }
-};
-</script>
-
-## ImagePreview
-
-### Install
-
-```js
-import { ImagePreview } from 'vant';
-```
-
-### Usage
-
-#### Basic Usage
-
-:::demo Basic Usage
-```html
-<van-button @click="showImagePreview">Show</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showImagePreview() {
-      ImagePreview([
-        'https://img.yzcdn.cn/1.jpg',
-        'https://img.yzcdn.cn/2.jpg'
-      ]);
-    }
-  }
-};
-```
-:::
-
-### Arguments
-
-| Attribute | Description | Type |
-|-----------|-----------|-----------|
-| imageUrls | Image URL list | `Array` |

docs/examples-docs/en-US/popup.md

@@ -1,119 +0,0 @@
-<script>
-import Dialog from 'packages/dialog';
-
-export default {
-  data() {
-    return {
-      show1: false,
-      show2: false,
-      show3: false,
-      show4: false
-    }
-  },
-
-  watch: {
-    show3(val) {
-      if (val) {
-        setTimeout(() => {
-          this.show3 = false;
-        }, 2000);
-      }
-    }
-  },
-
-  methods: {
-    showDialog() {
-      Dialog.confirm({
-        title: 'confirm标题',
-        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
-      })
-    }
-  }
-};
-</script>
-
-## Popup
-
-### Install
-``` javascript
-import { Popup } from 'vant';
-
-Vue.component(Popup.name, Popup);
-```
-
-### Usage
-
-#### Basic Usage
-Popup is located in the middle of the screen by default
-
-:::demo Basic Usage
-```html
-<van-button @click="show1 = true">Show Popup</van-button>
-<van-popup v-model="show1">Content</van-popup>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      show1: false
-    }
-  }
-};
-```
-:::
-
-#### Different Position
-Use `position` prop to set popup display position
-
-:::demo Different Position
-```html
-<van-button @click="show2 = true;">From Bottom</van-button>
-<van-popup v-model="show2" position="bottom">
-  <van-button @click="showDialog">Show Dialog</van-button>
-</van-popup>
-
-<van-button @click="show3 = true">From Top</van-button>
-<van-popup v-model="show3" position="top" :overlay="false">Content</van-popup>
-
-<van-button @click="show4 = true">From Right</van-button>
-<van-popup v-model="show4" position="right" :overlay="false">
-  <van-button @click="show4 = false">Close</van-button>
-</van-popup>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      show1: false,
-      show2: false,
-      show3: false,
-      show4: false
-    }
-  },
-
-  watch: {
-    show2(val) {
-      if (val) {
-        setTimeout(() => {
-          this.show2 = false;
-        }, 2000);
-      }
-    }
-  }
-};
-```
-:::
-
-### API
-
-| Attribute | Description | Type | Default | Accepted Values |
-|-----------|-----------|-----------|-------------|-------------|
-| v-model | Whether to show popup | `Boolean` | `false` | - |
-| overlay | Whether to show overlay | `Boolean` | `true` | - |
-| lockOnScroll | Lock body scroll | `Boolean` | `false` | - |
-| position | Position | `String` | - | `top` `bottom` `right` `left` |
-| closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - |
-| transition | Transition | `String` | `popup-slide` | - |
-| preventScroll | Prevent background scroll | `Boolean` | `false` | - |

docs/examples-docs/en-US/tab.md

@@ -1,339 +0,0 @@
-<style>
-.demo-tab {
-  .van-tab__pane {
-    background-color: #fff;
-    padding: 20px;
-  }
-
-  .van-tabs--card .van-tab__pane {
-    background-color: transparent;
-  }
-
-  .custom-tabwrap .van-tab-active {
-    color: #20a0ff;
-  }
-  .custom-tabwrap .van-tabs-nav-bar {
-    background: #20a0ff;
-  }
-  .custom-pane {
-    text-align: center;
-    height: 50px;
-    line-height: 50px;
-  }
-}
-</style>
-
-<script>
-import { Toast } from 'packages/index';
-
-export default {
-  data() {
-    return {
-      active: 2
-    };
-  },
-  mounted() {
-    setTimeout(() => {
-      this.active = 3;
-    }, 1000);
-  },
-  methods: {
-    onClickDisabled() {
-      Toast('Disabled!');
-    },
-
-    handleTabClick(index) {
-      alert(index);
-    }
-  }
-};
-</script>
-
-## Tabs
-
-### Install
-``` javascript
-import { Tab, Tabs } from 'vant';
-
-Vue.component(Tab.name, Tab);
-Vue.component(Tabs.name, Tabs);
-```
-
-### Usage
-
-#### Basic Usage
-
-By default, the first tab is actived.
-
-:::demo Basic Usage
-```html
-<van-tabs>
-  <van-tab title="tab 1">
-    content of tab 1
-  </van-tab>
-  <van-tab title="tab 2">
-    content of tab 2
-  </van-tab>
-  <van-tab title="tab 3">
-    content of tab 3
-  </van-tab>
-  <van-tab title="tab 4">
-    content of tab 4
-  </van-tab>
-</van-tabs>
-```
-:::
-
-#### Active Specified tab
-
-You can set `active` attribute on `van-tabs` to active specified tab.
-
-:::demo Active Specified tab
-```html
-<van-tabs :active="active">
-  <van-tab title="tab 1">
-    content of tab 1
-  </van-tab>
-  <van-tab title="tab 2">
-    content of tab 2
-  </van-tab>
-  <van-tab title="tab 3">
-    content of tab 3
-  </van-tab>
-  <van-tab title="tab 4">
-    content of tab 4
-  </van-tab>
-</van-tabs>
-
-<script>
-export default {
-  data() {
-    return {
-      active: 2
-    };
-  }
-}
-</script>
-```
-:::
-
-#### Tab duration time
-
-You can use `duration` attribute to set tab duration time, the default time is `0.3s`.
-
-:::demo Tab duration time
-```html
-<van-tabs :duration="0.6">
-  <van-tab title="tab 1">
-    content of tab 1
-  </van-tab>
-  <van-tab title="tab 2">
-    content of tab 2
-  </van-tab>
-  <van-tab title="tab 3">
-    content of tab 3
-  </van-tab>
-  <van-tab title="tab 4">
-    content of tab 4
-  </van-tab>
-</van-tabs>
-```
-:::
-
-#### Swipe Tabs
-
-By default more than 4 tabs, you can scroll through the tabs. You can set `swipeThreshold` attribute to customize threshold number.
-
-:::demo Swipe Tabs
-```html
-<van-tabs>
-  <van-tab title="tab 1">
-    content of tab 1
-  </van-tab>
-  <van-tab title="tab 2">
-    content of tab 2
-  </van-tab>
-  <van-tab title="tab 3">
-    content of tab 3
-  </van-tab>
-  <van-tab title="tab 4">
-    content of tab 4
-  </van-tab>
-  <van-tab title="tab 5">
-    content of tab 5
-  </van-tab>
-  <van-tab title="tab 6">
-    content of tab 6
-  </van-tab>
-  <van-tab title="tab 7">
-    content of tab 7
-  </van-tab>
-  <van-tab title="tab 8">
-    content of tab 8
-  </van-tab>
-</van-tabs>
-```
-:::
-
-#### Disabled Tab
-
-You can set `disabled` attribute on the corresponding `van-tab`. 
-
-:::demo Disabled Tab
-```html
-<van-tabs @disabled="onClickDisabled">
-  <van-tab title="tab 1">
-    content of tab 1
-  </van-tab>
-  <van-tab title="tab 2">
-    content of tab 2
-  </van-tab>
-  <van-tab title="tab 3">
-    content of tab 3
-  </van-tab>
-  <van-tab title="tab 4">
-    content of tab 4
-  </van-tab>
-</van-tabs>
-```
-
-```javascript
-export default {
-  methods: {
-    onClickDisabled() {
-      Toast('Disabled!');
-    }
-  }
-};
-```
-:::
-
-#### Card Style
-
-Tabs styled as cards.
-
-:::demo Card Style
-```html
-<van-tabs type="card">
-  <van-tab title="tab 1">
-    content of tab 1
-  </van-tab>
-  <van-tab title="tab 2">
-    content of tab 2
-  </van-tab>
-  <van-tab title="tab 3">
-    content of tab 3
-  </van-tab>
-  <van-tab title="tab 4">
-    content of tab 4
-  </van-tab>
-</van-tabs>
-```
-:::
-<style>
-  .custom-tabwrap .van-tab-active {
-    color: #20a0ff;
-  }
-  .custom-tabwrap .van-tabs-nav-bar {
-    background: #20a0ff;
-  }
-  .custom-pane {
-    text-align: center;
-    height: 50px;
-    line-height: 50px;
-  }
-</style>
-
-#### Custom Style
-
-You can set `css class` to customize tabs style.
-
-:::demo Custom Style
-```html
-<van-tabs active="2" class="custom-tabwrap">
-  <van-tab title="tab 1" class="custom-pane">
-    content of tab 1
-  </van-tab>
-  <van-tab title="tab 2" class="custom-pane">
-    content of tab 2
-  </van-tab>
-  <van-tab title="tab 3" class="custom-pane">
-    content of tab 3
-  </van-tab>
-  <van-tab title="tab 4" class="custom-pane">
-    content of tab 4
-  </van-tab>
-</van-tabs>
-
-<style>
-  .custom-tabwrap .van-tab-active {
-    color: #20a0ff;
-  }
-  .custom-tabwrap .van-tabs-nav-bar {
-    background: #20a0ff;
-  }
-  .custom-pane {
-    text-align: center;
-    height: 50px;
-    line-height: 50px;
-  }
-</style>
-```
-:::
-
-#### Click Event
-
-You can bind `click` event on `van-tabs`, the event handler function has one parameters: index of click tab.
-
-:::demo Click Event
-```html
-<van-tabs @click="handleTabClick">
-  <van-tab title="tab 1" class="custom-pane">
-    content of tab 1
-  </van-tab>
-  <van-tab title="tab 2" class="custom-pane">
-    content of tab 2
-  </van-tab>
-  <van-tab title="tab 3" class="custom-pane">
-    content of tab 3
-  </van-tab>
-  <van-tab title="tab 4" class="custom-pane">
-    content of tab 4
-  </van-tab>
-</van-tabs>
-```
-
-```javascript
-export default {
-  methods: {
-    handleTabClick(index) {
-      alert(index);
-    }
-  }
-};
-```
-:::
-
-### van-tabs API
-
-| Attribute | Description | Type | Default | Accepted Values |
-|-----------|-----------|-----------|-------------|-------------|
-| type | There are two style tabs, set this attribute to change tab style | `String` | `line` |     `line`, `card` |
-| active | Index of active tab | `String`, `Number` | `0` | - |
-| duration | Toggle tab's animation time | `Number` | `0.3` | - | - |
-| swipeThreshold | Set swipe tabs threshold | `Number` | `4` | - | - |
-
-### van-tab API
-
-| Attribute | Description | Type | Default | Accepted Values |
-|-----------|-----------|-----------|-------------|-------------|
-| title | Tab title | `String` | - | - |
-| disabled | Whether disabled current tab | `Boolean` | `false` | - |
-
-### van-tabs Event
-
-| Event | Description | Attribute |
-|-----------|-----------|-----------|
-| click | Triggered when click tab | index：index of current tab |
-| disabled | Triggered when click disabled tab | index：index of current tab |
-

docs/examples-docs/en-US/toast.md

@@ -1,160 +0,0 @@
-<script>
-import { Toast } from 'packages';
-
-export default {
-  methods: {
-    showToast() {
-      Toast('Some messages');
-    },
-    showLoadingToast() {
-      Toast.loading({ mask: true });
-    },
-    showSuccessToast() {
-      Toast.success('Success');
-    },
-    showFailToast() {
-      Toast.fail('Fail');
-    },
-    showCustomizedToast(duration) {
-      const toast = Toast.loading({
-        duration: 0,  
-        forbidClick: true,
-        message: '3 seconds'
-      });
-
-      let second = 3;
-      const timer = setInterval(() => {
-        second--;
-        if (second) {
-          toast.message = `${second} seconds`;
-        } else {
-          clearInterval(timer);
-          Toast.clear();
-        }
-      }, 1000);
-    }
-  }
-};
-</script>
-
-## Toast
-
-### Install
-
-```javascript
-import { Toast } from 'vant';
-```
-
-### Usage
-
-#### Text
-
-:::demo Text
-```html
-<van-button @click="showToast">Show Text</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showToast() {
-      Toast('Some messages');
-    }
-  }
-}
-```
-:::
-
-#### Loading
-
-:::demo Loading
-```html
-<van-button @click="showLoadingToast">Show Loading</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showLoadingToast() {
-      Toast.loading({ mask: true });
-    }
-  }
-}
-```
-:::
-
-#### Success/Fail
-
-:::demo Success/Fail
-```html
-<van-button @click="showSuccessToast">Show Success</van-button>
-<van-button @click="showFailToast">Show Fail</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showSuccessToast() {
-      Toast.success('Success');
-    },
-    showFailToast() {
-      Toast.fail('Fail');
-    }
-  }
-}
-```
-:::
-
-#### Advanced Usage
-
-:::demo Advanced Usage
-```html
-<van-button @click="showCustomizedToast">Advanced Usage</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showCustomizedToast() {
-      const toast = Toast.loading({
-        duration: 0,       // continuous display toast
-        forbidClick: true, // forbid click background
-        message: '3 seconds'
-      });
-
-      let second = 3;
-      const timer = setInterval(() => {
-        second--;
-        if (second) {
-          toast.message = `${second} seconds`;
-        } else {
-          clearInterval(timer);
-          Toast.clear();
-        }
-      }, 1000);
-    }
-  }
-};
-```
-:::
-
-### Methods
-
-| Methods | Attribute | Return value | Description |
-|-----------|-----------|-----------|-------------|
-| Toast | `options | message` | toast instance | Show toast |
-| Toast.loading | `options | message` | toast instance | Show loading toast |
-| Toast.success | `options | message` | toast instance | Show success toast |
-| Toast.fail | `options | message` | toast instance | Show fail toast |
-| Toast.clear | - | `void` | Close  |
-
-### Options
-
-| Attribute | Description | Type | Default | Accepted Values |
-|-----------|-----------|-----------|-------------|-------------|
-| type | Type | `String` | `text` | `loading` `success` `fail` `html` |
-| message | Message | `String` | `''` | - |
-| position | Position | `String` | `middle` | `top` `bottom` |
-| mask | Whether to show mask | `Boolean` | `false` | - |
-| forbidClick | Whether to forbid click background | `Boolean` | `false` | - |
-| duration | Toast duration(ms) | `Number` | `3000` | Toast won't disappear if value is 0 |

docs/examples-docs/en-US/uploader.md

@@ -1,57 +0,0 @@
-<script>
-export default {
-  methods: {
-    logContent(file) {
-      console.log(file)
-    }
-  }
-};  
-</script>
-
-## Uploader
-
-### Install
-``` javascript
-import { Uploader } from 'vant';
-
-Vue.component(Uploader.name, Uploader);
-```
-
-### Usage
-
-#### Basic Usage
-
-:::demo Basic Usage
-```html
-<div class="uploader-container">
-  <van-uploader :after-read="logContent">
-    <van-icon name="photograph"></van-icon>
-  </van-uploader>
-</div>
-```
-
-```javascript
-export default {
-  methods: {
-    logContent(file) {
-      console.log(file)
-    }
-  }
-};  
-```
-:::
-
-### API
-
-| Attribute | Description | Type | Default | Accepted Values |
-|-----------|-----------|-----------|-------------|-------------|
-| resultType | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `text` |
-| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | - |
-| beforeRead | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件 | `Function` | - | - |
-| afterRead | 文件读完之后回调此函数，参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - |
-
-### Slot
-
-| name | Description |
-|-----------|-----------|
-| - | 自定义上传显示图标 |

docs/examples-docs/zh-CN/actionsheet.md

@@ -1,181 +0,0 @@
-<style>
-.demo-actionsheet {
-  .actionsheet-wx {
-    color: #06BF04;
-  }
-
-  .van-button {
-    margin-left: 15px;
-  }
-
-  p {
-    padding: 20px;
-  }
-}
-</style>
-
-<script>
-import { Toast } from 'packages/index';
-
-export default {
-  data() {
-    return {
-      show1: false,
-      show2: false,
-      show3: false,
-      actions: [
-        {
-          name: '微信安全支付',
-          className: 'actionsheet-wx',
-          callback: this.onClick
-        },
-        {
-          name: '支付宝支付',
-          loading: true
-        },
-        {
-          name: '信用卡支付'
-        },
-        {
-          name: '其他支付方式'
-        }
-      ]
-    };
-  },
-
-  methods: {
-    onClick(item) {
-      Toast(item.name);
-    }
-  }
-}
-</script>
-
-## Actionsheet 行动按钮
-
-### 使用指南
-``` javascript
-import { Actionsheet } from 'vant';
-
-Vue.component(Actionsheet.name, Actionsheet);
-```
-
-### 代码演示
-
-#### 基础用法
-需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性见文档下方表格。
-
-:::demo 基础用法
-```html
-<van-button @click="show1 = true">弹出 Actionsheet</van-button>
-<van-actionsheet v-model="show1" :actions="actions" />
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      show1: false,
-      actions: [
-        {
-          name: '微信安全支付',
-          className: 'actionsheet-wx',
-          callback: this.onClick
-        },
-        {
-          name: '支付宝支付',
-          loading: true
-        },
-        {
-          name: '信用卡支付'
-        },
-        {
-          name: '其他支付方式'
-        }
-      ]
-    };
-  },
-
-  methods: {
-    onClick(item) {
-      Toast(item.name);
-    }
-  }
-}
-```
-:::
-
-#### 带取消按钮的 Actionsheet
-
-如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。
-
-:::demo 带取消按钮的 Actionsheet
-```html
-<van-button @click="show2 = true">弹出带取消按钮的 Actionsheet</van-button>
-<van-actionsheet v-model="show2" :actions="actions" cancel-text="取消">
-</van-actionsheet>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      show2: false,
-      actions: [
-        {
-          name: '微信安全支付',
-          className: 'actionsheet-wx',
-          callback: this.onClick
-        },
-        {
-          name: '支付宝支付',
-          loading: true
-        },
-        {
-          name: '信用卡支付'
-        },
-        {
-          name: '其他支付方式'
-        }
-      ]
-    };
-  }
-}
-```
-:::
-
-#### 带标题的 Actionsheet
-
-如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。
-
-:::demo 带标题的 Actionsheet
-```html
-<van-button @click="show3 = true">弹出带标题的 Actionsheet</van-button>
-<van-actionsheet v-model="show3" title="支持以下配送方式">
-  <p>一些内容</p>
-</van-actionsheet>
-```
-:::
-
-### API
-
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| actions | 行动按钮数组 | `Array` | `[]` | - |
-| title | 标题 | `String` | - | - |
-| cancelText | 取消按钮文案 | `String` | - | - |
-| overlay | 是否显示遮罩 | `Boolean` | - | - |
-| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
-
-### actions
-
-
-`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
-
-| key | 说明 |
-|-----------|-----------|
-| name | 标题 |
-| subname | 二级标题 |
-| className | 为对应列添加特殊的`class` |
-| loading | 是否是`loading`状态 |
-| callback | 点击时的回调。该回调接受一个参数，参数为当前点击`action`的对象信息 |

docs/examples-docs/zh-CN/dialog.md

@@ -1,132 +0,0 @@
-<style>
-.demo-dialog {
-  .van-button {
-    margin: 15px;
-  }
-}
-</style>
-
-<script>
-import { Dialog } from 'packages';
-
-const message = '弹窗内容';
-
-export default {
-  methods: {
-    onClickAlert() {
-      Dialog.alert({
-        title: '标题',
-        message
-      });
-    },
-
-    onClickAlert2() {
-      Dialog.alert({
-        message
-      });
-    },
-
-    onClickConfirm() {
-      Dialog.confirm({
-        title: '标题',
-        message
-      }).catch(action => {
-        console.log(action);
-      });
-    }
-  }
-};
-</script>
-
-## Dialog 弹出框
-
-### 使用指南
-
-```js
-import { Dialog } from 'vant';
-```
-
-### 代码演示
-
-#### 消息提示
-
-用于提示一些消息，只包含一个确认按钮
-
-:::demo 消息提示
-```html
-<van-button @click="onClickAlert">Alert</van-button>
-<van-button @click="onClickAlert2">无标题 Alert</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    onClickAlert() {
-      Dialog.alert({
-        title: '标题',
-        message: '弹窗内容'
-      }).then(() => {
-        // on close
-      });
-    },
-
-    onClickAlert2() {
-      Dialog.alert({
-        message: '弹窗内容'
-      }).then(() => {
-        // on close
-      });
-    }
-  }
-};
-```
-:::
-
-#### 消息确认
-
-用于确认消息，包含取消和确认按钮
-
-:::demo 消息确认
-```html
-<van-button @click="onClickConfirm">Confirm</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    onClickConfirm() {
-      Dialog.confirm({
-        title: '标题',
-        message: '弹窗内容'
-      }).then(() => {
-        // on confirm
-      }).catch(() => {
-        // on cancel
-      });
-    }
-  }
-};
-```
-:::
-
-### 方法
-
-| 方法名 | 参数 | 返回值 | 介绍 |
-|-----------|-----------|-----------|-------------|
-| Dialog.alert | options | `Promise` | 展示消息提示弹窗 |
-| Dialog.confirm | options | `Promise` | 展示消息确认弹窗 |
-| Dialog.close | - | `void` | 关闭弹窗 |
-
-### Options
-
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| title | 标题 | `String` | - | - |
-| message | 内容 | `String` | - | - |
-| showConfirmButton | 是否展示确认按钮 | `Boolean` |  `true` | - |
-| showCancelButton | 是否展示取消按钮 | `Boolean` |  `false` | - |
-| confirmButtonText | 确认按钮的文案 | `String` |  `确认` | - |
-| cancelButtonText | 取消按钮的文案 | `String` | `取消` | - |
-| overlay | 是否展示蒙层 | `Boolean` | `true` | - |
-| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
-| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | - |

docs/examples-docs/zh-CN/icon.md

@@ -1,172 +0,0 @@
-<style>
-.demo-icon {
-  font-size: 0;
-
-  .examples {
-    max-height: none;
-  }
-
-  .van-col {
-    text-align: center;
-    height: 100px;
-    float: none;
-    display: inline-block;
-
-    .van-icon {
-      display: block;
-    }
-  }
-
-  .van-icon {
-    display: none;
-    font-size: 32px;
-    margin: 15px 0;
-    color: rgba(69, 90, 100, .8);
-  }
-
-  span {
-    font-size: 14px;
-  }
-} 
-</style>
-
-<script>
-import Vue from 'vue';
-
-const icons = [
-  'close',
-  'location',
-  'clock',
-  'gold-coin',
-  'chat',
-  'exchange',
-  'upgrade',
-  'edit',
-  'contact',
-  'passed',
-  'points',
-  'delete',
-  'records',
-  'logistics',
-  'check',
-  'checked',
-  'gift',
-  'like-o',
-  'like',
-  'qr',
-  'qr-invalid',
-  'shop',
-  'photograph',
-  'add',
-  'add2',
-  'photo',
-  'cart',
-  'arrow',
-  'search',
-  'clear',
-  'success',
-  'fail',
-  'wechat',
-  'alipay',
-  'password-view',
-  'wap-nav',
-  'password-not-view',
-  'wap-home',
-  'ecard-pay',
-  'balance-pay',
-  'peer-pay',
-  'credit-pay',
-  'debit-pay',
-  'other-pay',
-  'shopping-cart',
-  'browsing-history',
-  'goods-collect',
-  'shop-collect',
-  'receive-gift',
-  'send-gift',
-  'setting',
-  'coupon',
-  'free-postage',
-  'discount',
-  'birthday-privilege',
-  'member-day-privilege',
-  'balance-details',
-  'cash-back-record',
-  'points-mall',
-  'exchange-record',
-  'pending-payment',
-  'pending-orders',
-  'pending-deliver',
-  'pending-evaluate',
-  'cash-on-deliver',
-  'gift-card-pay',
-  'underway',
-  'point-gift',
-  'after-sale',
-  'edit-data',
-  'question',
-  'description',
-  'card',
-  'gift-card',
-  'completed',
-  'value-card',
-  'certificate',
-  'tosend',
-  'sign',
-  'home',
-  'phone'
-];
-
-const IconListConstructor = Vue.extend({
-  render(h) {
-    return (
-      <div>
-        {icons.map(icon => (
-          <van-col span="8">
-            <van-icon name={icon}></van-icon>
-            <span>{icon}</span>
-          </van-col>
-        ))}
-      </div>
-    )
-  }
-});
-
-export default {
-  mounted() {
-    const IconList = new IconListConstructor({
-      el: document.createElement('div')  
-    });
-    const block = document.querySelector('.zan-doc-demo-block');
-    if (block) {
-      block.appendChild(IconList.$el);
-    }
-  }
-};
-</script>
-
-## Icon 图标
-
-### 使用指南
-``` javascript
-import { Icon } from 'vant';
-
-Vue.component(Icon.name, Icon);
-```
-
-### 代码演示
-
-#### 基础用法
-
-设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表
-:::demo 图标列表
-```html
-<van-icon name="success" />
-```
-:::
-
-### API
-
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| name | icon名称 | `String` | `''` | - |

docs/examples-docs/zh-CN/image-preview.md

@@ -1,89 +0,0 @@
-<style>
-.demo-image-preview {
-  .van-button {
-    margin-left: 15px;
-  }
-}
-.van-image-preview {
-  img {
-    pointer-events: none;
-  }
-}
-</style>
-
-<script>
-import { ImagePreview } from 'packages';
-
-export default {
-  methods: {
-    showImagePreview(position) {
-      ImagePreview([
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
-        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
-      ], typeof position === 'number' ? position : 0);
-    }
-  }
-};
-</script>
-
-## ImagePreview 图片预览
-
-### 使用指南
-
-`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
-
-```js
-import { ImagePreview } from 'vant';
-```
-
-### 代码演示
-
-#### 基础用法
-
-:::demo 基础用法
-```html
-<van-button @click="showImagePreview">预览图片</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showImagePreview() {
-      ImagePreview([
-        'https://img.yzcdn.cn/1.jpg',
-        'https://img.yzcdn.cn/2.jpg'
-      ]);
-    }
-  }
-};
-```
-:::
-
-#### 指定初始位置
-
-:::demo 指定初始位置
-```html
-<van-button @click="showImagePreview(1)">指定初始位置</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showImagePreview(startPosition) {
-      ImagePreview([
-        'https://img.yzcdn.cn/1.jpg',
-        'https://img.yzcdn.cn/2.jpg'
-      ], startPosition);
-    }
-  }
-};
-```
-:::
-
-### 方法参数
-
-| 参数名 | 说明 | 类型 |
-|-----------|-----------|-----------|
-| imageUrls | 需要预览的图片 | `Array` |
-| startPosition | 图片预览起始位置索引 | `Number` |

docs/examples-docs/zh-CN/lazyload.md

@@ -1,153 +0,0 @@
-<style>
-.demo-lazyload {
-  padding: 15px;
-
-  img,
-  div[lazy] {
-    padding: 15px;
-    width: 100%;
-    height: 250px;
-    margin: 10px 0 0;
-    background-color: white;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    background-size: 315px 250px;
-    background-position: 15px;
-    background-repeat: no-repeat;
-    box-sizing: border-box;
-  }
-
-  .zan-doc-demo-block__title,
-  .zan-doc-demo-block__subtitle {
-    padding-left: 0;
-  }
-}
-</style>
-
-<script>
-export default {
-  data() {
-    return {
-      imageList: [
-        'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
-      ],
-      backgroundImageList: [
-        'https://img.yzcdn.cn/public_files/2017/09/05/bac1903e863834ace25773f3554b6890.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/138c32d4384b5e4a78dc4e1ba58e6a80.jpg'
-      ],
-      componentImageList: [
-        'https://img.yzcdn.cn/public_files/2017/09/05/100a7845756a70af2df513bdd1307d0e.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/8a4f5be8289cb3a7434fc19a3de780a2.jpg'
-      ]
-    };
-  },
-
-  methods: {
-    handleComponentShow() {
-      console.log('component show');
-    }
-  }
-}
-</script>
-
-## Lazyload 图片懒加载
-
-### 使用指南
-
-`Lazyload`是`Vue`指令，所以需要使用它必须将它注册到`Vue`的指令中。
-
-```js
-import Vue from 'vue';
-import { Lazyload } from 'vant';
-
-Vue.use(Lazyload, options);
-```
-
-### 代码演示
-
-#### 基础用法
-将`v-lazy`指令的值设置为你需要懒加载的图片
-
-:::demo 基础用法
-```html
-<img v-for="img in imageList" v-lazy="img">
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      imageList: [
-        'https://img.yzcdn.cn/1.jpg',
-        'https://img.yzcdn.cn/2.jpg'
-      ]
-    };
-  }
-}
-```
-:::
-
-#### 背景图懒加载
-
-和图片懒加载不同，背景图懒加载需要使用`v-lazy:background-image`，值设置为背景图片的地址，需要注意的是必须声明容器高度。
-
-:::demo 背景图懒加载
-```html
-<div v-for="img in backgroundImageList" v-lazy:background-image="img" />
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      backgroundImageList: [
-        'https://img.yzcdn.cn/1.jpg',
-        'https://img.yzcdn.cn/2.jpg'
-      ]
-    };
-  }
-}
-```
-:::
-
-#### 懒加载模块
-
-懒加载模块需要使用到`lazy-component`，将需要懒加载的内容放在`lazy-component`中即可。
-
-:::demo 懒加载模块
-```html
-<lazy-component>
-  <img v-for="img in componentImageList" v-lazy="img">
-</lazy-component>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      componentImageList: [
-        'https://img.yzcdn.cn/1.jpg',
-        'https://img.yzcdn.cn/2.jpg'
-      ]
-    };
-  }
-}
-```
-:::
-
-### Options
-
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| loading | 加载时的图片 | `String` | - | - |
-| error | 错误时的图片 | `String` | - | - |
-| preload | 预加载高度的比例 | `String` | - | - |
-| attempt | 尝试次数 | `Number` | `3` | - |
-| listenEvents | 监听的事件 | `Array` | `scroll`等 | - |
-| adapter | 适配器 | `Object` | - | - |
-| filter | 图片url过滤 | `Object` | - | - |
-| lazyComponent | 是否能懒加载模块 | `Boolean` | `false` | - |
-
-更多内容请参照：[ vue-lazyload 官方文档](https://github.com/hilongjw/vue-lazyload)

docs/examples-docs/zh-CN/loading.md

@@ -1,53 +0,0 @@
-<style>
-.demo-loading {
-  .van-loading {
-    display: inline-block;
-    margin: 10px 0 10px 20px;
-  }
-}
-</style>
-
-## Loading 加载
-
-### 使用指南
-``` javascript
-import { Loading } from 'vant';
-
-Vue.component(Loading.name, Loading);
-```
-
-### 代码演示
-
-#### 单色圆环
-
-:::demo 单色圆环
-```html
-<van-loading type="circle" color="black"></van-loading>
-<van-loading type="circle" color="white"></van-loading>
-```
-:::
-
-#### 渐变色圆环
-
-:::demo 渐变色圆环
-```html
-<van-loading type="gradient-circle" color="black"></van-loading>
-<van-loading type="gradient-circle" color="white"></van-loading>
-```
-:::
-
-#### Spinner
-
-:::demo Spinner
-```html
-<van-loading type="spinner" color="black"></van-loading>
-<van-loading type="spinner" color="white"></van-loading>
-```
-:::
-
-### API
-
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| color | 颜色 | `String` | `black` | `black` `white` |
-| type | 类型 | `String` | `gradient-circle` | `spinner` `circle` |

docs/examples-docs/zh-CN/popup.md

@@ -1,154 +0,0 @@
-<style>
-.demo-popup {
-  .van-button {
-    margin: 10px 0 10px 15px;
-  }
-
-  .van-popup {
-    width: 60%;
-    padding: 20px;
-    border-radius: 5px;
-    box-sizing: border-box;
-
-    &--bottom {
-      width: 100%;
-      height: 200px;
-    }
-
-    &--top {
-      color: #fff;
-      width: 100%;
-      border-radius: 0;
-      line-height: 20px;
-      background-color: rgba(0, 0, 0, 0.8);
-    }
-
-    &--left,
-    &--right {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-</style>
-
-<script>
-import Dialog from 'packages/dialog';
-
-export default {
-  data() {
-    return {
-      show1: false,
-      show2: false,
-      show3: false,
-      show4: false
-    }
-  },
-
-  watch: {
-    show3(val) {
-      if (val) {
-        setTimeout(() => {
-          this.show3 = false;
-        }, 2000);
-      }
-    }
-  },
-
-  methods: {
-    showDialog() {
-      Dialog.confirm({
-        title: 'confirm标题',
-        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
-      })
-    }
-  }
-};
-</script>
-
-## Popup 弹出层
-
-### 使用指南
-``` javascript
-import { Popup } from 'vant';
-
-Vue.component(Popup.name, Popup);
-```
-
-### 代码演示
-
-#### 基础用法
-`popup`默认从中间弹出
-
-:::demo 基础用法
-```html
-<van-button @click="show1 = true">弹出 Popup</van-button>
-<van-popup v-model="show1">内容</van-popup>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      show1: false
-    }
-  }
-};
-```
-:::
-
-#### 弹出位置
-通过`position`属性设置 Popup 弹出位置
-
-:::demo 弹出位置
-```html
-<van-button @click="show2 = true;">底部弹出</van-button>
-<van-popup v-model="show2" position="bottom">
-  <van-button @click="showDialog">弹出 Dialog</van-button>
-</van-popup>
-
-<van-button @click="show3 = true">顶部弹出</van-button>
-<van-popup v-model="show3" position="top" :overlay="false">
-  更新成功
-</van-popup>
-
-<van-button @click="show4 = true">右侧弹出</van-button>
-<van-popup v-model="show4" position="right" :overlay="false">
-  <van-button @click="show4 = false">关闭弹层</van-button>
-</van-popup>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      show1: false,
-      show2: false,
-      show3: false
-    }
-  },
-
-  watch: {
-    show2(val) {
-      if (val) {
-        setTimeout(() => {
-          this.show2 = false;
-        }, 2000);
-      }
-    }
-  }
-};
-```
-:::
-
-### API
-
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
-| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
-| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
-| position | 弹出层位置 | `String` | - | `top` `bottom` `right` `left` |
-| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
-| transition | 弹出层的`transition` | `String` | `popup-slide` | - |
-| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |

docs/examples-docs/zh-CN/tab.md

@@ -1,257 +0,0 @@
-<style>
-.demo-tab {
-  .van-tab__pane {
-    background-color: #fff;
-    padding: 20px;
-  }
-
-  .van-tabs--card .van-tab__pane {
-    background-color: transparent;
-  }
-
-  .custom-tabwrap .van-tab-active {
-    color: #20a0ff;
-  }
-  .custom-tabwrap .van-tabs-nav-bar {
-    background: #20a0ff;
-  }
-  .custom-pane {
-    text-align: center;
-    height: 50px;
-    line-height: 50px;
-  }
-}
-</style>
-
-<script>
-import { Toast } from 'packages/index';
-
-export default {
-  data() {
-    return {
-      active: 2
-    };
-  },
-  mounted() {
-    setTimeout(() => {
-      this.active = 3;
-    }, 1000);
-  },
-  methods: {
-    onClickDisabled() {
-      Toast('Disabled!');
-    },
-
-    handleTabClick(index) {
-      alert(index);
-    }
-  }
-};
-</script>
-
-## Tabs 标签页
-
-### 使用指南
-``` javascript
-import { Tab, Tabs } from 'vant';
-
-Vue.component(Tab.name, Tab);
-Vue.component(Tabs.name, Tabs);
-```
-
-### 代码演示
-
-#### 基础用法
-
-默认情况下是启用第一个`tab`。
-
-:::demo 基础用法
-```html
-<van-tabs>
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二">内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-  <van-tab title="选项四">内容四</van-tab>
-</van-tabs>
-```
-:::
-
-#### active特定tab
-
-可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`，默认为0。
-
-:::demo 基础用法
-```html
-<van-tabs :active="active">
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二">内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-  <van-tab title="选项四">内容四</van-tab>
-</van-tabs>
-```
-:::
-
-#### 设置切换tab的动画时间
-
-通过设置`duration`来指定时间，默认为0.3s，只接受`Number`类型参数。
-
-:::demo 设置切换tab的动画时间
-```html
-<van-tabs :duration="0.6">
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二">内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-</van-tabs>
-```
-:::
-
-#### 横向滚动tab
-
-默认情况下多于4个tab时，可以横向滚动tab。可以通过设置`swipeThreshold`这个阙值，多于这个阙值时，tab就会支持横向滚动。
-
-:::demo 横向滚动tab
-```html
-<van-tabs>
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二">内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-  <van-tab title="选项四">内容四</van-tab>
-  <van-tab title="选项五">内容五</van-tab>
-  <van-tab title="选项六">内容六</van-tab>
-  <van-tab title="选项七">内容七</van-tab>
-  <van-tab title="选项八">内容八</van-tab>
-</van-tabs>
-```
-:::
-
-#### 禁用tab
-
-在对应的`van-tab`上设置`disabled`属性即可。如果需要监听禁用事件，可以在`van-tabs`上监听`disabled`事件。
-
-:::demo 禁用tab
-```html
-<van-tabs @disabled="onClickDisabled">
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二" disabled>内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-  <van-tab title="选项四">内容四</van-tab>
-</van-tabs>
-```
-
-```javascript
-export default {
-  methods: {
-    onClickDisabled() {
-      Toast('Disabled!')
-    }
-  }
-};
-```
-:::
-
-#### card样式
-
-`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`van-tabs`上设置`type`为`card`改为card样式。
-
-:::demo card样式
-```html
-<van-tabs type="card">
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二">内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-  <van-tab title="选项四">内容四</van-tab>
-</van-tabs>
-```
-:::
-<style>
-  .custom-tabwrap .van-tab-active {
-    color: #20a0ff;
-  }
-  .custom-tabwrap .van-tabs-nav-bar {
-    background: #20a0ff;
-  }
-  .custom-pane {
-    text-align: center;
-    height: 50px;
-    line-height: 50px;
-  }
-</style>
-
-#### 自定义样式
-
-可以在`van-tabs`上设置对应的`class`，从而自定义某些样式。
-
-:::demo 自定义样式
-```html
-<van-tabs active="2" class="custom-tabwrap">
-    <van-tab title="选项一" class="custom-pane">内容一</van-tab>
-    <van-tab title="选项二" class="custom-pane">内容二</van-tab>
-    <van-tab title="选项三" class="custom-pane">内容三</van-tab>
-    <van-tab title="选项四" class="custom-pane">内容四</van-tab>
-</van-tabs>
-
-<style>
-  .custom-tabwrap .van-tab-active {
-    color: #20a0ff;
-  }
-  .custom-tabwrap .van-tabs-nav-bar {
-    background: #20a0ff;
-  }
-  .custom-pane {
-    text-align: center;
-    height: 50px;
-    line-height: 50px;
-  }
-</style>
-```
-:::
-
-#### click事件
-
-可以在`van-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
-
-:::demo click事件
-```html
-<van-tabs @click="handleTabClick">
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二">内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-  <van-tab title="选项四">内容四</van-tab>
-</van-tabs>
-```
-
-```javascript
-export default {
-  methods: {
-    handleTabClick(index) {
-      alert(index);
-    }
-  }
-};
-```
-:::
-
-### van-tabs API
-
-| 参数 | 说明 | 类型 | 默认值 | 可选 |
-|-----------|-----------|-----------|-------------|-------------|
-| type | 两种UI | `String` | `line` |     `line`, `card` |
-| active | 默认激活的tab | `String`, `Number` | `0` | - |
-| duration | 切换tab的动画时间 | `Number` | `0.3` | - | - |
-| swipeThreshold | 滚动阀值，默认是超过4个tab时标签页可滚动，通过这个属性可以设置超过多少个可滚动 | `Number` | `4` | - | - |
-
-
-### van-tab API
-
-| 参数 | 说明 | 类型 | 默认值 | 可选 |
-|-----------|-----------|-----------|-------------|-------------|
-| title | tab的标题 | `String` | - | - |
-| disabled | 是否禁用这个tab | `Boolean` | `false` | - |
-
-### van-tabs Event
-
-| 事件名 | 说明 | 参数 |
-|-----------|-----------|-----------|
-| click | 某个tab点击事件 | index：点击的`tab`的索引 |
-| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
-

docs/examples-docs/zh-CN/toast.md

@@ -1,168 +0,0 @@
-<style>
-.demo-toast {
-  .van-button {
-    margin-left: 15px;
-  }
-}
-</style>
-
-<script>
-import { Toast } from 'packages';
-
-export default {
-  methods: {
-    showToast() {
-      Toast('我是提示文案，建议不超过十五字~');
-    },
-    showLoadingToast() {
-      Toast.loading({ mask: true });
-    },
-    showSuccessToast() {
-      Toast.success('成功文案');
-    },
-    showFailToast() {
-      Toast.fail('失败文案');
-    },
-    showCustomizedToast(duration) {
-      const toast = Toast.loading({
-        duration: 0,
-        forbidClick: true,
-        message: '倒计时 3 秒'
-      });
-
-      let second = 3;
-      const timer = setInterval(() => {
-        second--;
-        if (second) {
-          toast.message = `倒计时 ${second} 秒`;
-        } else {
-          clearInterval(timer);
-          Toast.clear();
-        }
-      }, 1000);
-    }
-  }
-};
-</script>
-
-## Toast 轻提示
-
-### 使用指南
-
-```javascript
-import { Toast } from 'vant';
-```
-
-### 代码演示
-
-#### 文字提示
-
-:::demo 文字提示
-```html
-<van-button @click="showToast">文字提示</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showToast() {
-      Toast('我是提示文案，建议不超过十五字~');
-    }
-  }
-}
-```
-:::
-
-#### 加载提示
-
-:::demo 加载提示
-```html
-<van-button @click="showLoadingToast">加载提示</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showLoadingToast() {
-      Toast.loading({ mask: true });
-    }
-  }
-}
-```
-:::
-
-#### 成功/失败提示
-
-:::demo 成功/失败提示
-```html
-<van-button @click="showSuccessToast">成功提示</van-button>
-<van-button @click="showFailToast">失败提示</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showSuccessToast() {
-      Toast.success('成功文案');
-    },
-    showFailToast() {
-      Toast.fail('失败文案');
-    }
-  }
-}
-```
-:::
-
-#### 高级用法
-
-:::demo 高级用法
-```html
-<van-button @click="showCustomizedToast">高级用法</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showCustomizedToast() {
-      const toast = Toast.loading({
-        duration: 0,       // 持续展示 toast
-        forbidClick: true, // 禁用背景点击
-        message: '倒计时 3 秒'
-      });
-
-      let second = 3;
-      const timer = setInterval(() => {
-        second--;
-        if (second) {
-          toast.message = `倒计时 ${second} 秒`;
-        } else {
-          clearInterval(timer);
-          Toast.clear();
-        }
-      }, 1000);
-    }
-  }
-};
-```
-:::
-
-### 方法
-
-| 方法名 | 参数 | 返回值 | 介绍 |
-|-----------|-----------|-----------|-------------|
-| Toast | `options | message` | toast 实例 | 展示提示 |
-| Toast.loading | `options | message` | toast 实例 | 展示加载提示 |
-| Toast.success | `options | message` | toast 实例 | 展示成功提示 |
-| Toast.fail | `options | message` | toast 实例 | 展示失败提示 |
-| Toast.clear | - | `void` | 关闭提示 |
-
-### Options
-
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| type | 提示类型 | `String` | `text` | `loading` `success` `fail` `html` |
-| message | 内容 | `String` | `''` | - |
-| position | 位置 | `String` | `middle` | `top` `bottom` |
-| mask | 是否显示背景蒙层 | `Boolean` | `false` | - |
-| forbidClick | 禁止背景点击 | `Boolean` | `false` | - |
-| duration | 时长(ms) | `Number` | `3000` | 值为 0 时，toast 不会消失 |

docs/markdown/en-US/actionsheet.md

@@ -1,28 +1,3 @@
-<script>
-import { Toast } from 'packages/index';
-
-export default {
-  data() {
-    return {
-      show1: false,
-      show2: false,
-      show3: false,
-      actions: [
-        { name: 'Option1', callback: this.onClick },
-        { name: 'Option2' },
-        { name: 'Option3', loading: true }
-      ]
-    };
-  },
-
-  methods: {
-    onClick(item) {
-      Toast(item.name);
-    }
-  }
-}
-</script>
-
 ## Actionsheet
 
 ### Install
@@ -37,17 +12,15 @@ Vue.component(Actionsheet.name, Actionsheet);
 #### Basic Usage
 Use `actions` prop to set options of actionsheet. 
 
-:::demo Basic Usage
 ```html
-<van-button @click="show1 = true">Show Actionsheet</van-button>
+<van-actionsheet v-model="show" :actions="actions" />
-<van-actionsheet v-model="show1" :actions="actions" />
 ```
 
 ```javascript
 export default {
   data() {
     return {
-      show1: false,
+      show: false,
       actions: [
         { name: 'Option1', callback: this.onClick },
         { name: 'Option2' },
@@ -63,28 +36,21 @@ export default {
   }
 }
 ```
-:::
 
 #### Actionsheet with cancel button
 
-:::demo Actionsheet with cancel button
 ```html
-<van-button @click="show2 = true">Show Actionsheet with cancel button</van-button>
+<van-actionsheet v-model="show" :actions="actions" cancelText="Cancel" />
-<van-actionsheet v-model="show2" :actions="actions" cancel-text="Cancel" />
 ```
-:::
 
 #### Actionsheet with title
 Actionsheet will get another style if there is a `title` prop.
 
-:::demo Actionsheet with title
 ```html
-<van-button @click="show3 = true">Show Actionsheet with title</van-button>
+<van-actionsheet v-model="show" title="Title">
-<van-actionsheet v-model="show3" title="Title">
   <p>Content</p>
 </van-actionsheet>
 ```
-:::
 
 ### API
 

docs/markdown/en-US/address-edit.md

@@ -1,41 +1,3 @@
-<script>
-import { Toast } from 'packages';
-import areaList from '../../mock/area.json';
-
-export default {
-  data() {
-    return {
-      areaList,
-      searchResult: []
-    }
-  },
-
-  methods: {
-    onSave() {
-      Toast('save');
-    },
-    onDelete() {
-      Toast('delete');
-    },
-    onChangeDetail(val) {
-      if (val) {
-        this.searchResult = [{
-          name: '黄龙万科中心',
-          address: '杭州市西湖区'
-        }, {
-          name: '黄龙万科中心H座'
-        }, {
-          name: '黄龙万科中心H座',
-          address: '杭州市西湖区'
-        }];
-      } else {
-        this.searchResult = [];
-      }
-    }
-  }
-};
-</script>
-
 ## AddressEdit
 
 ### Install
@@ -49,14 +11,14 @@ Vue.component(AddressEdit.name, AddressEdit);
 
 #### Basic Usage
 
-:::demo Basic Usage
+
 ```html
 <van-address-edit
-  :area-list="areaList"
+  :areaList="areaList"
-  :show-postal="true"
+  :showPostal="true"
-  :show-set-default="true"
+  :showSetDefault="true"
-  :show-search-result="true"
+  :showSearchResult="true"
-  :search-result="searchResult"
+  :searchResult="searchResult"
   @save="onSave"
   @delete="onDelete"
   @change-detail="onChangeDetail"
@@ -92,7 +54,7 @@ export default {
   }
 }
 ```
-:::
+
 
 ### API
 

docs/markdown/en-US/address-list.md

@@ -1,44 +1,3 @@
-<script>
-import { Toast } from 'packages';
-
-export default {
-  data() {
-    return {
-      chosenAddressId: '1',
-      list: [
-        {
-          id: '1',
-          name: '张三',
-          tel: '13000000000',
-          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
-        },
-        {
-          id: '2',
-          name: '李四',
-          tel: '1310000000',
-          address: '浙江省杭州市拱墅区莫干山路 50 号'
-        },
-        {
-          id: '3',
-          name: '王五',
-          tel: '1320000000',
-          address: '浙江省杭州市滨江区江南大道 15 号'
-        }
-      ]
-    }
-  },
-
-  methods: {
-    onAdd() {
-      Toast('新增收货地址');
-    },
-    onEdit(item, index) {
-      Toast('编辑收货地址:' + index);
-    }
-  }
-}
-</script>
-
 ## AddressList
 
 ### Install
@@ -52,7 +11,6 @@ Vue.component(AddressList.name, AddressList);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-address-list
   v-model="chosenAddressId"
@@ -94,7 +52,6 @@ export default {
   }
 }
 ```
-:::
 
 ### API
 

docs/markdown/en-US/area.md

@@ -1,15 +1,3 @@
-<script>
-import AreaList from '../../mock/area.json';
-
-export default {
-  data() {
-    return {
-      areaList: AreaList
-    }
-  }
-};
-</script>
-
 ## Area
 
 ### Install
@@ -26,43 +14,26 @@ Vue.component(Area.name, Area);
 
 要初始化一个`Area`组件，你需要传入一个`areaList`属性，`areaList`Data Structure具体可看下面Data Structure章节。
 
-:::demo Basic Usage
 ```html
-<van-area :area-list="areaList"></van-area>
+<van-area :areaList="areaList" />
-
-<script>
-import AreaList from '../../mock/area.json';
-
-export default {
-  data() {
-    return {
-      areaList: AreaList
-    }
-  }
-};
-</script>
 ```
-:::
 
-#### 选中省市县
+#### Initial Value
 
 如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`。
 
-:::demo 选中省市县
 ```html
-<van-area :area-list="areaList" value="110101"></van-area>
+<van-area :areaList="areaList" value="110101" />
 ```
-:::
 
-#### 配置显示列
+#### Columns Number
 
 可以通过`columnsNum`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择。
 
-:::demo 配置显示列
 ```html
-<van-area :area-list="areaList" :columns-num="2"></van-area>
+<van-area :areaList="areaList" :columnsNum="2" />
 ```
-:::
+
 
 ### API
 
@@ -115,7 +86,7 @@ export default {
 }
 ```
 
-完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/mock/area.json)
+完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.json)
 
 #### 点击完成时返回的Data Structure
 返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。

docs/markdown/en-US/badge.md

@@ -1,18 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      activeKey: 0
-    };
-  },
-  methods: {
-    onClick(key) {
-      this.activeKey = key;
-    }
-  }
-};
-</script>
-
 ## Badge
 
 ### Install
@@ -25,11 +10,10 @@ Vue.component(Badge.name, Badge);
 ### Usage
 
 #### Basic Usage
-Use `active-key` prop to set index of chosen 'badge'
+Use `activeKey` prop to set index of chosen 'badge'
 
-:::demo Basic Usage
 ```html
-<van-badge-group :active-key="activeKey">
+<van-badge-group :activeKey="activeKey">
   <van-badge title="Title" @click="onClick"></van-badge>
   <van-badge title="Title" @click="onClick" info="8"></van-badge>
   <van-badge title="Title" @click="onClick" info="99"></van-badge>
@@ -51,13 +35,12 @@ export default {
   }
 };
 ```
-:::
 
 ### BadgeGroup API
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| active-key | Index of chosen badge | `String | Number` | `0` | - |
+| activeKey | Index of chosen badge | `String | Number` | `0` | - |
 
 ### Badge API
 | Attribute | Description | Type | Default | Accepted Values |

docs/markdown/en-US/button.md

@@ -11,69 +11,57 @@ Vue.component(Button.name, Button);
 
 #### Type
 
-:::demo Type
 ```html
 <van-button type="default">Default</van-button>
 <van-button type="primary">Primary</van-button>
 <van-button type="danger">Danger</van-button>
 ```
-:::
 
 #### Size
 
-:::demo Size
 ```html 
 <van-button size="large">Large</van-button>
 <van-button size="normal">Normal</van-button>
 <van-button size="small">Small</van-button>
 <van-button size="mini">Mini</van-button>
 ```
-:::
 
 #### Disabled
 
-:::demo Disabled
 ```html
 <van-button disabled>Diabled</van-button>
 ```
-:::
 
 #### Loading
 
-:::demo Loading
 ```html 
 <van-button loading></van-button>
 <van-button loading type="primary"></van-button>
 ```
-:::
 
 #### Custom Tag
 Use `tag` prop to custom button tag
 
-:::demo Custom Tag
 ```html 
 <van-button tag="a" href="https://www.youzan.com" target="_blank">
   Button
 </van-button>
 ```
-:::
 
 #### Action Button
 
-:::demo Action Button
 ```html 
-<van-button type="primary" bottom-action>Text</van-button>
+<van-button type="primary" bottomAction>Button</van-button>
 
 <van-row>
   <van-col span="12">
-    <van-button bottom-action>Text</van-button>
+    <van-button bottomAction>Button</van-button>
   </van-col>
   <van-col span="12">
-    <van-button type="primary" bottom-action>Text</van-button>
+    <van-button type="primary" bottomAction>Button</van-button>
   </van-col>
 </van-row>
 ```
-:::
 
 ### API
 

docs/markdown/en-US/card.md

@@ -1,13 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
-    }
-  }
-}
-</script>
-
 ## Card
 
 ### Install
@@ -21,7 +11,6 @@ Vue.component(Card.name, Card);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-card
   title="Title"
@@ -31,12 +20,10 @@ Vue.component(Card.name, Card);
   :thumb="imageURL"
 />
 ```
-:::
 
 #### Advanced Usage
 Use `slot` to custom content.
 
-:::demo Advanced Usage
 ```html
 <van-card
   title="Title"
@@ -51,7 +38,6 @@ Use `slot` to custom content.
   </div>
 </van-card>
 ```
-:::
 
 ### API
 

docs/markdown/en-US/cell-swipe.md

@@ -11,7 +11,6 @@ Vue.component(CellSwipe.name, CellSwipe);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-cell-swipe :right-width="65" :left-width="65">
   <span slot="left">Select</span>
@@ -21,7 +20,6 @@ Vue.component(CellSwipe.name, CellSwipe);
   <span slot="right">Delete</span>
 </van-cell-swipe>
 ```
-:::
 
 ### API
 

docs/markdown/en-US/cell.md

@@ -1,13 +1,3 @@
-<script>
-export default {
-  methods: {
-    handleClick() {
-      console.log('cell click');
-    }
-  }
-};
-</script>
-
 ## Cell
 
 ### Install
@@ -22,66 +12,56 @@ Vue.component(CellGroup.name, CellGroup);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-cell-group>
-  <van-cell title="Title" value="Text"></van-cell>
+  <van-cell title="Cell title" value="Content"></van-cell>
-  <van-cell title="Title" value="Text" label="Description"></van-cell>
+  <van-cell title="Cell title" value="Content" label="Description"></van-cell>
 </van-cell-group>
 ```
-:::
 
 #### Value only
 
-:::demo Value only
 ```html
 <van-cell-group>
-  <van-cell value="Text"></van-cell>
+  <van-cell value="Content"></van-cell>
 </van-cell-group>
 ```
-:::
 
 #### Left Icon
 
-:::demo Left Icon
 ```html
 <van-cell-group>
-  <van-cell title="Title" icon="location"></van-cell>
+  <van-cell title="Cell title" icon="location"></van-cell>
 </van-cell-group>
 ```
-:::
 
 #### Link
 
-:::demo Link
 ```html
 <van-cell-group>
-  <van-cell title="Title" is-link></van-cell>
+  <van-cell title="Cell title" is-link></van-cell>
-  <van-cell title="Title" is-link value="Text"></van-cell>
+  <van-cell title="Cell title" is-link value="Content"></van-cell>
 </van-cell-group>
 ```
-:::
 
 #### Advanced Usage
 
-:::demo Advanced Usage
 ```html
 <van-cell-group>
-  <van-cell value="Text" icon="shop" is-link>
+  <van-cell value="Content" icon="shop" is-link>
     <template slot="title">
-      <span class="van-cell-text">Title</span>
+      <span class="van-cell-text">Cell title</span>
       <van-tag type="danger">Tag</van-tag>
     </template>
   </van-cell>
-  <van-cell title="Title" icon="location" is-link></van-cell>
+  <van-cell title="Cell title" icon="location" is-link></van-cell>
-  <van-cell title="Title">
+  <van-cell title="Cell title">
     <template slot="right-icon">
       <van-icon name="search" class="van-cell__right-icon"></van-icon>
     </template>
   </van-cell>
 </van-cell-group>
 ```
-:::
 
 ### API
 

docs/markdown/en-US/changelog.md

@@ -4,12 +4,10 @@
 `2017-11-15`
 
 **Improvements**
-
+- Icon: add new icons [\#315](https://github.com/youzan/vant/pull/315) [@cookfront](https://github.com/cookfront)
-- Icon: add new icons [\#315](https://github.com/youzan/vant/pull/315) ([cookfront](https://github.com/cookfront))
 
 **Bug Fixes**
-
+- Search: fix box-sizing wrong [\#312](https://github.com/youzan/vant/pull/312) [@chenjiahan](https://github.com/chenjiahan)
-- Search: fix box-sizing wrong [\#312](https://github.com/youzan/vant/pull/312) ([chenjiahan](https://github.com/chenjiahan))
 
 ### [0.10.8](https://github.com/youzan/vant/tree/v0.10.8)
 `2017-11-11`

docs/markdown/en-US/checkbox.md

@@ -1,20 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      checkbox1: true,
-      checkbox2: true,
-      list: [
-        'a',
-        'b',
-        'c'
-      ],
-      result: ['a', 'b']
-    };
-  }
-};
-</script>
-
 ## Checkbox
 
 ### Install
@@ -29,34 +12,29 @@ Vue.component(CheckboxGroup.name, CheckboxGroup);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
-<van-checkbox v-model="checkbox1">Checkbox 1</van-checkbox>
+<van-checkbox v-model="checked">Checkbox 1</van-checkbox>
 ```
 
 ```javascript
 export default {
   data() {
     return {
-      checkbox1: true
+      checked: true
     };
   }
 };
 ```
-:::
 
 #### Disabled
 
-:::demo Disabled
 ```html
-<van-checkbox v-model="checkbox2" disabled>Checkbox 2</van-checkbox>
+<van-checkbox v-model="checked" disabled>Checkbox 2</van-checkbox>
 ```
-:::
 
 #### Checkbox Group
 When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
 
-:::demo CheckboxGroup
 ```html
 <van-checkbox-group v-model="result">
   <van-checkbox
@@ -76,20 +54,12 @@ export default {
       list: ['a', 'b', 'c'],
       result: ['a', 'b']
     };
-  },
-
-  watch: {
-    result(val) {
-      console.log(val);
-    }
   }
 };
 ```
-:::
 
 #### Inside a Cell
 
-:::demo Inside a Cell
 ```html
 <van-checkbox-group v-model="result">
   <van-cell-group>
@@ -100,18 +70,6 @@ export default {
 </van-checkbox-group>
 ```
 
-```javascript
-export default {
-  data() {
-    return {
-      list: ['a', 'b', 'c'],
-      result: ['a', 'b']
-    };
-  }
-};
-```
-:::
-
 ### Checkbox API
 
 | Attribute | Description | Type | Default | Accepted Values |

docs/markdown/en-US/contact.md

@@ -1,71 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      chosenContactId: null,
-      editingContact: {},
-      showList: false,
-      showEdit: false,
-      isEdit: false,
-      list: [{
-        name: '张三',
-        tel: '13000000000',
-        id: 0
-      }]
-    };
-  },
-
-  computed: {
-    cardType() {
-      return this.chosenContactId !== null ? 'edit' : 'add';
-    },
-
-    currentContact() {
-      const id = this.chosenContactId;
-      return id !== null ? this.list.filter(item => item.id === id)[0] : {};
-    }
-  },
-
-  methods: {
-    onAdd() {
-      this.editingContact = { id: this.list.length };
-      this.isEdit = false;
-      this.showEdit = true;
-    },
-
-    onEdit(item) {
-      this.isEdit = true;      
-      this.showEdit = true;
-      this.editingContact = item;
-    },
-
-    onSelect() {
-      this.showList = false;
-    },
-
-    onSave(info) {
-      this.showEdit = false;
-      this.showList = false;
-      
-      if (this.isEdit) {
-        this.list = this.list.map(item => item.id === info.id ? info : item);
-      } else {
-        this.list.push(info);
-      }
-      this.chosenContactId = info.id;
-    },
-
-    onDelete(info) {
-      this.showEdit = false;
-      this.list = this.list.filter(item => item.id !== info.id);
-      if (this.chosenContactId === info.id) {
-        this.chosenContactId = null;
-      }
-    }
-  }
-};
-</script>
-
 ## Contact
 通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
 
@@ -82,7 +14,7 @@ Vue.component(ContactEdit.name, ContactEdit);
 
 #### Basic Usage
 
-:::demo Basic Usage
+
 ```html
 <!-- 联系人卡片 -->
 <van-contact-card
@@ -90,7 +22,7 @@ Vue.component(ContactEdit.name, ContactEdit);
   :name="currentContact.name"
   :tel="currentContact.tel"
   @click="showList = true"
-></van-contact-card>
+/>
 
 <!-- 联系人列表 -->
 <van-popup v-model="showList" position="bottom">
@@ -106,8 +38,8 @@ Vue.component(ContactEdit.name, ContactEdit);
 <!-- 联系人编辑 -->
 <van-popup v-model="showEdit" position="bottom">
   <van-contact-edit
-    :contact-info="editingContact"
+    :contactInfo="editingContact"
-    :is-edit="isEdit"
+    :isEdit="isEdit"
     @save="onSave"
     @delete="onDelete"
   />
@@ -186,7 +118,7 @@ export default {
   }
 };
 ```
-:::
+
 
 ### ContactCard API
 | Attribute | Description | Type | Default | Accepted Values |

docs/markdown/en-US/coupon.md

@@ -1,63 +1,3 @@
-<script>
-import { Toast } from 'packages';
-
-const coupon = {
-  available: 1,
-  discount: 0,
-  denominations: 150,
-  origin_condition: 0,
-  reason: '',
-  value: 150,
-  condition: '下单立减 1.50 元',
-  name: '新手专用优惠券',
-  start_at: 1489104000,
-  end_at: 1514592000
-};
-
-const discountCoupon = {
-  ...coupon,
-  discount: 88,
-  denominations: 0,
-  origin_condition: 50,
-  value: 12,
-  condition: '下单即享 8.8 折',
-};
-
-const disabledCoupon = {
-  ...coupon,
-  avaliable: 0,
-  reason: '未满足使用门槛'
-};
-
-const disabledDiscountCoupon = {
-  ...discountCoupon,
-  avaliable: 0,
-  reason: '未满足使用门槛'
-};
-
-export default {
-  data() {
-    return {
-      showList: false,
-      chosenCoupon: -1,
-      coupons: [coupon, discountCoupon],
-      disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
-    }
-  },
-
-  methods: {
-    onChange(index) {
-      this.showList = false;      
-      this.chosenCoupon = index;
-    },
-    onExchange(code) {
-      Toast('兑换成功');
-      this.coupons.push(coupon);
-    }
-  }
-}
-</script>
-
 ## Coupon
 
 ### Install
@@ -72,24 +12,23 @@ Vue.component(CouponList.name, CouponList);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <!-- 优惠券单元格 -->
 <van-coupon-cell
   :coupons="coupons"
-  :chosen-coupon="chosenCoupon"
+  :chosenCoupon="chosenCoupon"
   @click="showList = true"
-></van-coupon-cell>
+/>
 
 <!-- 优惠券列表 -->
 <van-popup v-model="showList" position="bottom">
   <van-coupon-list
     :coupons="coupons"
-    :chosen-coupon="chosenCoupon"
+    :chosenCoupon="chosenCoupon"
-    :disabled-coupons="disabledCoupons"
+    :disabledCoupons="disabledCoupons"
     @change="onChange"
     @exchange="onExchange"
-  ></van-coupon-list>
+  />
 </van-popup>
 ```
 
@@ -127,7 +66,6 @@ export default {
   }
 }
 ```
-:::
 
 ### CouponCell API
 

docs/markdown/en-US/datetime-picker.md

@@ -1,21 +1,3 @@
-<script>
-import { Toast } from 'packages/index';
-
-export default {
-  data() {
-    return {
-      minHour: 10,
-      maxHour: 20,
-      minDate: new Date(),
-      maxDate: new Date(2019, 10, 1),
-      currentDate1: new Date(2018, 0, 1),
-      currentDate2: null,
-      currentDate3: null
-    };
-  }
-};
-</script>
-
 ## DatetimePicker
 
 ### Install
@@ -29,15 +11,14 @@ Vue.component(DatetimePicker.name, DatetimePicker);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-datetime-picker
-  v-model="currentDate1"
+  v-model="currentDate"
   type="datetime"
-  :min-hour="minHour"
+  :minHour="minHour"
-  :max-hour="maxHour"
+  :maxHour="maxHour"
-  :min-date="minDate"
+  :minDate="minDate"
-  :max-date="maxDate"
+  :maxDate="maxDate"
 />
 ```
 
@@ -54,25 +35,21 @@ export default {
   }
 };
 ```
-:::
 
 #### Date Picker
 
-:::demo Date Picker
 ```html
 <van-datetime-picker
-  v-model="currentDate2"
+  v-model="currentDate"
   type="date"
   :min-hour="minHour"
   :max-hour="maxHour"
   :min-date="minDate"
 />
 ```
-:::
 
 #### Time Picker
 
-:::demo Time Picker
 ```html
 <van-datetime-picker
   v-model="currentDate3"
@@ -82,8 +59,6 @@ export default {
   :min-date="minDate"
 />
 ```
-:::
-
 
 ### API
 

docs/markdown/en-US/dialog.md

@@ -0,0 +1,63 @@
+## Dialog
+
+### Install
+
+```js
+import { Dialog } from 'vant';
+```
+
+### Usage
+
+#### Alert dialog
+Used to prompt for some messages, only including one confirm button
+
+```javascript
+Dialog.alert({
+  title: 'Title',
+  message: 'Content'
+}).then(() => {
+  // on close
+});
+
+Dialog.alert({
+  message: 'Content'
+}).then(() => {
+  // on close
+});
+```
+
+#### Confirm dialog
+Used to confirm some messages, including a confirm button and a cancel button
+
+```javascript
+ Dialog.confirm({
+  title: 'Title',
+  message: 'Content'
+}).then(() => {
+  // on confirm
+}).catch(() => {
+  // on cancel
+});
+```
+
+### Methods
+
+| Name | Attribute | Return value | Description |
+|-----------|-----------|-----------|-------------|
+| Dialog.alert | options | `Promise` | Show alert dialog |
+| Dialog.confirm | options | `Promise` | Show confim dialog |
+| Dialog.close | - | `void` | Close dialog |
+
+### Options
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| title | Title | `String` | - | - |
+| message | Message | `String` | - | - |
+| showConfirmButton | Whether to show confirm button | `Boolean` |  `true` | - |
+| showCancelButton | Whether to show cancel button | `Boolean` |  `false` | - |
+| confirmButtonText | Confirm button text | `String` |  `Confirm` | - |
+| cancelButtonText | Cancel button test | `String` | `Cancel` | - |
+| overlay | Whether to show overlay | `Boolean` | `true` | - |
+| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` | - |
+| lockOnScroll | Whether to lock body scroll | `Boolean` | `true` | - |

docs/markdown/en-US/field.md

@@ -1,16 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      value: '',
-      password: '',
-      username: '',
-      message: ''
-    };
-  }
-};
-</script>
-
 ## Field
 
 ### Install
@@ -25,18 +12,15 @@ Vue.component(Field.name, Field);
 #### Basic Usage
 The value of filed is bound with v-model.
 
-:::demo Basic Usage
 ```html
 <van-cell-group>
   <van-field v-model="value" placeholder="Username"></van-field>
 </van-cell-group>
 ```
-:::
 
-#### Custom Type
+#### Custom type
 Use `type` prop to custom diffrent type fileds.
 
-:::demo Custom Type
 ```html
 <van-cell-group>
   <van-field
@@ -58,32 +42,26 @@ Use `type` prop to custom diffrent type fileds.
   </van-field>
 </van-cell-group>
 ```
-:::
 
 #### Disabled
 
-:::demo Disabled
 ```html
 <van-cell-group>
   <van-field value="Disabled" label="Username" disabled></van-field>
 </van-cell-group>
 ```
-:::
 
-#### Error Info
+#### Error info
 
-:::demo Error Info
 ```html
 <van-cell-group>
   <van-field label="Username" placeholder="Username" error></van-field>
 </van-cell-group>
 ```
-:::
 
 #### Auto resize
 Textarea Filed can be auto resize when has `autosize` prop
 
-:::demo Auto resize
 ```html
 <van-cell-group>
   <van-field
@@ -97,7 +75,6 @@ Textarea Filed can be auto resize when has `autosize` prop
   </van-field>
 </van-cell-group>
 ```
-:::
 
 ### API
 

docs/markdown/en-US/goods-action.md

@@ -1,18 +1,3 @@
-<script>
-import { Toast } from 'packages';
-
-export default {
-  methods: {
-    onClickMiniBtn() {
-      Toast('点击图标');
-    },
-    onClickBigBtn() {
-      Toast('点击按钮');
-    }
-  }
-}
-</script>
-
 ## GoodsAction
 
 ### Install
@@ -30,7 +15,7 @@ Vue.component(GoodsActionMiniBtn.name, GoodsActionMiniBtn);
 
 ### Usage
 
-:::demo 
+
 ```html
 <van-goods-action>
   <van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
@@ -60,7 +45,6 @@ export default {
   }
 }
 ```
-:::
 
 ### API
 

docs/markdown/en-US/icon.md

@@ -0,0 +1,23 @@
+## Icon
+
+### Install
+``` javascript
+import { Icon } from 'vant';
+
+Vue.component(Icon.name, Icon);
+```
+
+### Usage
+
+#### Basic Usage
+View all usable icons on the right.
+
+```html
+<van-icon name="success" />
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| name | Icon name | `String` | `''` | - |

docs/markdown/en-US/image-preview.md

@@ -0,0 +1,32 @@
+## ImagePreview
+
+### Install
+
+```js
+import { ImagePreview } from 'vant';
+```
+
+### Usage
+
+#### Basic Usage
+
+```javascript
+ImagePreview([
+  'https://img.yzcdn.cn/1.jpg',
+  'https://img.yzcdn.cn/2.jpg'
+]);
+```
+
+#### Custom Start Position
+```javascript
+ImagePreview([
+  'https://img.yzcdn.cn/1.jpg',
+  'https://img.yzcdn.cn/2.jpg'
+], 1);
+```
+
+### Arguments
+
+| Attribute | Description | Type |
+|-----------|-----------|-----------|
+| imageUrls | Image URL list | `Array` |

docs/markdown/en-US/layout.md

@@ -16,7 +16,7 @@ Vue.component(Col.name, Col);
 
 Layout are based on 24-column. The attribute `span` in `Col` means the number of column the grid spans. Of course, You can use `offset` attribute to set number of spacing on the left side of the grid.
 
-:::demo Basic Usage
+
 ```html
 <van-row>
   <van-col span="8">span: 8</van-col>
@@ -34,13 +34,13 @@ Layout are based on 24-column. The attribute `span` in `Col` means the number of
   <van-col offset="12" span="12">offset: 12, span: 12</van-col>
 </van-row>
 ```
-:::
+
 
 #### Column Spacing
 
 Set grid spacing using `gutter` attribute. The default value is 0
 
-:::demo Column Spacing
+
 ```html
 <van-row gutter="20">
   <van-col span="8">span: 8</van-col>
@@ -48,7 +48,7 @@ Set grid spacing using `gutter` attribute. The default value is 0
   <van-col span="8">span: 8</van-col>
 </van-row>
 ```
-:::
+
 
 ### API
 

docs/markdown/en-US/lazyload.md

@@ -42,7 +42,6 @@ Vue.use(Lazyload, options);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <img v-for="img in imageList" v-lazy="img">
 ```
@@ -59,53 +58,22 @@ export default {
   }
 }
 ```
-:::
 
-#### Background Image
+#### Lazyload Background Image
 Use `v-lazy:background-image` to set background url, and declare the height of the container.
 
-:::demo Background Image
 ```html
-<div v-for="img in backgroundImageList" v-lazy:background-image="img" />
+<div v-for="img in imageList" v-lazy:background-image="img" />
 ```
 
-```javascript
-export default {
-  data() {
-    return {
-      backgroundImageList: [
-        'https://img.yzcdn.cn/1.jpg',
-        'https://img.yzcdn.cn/2.jpg'
-      ]
-    };
-  }
-}
-```
-:::
-
 #### Lazyload Component
 
-:::demo Lazyload Component
 ```html
 <lazy-component>
-  <img v-for="img in componentImageList" v-lazy="img">
+  <img v-for="img in imageList" v-lazy="img">
 </lazy-component>
 ```
 
-```javascript
-export default {
-  data() {
-    return {
-      componentImageList: [
-        'https://img.yzcdn.cn/1.jpg',
-        'https://img.yzcdn.cn/2.jpg'
-      ]
-    };
-  }
-}
-```
-:::
-
 ### Options
 
 | Attribute | Description | Type | Default | Accepted Values |

docs/markdown/en-US/loading.md

@@ -11,30 +11,24 @@ Vue.component(Loading.name, Loading);
 
 #### Solid Circle
 
-:::demo Solid Circle
 ```html
-<van-loading type="circle" color="black"></van-loading>
+<van-loading type="circle" color="black" />
-<van-loading type="circle" color="white"></van-loading>
+<van-loading type="circle" color="white" />
 ```
-:::
 
 #### Gradient Circle
 
-:::demo Gradient Circle
 ```html
-<van-loading type="gradient-circle" color="black"></van-loading>
+<van-loading type="gradient-circle" color="black" />
-<van-loading type="gradient-circle" color="white"></van-loading>
+<van-loading type="gradient-circle" color="white" />
 ```
-:::
 
 #### Spinner
 
-:::demo Spinner
 ```html
-<van-loading type="spinner" color="black"></van-loading>
+<van-loading type="spinner" color="black" />
-<van-loading type="spinner" color="white"></van-loading>
+<van-loading type="spinner" color="white" />
 ```
-:::
 
 ### API
 

docs/markdown/en-US/nav-bar.md

@@ -11,35 +11,31 @@ Vue.component(NavBar.name, NavBar);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-nav-bar
   title="Title"
-  left-text="Back"
+  leftText="Back"
-  right-text="Button"
+  rightText="Button"
-  left-arrow
+  leftArrow
 />
 ```
-:::
 
 #### Advanced Usage
 
-:::demo Advanced Usage
 ```html
-<van-nav-bar title="Title" left-text="Back" left-arrow>
+<van-nav-bar title="Title" leftText="Back" leftArrow>
   <van-icon name="search" slot="right" />
 </van-nav-bar>
 ```
-:::
 
 
 ### API
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | title | Title | `String` | `''` | - |
-| left-text | Left Text | `String` | `''` | - |
+| leftText | Left Text | `String` | `''` | - |
-| right-text | Right Text | `String` | `''` | - |
+| rightText | Right Text | `String` | `''` | - |
-| left-arrow | Whether to show left arrow | `Boolean` | `false` | - |
+| leftArrow | Whether to show left arrow | `Boolean` | `false` | - |
 | fixed | Whether to fixed top | `Boolean` | `false` | - |
 
 ### Slot

docs/markdown/en-US/notice-bar.md

@@ -11,28 +11,23 @@ Vue.component(NoticeBar.name, NoticeBar);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-notice-bar
   text="Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily."
-  left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
+  leftIcon="https://img.yzcdn.cn/1.png"
 />
 ```
-:::
 
 #### Disable scroll
 
-:::demo Disable scroll
 ```html
 <van-notice-bar :scrollable="false">
   Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
 </van-notice-bar>
 ```
-:::
 
 #### Mode
 
-:::demo Mode
 ```html
 <van-notice-bar mode="closeable">
   Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
@@ -42,7 +37,6 @@ Vue.component(NoticeBar.name, NoticeBar);
   Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
 </van-notice-bar>
 ```
-:::
 
 ### API
 

docs/markdown/en-US/number-keyboard.md

@@ -1,24 +1,3 @@
-<script>
-import { Toast } from 'packages';
-
-export default {
-  data() {
-    return {
-      showKeyboard: true
-    }
-  },
-
-  methods: {
-    onInput(value) {
-      Toast('Input: ' + value);
-    },
-    onDelete() {
-      Toast('Delete');
-    }
-  }
-}
-</script>
-
 ## NumberKeyboard
 
 ### Install
@@ -32,7 +11,6 @@ Vue.component(NumberKeyboard.name, NumberKeyboard);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-button @touchstart.native.stop="showKeyboard = true">
   Show Keyboard
@@ -68,8 +46,6 @@ export default {
   }
 }
 ```
-:::
-
 
 ### API
 

docs/markdown/en-US/panel.md

@@ -11,27 +11,23 @@ Vue.component(Panel.name, Panel);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-panel title="Title" desc="Description" status="Status">
-  <div>Panel Content</div>
+  <div>Content</div>
 </van-panel>
 ```
-:::
 
 #### Advanced Usage
 
-:::demo Advanced Usage
 ```html
 <van-panel title="Title" desc="Description" status="Status">
-  <div>Panel Content</div>
+  <div>Content</div>
   <div slot="footer">
     <van-button size="small">Button</van-button>
     <van-button size="small" type="danger">Button</van-button>
   </div>
 </van-panel>
 ```
-:::
 
 ### API
 

docs/markdown/en-US/password-input.md

@@ -33,14 +33,13 @@ Vue.component(NumberKeyBoard.name, NumberKeyBoard);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <!-- PasswordInput -->
 <van-password-input
   :value="value"
   info="Some tips"
   @focus="showKeyboard = true"
-></van-password-input>
+/>
 
 <!-- NumberKeyboard -->
 <van-number-keyboard
@@ -48,7 +47,7 @@ Vue.component(NumberKeyBoard.name, NumberKeyBoard);
   @input="onInput"
   @delete="onDelete"
   @blur="showKeyboard = false"
-></van-number-keyboard>
+/>
 ```
 
 ```javascript
@@ -57,7 +56,7 @@ export default {
     return {
       value: '',
       showKeyboard: true
-    }
+    };
   },
 
   methods: {
@@ -70,7 +69,6 @@ export default {
   }
 }
 ```
-:::
 
 ### API
 

docs/markdown/en-US/picker.md

@@ -1,42 +1,3 @@
-<script>
-import { Toast } from 'packages/index';
-
-const states = {
-  'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
-  'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
-};
-
-export default {
-  data() {
-    return {
-      title: 'Title',
-      pickerColumns: [
-        {
-          values: Object.keys(states),
-          className: 'column1'
-        },
-        {
-          values: states.Group1,
-          className: 'column2'
-        }
-      ]
-    };
-  },
-
-  methods: {
-    handlePickerChange(picker, values) {
-      picker.setColumnValues(1, states[values[0]]);
-    },
-    handlePickerCancel() {
-      Toast('Cancel');
-    },
-    handlePickerConfirm() {
-      Toast('Confirm');
-    }
-  }
-};
-</script>
-
 ## Picker
 
 ### Install
@@ -50,9 +11,9 @@ Vue.component(Picker.name, Picker);
 
 #### Basic Usage
 
-:::demo Basic Usage
+
 ```html
-<van-picker :columns="pickerColumns" @change="handlePickerChange"></van-picker>
+<van-picker :columns="pickerColumns" @change="onChange" />
 ```
 
 ```javascript
@@ -78,26 +39,25 @@ export default {
   },
 
   methods: {
-    handlePickerChange(picker, values) {
+    onChange(picker, values) {
       picker.setColumnValues(1, citys[values[0]]);
     }
   }
 };
 ```
-:::
+
 
 #### Picker with toolbar
 
-:::demo Picker with toolbar
 ```html
 <van-picker
-  show-toolbar
+  showToolbar
   :title="title"
   :columns="pickerColumns"
-  @change="handlePickerChange"
+  @change="onChange"
-  @cancel="handlePickerCancel"
+  @cancel="onCancel"
-  @confirm="handlePickerConfirm"
+  @confirm="onConfirm"
-></van-picker>
+/>
 ```
 
 ```javascript
@@ -124,19 +84,18 @@ export default {
   },
 
   methods: {
-    handlePickerChange(picker, values) {
+    onChange(picker, values) {
       picker.setColumnValues(1, citys[values[0]]);
     },
-    handlePickerCancel() {
+    onCancel() {
       Toast('Cancel');
     },
-    handlePickerConfirm() {
+    onConfirm() {
       Toast('Confirm');
     }
   }
 };
 ```
-:::
 
 ### API
 

docs/markdown/en-US/popup.md

@@ -0,0 +1,48 @@
+## Popup
+
+### Install
+``` javascript
+import { Popup } from 'vant';
+
+Vue.component(Popup.name, Popup);
+```
+
+### Usage
+
+#### Basic Usage
+Popup is located in the middle of the screen by default
+
+```html
+<van-popup v-model="show">Content</van-popup>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show: false
+    }
+  }
+};
+```
+
+#### Position
+Use `position` prop to set popup display position
+
+```html
+<van-popup v-model="show" position="top" :overlay="false">
+  Content
+</van-popup>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | Whether to show popup | `Boolean` | `false` | - |
+| overlay | Whether to show overlay | `Boolean` | `true` | - |
+| lockOnScroll | Lock body scroll | `Boolean` | `false` | - |
+| position | Position | `String` | - | `top` `bottom` `right` `left` |
+| closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - |
+| transition | Transition | `String` | `popup-slide` | - |
+| preventScroll | Prevent background scroll | `Boolean` | `false` | - |

docs/markdown/en-US/progress.md

@@ -12,36 +12,30 @@ Vue.component(Progress.name, Progress);
 #### Basic Usage
 Use 'percentage' prop to set current progress
 
-:::demo Basic Usage
 ```html
-<van-progress :percentage="0"></van-progress>
+<van-progress :percentage="0" />
-<van-progress :percentage="46"></van-progress>
+<van-progress :percentage="46" />
-<van-progress :percentage="100"></van-progress>
+<van-progress :percentage="100" />
 ```
-:::
 
 
 #### Inactive
 
-:::demo Inactive
 ```html
-<van-progress inactive :percentage="0"></van-progress>
+<van-progress inactive :percentage="0" />
-<van-progress inactive :percentage="46"></van-progress>
+<van-progress inactive :percentage="46" />
-<van-progress inactive :percentage="100"></van-progress>
+<van-progress inactive :percentage="100" />
 ```
-:::
 
 
 #### Custom Style
-Use `pivot-text` to custom text，use `color` to custom bar color
+Use `pivotText` to custom text，use `color` to custom bar color
 
-:::demo Custom Style
 ```html
-<van-progress pivot-text="Red" color="#ed5050" :percentage="26"></van-progress>
+<van-progress pivotText="Red" color="#ed5050" :percentage="26" />
-<van-progress pivot-text="Orange" color="#f60" :percentage="46"></van-progress>
+<van-progress pivotText="Orange" color="#f60" :percentage="46" />
-<van-progress pivot-text="Yellow" color="#f09000" :percentage="66"></van-progress>
+<van-progress pivotText="Yellow" color="#f09000" :percentage="66" />
 ```
-:::
 
 ### API
 

docs/markdown/en-US/pull-refresh.md

@@ -1,33 +1,3 @@
-<script>
-import { Toast } from 'packages';
-
-export default {
-  data() {
-    return {
-      count: 0,
-      isLoading: false
-    }
-  },
-
-  watch: {
-    isLoading() {
-      if (this.isLoading) {
-        setTimeout(() => {
-          Toast('Refresh Success');
-          this.isLoading = false;
-          this.count++;
-        }, 500);
-      }
-    }
-  },
-
-  mounted() {
-    const head = document.querySelector('.van-pull-refresh__head');
-    head.insertAdjacentHTML('afterend', '<h1 class="zan-doc-demo-block__title">PullRefresh</h1>');
-  }
-}
-</script>
-
 ## PullRefresh
 
 ### Install
@@ -39,7 +9,6 @@ Vue.component(PullRefresh.name, PullRefresh);
 
 ### Usage
 
-:::demo  
 ```html
 <!-- use v-model to control loading status -->
 <van-pull-refresh
@@ -74,7 +43,6 @@ export default {
   }
 }
 ```
-:::
 
 ### API