picker component

docs/examples/picker.md

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

packages/picker/src/picker-column.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="z-picker-column">
+  <div class="z-picker-column" :class="classNames">
     <div class="z-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
       <div
         v-for="item in currentValues"
@@ -53,7 +53,7 @@ export default {
 
   watch: {
     values(val) {
-      this.currentValue = val;
+      this.currentValues = val;
     },
 
     currentValues(val) {
@@ -66,7 +66,6 @@ export default {
       this.doOnValueChange();
 
       this.$emit('change', this);
-      this.$emit('input', val);
     }
   },
 
@@ -78,28 +77,41 @@ export default {
       return this.itemHeight * this.visibileColumnCount;
     },
 
+    /**
+     * 当前选中值在`values`中的索引
+     */
     valueIndex() {
       return this.currentValues.indexOf(this.currentValue);
     },
 
+    /**
+     * 计算picker的拖动范围
+     */
     dragRange() {
       var values = this.currentValues;
       var visibileColumnCount = this.visibileColumnCount;
       var itemHeight = this.itemHeight;
 
       return [ -itemHeight * (values.length - Math.ceil(visibileColumnCount / 2)), itemHeight * Math.floor(visibileColumnCount / 2) ];
+    },
+
+    /**
+     * 计算`classNames`
+     */
+    classNames() {
+      return this.className.split(' ');
     }
   },
 
   mounted() {
-    this.ready = true;
-    this.$emit('input', this.currentValue);
-
     this.initEvents();
     this.doOnValueChange();
   },
 
   methods: {
+    /**
+     * 将当前`value`值转换成需要垂直方向需要`translate`的值
+     */
     value2Translate(value) {
       let values = this.currentValues;
       let valueIndex = values.indexOf(value);
@@ -107,10 +119,13 @@ export default {
       let itemHeight = this.itemHeight;
 
       if (valueIndex !== -1) {
-        return (valueIndex - offset) * -itemHeight;
+        return (valueIndex - offset) * (-itemHeight);
       }
     },
 
+    /**
+     * 根据当前`translate`的值转换成当前选中的`value`
+     */
     translate2Value(translate) {
       let itemHeight = this.itemHeight;
       translate = Math.round(translate / itemHeight) * itemHeight;
@@ -120,6 +135,9 @@ export default {
       return this.currentValues[index];
     },
 
+    /**
+     * 初始化拖动事件
+     */
     initEvents() {
       var el = this.$refs.wrapper;
       var dragState = {};
@@ -196,6 +214,8 @@ export default {
       let value = this.currentValue;
       let wrapper = this.$refs.wrapper;
 
+      this.$emit('input', this.currentValue);
+
       translateUtil.translateElement(wrapper, null, this.value2Translate(value));
     }
   }

packages/picker/src/picker.vue

@@ -14,6 +14,7 @@
         :visible-item-count="visibleItemCount"
         @change="columnValueChange">
       </picker-column>
+      <div class="z-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
     </div>
   </div>
 </template>
@@ -97,7 +98,8 @@ export default {
      */
     getColumnValue(index) {
       let column = this.getColumn(index);
-      return column && column.value;
+      console.log(column)
+      return column && column.values[column.valueIndex];
     },
 
     /**

packages/zanui-css/src/picker.pcss

@@ -30,6 +30,42 @@
     }
   }
 
+  .z-picker-center-highlight {
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    top: 50%;
+    margin-top: -18px;
+    pointer-events: none;
+  }
+
+  .z-picker-center-highlight:before,
+  .z-picker-center-highlight:after {
+    content: '';
+    position: absolute;
+    height: 1px;
+    width: 100%;
+    background-color: #eaeaea;
+    display: block;
+    z-index: 15;
+    transform: scaleY(0.5);
+  }
+
+  .z-picker-center-highlight:before {
+    left: 0;
+    top: 0;
+    bottom: auto;
+    right: auto;
+  }
+
+  .z-picker-center-highlight:after {
+    left: 0;
+    bottom: 0;
+    right: auto;
+    top: auto;
+  }
+
   @b picker-column {
     font-size: 18px;
     overflow: hidden;