docs build

docs/examples-dist/badge.vue

@@ -0,0 +1,12 @@
+<template><section class="demo-badge"><h1 class="demo-title">badge</h1><example-block title="基础用法">
+                <zan-badge-group active-key="2">
+  <zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
+  <zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
+  <zan-badge mark="2" title="火炽寿司"></zan-badge>
+  <zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
+</zan-badge-group>
+
+              </example-block></section></template>
+
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>

docs/examples-dist/button.vue

@@ -0,0 +1,81 @@
+<template><section class="demo-button"><h1 class="demo-title">button</h1><example-block title="按钮功能">
+                <zan-row>
+  <zan-col span="24">
+    <zan-button block="">default</zan-button>
+  </zan-col>
+  <zan-col span="24">
+    <zan-button type="primary" block="">primary</zan-button>
+  </zan-col>
+  <zan-col span="24">
+    <zan-button type="danger" block="">danger</zan-button>
+  </zan-col>
+</zan-row>
+
+              </example-block><example-block title="禁用状态">
+                <zan-row>
+  <zan-col span="24">
+    <zan-button disabled block="">diabled</zan-button>
+  </zan-col>
+</zan-row>
+
+              </example-block><example-block title="按钮尺寸">
+                <zan-row>
+  <zan-col span="24">
+    <zan-button size="large">large</zan-button>
+  </zan-col>
+</zan-row>
+<zan-row gutter="10">
+  <zan-col span="8">
+    <zan-button type="primary" block="">normal</zan-button>
+  </zan-col>
+  <zan-col span="8">
+    <zan-button size="small" block="">small</zan-button>
+  </zan-col>
+  <zan-col span="8">
+    <zan-button size="mini" block="">mini</zan-button>
+  </zan-col>
+</zan-row>
+
+              </example-block><example-block title="自定义按钮标签">
+                <zan-row>
+  <zan-col span="24">
+    <zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
+  </zan-col>
+</zan-row>
+
+              </example-block><example-block title="loading按钮">
+                <zan-row>
+  <zan-col span="24">
+    <zan-button type="primary" loading="" block="">loading</zan-button>
+  </zan-col>
+  <zan-col span="24">
+    <zan-button loading="" block=""></zan-button>
+  </zan-col>
+</zan-row>
+
+              </example-block><example-block title="button group">
+                <div class="button-group">
+  <zan-button type="primary" size="small">确认付款</zan-button>
+  <zan-button size="small">确认收货</zan-button>
+  <zan-button size="small">取消订单</zan-button>
+</div>
+
+              </example-block></section></template>
+<style>
+@component-namespace demo {
+  @b button {
+    .zan-row {
+      padding: 0 20px;
+    }
+    .zan-col {
+      margin-bottom: 10px;
+    }
+    .button-group {
+      font-size: 0;
+      padding: 0 20px;
+    }
+  }
+}
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>

docs/examples-dist/card.vue

@@ -0,0 +1,24 @@
+<template><section class="demo-card"><h1 class="demo-title">card</h1><example-block title="基础用法">
+                <zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="描述" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+</zan-card>
+
+              </example-block><example-block title="高级用法">
+                <zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+  <div class="zan-card__row" slot="title">
+    <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+    <span class="zan-card__price">¥ 2.00</span>
+  </div>
+  <div class="zan-card__row" slot="desc">
+    <h4 class="zan-card__desc">商品sku</h4>
+    <span class="zan-card__num">x 2</span>
+  </div>
+  <div class="zan-card__footer" slot="footer">
+    <zan-button size="mini">按钮一</zan-button>
+    <zan-button size="mini">按钮二</zan-button>
+  </div>
+</zan-card>
+
+              </example-block></section></template>
+
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>

docs/examples-dist/cell.vue

@@ -0,0 +1,53 @@
+<template><section class="demo-cell"><h1 class="demo-title">cell</h1><example-block title="基础用法">
+                <zan-cell-group>
+  <zan-cell title="单元格1" value="单元格1内容"></zan-cell>
+  <zan-cell title="单元格2" value="单元格2内容"></zan-cell>
+</zan-cell-group>
+
+              </example-block><example-block title="标题带描述信息">
+                <zan-cell-group>
+  <zan-cell title="单元格1" label="描述信息" is-link="" url="javascript:void(0)" @click="handleClick"></zan-cell>
+  <zan-cell title="单元格2" label="描述信息"></zan-cell>
+</zan-cell-group>
+
+              </example-block><example-block title="带图标">
+                <zan-cell-group>
+  <zan-cell title="起码运动馆" icon="home"></zan-cell>
+  <zan-cell title="线下门店" icon="location"></zan-cell>
+</zan-cell-group>
+
+              </example-block><example-block title="可点击的链接">
+                <zan-cell-group>
+  <zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link=""></zan-cell>
+  <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
+</zan-cell-group>
+
+              </example-block><example-block title="高级用法">
+                <zan-cell-group>
+  <zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link="">
+    <template slot="title">
+      <span class="zan-cell-text">起码运动馆</span>
+      <img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
+    </template>
+  </zan-cell>
+  <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
+</zan-cell-group>
+
+              </example-block></section></template>
+<style>
+.official-img {
+  width: 31px;
+  vertical-align: middle;
+  border: 0;
+}
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+export default {
+  methods: {
+    handleClick() {
+      console.log('cell click');
+    }
+  }
+};
+</script>

docs/examples-dist/checkbox.vue

@@ -0,0 +1,80 @@
+<template><section class="demo-checkbox"><h1 class="demo-title">checkbox</h1><example-block title="基础用法">
+                <div class="zan-checkbox-wrapper">
+  <zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
+</div>
+
+
+
+              </example-block><example-block title="禁用状态">
+                <div class="zan-checkbox-wrapper">
+  <zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
+</div>
+
+
+
+              </example-block><example-block title="Checkbox组">
+                <div class="zan-checkbox-wrapper">
+  <zan-checkbox-group v-model="result">
+    <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+  </zan-checkbox-group>
+</div>
+
+
+
+              </example-block><example-block title="禁用Checkbox组">
+                <div class="zan-checkbox-wrapper">
+  <zan-checkbox-group v-model="result" disabled>
+    <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+  </zan-checkbox-group>
+</div>
+
+
+
+              </example-block><example-block title="与Cell组件一起使用">
+                <zan-checkbox-group v-model="result">
+  <zan-cell-group>
+    <zan-cell v-for="item in list">
+      <zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
+    </zan-cell>
+  </zan-cell-group>
+</zan-checkbox-group>
+
+
+
+              </example-block></section></template>
+<style>
+@component-namespace demo {
+  @b checkbox {
+    .zan-checkbox-wrapper {
+      padding: 0 20px;
+
+      .zan-checkbox {
+        margin: 10px 0;
+      }
+    }
+  }
+}
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+export default {
+  data() {
+    return {
+      checkbox1: true,
+      checkbox2: true,
+      list: [
+        'a',
+        'b',
+        'c'
+      ],
+      result: ['a', 'b']
+    };
+  },
+
+  watch: {
+    result(val) {
+      console.log(val);
+    }
+  }
+};
+</script>

docs/examples-dist/dialog.vue

@@ -0,0 +1,37 @@
+<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="基础用法">
+                <zan-button @click="handleAlertClick">alert</zan-button>
+
+<zan-button @click="handleConfirmClick">confirm</zan-button>
+
+
+
+              </example-block></section></template>
+
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import { Dialog } from 'src/index';
+
+export default {
+  methods: {
+    handleAlertClick() {
+      Dialog.alert({
+        title: 'alert标题',
+        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
+      }).then((action) => {
+        console.log(action);
+      });
+    },
+
+    handleConfirmClick() {
+      Dialog.confirm({
+        title: 'confirm标题',
+        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
+      }).then((action) => {
+        console.log(action);
+      }, (error) => {
+        console.log(error);
+      });
+    }
+  }
+};
+</script>

docs/examples-dist/field.vue

@@ -0,0 +1,21 @@
+<template><section class="demo-field"><h1 class="demo-title">field</h1><example-block title="基础用法">
+                <zan-cell-group>
+  <zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
+  <zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
+  <zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
+</zan-cell-group>
+
+              </example-block><example-block title="无label的输入框">
+                <zan-cell-group>
+  <zan-field type="text" placeholder="请输入用户名"></zan-field>
+</zan-cell-group>
+
+              </example-block><example-block title="监听change事件">
+                <zan-cell-group>
+  <zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
+</zan-cell-group>
+
+              </example-block></section></template>
+
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>

docs/examples-dist/image-preview.vue

@@ -0,0 +1,4 @@
+<template><section class="demo-image-preview"><h1 class="demo-title">image-preview</h1></section></template>
+
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>

docs/examples-dist/loading.vue

@@ -0,0 +1,41 @@
+<template><section class="demo-loading"><h1 class="demo-title">loading</h1><example-block title="基础用法">
+                <div class="demo-loading">
+  <h2 class="demo-sub-title">渐变深色spinner</h2>
+  <div class="demo-loading__example">
+    <zan-loading class="some-customized-class"></zan-loading>
+  </div>
+  <h2 class="demo-sub-title">渐变浅色spinner</h2>
+  <div class="demo-loading__example demo-loading__example--with-bg">
+    <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
+  </div>
+  <h2 class="demo-sub-title">单色spinner</h2>
+  <div class="demo-loading__example">
+    <zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
+  </div>
+  <h2 class="demo-sub-title">单色spinner</h2>
+  <div class="demo-loading__example">
+    <zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
+  </div>
+</div>
+
+              </example-block></section></template>
+<style>
+.demo-loading__example{
+  width: 30px;
+  height: 30px;
+  padding: 20px;
+  margin: auto;
+  border-radius: 5px;
+  border: 1px solid transparent;
+}
+
+.demo-loading__example--with-bg {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.demo-loading {
+  padding: 0 20px;
+}
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>

docs/examples-dist/panel.vue

@@ -0,0 +1,65 @@
+<template><section class="demo-panel"><h1 class="demo-title">panel</h1><example-block title="基础用法">
+                <zan-panel title="标题" desc="标题描述" status="状态">
+  <div class="panel-content">
+    panel内容
+  </div>
+</zan-panel>
+
+              </example-block><example-block title="高级用法">
+                <zan-panel title="标题" desc="标题描述" status="状态">
+  <zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+    <div class="zan-card__row" slot="title">
+      <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+      <span class="zan-card__price">¥ 2.00</span>
+    </div>
+    <div class="zan-card__row" slot="desc">
+      <h4 class="zan-card__desc">商品sku</h4>
+      <span class="zan-card__num">x 2</span>
+    </div>
+    <div class="zan-card__footer" slot="footer">
+      <zan-button size="mini">按钮一</zan-button>
+      <zan-button size="mini">按钮二</zan-button>
+    </div>
+  </zan-card>
+  <div class="zan-panel-sum">
+    合计：<span>¥ 1999.90</span>
+  </div>
+  <div class="zan-panel-buttons" slot="footer">
+    <zan-button size="small">按钮一</zan-button>
+    <zan-button size="small" type="danger">按钮二</zan-button>
+  </div>
+</zan-panel>
+
+              </example-block></section></template>
+<style>
+@component-namespace demo {
+  @b panel {
+    .zan-panel-sum {
+      background: #fff;
+      text-align: right;
+      font-size: 14px;
+      color: #333;
+      line-height: 30px;
+      padding-right: 15px;
+
+      span {
+        color: red;
+      }
+    }
+
+    .zan-panel-buttons {
+      text-align: right;
+
+      .zan-button {
+        margin-left: 5px;
+      }
+    }
+
+    .panel-content {
+      padding: 20px;
+    }
+  }
+}
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>

docs/examples-dist/picker.vue

@@ -0,0 +1,36 @@
+<template><section class="demo-picker"><h1 class="demo-title">picker</h1><example-block title="基础用法">
+                <zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
+
+              </example-block></section></template>
+
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+const citys = {
+  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
+  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
+};
+
+export default {
+  data() {
+    return {
+      pickerColumns: [
+        {
+          values: Object.keys(citys),
+          className: 'column1'
+        },
+        {
+          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+          className: 'column2'
+        }
+      ]
+    };
+  },
+
+  methods: {
+    handlePickerChange(picker, values) {
+      picker.setColumnValues(1, citys[values[0]]);
+    }
+  }
+};
+</script>

docs/examples-dist/popup.vue

@@ -0,0 +1,35 @@
+<template><section class="demo-popup"><h1 class="demo-title">popup</h1><example-block title="基础用法">
+                <div class="zan-button-1">
+  <zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
+</div>
+<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
+  xxxx
+</zan-popup>
+
+<div class="zan-button-1">
+  <zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
+</div>
+<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
+  更新成功
+</zan-popup>
+
+<div class="zan-button-1">
+  <zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
+</div>
+<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
+  <zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
+</zan-popup>
+
+<div class="zan-button-1">
+  <zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
+</div>
+<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
+  一些内容
+</zan-popup>
+
+
+
+              </example-block></section></template>
+
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>

docs/examples-dist/radio.vue

@@ -0,0 +1,63 @@
+<template><section class="demo-radio"><h1 class="demo-title">radio</h1><example-block title="基础用法">
+                <div class="zan-radios">
+  <zan-radio name="1" v-model="radio1">单选框1</zan-radio>
+  <zan-radio name="2" v-model="radio1">单选框2</zan-radio>
+</div>
+
+
+
+              </example-block><example-block title="禁用状态">
+                <div class="zan-radios">
+  <zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
+  <zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
+</div>
+
+
+
+              </example-block><example-block title="radio组">
+                <div class="zan-radios">
+  <zan-radio-group v-model="radio3">
+    <zan-radio name="1">单选框1</zan-radio>
+    <zan-radio name="2">单选框2</zan-radio>
+  </zan-radio-group>
+</div>
+  
+
+
+              </example-block><example-block title="与Cell组件一起使用">
+                <zan-radio-group v-model="radio4">
+  <zan-cell-group>
+    <zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
+    <zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
+  </zan-cell-group>
+</zan-radio-group>
+
+
+
+              </example-block></section></template>
+<style>
+@component-namespace demo {
+  @b radio {
+    .zan-radios {
+      padding: 0 20px;
+
+      .zan-radio {
+        margin: 10px 0;
+      }
+    }
+  }
+}
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+export default {
+  data() {
+    return {
+      radio1: '1',
+      radio2: '2',
+      radio3: '1',
+      radio4: '1'
+    };
+  }
+};
+</script>

docs/examples-dist/search.vue

@@ -0,0 +1,16 @@
+<template><section class="demo-search"><h1 class="demo-title">search</h1><example-block title="基础用法">
+                <zan-search placeholder="商品名称" @search="goSearch"></zan-search>
+
+
+              </example-block></section></template>
+
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+export default {
+  methods: {
+    goSearch(value) {
+      alert(value)
+    }
+  }
+};
+</script>

docs/examples-dist/steps.vue

@@ -0,0 +1,50 @@
+<template><section class="demo-steps"><h1 class="demo-title">steps</h1><example-block title="基础用法">
+                <zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
+  <zan-step>买家下单</zan-step>
+  <zan-step>商家接单</zan-step>
+  <zan-step>买家提货</zan-step>
+  <zan-step>交易完成</zan-step>
+</zan-steps>
+
+<zan-button @click="nextStep">下一步</zan-button>
+
+
+
+              </example-block><example-block title="只显示步骤条">
+                <zan-steps :active="active">
+  <zan-step>买家下单</zan-step>
+  <zan-step>商家接单</zan-step>
+  <zan-step>买家提货</zan-step>
+  <zan-step>交易完成</zan-step>
+</zan-steps>
+
+              </example-block></section></template>
+<style>
+@component-namespace demo {
+  @b steps {
+    .steps-success {
+      color: #06bf04;
+    }
+
+    .zan-button {
+      margin-left: 15px;
+    }
+  }
+}
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+export default {
+  data() {
+    return {
+      active: 0
+    };
+  },
+
+  methods: {
+    nextStep() {
+      if (++this.active > 3) this.active = 0;
+    }
+  }
+}
+</script>

docs/examples-dist/switch.vue

@@ -0,0 +1,44 @@
+<template><section class="demo-switch"><h1 class="demo-title">switch</h1><example-block title="基础用法">
+                <div class="demo-switch__wrapper">
+  <zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
+  <div class="demo-switch__text">{{switchStateText}}</div>
+</div>
+<div class="demo-switch__wrapper">
+  <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
+  <div class="demo-switch__text">ON, DISABLED</div>
+</div>
+<div class="demo-switch__wrapper">
+  <zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
+  <div class="demo-switch__text">OFF, DISABLED</div>
+</div>
+<div class="demo-switch__wrapper">
+  <zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
+  <div class="demo-switch__text">ON, LOADING</div>
+</div>
+<div class="demo-switch__wrapper">
+  <zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
+  <div class="demo-switch__text">OFF, LOADING</div>
+</div>
+
+
+
+              </example-block></section></template>
+<style>
+  @component-namespace demo {
+    @b switch {
+      padding: 0 15px 15px;
+
+      @e wrapper {
+        width: 33.33%;
+        float: left;
+        text-align: center;
+      }
+
+      @e text {
+        margin: 20px 0;
+      }
+    }
+  }
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>

docs/examples-dist/tag.vue

@@ -0,0 +1,40 @@
+<template><section class="demo-tag"><h1 class="demo-title">tag</h1><example-block title="基础用法">
+                <div class="tags-container">
+  <zan-tag>返现</zan-tag>
+  <zan-tag :plain="true">返现</zan-tag>
+</div>
+<div class="tags-container">
+  <zan-tag type="danger">返现</zan-tag>
+  <zan-tag type="danger">四字标签</zan-tag>
+  <zan-tag type="danger">一</zan-tag>
+</div>
+
+              </example-block><example-block title="高级用法">
+                <div class="tags-container">
+  <zan-tag type="danger">返现</zan-tag>
+  <zan-tag :plain="true" type="danger">返现</zan-tag>
+</div>
+<div class="tags-container">
+  <zan-tag type="primary">返现</zan-tag>
+  <zan-tag :plain="true" type="primary">返现</zan-tag>
+</div>
+<div class="tags-container">
+  <zan-tag type="success">返现</zan-tag>
+  <zan-tag :plain="true" type="success">返现</zan-tag>
+</div>
+<div class="tags-container">
+  <zan-tag type="danger" :mark="true">返现</zan-tag>
+</div>
+
+              </example-block></section></template>
+<style>
+.tags-container {
+  padding: 5px 15px;
+
+  .zan-tag + .zan-tag {
+    margin-left: 10px;
+  }
+}
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>

docs/examples-dist/waterfall.vue

@@ -0,0 +1,18 @@
+<template><section class="demo-waterfall"><h1 class="demo-title">waterfall</h1><example-block title="基础用法">
+                <div class="waterfall">
+  <div v-waterfall-lower="loadMore" v-waterfall-upper="loadMoreUpper" waterfall-disabled="isWaterfallDisabled" waterfall-offset="400">
+    <div class="waterfall-item" v-for="item in list" style="text-align: center;">
+      {{ item }}
+    </div>
+    <div v-if="loading" style="text-align: center;">
+      loading
+    </div>
+  </div>
+</div>
+
+
+
+              </example-block></section></template>
+
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>