diff --git a/docs/examples-docs/sku.md b/docs/examples-docs/sku.md
new file mode 100644
index 000000000..c9a850566
--- /dev/null
+++ b/docs/examples-docs/sku.md
@@ -0,0 +1,204 @@
+## Sku 商品购买组件
+
+<script>
+import data from '../mock/sku';
+
+const goods = data.goods_info;
+goods.picture = goods.picture[0];
+
+export default {
+  data() {
+    return {
+      showBase: false,
+      showCustomAction: false,
+      sku: data.sku,
+      goods: goods,
+      quota: data.quota,
+      quotaUsed: data.quota_used,
+    }
+  },
+
+  methods: {
+    handleBuyClicked(data) {
+      alert(JSON.stringify(data));
+    },
+    handleAddCartClicked(data) {
+      alert(JSON.stringify(data));
+    },
+    handlePointClicked() {
+      alert('积分兑换');
+    }
+  }
+}
+</script>
+
+<style>
+  .sku-container {
+    padding: 0 15px;
+  }
+</style>
+
+### 使用指南
+```javascript
+import { Sku } from 'vant';
+
+Vue.component(Sku.name, Sku);
+```
+
+### 代码演示
+#### 基础用法
+:::demo 
+```html
+<template>
+  <div class="sku-container">
+    <van-sku
+      v-model="showBase"
+      :sku="sku"
+      :goods="goods"
+      :goods-id="goodsId"
+      :hide-stock="sku.hide_stock"
+      :show-add-cart-btn="true"
+      :quota="quota"
+      :quota-used="quotaUsed"
+      :reset-quantity-on-hide="true"
+      @buy-clicked="handleBuyClicked"
+      @add-cart="handleAddCartClicked"
+    >
+    </van-sku>
+    <van-button type="primary" @click="showBase = true" block>基础用法</van-button>
+  </d>
+</template>
+```
+:::
+
+#### 自定义部分sku子组件
+:::demo 
+```html
+<template>
+  <div class="sku-container">
+    <van-sku
+      v-model="showCustomAction"
+      :sku="sku"
+      :goods="goods"
+      :goods-id="goodsId"
+      :hide-stock="sku.hide_stock"
+      :show-add-cart-btn="true"
+      :quota="quota"
+      :quota-used="quotaUsed"
+      :reset-quantity-on-hide="true"
+      @buy-clicked="handleBuyClicked"
+      @add-cart="handleAddCartClicked"
+    >
+      <!-- 隐藏sku messages -->
+      <template slot="sku-messages"></template>
+      <!-- 自定义sku actions -->
+      <template slot="sku-actions" 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>
+  </d>
+</template>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 必须      |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 是否显示sku | Boolean  | false |    是      |
+| sku | 商品sku数据 | Object  | - |    是      |
+| goods | 商品信息 | Object  | - |  是 |
+| goodsId | 商品id | String  | - |  是 |
+| hideStock | 是否显示商品剩余库存 | Boolean  | false | 否  |
+| showAddCartBtn | 是否显示加入购物车按钮 | Boolean  | true |  否 |
+| quota | 限购数(0表示不限购) | Number  | 0 |  否 |
+| quotaUsed | 已经购买过的数量 | Number  | 0 |  否 |
+| add-cart | 点击添加购物车回调 | Function(skuData: Object)  | - |  否 |
+| buy-clicked | 点击购买回调 | Function(skuData: Object)  | - |  否 |
+
+### 数据结构
+#### sku对象结构
+```javascript
+"sku": {
+    // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
+    // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
+    "tree": [{ 
+        "k": "颜色", // skuKeyName：规格类目名称 
+        "v": [{
+            "id": "30349", // skuValueId：规格值id 
+            "name": "红色", // skuValueName：规格值名称 
+            "imgUrl": "upload_files\/2017\/02\/21\/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg" // 规格类目图片，暂时只能第一个规格类目可以定义图片
+        }, {
+            "id": "1215",
+            "name": "蓝色",
+            "imgUrl": "upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg"
+        }],
+        "k_s": "s1" // skuKeyStr：sku组合列表（下方list）中当前类目对应的key值，value值会是从属于当前类目的一个规格值id 
+    }, ...],
+    // 所有sku的组合列表，比如红色、M码为一个sku组合，红色、S码为另一个组合
+    "list": [{
+        "id": 2259, // skuId，下单时后端需要
+        "price": 100, // 价格（单位分）
+        "s1": "1215", // 规格类目k_s为s1的对应规格值id
+        "s2": "1193",  // 规格类目k_s为s2的对应规格值id
+        "s3": "0", // 最多包含3个规格值，为0表示不存在该规格
+        "stock_num": 110 // 当前sku组合对应的库存
+    }, ...],
+    "price": "1.00", // 默认价格（单位元）后端单位暂时有点不统一
+    "stock_num": 227, // 商品总库存
+    "collection_id": 2261, // 无规格商品skuId取collection_id，否则取所选sku组合对应的id
+    "none_sku": false, // 是否无规格商品
+    "messages": [{ // 商品留言
+        "datetime": "0", // 留言类型为time时，是否含日期。“1”表示包含
+        "multiple": "0", // 留言类型为text时，是否多行文本。“1”表示多行
+        "name": "留言", // 留言名称
+        "type": "text", // 留言类型，可选id_no（身份证）, text, tel, date, time, email
+        "required": "1" // 是否必填 “1”表示必填
+    }, ...],
+    "hide_stock": false // 是否隐藏剩余库存
+},
+```
+
+#### goods对象结构
+```javascript
+"goods": {
+    // 商品标题
+    "title": "测试商品", 
+    // 默认商品sku缩略图
+    "picture": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"
+},
+```
+
+#### 添加购物车和点击购买回调函数接收的skuData对象结构
+```javascript
+skuData: {
+  // 商品id
+  goodsId:"946755",
+  // 留言信息
+  messages: {
+    message_0:"12",
+    message_1:"",
+    ... // 有几个留言就有几条
+  },
+  // 选择的商品数量
+  selectedNum:1,
+  // 选择的sku组合
+  selectedSkuComb: {
+    id:2257,
+    price:100,
+    s1:"30349",
+    s2:"1193",
+    s3:"0",
+    stock_num:111
+  }
+}
+```
diff --git a/docs/mock/sku.js b/docs/mock/sku.js
new file mode 100644
index 000000000..2b20595ee
--- /dev/null
+++ b/docs/mock/sku.js
@@ -0,0 +1,266 @@
+/* eslint-disable */
+var _global = {
+    "kdt_id": 55,
+    "user_id": 4674509,
+    "offline_id": 0,
+    "activity_alias": "",
+    "sku": {
+        "tree": [{
+            "k": "\u989c\u8272",
+            "k_id": "1",
+            "v": [{
+                "id": "30349",
+                "name": "\u5929\u84dd\u8272",
+                "imgUrl": "upload_files\/2017\/02\/21\/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg"
+            }],
+            "k_s": "s1",
+            "count": 2
+        }, {
+            "k": "\u5c3a\u5bf8",
+            "k_id": "2",
+            "v": [{
+                "id": "1193",
+                "name": "1"
+            }, {
+                "id": "1194",
+                "name": "2"
+            }],
+            "k_s": "s2",
+            "count": 2
+        }],
+        "list": [{
+            "id": 2259,
+            "price": 100,
+            "discount": 100,
+            "code": "",
+            "s1": "1215",
+            "s2": "1193",
+            "s3": "0",
+            "s4": "0",
+            "s5": "0",
+            "extend": null,
+            "kdt_id": 55,
+            "discount_price": 0,
+            "stock_num": 110,
+            "stock_mode": 0,
+            "is_sell": null,
+            "combin_sku": false,
+            "goods_id": 946755
+        }, {
+            "id": 2260,
+            "price": 100,
+            "discount": 100,
+            "code": "",
+            "s1": "1215",
+            "s2": "1194",
+            "s3": "0",
+            "s4": "0",
+            "s5": "0",
+            "extend": null,
+            "kdt_id": 55,
+            "discount_price": 0,
+            "stock_num": 0,
+            "stock_mode": 0,
+            "is_sell": null,
+            "combin_sku": false,
+            "goods_id": 946755
+        }, {
+            "id": 2257,
+            "price": 100,
+            "discount": 100,
+            "code": "",
+            "s1": "30349",
+            "s2": "1193",
+            "s3": "0",
+            "s4": "0",
+            "s5": "0",
+            "extend": null,
+            "kdt_id": 55,
+            "discount_price": 0,
+            "stock_num": 111,
+            "stock_mode": 0,
+            "is_sell": null,
+            "combin_sku": false,
+            "goods_id": 946755
+        }, {
+            "id": 2258,
+            "price": 100,
+            "discount": 100,
+            "code": "",
+            "s1": "30349",
+            "s2": "1194",
+            "s3": "0",
+            "s4": "0",
+            "s5": "0",
+            "extend": null,
+            "kdt_id": 55,
+            "discount_price": 0,
+            "stock_num": 6,
+            "stock_mode": 0,
+            "is_sell": null,
+            "combin_sku": false,
+            "goods_id": 946755
+        }],
+        "price": "1.00",
+        "stock_num": 227,
+        "collection_id": 2261,
+        "collection_price": 0,
+        "none_sku": false,
+        "sold_num": 0,
+        "min_price": "1.00",
+        "max_price": "1.00",
+        "messages": [{
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "multiple": "0",
+            "name": "\u7559\u8a001",
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "text",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": "1"
+        }, {
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "multiple": 0,
+            "name": "\u7559\u8a002",
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "id_no",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": 0
+        }, {
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "multiple": 0,
+            "name": "\u7559\u8a003",
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "image",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": 0
+        }, {
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "multiple": 1,
+            "name": "\u7559\u8a004",
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "text",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": 0
+        }, {
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "name": "\u6570\u5b57",
+            "multiple": 0,
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "tel",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": 0
+        }, {
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "name": "\u90ae\u4ef6",
+            "multiple": 0,
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "email",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": 0
+        }, {
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "name": "\u65e5\u671f",
+            "multiple": 0,
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "date",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": 0
+        }, {
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "name": "\u65f6\u95f4\u542b\u65e5\u671f",
+            "multiple": 0,
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "time",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": 0
+        }, {
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "name": "\u65f6\u95f4",
+            "multiple": 0,
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "time",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": 0
+        }],
+        "hide_stock": false
+    },
+    "goods_id": "946755",
+    "alias": "2oml0r0n5vytj",
+    "quota": 15,
+    "is_virtual": "0",
+    "quota_used": 0,
+    "goods_info": {
+        "title": "\u725b\u5976\u6d4b\u8bd5",
+        "picture": ["https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"],
+        "price": 1,
+        "origin": ""
+    },
+    "url": {
+        "base": "https:\/\/www.youzan.com",
+        "bbs": "http:\/\/bbs.youzan.com",
+        "cdn": "https:\/\/b.yzcdn.cn\/",
+        "cdn_static": "https:\/\/b.yzcdn.cn\/v2",
+        "daxue": "http:\/\/xuetang.youzan.com",
+        "fenxiao": "\/\/fx.youzan.com",
+        "fuwu": "http:\/\/fuwu.youzan.com",
+        "img": "http:\/\/img.youzan.com",
+        "imgqn": "https:\/\/img.yzcdn.cn",
+        "login": "http:\/\/login.youzan.com",
+        "open": "\/\/open.youzan.com",
+        "static": "\/\/static.youzan.com\/v2",
+        "trade": "https:\/\/trade.koudaitong.com",
+        "v1": "https:\/\/www.youzan.com\/v1",
+        "v1_static": "https:\/\/b.yzcdn.cn\/v1",
+        "v2": "https:\/\/www.youzan.com\/v2",
+        "wap": "https:\/\/h5.youzan.com\/v2",
+        "ws": "ws:\/\/im.youzan.com:8080",
+        "www": "\/\/www.youzan.com\/v2",
+        "youzan": "http:\/\/www.youzan.com",
+        "cloud": "https:\/\/dl.yzcdn.cn",
+        "pf": "http:\/\/pifa.youzan.com",
+        "uic": "\/\/uic.youzan.com",
+        "store": "\/\/store.youzan.com",
+        "market": "http:\/\/pfmarket.youzan.com",
+        "im": "http:\/\/b-im.youzan.com",
+        "help": "\/\/help.youzan.com",
+        "materials": "\/\/materials.youzan.com"
+    }
+};
+
+export default _global;
diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index b51fa8856..879ea5e42 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -201,6 +201,10 @@ module.exports = {
                 "path": "/goods-action",
                 "title": "GoodsAction 商品操作"
               },
+              {
+                "path": "/sku",
+                "title": "Sku 商品规格弹层"
+              },
               {
                 "path": "/invalid-goods",
                 "title": "InvalidGoods 不可用商品列表"
diff --git a/package.json b/package.json
index 06ba811fb..50a5ebe76 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,8 @@
   "license": "ISC",
   "dependencies": {
     "babel-runtime": "6.x",
-    "vue-lazyload": "^1.1.3"
+    "vue-lazyload": "^1.1.3",
+    "zan-utils": "^1.0.14"
   },
   "peerDependencies": {
     "vue": "2.4.2"
diff --git a/packages/index.js b/packages/index.js
index 16e1e8c5d..b388a89c2 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -38,6 +38,7 @@ import Radio from './radio';
 import RadioGroup from './radio-group';
 import Row from './row';
 import Search from './search';
+import Sku from './sku';
 import Step from './step';
 import Steps from './steps';
 import Swipe from './swipe';
@@ -90,6 +91,7 @@ const components = [
   RadioGroup,
   Row,
   Search,
+  Sku,
   Step,
   Steps,
   Swipe,
@@ -158,6 +160,7 @@ export {
   RadioGroup,
   Row,
   Search,
+  Sku,
   Step,
   Steps,
   Swipe,
diff --git a/packages/sku/components/SkuActions.vue b/packages/sku/components/SkuActions.vue
new file mode 100644
index 000000000..70a97ef8c
--- /dev/null
+++ b/packages/sku/components/SkuActions.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="van-sku-actions">
+    <button v-if="showAddCartBtn" class="van-sku__add-cart-btn" @click="onAddCartClicked">
+      加入购物车
+    </button>
+    <button class="van-sku__buy-btn" @click="onBuyClicked">
+      {{ buyText }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-sku-actions',
+
+  props: {
+    skuEventBus: Object,
+    showAddCartBtn: Boolean,
+    buyText: {
+      type: String,
+      default: '立即购买'
+    }
+  },
+
+  methods: {
+    onAddCartClicked() {
+      this.skuEventBus.$emit('sku:addCart');
+    },
+    onBuyClicked() {
+      this.skuEventBus.$emit('sku:buy');
+    }
+  }
+};
+</script>
diff --git a/packages/sku/components/SkuHeader.vue b/packages/sku/components/SkuHeader.vue
new file mode 100644
index 000000000..86364b782
--- /dev/null
+++ b/packages/sku/components/SkuHeader.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="van-sku-header">
+    <div class="van-sku-header__img-wrap">
+      <img class="van-sku__goods-img" :src="goodsImg">
+    </div>
+    <div class="van-sku-header__goods-info">
+      <div class="van-sku__goods-name">{{ goods.title }}</div>
+      <div class="van-sku__goods-price"><span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ price }}</span></div>
+      <span class="van-sku__close-icon" @click="onCloseClicked"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+import find from 'lodash/find';
+import urlHelper from 'zan-utils/url/helper';
+
+export default {
+  name: 'van-sku-header',
+
+  props: {
+    skuEventBus: Object,
+    sku: Object,
+    selectedSku: Object,
+    selectedSkuComb: Object,
+    goods: Object
+  },
+
+  computed: {
+    skuTree() {
+      return this.sku.tree;
+    },
+    goodsImg() {
+      const s1Id = this.selectedSku.s1;
+      const skuImg = this.getSkuImg(s1Id);
+
+      return skuImg || this.goods.picture;
+    },
+    price() {
+      if (this.selectedSkuComb) {
+        return (this.selectedSkuComb.price / 100).toFixed(2);
+      }
+      // sku.price是一个格式化好的价格区间
+      return this.sku.price;
+    }
+  },
+
+  methods: {
+    onCloseClicked() {
+      this.skuEventBus.$emit('sku:close');
+    },
+    getSkuImg(id) {
+      if (!id) return;
+
+      // 目前skuImg都挂载在skuTree中s1那类sku上
+      const treeItem = find(this.skuTree, (treeItem) => treeItem.k_s === 's1') || {};
+      const matchedSku = find(treeItem.v, (skuValue) => skuValue.id === id);
+
+      if (matchedSku && matchedSku.imgUrl) {
+        return urlHelper.getCdnImageUrl(matchedSku.imgUrl);
+      }
+    }
+  }
+};
+</script>
diff --git a/packages/sku/components/SkuMessages.vue b/packages/sku/components/SkuMessages.vue
new file mode 100644
index 000000000..d7f62f296
--- /dev/null
+++ b/packages/sku/components/SkuMessages.vue
@@ -0,0 +1,156 @@
+<template>
+  <van-cell-group>
+    <template v-for="(message, index) in internalMessages">
+      <template v-if="message.type === 'image'"></template>
+      <van-field v-else-if="message.multiple == '1'"
+        :key="index"
+        :required="message.required == '1'"
+        :label="message.name"
+        placeholder="点击填写段落文本"
+        type="textarea"
+        v-model="messageValues[index]">
+      </van-field>
+      <van-field v-else
+        :key="index"
+        :required="message.required == '1'"
+        :label="message.name"
+        :placeholder="PLACEHOLDER_MAP[message.type]"
+        :type="getType(message)"
+        v-model="messageValues[index]">
+      </van-field>
+    </template>
+  </van-cell-group>
+</template>
+
+<script>
+import isEmpty from 'lodash/isEmpty';
+import Field from 'packages/field';
+import CellGroup from 'packages/cell-group';
+import validateEmail from 'zan-utils/validate/email';
+import validateNumber from 'zan-utils/validate/number';
+
+const PLACEHOLDER_MAP = {
+  'id_no': '输入18位身份证号码',
+  text: '输入文本',
+  tel: '输入数字',
+  email: '输入邮箱',
+  date: '点击选择日期',
+  time: '点击选择时间'
+};
+
+export default {
+  name: 'van-sku-messages',
+
+  components: {
+    [Field.name]: Field,
+    [CellGroup.name]: CellGroup
+  },
+
+  props: {
+    messages: Array
+  },
+
+  data() {
+    return {
+      PLACEHOLDER_MAP
+    };
+  },
+
+  // for debug
+  // watch: {
+  //   messageValues() {
+  //     console.log(this.messageValues);
+  //   }
+  // },
+
+  computed: {
+    internalMessages() {
+      if (Object.prototype.toString.call(this.messages) === '[object Array]') {
+        return this.messages;
+      }
+      return [];
+    },
+    messageValues() {
+      const messageValues = [];
+      this.internalMessages.forEach((message, index) => {
+        messageValues[index] = '';
+      });
+
+      return messageValues;
+    }
+  },
+
+  methods: {
+    getType({ type, datetime }) {
+      if (type === 'id_no') return 'text';
+      return datetime > 0 ? 'datetime-local' : type;
+    },
+    getMessages() {
+      const messages = {};
+
+      this.messageValues.forEach((value, index) => {
+        if (this.internalMessages[index].datetime > 0) {
+          value = value.replace(/T/g, ' ');
+        }
+        messages[`message_${index}`] = value;
+      });
+
+      return messages;
+    },
+    getCartMessages() {
+      const messages = {};
+
+      this.messageValues.forEach((value, index) => {
+        const message = this.internalMessages[index];
+        if (message.datetime > 0) {
+          value = value.replace(/T/g, ' ');
+        }
+        messages[message.name] = value;
+      });
+
+      return messages;
+    },
+    validateMessages() {
+      const values = this.messageValues;
+
+      for (let i = 0; i < values.length; i++) {
+        const value = values[i];
+        const message = this.internalMessages[i];
+
+        if (isEmpty(value)) {
+          // 必填字段的校验
+          if (message.required == '1') { // eslint-disable-line
+            if (message.type === 'image') {
+              continue;
+              // return `请上传${message.name}`;
+            } else {
+              return `请填写${message.name}`;
+            }
+          }
+        } else {
+          // if (message.type == 'image') {
+          //   loaded = _this.$el.find('#ipt-' + j).data('uploaded');
+          //   if (loaded == 'false' || !loaded) {
+          //     return '图片还在上传中，请稍等。。';
+          //   }
+          // }
+          if (message.type === 'tel' && !validateNumber(value)) {
+            return '请填写正确的数字格式留言';
+          }
+          if (message.type === 'email' && !validateEmail(value)) {
+            return '请填写正确的邮箱';
+          }
+          if (message.type === 'id_no' && (value.length < 15 || value.length > 18)) {
+            return '请填写正确的身份证号码';
+          }
+        }
+
+        if (value.length > 200) {
+          return `${message.name} 写的太多了<br/>不要超过200字`;
+        }
+      }
+    }
+  }
+
+};
+</script>
diff --git a/packages/sku/components/SkuQuantity.vue b/packages/sku/components/SkuQuantity.vue
new file mode 100644
index 000000000..aaabc1b8a
--- /dev/null
+++ b/packages/sku/components/SkuQuantity.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="van-sku-quantity-stock">
+    <div class="van-sku-quantity-container">
+      <div class="van-sku__quantity-title">{{ quantityTitle }}：</div>
+      <van-quantity v-model="currentNum" :min="1" :max="quantityLimit" class="van-sku__quantity" @overlimit="handleOverLimit"></van-quantity>
+    </div>
+    <div v-if="!hideStock" class="van-sku__stock">剩余{{ stock }}件</div>
+    <div v-if="quota > 0" class="van-sku__quota">每人限购{{ quota }}件</div>
+  </div>
+</template>
+
+<script>
+import Quantity from 'packages/quantity';
+import { LIMIT_TYPE } from '../constants';
+
+const { QUOTA_LIMIT, STOCK_LIMIT } = LIMIT_TYPE;
+
+export default {
+  name: 'van-sku-quantity',
+
+  components: {
+    [Quantity.name]: Quantity
+  },
+
+  props: {
+    skuEventBus: Object,
+    sku: Object,
+    selectedSku: Object,
+    selectedSkuComb: Object,
+    selectedNum: Number,
+    quota: Number,
+    quotaUsed: Number,
+    hideStock: {
+      type: Boolean,
+      default: false
+    },
+    quantityTitle: {
+      type: String,
+      default: '购买数量'
+    }
+  },
+
+  data() {
+    return {
+      currentNum: this.selectedNum,
+      // 购买限制类型: 限购/库存
+      limitType: STOCK_LIMIT
+    };
+  },
+
+  watch: {
+    currentNum(num) {
+      this.skuEventBus.$emit('sku:numChange', num);
+    },
+    quantityLimit(limit) {
+      if (limit < this.currentNum) {
+        this.currentNum = limit;
+      }
+    }
+  },
+
+  computed: {
+    stock() {
+      if (this.selectedSkuComb) {
+        return this.selectedSkuComb.stock_num;
+      }
+      return this.sku.stock_num;
+    },
+    quantityLimit() {
+      const quotaLimit = this.quota - this.quotaUsed;
+      let limit;
+
+      // 无限购时直接取库存，有限购时取限购数和库存数中小的那个
+      if (this.quota > 0 && quotaLimit <= this.stock) {
+        // 修正负的limit
+        limit = quotaLimit < 0 ? 0 : quotaLimit;
+        this.limitType = QUOTA_LIMIT;
+      } else {
+        limit = this.stock;
+      }
+
+      return limit;
+    }
+  },
+
+  methods: {
+    setCurrentNum(num) {
+      this.currentNum = num;
+    },
+    handleOverLimit(action) {
+      this.skuEventBus.$emit('sku:overLimit', {
+        action,
+        limitType: this.limitType,
+        quota: this.quota,
+        quotaUsed: this.quotaUsed
+      });
+    }
+  }
+};
+</script>
diff --git a/packages/sku/components/SkuRow.vue b/packages/sku/components/SkuRow.vue
new file mode 100644
index 000000000..f81905f5d
--- /dev/null
+++ b/packages/sku/components/SkuRow.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="van-sku-row">
+    <div class="van-sku-row__title">{{ skuRow.k }}：</div>
+    <div class="van-sku-row__items">
+      <slot name="sku-row-items">
+        <van-sku-row-item
+          v-for="(skuValue, index) in skuRow.v"
+          :key="index"
+          :skuKeyStr="skuRow.k_s"
+          :skuValue="skuValue"
+          :skuEventBus="$attrs.skuEventBus"
+          :selectedSku="$attrs.selectedSku"
+          :skuList="$attrs.skuList">
+        </van-sku-row-item>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import SkuRowItem from './SkuRowItem';
+
+export default {
+  name: 'van-sku-row',
+
+  inheritAttrs: false,
+
+  components: {
+    [SkuRowItem.name]: SkuRowItem
+  },
+
+  props: {
+    skuRow: Object
+  }
+};
+</script>
diff --git a/packages/sku/components/SkuRowItem.vue b/packages/sku/components/SkuRowItem.vue
new file mode 100644
index 000000000..a3cdd608b
--- /dev/null
+++ b/packages/sku/components/SkuRowItem.vue
@@ -0,0 +1,54 @@
+<template>
+  <span v-if="isChoosable"
+    @click="onSkuSelected"
+    :class="{ 'van-sku-row__item': true, 'van-sku-row__item--active': isChoosed }">
+    {{ skuValue.name }}
+  </span>
+  <span v-else class="van-sku-row__item van-sku-row__item--disabled">{{ skuValue.name }}</span>
+</template>
+
+<script>
+import assign from 'lodash/assign';
+import filter from 'lodash/filter';
+import keys from 'lodash/keys';
+import every from 'lodash/every';
+
+export default {
+  name: 'van-sku-row-item',
+
+  props: {
+    skuEventBus: Object,
+    skuValue: Object,
+    skuList: Array,
+    selectedSku: Object,
+    skuKeyStr: String
+  },
+
+  computed: {
+    isChoosed() {
+      return this.skuValue.id === this.selectedSku[this.skuKeyStr];
+    },
+    isChoosable() {
+      const matchedSku = assign({}, this.selectedSku, {
+        [this.skuKeyStr]: this.skuValue.id
+      });
+      const skusToCheck = filter(keys(matchedSku), skuKey => matchedSku[skuKey] !== '');
+      const filteredSku = filter(this.skuList, sku => {
+        return every(skusToCheck, function(skuKey) {
+          // 后端给的skuValue.id有时候是数字有时候是字符串，全等会匹配不上
+          return matchedSku[skuKey] == sku[skuKey]; // eslint-disable-line
+        });
+      });
+      const stock = filteredSku.reduce((total, sku) => (total += sku.stock_num), 0);
+
+      return stock > 0;
+    }
+  },
+
+  methods: {
+    onSkuSelected() {
+      this.skuEventBus.$emit('sku:select', assign({}, this.skuValue, { skuKeyStr: this.skuKeyStr }));
+    }
+  }
+};
+</script>
diff --git a/packages/sku/constants.js b/packages/sku/constants.js
new file mode 100644
index 000000000..80b443ee6
--- /dev/null
+++ b/packages/sku/constants.js
@@ -0,0 +1,4 @@
+export const LIMIT_TYPE = {
+  QUOTA_LIMIT: 0,
+  STOCK_LIMIT: 1
+};
diff --git a/packages/sku/containers/SkuContainer.vue b/packages/sku/containers/SkuContainer.vue
new file mode 100644
index 000000000..aaacb338d
--- /dev/null
+++ b/packages/sku/containers/SkuContainer.vue
@@ -0,0 +1,299 @@
+<template>
+  <van-popup v-model="show" position="bottom" :lock-scroll="true">
+    <div class="van-sku-container">
+      <div class="van-sku-layout">
+        <slot name="sku-header" :skuEventBus="skuEventBus" :selectedSku="selectedSku" :selectedSkuComb="selectedSkuComb">
+          <van-sku-header
+            :skuEventBus="skuEventBus"
+            :selectedSku="selectedSku"
+            :selectedSkuComb="selectedSkuComb"
+            :goods="goods"
+            :sku="sku">
+          </van-sku-header>
+        </slot>
+        <div class="van-sku-body scroller" :style="bodyStyle">
+          <slot name="sku-group" :selectedSku="selectedSku">
+            <div class="van-sku-group-container">
+              <div v-for="(skutreeItem, index) in skuTree"
+                class="van-sku-row-group"
+                :key="index">
+                <van-sku-row
+                  v-bind="$attrs"
+                  :skuEventBus="skuEventBus"
+                  :skuRow="skutreeItem"
+                  :skuList="sku.list"
+                  :selectedSku="selectedSku">
+                </van-sku-row>
+              </div>
+            </div>
+          </slot>
+          <slot name="extra-sku-group" :skuEventBus="skuEventBus"></slot>
+          <slot name="sku-quantity" :skuEventBus="skuEventBus" :selectedSku="selectedSku" :selectedSkuComb="selectedSkuComb" :selectedNum="selectedNum">
+            <van-sku-quantity
+              ref="skuQuantity"
+              :skuEventBus="skuEventBus"
+              :selectedSku="selectedSku"
+              :selectedSkuComb="selectedSkuComb"
+              :selectedNum="selectedNum"
+              :quantityTitle="quantityTitle"
+              :sku="sku"
+              :quota="quota"
+              :quotaUsed="quotaUsed"
+              :hideStock="hideStock">
+            </van-sku-quantity>
+          </slot>
+         <slot name="sku-messages">
+            <van-sku-messages
+              ref="skuMessages"
+              :messages="sku.messages">
+            </van-sku-messages>
+          </slot>
+          <slot name="sku-actions" :skuEventBus="skuEventBus">
+            <van-sku-actions
+              :skuEventBus="skuEventBus"
+              :buyText="buyText"
+              :showAddCartBtn="showAddCartBtn">
+            </van-sku-actions>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+import Vue from 'vue';
+import Popup from 'packages/popup';
+import Toast from 'packages/toast';
+import SkuHeader from '../components/SkuHeader';
+import SkuRow from '../components/SkuRow';
+import SkuQuantity from '../components/SkuQuantity';
+import SkuMessages from '../components/SkuMessages';
+import SkuActions from '../components/SkuActions';
+import { isAllSelected, getSkuComb, getSelectedSkuValues } from '../utils/skuHelper';
+import { LIMIT_TYPE } from '../constants';
+
+const { QUOTA_LIMIT } = LIMIT_TYPE;
+
+export default {
+  name: 'van-sku',
+
+  components: {
+    [Popup.name]: Popup,
+    [SkuHeader.name]: SkuHeader,
+    [SkuRow.name]: SkuRow,
+    [SkuQuantity.name]: SkuQuantity,
+    [SkuMessages.name]: SkuMessages,
+    [SkuActions.name]: SkuActions
+  },
+
+  props: {
+    goods: Object,
+    initialSku: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    sku: Object,
+    quota: {
+      type: Number,
+      default: 0
+    },
+    quotaUsed: {
+      type: Number,
+      default: 0
+    },
+    hideStock: {
+      type: Boolean,
+      default: false
+    },
+    showAddCartBtn: {
+      type: Boolean,
+      default: true
+    },
+    buyText: String,
+    quantityTitle: {
+      type: String,
+      default: '购买数量'
+    },
+    bodyOffsetTop: {
+      type: Number,
+      default: 150
+    },
+    resetQuantityOnHide: Boolean,
+    value: Boolean
+  },
+
+  data() {
+    return {
+      selectedSku: {},
+      selectedNum: 1,
+      show: this.value
+    };
+  },
+
+  watch: {
+    show(val) {
+      this.$emit('input', val);
+      if (!val) {
+        const selectedSkuValues = getSelectedSkuValues(this.sku.tree, this.selectedSku);
+
+        this.$emit('sku-close', {
+          selectedSkuValues,
+          selectedNum: this.selectedNum,
+          selectedSkuComb: this.selectedSkuComb
+        });
+
+        if (this.resetQuantityOnHide) {
+          this.$refs.skuQuantity && this.$refs.skuQuantity.setCurrentNum(1);
+        }
+      }
+    },
+    value(val) {
+      this.show = val;
+    },
+    skuTree(val) {
+      this.resetSelectedSku(val);
+    }
+  },
+
+  computed: {
+    bodyStyle() {
+      const windowHeight = window.innerHeight;
+      // header高度大概82px
+      const maxHeight = windowHeight - this.bodyOffsetTop;
+
+      return {
+        maxHeight: maxHeight + 'px'
+      };
+    },
+    isSkuCombSelected() {
+      return isAllSelected(this.sku.tree, this.selectedSku);
+    },
+    selectedSkuComb() {
+      if (this.sku.none_sku) {
+        return {
+          id: this.sku.collection_id,
+          price: Math.round(this.sku.price * 100),
+          'stock_num': this.sku.stock_num
+        };
+      } else if (this.isSkuCombSelected) {
+        return getSkuComb(this.sku.list, this.selectedSku);
+      }
+      return null;
+    },
+    skuTree() {
+      return this.sku.tree || [];
+    }
+  },
+
+  created() {
+    var skuEventBus = new Vue();
+    this.skuEventBus = skuEventBus;
+
+    skuEventBus.$on('sku:close', this.handleCloseClicked);
+    skuEventBus.$on('sku:select', this.handleSkuSelected);
+    skuEventBus.$on('sku:numChange', this.handleNumChange);
+    skuEventBus.$on('sku:overLimit', this.handleOverLimit);
+    skuEventBus.$on('sku:addCart', this.handleAddCartClicked);
+    skuEventBus.$on('sku:buy', this.handleBuyClicked);
+
+    this.resetSelectedSku(this.skuTree);
+    // 组件初始化后的钩子，抛出skuEventBus
+    this.$emit('after-sku-create', skuEventBus);
+  },
+
+  methods: {
+    resetSelectedSku(skuTree) {
+      this.selectedSku = {};
+      skuTree.forEach((item) => {
+        // 只有一个sku规格值时默认选中
+        if (item.v.length === 1) {
+          this.selectedSku[item.k_s] = item.v[0].id;
+        } else {
+          this.selectedSku[item.k_s] = this.initialSku[item.k_s] || '';
+        }
+      });
+    },
+    getSkuMessages() {
+      return this.$refs.skuMessages
+        ? this.$refs.skuMessages.getMessages()
+        : {};
+    },
+    getSkuCartMessages() {
+      return this.$refs.skuMessages
+        ? this.$refs.skuMessages.getCartMessages()
+        : {};
+    },
+    validateSkuMessages() {
+      return this.$refs.skuMessages
+        ? this.$refs.skuMessages.validateMessages()
+        : '';
+    },
+    validateSku() {
+      if (this.selectedNum === 0) {
+        return '商品已经无法购买啦';
+      }
+
+      if (this.isSkuCombSelected) {
+        const error = this.validateSkuMessages();
+        // sku留言没有错误则校验通过
+        return error ? error : '';
+      } else {
+        return '请选择完整的规格';
+      }
+    },
+    handleCloseClicked() {
+      this.show = false;
+    },
+    handleSkuSelected(skuValue) {
+      // 点击已选中的sku时则取消选中
+      this.selectedSku = this.selectedSku[skuValue.skuKeyStr] === skuValue.id
+        ? { ...this.selectedSku, [skuValue.skuKeyStr]: '' }
+        : { ...this.selectedSku, [skuValue.skuKeyStr]: skuValue.id };
+
+      this.$emit('sku-selected', {
+        skuValue,
+        selectedSku: this.selectedSku,
+        selectedSkuComb: this.selectedSkuComb
+      });
+    },
+    handleNumChange(num) {
+      this.selectedNum = num;
+    },
+    handleOverLimit({ action, limitType, quota, quotaUsed }) {
+      if (action === 'minus') {
+        Toast('至少选择一件');
+      } else if (action === 'plus') {
+        if (limitType === QUOTA_LIMIT) {
+          let msg = `限购${quota}件`;
+          if (quotaUsed > 0) msg += `，您已购买${quotaUsed}件`;
+          Toast(msg);
+        } else {
+          Toast('库存不足');
+        }
+      }
+    },
+    handleAddCartClicked() {
+      this.handleBuyOrAddCart('add-cart');
+    },
+    handleBuyClicked() {
+      this.handleBuyOrAddCart('buy-clicked');
+    },
+    handleBuyOrAddCart(type) {
+      const error = this.validateSku();
+      if (error) {
+        Toast(error);
+        return;
+      }
+      this.$emit(type, {
+        selectedNum: this.selectedNum,
+        selectedSkuComb: this.selectedSkuComb,
+        messages: this.getSkuMessages(),
+        cartMessages: this.getSkuCartMessages()
+      });
+    }
+  }
+};
+</script>
diff --git a/packages/sku/index.js b/packages/sku/index.js
new file mode 100644
index 000000000..97ebe65c5
--- /dev/null
+++ b/packages/sku/index.js
@@ -0,0 +1,18 @@
+import SkuActions from './components/SkuActions';
+import SkuHeader from './components/SkuHeader';
+import SkuMessages from './components/SkuMessages';
+import SkuQuantity from './components/SkuQuantity';
+import SkuRow from './components/SkuRow';
+import SkuRowItem from './components/SkuRowItem';
+import skuHelper from './utils/skuHelper';
+import SkuContainer from './containers/SkuContainer';
+
+SkuContainer.SkuActions = SkuActions;
+SkuContainer.SkuHeader = SkuHeader;
+SkuContainer.SkuMessages = SkuMessages;
+SkuContainer.SkuQuantity = SkuQuantity;
+SkuContainer.SkuRow = SkuRow;
+SkuContainer.SkuRowItem = SkuRowItem;
+SkuContainer.skuHelper = skuHelper;
+
+export default SkuContainer;
diff --git a/packages/sku/utils/skuHelper.js b/packages/sku/utils/skuHelper.js
new file mode 100644
index 000000000..b354c295b
--- /dev/null
+++ b/packages/sku/utils/skuHelper.js
@@ -0,0 +1,95 @@
+import isArray from 'lodash/isArray';
+import keys from 'lodash/keys';
+import filter from 'lodash/filter';
+import find from 'lodash/find';
+import isObject from 'lodash/isObject';
+import every from 'lodash/every';
+
+/*
+  normalize sku tree
+
+  [
+    {
+      count: 2,
+      k: "品种", // 规格名称 skuKeyName
+      k_id: "1200", // skuKeyId
+      k_s: "s1" // skuKeyStr
+      v: [ // skuValues
+        { // skuValue
+          id: "1201", // skuValueId
+          name: "萌" // 具体的规格值 skuValueName
+        }, {
+          id: "973",
+          name: "帅"
+        }
+      ]
+    },
+    ...
+  ]
+                |
+                v
+  {
+    s1: [{
+      id: "1201",
+      name: "萌"
+    }, {
+      id: "973",
+      name: "帅"
+    }],
+    ...
+  }
+ */
+export const normalizeSkuTree = (skuTree) => {
+  const normalizedTree = {};
+  skuTree.forEach(treeItem => {
+    normalizedTree[treeItem.k_s] = treeItem.v;
+  });
+  return normalizedTree;
+};
+
+// 判断是否所有的sku都已经选中
+export const isAllSelected = (skuTree, selectedSku) => {
+  if (!isArray(skuTree)) {
+    throw new Error('skuTree must be array');
+  }
+  if (!isObject(selectedSku)) {
+    throw new Error('selectedSku must be object');
+  }
+
+  const selected = filter(keys(selectedSku), skuKeyStr => selectedSku[skuKeyStr] !== '');
+  return skuTree.length === selected.length;
+};
+
+// 根据已选择的sku获取skuComb
+export const getSkuComb = (skuList, selectedSku) => {
+  const skuComb = find(skuList, (skuComb) => {
+    return every(keys(selectedSku), skuKeyStr => {
+      // 后端给的key有时数字有时字符串，需要兼容=。=
+      return skuComb[skuKeyStr] == selectedSku[skuKeyStr]; // eslint-disable-line
+    });
+  });
+  return skuComb;
+};
+
+// 获取已选择的sku名称
+export const getSelectedSkuValues = (skuTree, selectedSku) => {
+  const normalizedTree = normalizeSkuTree(skuTree);
+  return keys(selectedSku).reduce((selectedValues, skuKeyStr) => {
+    const skuValues = normalizedTree[skuKeyStr];
+    const skuValueId = selectedSku[skuKeyStr];
+
+    if (skuValueId) {
+      const skuValue = find(skuValues, skuValue => skuValue.id === skuValueId);
+      skuValue && selectedValues.push(skuValue);
+    }
+    return selectedValues;
+  }, []);
+};
+
+const SkuHelper = {
+  normalizeSkuTree,
+  isAllSelected,
+  getSkuComb,
+  getSelectedSkuValues
+};
+export default SkuHelper;
diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css
index 4c8d5576f..f6345cf40 100644
--- a/packages/vant-css/src/index.css
+++ b/packages/vant-css/src/index.css
@@ -51,3 +51,4 @@
 @import './order-goods.css';
 @import './pay-order.css';
 @import './switch-cell.css';
+@import './sku.css';
diff --git a/packages/vant-css/src/sku.css b/packages/vant-css/src/sku.css
new file mode 100644
index 000000000..27d10fdf0
--- /dev/null
+++ b/packages/vant-css/src/sku.css
@@ -0,0 +1,202 @@
+@import './mixins/border_retina';
+
+.van-sku-container {
+  background: #f8f8f8;
+}
+.van-sku-layout {
+  background: #fff;
+}
+.van-sku-body {
+  max-height: 350px;
+  overflow-y: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+.van-sku-group-container {
+  position: relative;
+  padding-top: 12px;
+  padding-bottom: 2px;
+  margin-left: 15px;
+
+  &::after {
+    @mixin border-retina (bottom);
+  }
+}
+
+.van-sku-row-group {
+  margin-right: 15px;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/*
+  sku header
+ */
+.van-sku-header {
+  position: relative;
+  margin-left: 15px;
+
+  &::after {
+    @mixin border-retina (bottom);
+  }
+}
+.van-sku-header__img-wrap {
+  position: relative;
+  float: left;
+  margin-top: -10px;
+  width: 80px;
+  height: 80px;
+  background: #fafafa;
+  border-radius: 2px;
+
+  .van-sku__goods-img {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+.van-sku-header__goods-info {
+  padding: 10px 60px 10px 10px;
+  min-height: 62px;
+  overflow: hidden;
+}
+.van-sku__goods-name {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.van-sku__price-symbol {
+  font-size: 14px;
+  vertical-align: middle;
+}
+.van-sku__price-num {
+  vertical-align: middle;
+}
+.van-sku__goods-price {
+  margin-top: 10px;
+  font-size: 16px;
+  color: #f44;
+  vertical-align: middle;
+}
+.van-sku__close-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 44px;
+  height: 44px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAUVBMVEUAAACfn5+bm5uampqZmZmoqKiampqampqZmZmampqampqbm5ubm5uZmZmqqqqampqampqZmZmampqampqampqbm5ubm5uampqdnZ2ampqZmZkjZXmqAAAAGnRSTlMAFYBC5wm+rdPv1Ckl8wzZxKWicm9eUjoN8nSyS9UAAAFVSURBVDjLvZXbrsIgEEWhtAUU6M1a3f//oSeHWKfuVhv7IC+TkJVhz4UZ9bsThq5uYmzqbgifSV04LI4r9Fs0FRHw/WhCugUz9h6IRdpmryVgzfLGWKC8brEF0E58ObVAsUIrC1y2fFwAW9GdhTfb6oyHZQ3+/C7us39VcgXE79o3sIgylayXdZdpIaJVH08rQnTE9BmeEPXsWMK1rV6m01Xz/dO1g5H3nH6yNcoZNnCPPoOXTjplemYlnR4h2wG9YppZ1WPItsOomGZWjeiyrWEU08wqgzrbBkERfWJWBTTZRiTFNLMqIWZ7x43atQYa+lA33EmG5KyB0yyDApT8/uvWFCCnTvIrtKRuLgqzQktRpNzMCi3l5kaymZXqiGS3blGX2Zl2ftGi6+avqtcsUvN/8a2++LCHRsH+kDkwvg4Mxt2Re3yY85pIsiaOLKD91faz8wcoUxux/aS9awAAAABJRU5ErkJggg==);
+  background-size: 22px 22px;
+  background-repeat: no-repeat;
+  background-position: 7px 10px;
+}
+
+/*
+  sku row
+*/
+.van-sku-row__title {
+  font-size: 14px;
+  padding-bottom: 10px;
+}
+.van-sku-row__item {
+  display: inline-block;
+  padding: 5px 9px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  height: 16px;
+  min-width: 32px;
+  line-height: 16px;
+  font-size: 12px;
+  color: #333;
+  text-align: center;
+  border: 1px solid #999;
+  border-radius: 3px;
+
+  &.van-sku-row__item--active {
+    border-color: #f44;
+    color: #fff;
+    background: #f44;
+  }
+  &.van-sku-row__item--disabled {
+    background: #efefef;
+    border-color: #e5e5e5;
+    color: #cacaca;
+  }
+}
+
+/*
+  sku quantity
+*/
+.van-sku-quantity-stock {
+  padding: 12px 0;
+  margin-left: 15px;
+}
+.van-sku-quantity-container {
+  height: 30px;
+  margin-right: 20px;
+}
+.van-sku__quantity-title {
+  float: left;
+  line-height: 30px;
+  font-size: 14px;
+}
+.van-sku__quantity {
+  float: right;
+  top: 7px;
+  left: 4px;
+}
+.van-sku__stock {
+  display: inline-block;
+  margin-right: 10px;
+  color: #999;
+  font-size: 12px;
+}
+.van-sku__quota {
+  display: inline-block;
+  color: #f44;
+  font-size: 12px;
+}
+
+/*
+  sku actions
+*/
+.van-sku-actions {
+  margin-top: 10px;
+  font-size: 0;
+}
+.van-sku__add-cart-btn {
+  width: 50%;
+  height: 50px;
+  padding: 0;
+  border: 0;
+  background: #f85;
+  color: #fff;
+  font-size: 16px;
+  line-height: 50px;
+  text-align: center;
+
+  & + .van-sku__buy-btn {
+    width: 50%;
+  }
+}
+.van-sku__buy-btn {
+  width: 100%;
+  height: 50px;
+  padding: 0;
+  border: 0;
+  background: #f44;
+  color: #fff;
+  font-size: 16px;
+  line-height: 50px;
+  text-align: center;
+}
diff --git a/test/unit/mock/sku.js b/test/unit/mock/sku.js
new file mode 100644
index 000000000..e43b438bb
--- /dev/null
+++ b/test/unit/mock/sku.js
@@ -0,0 +1,234 @@
+/* eslint-disable */
+var _global = {
+    "kdt_id": 55,
+    "user_id": 4674509,
+    "offline_id": 0,
+    "activity_alias": "",
+    "sku": {
+        "tree": [{
+            "k": "\u989c\u8272",
+            "k_id": "1",
+            "v": [{
+                "id": "30349",
+                "name": "\u5929\u84dd\u8272",
+                "imgUrl": "upload_files\/2017\/02\/21\/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg"
+            }],
+            "k_s": "s1"
+        }, {
+            "k": "\u5c3a\u5bf8",
+            "k_id": "2",
+            "v": [{
+                "id": "1193",
+                "name": "1"
+            }, {
+                "id": "1194",
+                "name": "2"
+            }],
+            "k_s": "s2"
+        }],
+        "list": [{
+            "id": 2259,
+            "price": 100,
+            "discount": 100,
+            "code": "",
+            "s1": "1215",
+            "s2": "1193",
+            "s3": "0",
+            "s4": "0",
+            "s5": "0",
+            "extend": null,
+            "kdt_id": 55,
+            "discount_price": 0,
+            "stock_num": 110,
+            "stock_mode": 0,
+            "is_sell": null,
+            "combin_sku": false,
+            "goods_id": 946755
+        }, {
+            "id": 2260,
+            "price": 100,
+            "discount": 100,
+            "code": "",
+            "s1": "1215",
+            "s2": "1194",
+            "s3": "0",
+            "s4": "0",
+            "s5": "0",
+            "extend": null,
+            "kdt_id": 55,
+            "discount_price": 0,
+            "stock_num": 0,
+            "stock_mode": 0,
+            "is_sell": null,
+            "combin_sku": false,
+            "goods_id": 946755
+        }, {
+            "id": 2257,
+            "price": 100,
+            "discount": 100,
+            "code": "",
+            "s1": "30349",
+            "s2": "1193",
+            "s3": "0",
+            "s4": "0",
+            "s5": "0",
+            "extend": null,
+            "kdt_id": 55,
+            "discount_price": 0,
+            "stock_num": 111,
+            "stock_mode": 0,
+            "is_sell": null,
+            "combin_sku": false,
+            "goods_id": 946755
+        }, {
+            "id": 2258,
+            "price": 100,
+            "discount": 100,
+            "code": "",
+            "s1": "30349",
+            "s2": "1194",
+            "s3": "0",
+            "s4": "0",
+            "s5": "0",
+            "extend": null,
+            "kdt_id": 55,
+            "discount_price": 0,
+            "stock_num": 6,
+            "stock_mode": 0,
+            "is_sell": null,
+            "combin_sku": false,
+            "goods_id": 946755
+        }],
+        "price": "1.00",
+        "stock_num": 227,
+        "collection_id": 2261,
+        "collection_price": 0,
+        "none_sku": false,
+        "sold_num": 0,
+        "min_price": "1.00",
+        "max_price": "1.00",
+        "messages": [{
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "multiple": "0",
+            "name": "\u7559\u8a001",
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "text",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": "1"
+        }, {
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "multiple": 0,
+            "name": "\u7559\u8a002",
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "id_no",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": 0
+        }, {
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "multiple": 0,
+            "name": "\u7559\u8a003",
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "image",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": 0
+        }, {
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "multiple": 1,
+            "name": "\u7559\u8a004",
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "text",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": 0
+        }, {
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "name": "\u6570\u5b57",
+            "multiple": 0,
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "tel",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": 0
+        }, {
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "name": "\u90ae\u4ef6",
+            "multiple": 0,
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "email",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": 0
+        }, {
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "name": "\u65e5\u671f",
+            "multiple": 0,
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "date",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": 0
+        }, {
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "name": "\u65f6\u95f4\u542b\u65e5\u671f",
+            "multiple": 0,
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "time",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": 0
+        }, {
+            "datetime": "0",
+            "disable_multiple": false,
+            "disable": false,
+            "name": "\u65f6\u95f4",
+            "multiple": 0,
+            "disable_required": false,
+            "disable_edit_name": false,
+            "type": "time",
+            "disable_delete": false,
+            "disable_type": false,
+            "required": 0
+        }],
+        "hide_stock": false
+    },
+    "goods_id": "946755",
+    "alias": "2oml0r0n5vytj",
+    "quota": 15,
+    "is_virtual": "0",
+    "quota_used": 0,
+    "goods_info": {
+        "title": "\u725b\u5976\u6d4b\u8bd5",
+        "picture": ["https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"],
+        "price": 1,
+        "origin": ""
+    }
+};
+
+export default _global;
diff --git a/test/unit/specs/sku.spec.js b/test/unit/specs/sku.spec.js
new file mode 100644
index 000000000..fdedd079e
--- /dev/null
+++ b/test/unit/specs/sku.spec.js
@@ -0,0 +1,43 @@
+import Sku from 'packages/sku';
+import { mount } from 'avoriaz';
+import { DOMChecker } from '../utils';
+import data from '../mock/sku';
+
+const goods = data.goods_info;
+goods.picture = goods.picture[0];
+
+describe('Sku', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('default', () => {
+    wrapper = mount(Sku, {
+      attachToDocument: true,
+      propsData: {
+        show: false,
+        sku: data.sku,
+        goods: goods,
+        quota: data.quota,
+        quotaUsed: data.quota_used
+      }
+    });
+
+    DOMChecker(wrapper, {
+      text: {
+        '.van-order-goods-header a': '起码运动馆',
+        '.van-order-goods-price .van-cell__value span': '¥10.50',
+        '.van-card__title': item1.title,
+        '.van-card__num': 'x ' + item1.num,
+        '.van-card__price': '¥10.50'
+      },
+      value: {
+        '.van-order-goods-message textarea': '留言留言'
+      },
+      src: {
+        '.van-card__thumb img': item1.img_url
+      }
+    });
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index 2ab7362f6..f62d7febb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6,11 +6,7 @@ abab@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
 
-abbrev@1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f"
-
-abbrev@1.0.x:
+abbrev@1, abbrev@1.0.x:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
 
@@ -372,15 +368,7 @@ babel-cli@^6.26.0:
   optionalDependencies:
     chokidar "^1.6.1"
 
-babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
-  dependencies:
-    chalk "^1.1.0"
-    esutils "^2.0.2"
-    js-tokens "^3.0.0"
-
-babel-code-frame@^6.26.0:
+babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
   dependencies:
@@ -388,31 +376,7 @@ babel-code-frame@^6.26.0:
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
-babel-core@^6.1.4, babel-core@^6.24.1:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.25.0.tgz#7dd42b0463c742e9d5296deb3ec67a9322dad729"
-  dependencies:
-    babel-code-frame "^6.22.0"
-    babel-generator "^6.25.0"
-    babel-helpers "^6.24.1"
-    babel-messages "^6.23.0"
-    babel-register "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.25.0"
-    babel-traverse "^6.25.0"
-    babel-types "^6.25.0"
-    babylon "^6.17.2"
-    convert-source-map "^1.1.0"
-    debug "^2.1.1"
-    json5 "^0.5.0"
-    lodash "^4.2.0"
-    minimatch "^3.0.2"
-    path-is-absolute "^1.0.0"
-    private "^0.1.6"
-    slash "^1.0.0"
-    source-map "^0.5.0"
-
-babel-core@^6.26.0:
+babel-core@^6.1.4, babel-core@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8"
   dependencies:
@@ -445,19 +409,6 @@ babel-eslint@^7.2.1:
     babel-types "^6.23.0"
     babylon "^6.17.0"
 
-babel-generator@^6.25.0:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.25.0.tgz#33a1af70d5f2890aeb465a4a7793c1df6a9ea9fc"
-  dependencies:
-    babel-messages "^6.23.0"
-    babel-runtime "^6.22.0"
-    babel-types "^6.25.0"
-    detect-indent "^4.0.0"
-    jsesc "^1.3.0"
-    lodash "^4.2.0"
-    source-map "^0.5.0"
-    trim-right "^1.0.1"
-
 babel-generator@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
@@ -883,18 +834,6 @@ babel-preset-env@^1.6.0:
     invariant "^2.2.2"
     semver "^5.3.0"
 
-babel-register@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.24.1.tgz#7e10e13a2f71065bdfad5a1787ba45bca6ded75f"
-  dependencies:
-    babel-core "^6.24.1"
-    babel-runtime "^6.22.0"
-    core-js "^2.4.0"
-    home-or-tmp "^2.0.0"
-    lodash "^4.2.0"
-    mkdirp "^0.5.1"
-    source-map-support "^0.4.2"
-
 babel-register@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
@@ -907,31 +846,14 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@6.x, babel-runtime@^6.26.0:
+babel-runtime@6.x, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
-babel-runtime@^6.18.0, babel-runtime@^6.22.0:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.25.0.tgz#33b98eaa5d482bb01a8d1aa6b437ad2b01aec41c"
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.10.0"
-
-babel-template@^6.24.1, babel-template@^6.25.0:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071"
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-traverse "^6.25.0"
-    babel-types "^6.25.0"
-    babylon "^6.17.2"
-    lodash "^4.2.0"
-
-babel-template@^6.26.0:
+babel-template@^6.24.1, babel-template@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
   dependencies:
@@ -941,21 +863,7 @@ babel-template@^6.26.0:
     babylon "^6.18.0"
     lodash "^4.17.4"
 
-babel-traverse@^6.23.1, babel-traverse@^6.24.1, babel-traverse@^6.25.0:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.25.0.tgz#2257497e2fcd19b89edc13c4c91381f9512496f1"
-  dependencies:
-    babel-code-frame "^6.22.0"
-    babel-messages "^6.23.0"
-    babel-runtime "^6.22.0"
-    babel-types "^6.25.0"
-    babylon "^6.17.2"
-    debug "^2.2.0"
-    globals "^9.0.0"
-    invariant "^2.2.0"
-    lodash "^4.2.0"
-
-babel-traverse@^6.26.0:
+babel-traverse@^6.23.1, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
   dependencies:
@@ -969,16 +877,7 @@ babel-traverse@^6.26.0:
     invariant "^2.2.2"
     lodash "^4.17.4"
 
-babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24.1, babel-types@^6.25.0:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.25.0.tgz#70afb248d5660e5d18f811d91c8303b54134a18e"
-  dependencies:
-    babel-runtime "^6.22.0"
-    esutils "^2.0.2"
-    lodash "^4.2.0"
-    to-fast-properties "^1.0.1"
-
-babel-types@^6.26.0:
+babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24.1, babel-types@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
   dependencies:
@@ -987,11 +886,7 @@ babel-types@^6.26.0:
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
-babylon@^6.17.0, babylon@^6.17.2:
-  version "6.17.4"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.4.tgz#3e8b7402b88d22c3423e137a1577883b15ff869a"
-
-babylon@^6.18.0:
+babylon@^6.17.0, babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
 
@@ -1196,14 +1091,7 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
     caniuse-db "^1.0.30000639"
     electron-to-chromium "^1.2.7"
 
-browserslist@^2.1.2:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.3.3.tgz#2b0cabc4d28489f682598605858a0782f14b154c"
-  dependencies:
-    caniuse-lite "^1.0.30000715"
-    electron-to-chromium "^1.3.18"
-
-browserslist@^2.4.0:
+browserslist@^2.1.2, browserslist@^2.4.0:
   version "2.4.0"
   resolved "https://registry.npmjs.org/browserslist/-/browserslist-2.4.0.tgz#693ee93d01e66468a6348da5498e011f578f87f8"
   dependencies:
@@ -1303,10 +1191,6 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   version "1.0.30000715"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000715.tgz#0b9b5c795950dfbaf301a8806bafe87f126da8ca"
 
-caniuse-lite@^1.0.30000715:
-  version "1.0.30000715"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000715.tgz#c327f5e6d907ebcec62cde598c3bf0dd793fb9a0"
-
 caniuse-lite@^1.0.30000718:
   version "1.0.30000718"
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000718.tgz#0dd24290beb11310b2d80f6b70a823c2a65a6fad"
@@ -1343,7 +1227,7 @@ chalk@^0.5.0:
     strip-ansi "^0.3.0"
     supports-color "^0.2.0"
 
-chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
+chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
   dependencies:
@@ -1677,7 +1561,7 @@ content-type@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.2.tgz#b7d113aee7a8dd27bd21133c4dc2529df1721eed"
 
-convert-source-map@^1.1.0, convert-source-map@^1.5.0:
+convert-source-map@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
 
@@ -2065,14 +1949,10 @@ di@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c"
 
-diff@3.2.0:
+diff@3.2.0, diff@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9"
 
-diff@^3.1.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.0.tgz#056695150d7aa93237ca7e378ac3b1682b7963b9"
-
 diffie-hellman@^5.0.0:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
@@ -2170,20 +2050,13 @@ domutils@1.1:
   dependencies:
     domelementtype "1"
 
-domutils@1.5, domutils@1.5.1:
+domutils@1.5, domutils@1.5.1, domutils@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
   dependencies:
     dom-serializer "0"
     domelementtype "1"
 
-domutils@^1.5.1:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.6.2.tgz#1958cc0b4c9426e9ed367fb1c8e854891b0fa3ff"
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
 duplexer2@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db"
@@ -2783,6 +2656,10 @@ fd-slicer@~1.0.1:
   dependencies:
     pend "~1.2.0"
 
+fecha@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/fecha/-/fecha-2.3.1.tgz#921b4e5a9d331aaa9b65c1634b26fc45945f6421"
+
 felint@^0.5.0-alpha.3:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/felint/-/felint-0.5.0.tgz#e1281863f894a05ae9d2239e7ae8372958831c2a"
@@ -3206,7 +3083,7 @@ global-prefix@^0.1.4:
     is-windows "^0.2.0"
     which "^1.2.12"
 
-globals@^9.0.0, globals@^9.14.0, globals@^9.18.0:
+globals@^9.14.0, globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
 
@@ -3706,7 +3583,7 @@ interpret@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
 
-invariant@^2.2.0, invariant@^2.2.2:
+invariant@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
   dependencies:
@@ -4003,6 +3880,10 @@ istanbul@^0.4.0:
     which "^1.1.1"
     wordwrap "^1.0.0"
 
+jquery@1.12.4:
+  version "1.12.4"
+  resolved "https://registry.npmjs.org/jquery/-/jquery-1.12.4.tgz#01e1dfba290fe73deba77ceeacb0f9ba2fec9e0c"
+
 js-base64@^2.1.9:
   version "2.1.9"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
@@ -4623,7 +4504,7 @@ lodash@^3.8.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.0.0, lodash@^4.0.1, lodash@^4.1.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0:
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.1.0, lodash@^4.14.0, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -4667,11 +4548,7 @@ lower-case@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
 
-lru-cache@2:
-  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.7.3.tgz#6d4524e8b955f95d4f5b58851ce21dd72fb4e952"
-
-lru-cache@2.2.x:
+lru-cache@2, lru-cache@2.2.x:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d"
 
@@ -4706,14 +4583,10 @@ map-obj@^1.0.0, map-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
 
-map-stream@0.0.4:
+map-stream@0.0.4, map-stream@>=0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.0.4.tgz#5ec6de90213ef6c7b2eb9367e9ade8da4efdb68b"
 
-map-stream@>=0.0.4:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.1.0.tgz#e56aa94c4c8055a16404a0674b78f215f7c8e194"
-
 markdown-it-container@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/markdown-it-container/-/markdown-it-container-2.0.0.tgz#0019b43fd02eefece2f1960a2895fba81a404695"
@@ -4728,17 +4601,7 @@ markdown-it@^6.0.5:
     mdurl "~1.0.1"
     uc.micro "^1.0.1"
 
-markdown-it@^8.3.2:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.3.2.tgz#df4b86530d17c3bc9beec3b68d770b92ea17ae96"
-  dependencies:
-    argparse "^1.0.7"
-    entities "~1.1.1"
-    linkify-it "^2.0.0"
-    mdurl "^1.0.1"
-    uc.micro "^1.0.3"
-
-markdown-it@^8.4.0:
+markdown-it@^8.3.2, markdown-it@^8.4.0:
   version "8.4.0"
   resolved "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.0.tgz#e2400881bf171f7018ed1bd9da441dac8af6306d"
   dependencies:
@@ -4870,7 +4733,7 @@ minimatch@~0.2.11:
     lru-cache "2"
     sigmund "~1.0.0"
 
-minimist@0.0.8:
+minimist@0.0.8, minimist@~0.0.1:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
@@ -4882,10 +4745,6 @@ minimist@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.2.0.tgz#4dffe525dae2b864c66c2e23c6271d7afdecefce"
 
-minimist@~0.0.1:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
-
 mkdirp@0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.0.tgz#1d73076a6df986cd9344e15e71fcc05a4c9abf12"
@@ -5278,7 +5137,7 @@ os-locale@^2.0.0:
     lcid "^1.0.0"
     mem "^1.1.0"
 
-os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
+os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
 
@@ -5474,6 +5333,10 @@ performance-now@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
 
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
 phantomjs-prebuilt@^2.1.7:
   version "2.1.15"
   resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.15.tgz#20f86e82d3349c505917527745b7a411e08b3903"
@@ -5952,15 +5815,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.2, postcss@^6.0.3, postcss@^6.0.6, postcss@^6.0.9:
-  version "6.0.9"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.9.tgz#54819766784a51c65b1ec4d54c2f93765438c35a"
-  dependencies:
-    chalk "^2.1.0"
-    source-map "^0.5.6"
-    supports-color "^4.2.1"
-
-postcss@^6.0.10:
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.10, postcss@^6.0.2, postcss@^6.0.3, postcss@^6.0.6, postcss@^6.0.9:
   version "6.0.10"
   resolved "https://registry.npmjs.org/postcss/-/postcss-6.0.10.tgz#c311b89734483d87a91a56dc9e53f15f4e6e84e4"
   dependencies:
@@ -6118,6 +5973,12 @@ querystringify@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
 
+raf@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.npmjs.org/raf/-/raf-3.3.2.tgz#0c13be0b5b49b46f76d6669248d527cf2b02fe27"
+  dependencies:
+    performance-now "^2.1.0"
+
 randomatic@^1.1.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
@@ -6197,9 +6058,9 @@ readable-stream@1.0, "readable-stream@>=1.0.33-1 <1.1.0-0", readable-stream@~1.0
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@1.1:
-  version "1.1.13"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.13.tgz#f6eef764f514c89e2b9e23146a75ba106756d23e"
+readable-stream@1.1, readable-stream@~1.1.9:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
   dependencies:
     core-util-is "~1.0.0"
     inherits "~2.0.1"
@@ -6218,15 +6079,6 @@ readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable
     string_decoder "~1.0.3"
     util-deprecate "~1.0.1"
 
-readable-stream@~1.1.9:
-  version "1.1.14"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
 readdirp@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
@@ -6275,7 +6127,7 @@ regenerate@^1.2.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
 
-regenerator-runtime@^0.10.0, regenerator-runtime@^0.10.5:
+regenerator-runtime@^0.10.5:
   version "0.10.5"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
 
@@ -6728,21 +6580,15 @@ source-map-support@^0.4.15:
   dependencies:
     source-map "^0.5.6"
 
-source-map-support@^0.4.2:
-  version "0.4.15"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.15.tgz#03202df65c06d2bd8c7ec2362a193056fef8d3b1"
-  dependencies:
-    source-map "^0.5.6"
-
 source-map@0.4.x, source-map@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.3:
+  version "0.5.7"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
 source-map@^0.1.41:
   version "0.1.43"
@@ -6750,9 +6596,9 @@ source-map@^0.1.41:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.5.7:
-  version "0.5.7"
-  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
 source-map@~0.2.0:
   version "0.2.0"
@@ -6953,7 +6799,7 @@ sugarss@^1.0.0:
   dependencies:
     postcss "^6.0.0"
 
-supports-color@3.1.2:
+supports-color@3.1.2, supports-color@^3.1.1:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
   dependencies:
@@ -6967,7 +6813,7 @@ supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
 
-supports-color@^3.1.0, supports-color@^3.1.1, supports-color@^3.2.3:
+supports-color@^3.1.0, supports-color@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
   dependencies:
@@ -7109,18 +6955,12 @@ timers-browserify@^2.0.2:
   dependencies:
     setimmediate "^1.0.4"
 
-tmp@0.0.31:
+tmp@0.0.31, tmp@0.0.x:
   version "0.0.31"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"
   dependencies:
     os-tmpdir "~1.0.1"
 
-tmp@0.0.x:
-  version "0.0.33"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
-  dependencies:
-    os-tmpdir "~1.0.2"
-
 to-array@0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
@@ -7129,7 +6969,7 @@ to-arraybuffer@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
 
-to-fast-properties@^1.0.1, to-fast-properties@^1.0.3:
+to-fast-properties@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
 
@@ -7292,7 +7132,7 @@ url-parse@1.0.x:
     querystringify "0.0.x"
     requires-port "1.0.x"
 
-url-parse@^1.1.8:
+url-parse@^1.1.8, url-parse@^1.1.9:
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.9.tgz#c67f1d775d51f0a18911dd7b3ffad27bb9e5bd19"
   dependencies:
@@ -7810,3 +7650,18 @@ zan-doc@^0.2.12:
     markdown-it-container "^2.0.0"
     node-watch "^0.5.5"
     nprogress "^0.2.0"
+
+zan-jquery@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/zan-jquery/-/zan-jquery-1.0.2.tgz#d9a45088d0d152cfe41729aca70b6682e30ce5cf"
+
+zan-utils@^1.0.14:
+  version "1.0.14"
+  resolved "https://registry.npmjs.org/zan-utils/-/zan-utils-1.0.14.tgz#cff43f1cf8e6c81343134c3a49dc4bccf3e82585"
+  dependencies:
+    fecha "^2.3.1"
+    jquery "1.12.4"
+    lodash "^4.16.4"
+    raf "^3.3.2"
+    url-parse "^1.1.9"
+    zan-jquery "^1.0.2"