fix: 修复picker组件多咧选择columnchange事件不触发的问题

build uni-h5 0.0.10

packages/uni-h5/package.json

 {
 	"name": "@dcloudio/uni-h5",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"description": "uni-app h5",
 	"main": "dist/index.umd.min.js",
 	"scripts": {

src/core/view/components/picker/index.vue

 <template>
   <uni-picker @click.stop="_click">
     <div>
-      <slot />
+      <slot/>
     </div>
   </uni-picker>
 </template>
@@ -176,7 +176,7 @@ export default {
       }
       const id = this.$page.id
       subscribe(`${id}-picker-change`, this.change)
-      // subscribe(`${id}-picker-columnchange`, this.columnchange)
+      subscribe(`${id}-picker-columnchange`, this.columnchange)
       subscribe(`${id}-picker-cancel`, this.cancel)
       this.visible = true
       this._show()
@@ -193,7 +193,7 @@ export default {
       this.visible = false
       const id = this.$page.id
       unsubscribe(`${id}-picker-change`)
-      // unsubscribe(`${id}-picker-columnchange`)
+      unsubscribe(`${id}-picker-columnchange`)
       unsubscribe(`${id}-picker-cancel`)
       if (!this.disabled) {
         this.valueChangeSource = 'click'
@@ -204,13 +204,14 @@ export default {
         })
       }
     },
-    // columnchange (args) {
-    // },
+    columnchange (args) {
+      this.$trigger('change', {}, args)
+    },
     cancel (args) {
       this.visible = false
       const id = this.$page.id
       unsubscribe(`${id}-picker-change`)
-      // unsubscribe(`${id}-picker-columnchange`)
+      unsubscribe(`${id}-picker-columnchange`)
       unsubscribe(`${id}-picker-cancel`)
       this.$trigger('cancel', {}, {})
     },

src/platforms/h5/components/app/popup/picker.vue

 <template>
   <uni-picker @touchmove.prevent>
     <transition name="uni-fade">
-      <div
-        v-show="visible"
-        class="uni-mask"
-        @click="_cancel" />
+      <div
+        v-show="visible"
+        class="uni-mask"
+        @click="_cancel"/>
     </transition>
-    <div
-      :class="{'uni-picker-toggle':visible}"
+    <div
+      :class="{'uni-picker-toggle':visible}"
       class="uni-picker">
-      <div
-        class="uni-picker-header"
+      <div
+        class="uni-picker-header"
         @click.stop>
-        <div
-          class="uni-picker-action uni-picker-action-cancel"
+        <div
+          class="uni-picker-action uni-picker-action-cancel"
           @click="_cancel">取消</div>
-        <div
-          class="uni-picker-action uni-picker-action-confirm"
+        <div
+          class="uni-picker-action uni-picker-action-confirm"
           @click="_change">确定</div>
       </div>
-      <v-uni-picker-view
-        v-if="visible"
-        :value.sync="valueArray"
+      <v-uni-picker-view
+        v-if="visible"
+        :value.sync="valueArray"
         class="uni-picker-content">
-        <v-uni-picker-view-column
-          v-for="(range,index0) in rangeArray"
+        <v-uni-picker-view-column
+          v-for="(range,index0) in rangeArray"
           :key="index0">
           <div
             v-for="(item,index) in range"
             :key="index"
-            class="uni-picker-item">{{ typeof item==='object'?item[rangeKey]||'':item }}{{ units[index0]||'' }}</div>
+            class="uni-picker-item"
+          >{{ typeof item==='object'?item[rangeKey]||'':item }}{{ units[index0]||'' }}</div>
         </v-uni-picker-view-column>
       </v-uni-picker-view>
       <!-- 第二种时间单位展示方式-暂时不用这种 -->
       <!-- <div v-if="units.length" class="uni-picker-units">
         <div v-for="(item,index) in units" :key="index">{{item}}</div>
-      </div> -->
+      </div>-->
     </div>
   </uni-picker>
 </template>
@@ -142,7 +143,8 @@ export default {
     return {
       timeArray: [],
       dateArray: [],
-      valueArray: []
+      valueArray: [],
+      oldValueArray: []
     }
   },
   computed: {
@@ -213,6 +215,18 @@ export default {
           this._cloneArray(valueArray, endArray)
         }
       }
+      val.forEach((value, column) => {
+        if (value !== this.oldValueArray[column]) {
+          this.oldValueArray[column] = value
+          if (this.mode === mode.MULTISELECTOR) {
+            // 触发 View 层 columnchange 事件
+            UniServiceJSBridge.publishHandler(this.pageId + '-picker-columnchange', {
+              column,
+              value
+            }, this.pageId)
+          }
+        }
+      })
     }
   },
   created () {
@@ -295,7 +309,8 @@ export default {
           valueArray = val.split('-').map((val, i) => this.dateArray[i].indexOf(val))
           break
       }
-      this.valueArray = valueArray
+      this.oldValueArray = [...valueArray]
+      this.valueArray = [...valueArray]
     },
     _getValue () {
       var val = this.valueArray
@@ -317,14 +332,6 @@ export default {
         value: this._getValue()
       }, this.pageId)
     },
-    // 暂时取消 columnchange 事件
-    // _columnchange (event) {
-    //   // 触发 View 层 columnchange 事件
-    //   UniServiceJSBridge.publishHandler(this.pageId + '-picker-columnchange', {
-    //     column: 0,
-    //     value: this._getValue()
-    //   }, this.pageId)
-    // },
     _cancel () {
       // 通知父组件修改 visible
       this.$emit('close')
@@ -335,109 +342,109 @@ export default {
 }
 </script>
 <style>
-	uni-picker {
-		display: block;
-		box-sizing: border-box;
-	}
+uni-picker {
+  display: block;
+  box-sizing: border-box;
+}
 
-	uni-picker .uni-picker {
-		position: fixed;
-		left: 0;
-		bottom: 0;
-		transform: translate(0, 100%);
-		backface-visibility: hidden;
-		z-index: 999;
-		width: 100%;
-		background-color: #efeff4;
-		transition: transform 0.3s;
-	}
+uni-picker .uni-picker {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  transform: translate(0, 100%);
+  backface-visibility: hidden;
+  z-index: 999;
+  width: 100%;
+  background-color: #efeff4;
+  transition: transform 0.3s;
+}
 
-	uni-picker .uni-picker.uni-picker-toggle {
-		transform: translate(0, 0);
-	}
+uni-picker .uni-picker.uni-picker-toggle {
+  transform: translate(0, 0);
+}
 
-	uni-picker .uni-picker * {
-		box-sizing: border-box;
-	}
+uni-picker .uni-picker * {
+  box-sizing: border-box;
+}
 
-	uni-picker .uni-picker {
-		position: fixed;
-		left: 0;
-		bottom: 0;
-		transform: translate(0, 100%);
-		backface-visibility: hidden;
-		z-index: 999;
-		width: 100%;
-		background-color: #efeff4;
-		transition: transform 0.3s;
-		transition: transform 0.3s;
-	}
+uni-picker .uni-picker {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  transform: translate(0, 100%);
+  backface-visibility: hidden;
+  z-index: 999;
+  width: 100%;
+  background-color: #efeff4;
+  transition: transform 0.3s;
+  transition: transform 0.3s;
+}
 
-	uni-picker .uni-picker-content {
-		position: relative;
-		display: block;
-		width: 100%;
-		height: 238px;
-		background-color: white;
-	}
+uni-picker .uni-picker-content {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 238px;
+  background-color: white;
+}
 
-	uni-picker .uni-picker-item {
-		padding: 0;
-		height: 34px;
-		line-height: 34px;
-		text-align: center;
-		color: #000;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
-	}
+uni-picker .uni-picker-item {
+  padding: 0;
+  height: 34px;
+  line-height: 34px;
+  text-align: center;
+  color: #000;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
 
-	uni-picker .uni-picker-header {
-		display: block;
-		position: relative;
-		text-align: center;
-		width: 100%;
-		height: 45px;
-		background-color: #fff;
-	}
+uni-picker .uni-picker-header {
+  display: block;
+  position: relative;
+  text-align: center;
+  width: 100%;
+  height: 45px;
+  background-color: #fff;
+}
 
-	uni-picker .uni-picker-header:after {
-		content: "";
-		position: absolute;
-		left: 0;
-		bottom: 0;
-		right: 0;
-		height: 1px;
-		clear: both;
-		border-bottom: 1px solid #e5e5e5;
-		color: #e5e5e5;
-		transform-origin: 0 100%;
-		transform: scaleY(0.5);
-	}
+uni-picker .uni-picker-header:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 1px;
+  clear: both;
+  border-bottom: 1px solid #e5e5e5;
+  color: #e5e5e5;
+  transform-origin: 0 100%;
+  transform: scaleY(0.5);
+}
 
-	uni-picker .uni-picker-action {
-		display: block;
-		max-width: 50%;
-		top: 0;
-		height: 100%;
-		box-sizing: border-box;
-		padding: 0 14px;
-		font-size: 17px;
-		line-height: 45px;
-		overflow: hidden;
-	}
+uni-picker .uni-picker-action {
+  display: block;
+  max-width: 50%;
+  top: 0;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 14px;
+  font-size: 17px;
+  line-height: 45px;
+  overflow: hidden;
+}
 
-	uni-picker .uni-picker-action.uni-picker-action-cancel {
-		float: left;
-		color: #888;
-	}
+uni-picker .uni-picker-action.uni-picker-action-cancel {
+  float: left;
+  color: #888;
+}
 
-	uni-picker .uni-picker-action.uni-picker-action-confirm {
-		float: right;
-		color: #007aff;
-	}
+uni-picker .uni-picker-action.uni-picker-action-confirm {
+  float: right;
+  color: #007aff;
+}
 
-	/* .uni-picker {
+/* .uni-picker {
   position: relative;
 }
 .uni-picker-units {