merge: merge master&&rebuild docs

docs/examples-dist/card.vue

@@ -3,13 +3,12 @@
 </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">
+                <zan-card 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">

docs/examples-dist/picker.vue

@@ -1,9 +1,13 @@
 <template><section class="demo-picker"><h1 class="demo-title">picker</h1><example-block title="基础用法">
                 <zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
 
+
+
               </example-block><example-block title="带toolbar的Picker">
                 <zan-picker :columns="pickerColumns" show-toolbar="" @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></zan-picker>
 
+
+
               </example-block></section></template>
 
 <script>

docs/examples-dist/progress.vue

@@ -22,13 +22,13 @@
               </example-block><example-block title="自定义颜色">
                 
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" pivottext="红色" color="#ed5050" :percentage="26"></zan-progress>
+  <zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" pivottext="橙色" color="#f60" :percentage="46"></zan-progress>
+  <zan-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></zan-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" pivottext="黄色" color="#f09000" :percentage="66"></zan-progress>
+  <zan-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></zan-progress>
 </div>
 
               </example-block></section></template>
@@ -36,7 +36,6 @@
   @component-namespace demo {
     @b progress {
       @e wrapper {
-        width: 100%;
         padding: 5px;
         margin: 20px 10px;
       }

docs/examples-docs/card.md

@@ -21,15 +21,12 @@
 :::demo 高级用法
 ```html
 <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">

docs/examples-docs/picker.md

@@ -44,6 +44,37 @@ export default {
 :::demo 基础用法
 ```html
 <zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
+
+<script>
+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>
 ```
 :::
 
@@ -52,6 +83,43 @@ export default {
 :::demo 带toolbar的Picker
 ```html
 <zan-picker :columns="pickerColumns" show-toolbar @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></zan-picker>
+
+<script>
+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]]);
+    },
+    handlePickerCancel() {
+      alert('picker cancel');
+    },
+    handlePickerConfirm() {
+      alert('picker confirm');
+    }
+  }
+};
+</script>
 ```
 :::
 

packages/card/src/card.vue

@@ -7,7 +7,7 @@
           <h4 v-text="title" class="zan-card__title"></h4>
         </slot>
         <slot name="desc">
-          <p v-if="desc" v-text="desc" class="zan-card__title"></p>
+          <p v-if="desc" v-text="desc" class="zan-card__desc"></p>
         </slot>
         <slot name="tags"></slot>
       </div>

packages/picker/src/picker-column.vue

@@ -6,7 +6,7 @@
         class="zan-picker-column__item"
         :class="{ 'zan-picker-column__item--selected': item === currentValue }"
         :style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">
-        {{item}}
+        {{ typeof item === 'object' && item[valueKey] ? item[valueKey] : item }}
       </div>
     </div>
   </div>
@@ -52,7 +52,8 @@ export default {
       type: Number,
       default: DEFAULT_ITEM_HEIGHT
     },
-    value: {}
+    value: {},
+    valueKey: String
   },
 
   data() {

packages/picker/src/picker.vue

@@ -14,7 +14,8 @@
         :class-name="item.className"
         :itemHeight="itemHeight"
         :visible-item-count="visibleItemCount"
-        @change="columnValueChange">
+        :value-key="valueKey"
+        @change="columnValueChange(index)">
       </picker-column>
       <div class="zan-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
     </div>
@@ -63,7 +64,8 @@ export default {
     showToolbar: {
       type: Boolean,
       default: false
-    }
+    },
+    valueKey: String
   },
 
   computed: {
@@ -81,16 +83,16 @@ export default {
 
   methods: {
     handlePickerCancel() {
-      this.$emit('cancel');
+      this.$emit('cancel', this.values);
     },
     handlePickerConfirm() {
-      this.$emit('confirm');
+      this.$emit('confirm', this.values);
     },
     /**
      * 处理列`change`事件
      */
-    columnValueChange() {
+    columnValueChange(index) {
-      this.$emit('change', this, this.values);
+      this.$emit('change', this, this.values, index);
     },
 
     /**

packages/zanui-css/src/card.css

@@ -2,7 +2,8 @@
 
 @component-namespace zan {
   @b card {
-    padding: 5px 15px;
+    padding: 5px 15px 5px 115px;
+    height: 90px;
     background: #FAFAFA;
     overflow: hidden;
     position: relative;
@@ -13,15 +14,17 @@
     }
 
     @e img {
-      float: left;
       width: 90px;
       height: 90px;
       border: 0;
+      position: absolute;
+      top: 5px;
+      left: 15px;
     }
 
     @e content {
-      margin-left: 100px;
       display: table;
+      width: 100%;
 
       @when center {
         display: table;
@@ -45,6 +48,7 @@
       color: #333;
       max-height: 40px;
       margin-bottom: 5px;
+      word-break: break-all;
       @mixin multi-ellipsis 2;
     }
 
@@ -52,6 +56,7 @@
       font-size: 12px;
       color: #666;
       max-height: 20px;
+      word-break: break-all;
       @mixin multi-ellipsis 1;
     }