diff --git a/build/vue.config.js b/build/vue.config.js
index 0376840409ae4e0e139e0e7d383316c3b64aab24..67293206efeb9dc33b0784a18158050948d365dc 100644
--- a/build/vue.config.js
+++ b/build/vue.config.js
@@ -20,6 +20,7 @@ module.exports = {
   transpileDependencies: [],
   productionSourceMap: false,
   configureWebpack: webpackConfig,
+  parallel: process.env.UNI_PLATFORM !== 'h5' || process.env.UNI_WATCH !== 'false' || process.env.UNI_UI === 'true',
   chainWebpack: config => {
     config.devtool('source-map')
 
@@ -40,4 +41,4 @@ module.exports = {
   css: {
     extract: true
   }
-}
+}
diff --git a/packages/vue-cli-plugin-uni-optimize/packages/webpack-optimize-plugin/component.js b/packages/vue-cli-plugin-uni-optimize/packages/webpack-optimize-plugin/component.js
index 9b6edfc7ed5163e1c0bba62e00102232b85a0d9a..f8584d17309bf2c388ea218c2a97ea481a9f48f5 100644
--- a/packages/vue-cli-plugin-uni-optimize/packages/webpack-optimize-plugin/component.js
+++ b/packages/vue-cli-plugin-uni-optimize/packages/webpack-optimize-plugin/component.js
@@ -6,16 +6,26 @@ const {
   capitalize
 } = require('./util')
 
-const platformTags = ['audio', 'map', 'video', 'web-view', 'cover-view', 'cover-image']
+const platformTags = ['audio', 'map', 'video', 'web-view', 'cover-view', 'cover-image', 'picker']
 
-//input 在 pageHead 中有使用，resize-sensor 在很多组件中有使用，暂时直接加载
-const autoloadTags = ['input', 'resize-sensor']
+const autoloadTags = {
+  // input 在 pageHead 中有使用，resize-sensor 在很多组件中有使用，暂时直接加载
+  root: ['input', 'resize-sensor'],
+  other: {
+    picker: ['picker-view', 'picker-view-column']
+  }
+}
 
 module.exports = function updateComponents(tags) {
-  autoloadTags.forEach(tagName => {
+  autoloadTags.root.forEach(tagName => {
     tags.add(tagName)
   })
   tags = [...tags]
+  Object.keys(autoloadTags.other).forEach(tagName => {
+    if (tags.includes(tagName)) {
+      tags.push(...autoloadTags.other[tagName])
+    }
+  })
   const importsStr = tags.map(tagName => {
     if (platformTags.indexOf(tagName) !== -1) {
       return `import ${capitalize(camelize(tagName))} from 'uni-platform/view/components/${tagName}'`
@@ -44,4 +54,4 @@ ${componentsStr}
 
   fs.writeFileSync(path.resolve(dir, 'components.js'), content, 'utf8')
 
-}
+}
diff --git a/src/core/helpers/tags.js b/src/core/helpers/tags.js
index 664a5779280ca10d9659514965296e0b745c927d..42b16a8c7579994d595e5ecd642170ff43c9a7cc 100644
--- a/src/core/helpers/tags.js
+++ b/src/core/helpers/tags.js
@@ -8,7 +8,6 @@ module.exports = [
   'uni-page-refresh',
   'uni-actionsheet',
   'uni-modal',
-  'uni-picker',
   'uni-toast',
   'uni-resize-sensor',
 
diff --git a/src/core/view/components/picker/index.vue b/src/core/view/components/picker/index.vue
deleted file mode 100644
index e53c382fdc06c309c010ea667c4ba13df91f02ec..0000000000000000000000000000000000000000
--- a/src/core/view/components/picker/index.vue
+++ /dev/null
@@ -1,229 +0,0 @@
-<template>
-  <uni-picker @click.stop="_click">
-    <div>
-      <slot/>
-    </div>
-  </uni-picker>
-</template>
-
-<script>
-import {
-  emitter
-} from 'uni-mixins'
-const {
-  subscribe,
-  unsubscribe,
-  publishHandler
-} = UniViewJSBridge
-const mode = {
-  SELECTOR: 'selector',
-  MULTISELECTOR: 'multiSelector',
-  TIME: 'time',
-  DATE: 'date'
-  // 暂不支持城市选择
-  // REGION: 'region'
-}
-const fields = {
-  YEAR: 'year',
-  MONTH: 'month',
-  DAY: 'day'
-}
-export default {
-  name: 'Picker',
-  mixins: [emitter],
-  props: {
-    name: {
-      type: String,
-      default: ''
-    },
-    range: {
-      type: Array,
-      default () {
-        return []
-      }
-    },
-    rangeKey: {
-      type: String,
-      default: ''
-    },
-    value: {
-      type: [Number, String, Array],
-      default: 0
-    },
-    mode: {
-      type: String,
-      default: mode.SELECTOR,
-      validator (val) {
-        return Object.values(mode).indexOf(val) >= 0
-      }
-    },
-    fields: {
-      type: String,
-      default: 'day',
-      validator (val) {
-        return Object.values(fields).indexOf(val) >= 0
-      }
-    },
-    start: {
-      type: String,
-      default () {
-        if (this.mode === mode.TIME) {
-          return '00:00'
-        }
-        if (this.mode === mode.DATE) {
-          let year = (new Date()).getFullYear() - 100
-          switch (this.fields) {
-            case fields.YEAR:
-              return year
-            case fields.MONTH:
-              return year + '-01'
-            case fields.DAY:
-              return year + '-01-01'
-          }
-        }
-        return ''
-      }
-    },
-    end: {
-      type: String,
-      default () {
-        if (this.mode === mode.TIME) {
-          return '23:59'
-        }
-        if (this.mode === mode.DATE) {
-          let year = (new Date()).getFullYear() + 100
-          switch (this.fields) {
-            case fields.YEAR:
-              return year
-            case fields.MONTH:
-              return year + '-12'
-            case fields.DAY:
-              return year + '-12-31'
-          }
-        }
-        return ''
-      }
-    },
-    disabled: {
-      type: [Boolean, String],
-      default: false
-    }
-  },
-  data () {
-    return {
-      valueSync: this.value || 0,
-      visible: false,
-      valueChangeSource: ''
-    }
-  },
-  watch: {
-    value (val) {
-      if (Array.isArray(val)) {
-        if (!Array.isArray(this.valueSync)) {
-          this.valueSync = []
-        }
-        this.valueSync.length = val.length
-        val.forEach((val, index) => {
-          if (val !== this.valueSync[index]) {
-            this.$set(this.valueSync, index, val)
-          }
-        })
-      } else if (typeof val !== 'object') {
-        this.valueSync = val
-      }
-    },
-    valueSync (val) {
-      if (!this.valueChangeSource) {
-        this._show()
-      } else {
-        this.$emit('update:value', val)
-      }
-    }
-  },
-  created () {
-    this.$dispatch('Form', 'uni-form-group-update', {
-      type: 'add',
-      vm: this
-    })
-    Object.keys(this.$props).forEach(key => {
-      if (key !== 'value' && key !== 'name') {
-        this.$watch(key, this._show)
-      }
-    })
-  },
-  beforeDestroy () {
-    this.$dispatch('Form', 'uni-form-group-update', {
-      type: 'remove',
-      vm: this
-    })
-  },
-  destroyed () {
-    if (this.visible) {
-      const id = this.$page.id
-      publishHandler('hidePicker', {}, id)
-    }
-  },
-  methods: {
-    _click () {
-      if (this.disabled) {
-        return
-      }
-      const id = this.$page.id
-      subscribe(`${id}-picker-change`, this.change)
-      subscribe(`${id}-picker-columnchange`, this.columnchange)
-      subscribe(`${id}-picker-cancel`, this.cancel)
-      this.visible = true
-      this._show()
-    },
-    _show () {
-      if (this.visible) {
-        const id = this.$page.id
-        let options = Object.assign({}, this.$props)
-        options.value = this.valueSync
-        publishHandler('showPicker', options, id)
-      }
-    },
-    change (args) {
-      this.visible = false
-      const id = this.$page.id
-      unsubscribe(`${id}-picker-change`)
-      unsubscribe(`${id}-picker-columnchange`)
-      unsubscribe(`${id}-picker-cancel`)
-      if (!this.disabled) {
-        this.valueChangeSource = 'click'
-        let value = args.value
-        this.valueSync = Array.isArray(value) ? value.map(val => val) : value
-        this.$trigger('change', {}, {
-          value
-        })
-      }
-    },
-    columnchange (args) {
-      this.$trigger('columnchange', {}, args)
-    },
-    cancel (args) {
-      this.visible = false
-      const id = this.$page.id
-      unsubscribe(`${id}-picker-change`)
-      unsubscribe(`${id}-picker-columnchange`)
-      unsubscribe(`${id}-picker-cancel`)
-      this.$trigger('cancel', {}, {})
-    },
-    _getFormData () {
-      return {
-        value: this.valueSync,
-        key: this.name
-      }
-    },
-    _resetFormData () {
-      this.valueSync = ''
-    }
-  }
-}
-</script>
-
-<style>
-uni-picker {
-  display: block;
-}
-</style>
diff --git a/src/platforms/h5/components/app/index.vue b/src/platforms/h5/components/app/index.vue
index 0a0e4b9ad37e0c0872e86c9ad8d98194cca06026..a79dd7dd39d50cd55eb7aac147769125e7063c14 100644
--- a/src/platforms/h5/components/app/index.vue
+++ b/src/platforms/h5/components/app/index.vue
@@ -10,21 +10,17 @@
       v-if="hasTabBar"
       v-show="showTabBar"
       v-bind="tabBar" />
-    <toast
+    <toast
       v-if="$options.components.Toast"
       v-bind="showToast"/>
-    <action-sheet
+    <action-sheet
       v-if="$options.components.ActionSheet"
       v-bind="showActionSheet"
       @close="_onActionSheetClose" />
-    <modal
+    <modal
       v-if="$options.components.Modal"
       v-bind="showModal"
       @close="_onModalClose" />
-    <picker
-      v-if="$options.components.Picker"
-      v-bind="showPicker"
-      @close="_onPickerClose" />
   </uni-app>
 </template>
 <script>
diff --git a/src/platforms/h5/components/app/popup/index.js b/src/platforms/h5/components/app/popup/index.js
index a77fbba68a50e665dc23cda52072b1dbc8effc66..7b791bd61ddb19d5f5143772b5e4c23f291a9a84 100644
--- a/src/platforms/h5/components/app/popup/index.js
+++ b/src/platforms/h5/components/app/popup/index.js
@@ -1,11 +1,9 @@
 import Toast from './toast'
 import Modal from './modal'
-import Picker from './picker'
 import ActionSheet from './actionSheet'
 
 export default {
   Toast,
   Modal,
-  Picker,
   ActionSheet
-}
+}
diff --git a/src/platforms/h5/components/app/popup/mixins/picker.js b/src/platforms/h5/components/app/popup/mixins/picker.js
deleted file mode 100644
index 9d1751f681f5465065c85b50370bda89778cd172..0000000000000000000000000000000000000000
--- a/src/platforms/h5/components/app/popup/mixins/picker.js
+++ /dev/null
@@ -1,50 +0,0 @@
-const defaultProps = {
-  visible: false,
-  mode: '',
-  range: [],
-  rangeKey: '',
-  value: '',
-  disabled: false,
-  start: '',
-  end: '',
-  fields: 'day',
-  customItem: ''
-}
-
-export default {
-  data () {
-    return {
-      showPicker: {
-        visible: false
-      }
-    }
-  },
-  created () {
-    // 订阅 View 层的 showPicker 事件
-    UniServiceJSBridge.subscribe('showPicker', (args, pageId) => {
-      // 根据不同参数，渲染不同类型 picker(注意全局仅一个 picker 组件对象,每次 showPicker 需传入当前类型 picker 的完整参数)
-      this.showPicker = Object.assign(defaultProps, args, {
-        pageId,
-        visible: true
-      })
-    })
-    // 订阅 View 层的 hidePicker 事件
-    UniServiceJSBridge.subscribe('hidePicker', () => {
-      this._onPickerClose()
-    })
-    // 订阅页面返回跳转时触发的 uni.onHidePopup 事件，隐藏 picker
-    UniServiceJSBridge.on('onHidePopup', () => {
-      this._onPickerClose()
-    })
-  },
-  methods: {
-    // 处理 Picker close 回调
-    _onPickerClose () {
-      // 隐藏 picker 重置数据
-      this.showPicker.visible = false
-      this.showPicker.mode = 'selector'
-      this.showPicker.range = []
-      this.showPicker.value = 0
-    }
-  }
-}
diff --git a/src/platforms/h5/components/app/popup/picker.vue b/src/platforms/h5/view/components/picker/index.vue
similarity index 61%
rename from src/platforms/h5/components/app/popup/picker.vue
rename to src/platforms/h5/view/components/picker/index.vue
index a78d6d49afccfd8210fb6ea1560f96bdec62f0e0..f1c8f09de51e647cdbcde8b65ef77cab650147e2 100644
--- a/src/platforms/h5/components/app/popup/picker.vue
+++ b/src/platforms/h5/view/components/picker/index.vue
@@ -1,468 +1,567 @@
-<template>
-  <uni-picker @touchmove.prevent>
-    <transition name="uni-fade">
-      <div
-        v-show="visible"
-        class="uni-mask"
-        @click="_cancel"/>
-    </transition>
-    <div
-      :class="{'uni-picker-toggle':visible}"
-      class="uni-picker">
-      <div
-        class="uni-picker-header"
-        @click.stop>
-        <div
-          class="uni-picker-action uni-picker-action-cancel"
-          @click="_cancel">取消</div>
-        <div
-          class="uni-picker-action uni-picker-action-confirm"
-          @click="_change">确定</div>
-      </div>
-      <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"
-          :key="index0">
-          <div
-            v-for="(item,index) in range"
-            :key="index"
-            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>
-  </uni-picker>
-</template>
-<script>
-import {
-  formatDateTime
-} from 'uni-shared'
-
-const mode = {
-  SELECTOR: 'selector',
-  MULTISELECTOR: 'multiSelector',
-  TIME: 'time',
-  DATE: 'date',
-  REGION: 'region'
-}
-const fields = {
-  YEAR: 'year',
-  MONTH: 'month',
-  DAY: 'day'
-}
-export default {
-  name: 'Picker',
-  props: {
-    pageId: {
-      type: Number,
-      default: 0
-    },
-    range: {
-      type: Array,
-      default () {
-        return []
-      }
-    },
-    rangeKey: {
-      type: String,
-      default: ''
-    },
-    value: {
-      type: [Number, String, Array],
-      default: 0
-    },
-    mode: {
-      type: String,
-      default: mode.SELECTOR
-    },
-    fields: {
-      type: String,
-      default: fields.DAY
-    },
-    start: {
-      type: String,
-      default () {
-        if (this.mode === mode.TIME) {
-          return '00:00'
-        }
-        if (this.mode === mode.DATE) {
-          let year = (new Date()).getFullYear() - 150
-          switch (this.fields) {
-            case fields.YEAR:
-              return year
-            case fields.MONTH:
-              return year + '-01'
-            case fields.DAY:
-              return year + '-01-01'
-          }
-        }
-        return ''
-      }
-    },
-    end: {
-      type: String,
-      default () {
-        if (this.mode === mode.TIME) {
-          return '23:59'
-        }
-        if (this.mode === mode.DATE) {
-          let year = (new Date()).getFullYear() + 150
-          switch (this.fields) {
-            case fields.YEAR:
-              return year
-            case fields.MONTH:
-              return year + '-12'
-            case fields.DAY:
-              return year + '-12-31'
-          }
-        }
-        return ''
-      }
-    },
-    disabled: {
-      type: [Boolean, String],
-      default: false
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      timeArray: [],
-      dateArray: [],
-      valueArray: [],
-      oldValueArray: []
-    }
-  },
-  computed: {
-    rangeArray () {
-      var val = this.range
-      switch (this.mode) {
-        case mode.SELECTOR:
-          return [val]
-        case mode.MULTISELECTOR:
-          return val
-        case mode.TIME:
-          return this.timeArray
-        case mode.DATE:
-        {
-          let dateArray = this.dateArray
-          switch (this.fields) {
-            case fields.YEAR:
-              return [dateArray[0]]
-            case fields.MONTH:
-              return [dateArray[0], dateArray[1]]
-            case fields.DAY:
-              return [dateArray[0], dateArray[1], dateArray[2]]
-          }
-        }
-      }
-    },
-    startArray () {
-      var splitStr = this.mode === mode.DATE ? '-' : ':'
-      var array = this.mode === mode.DATE ? this.dateArray : this.timeArray
-      var val = this.start.split(splitStr).map((val, i) => array[i].indexOf(
-        val))
-      if (val.indexOf(-1) >= 0) {
-        val = array.map(() => 0)
-      }
-      return val
-    },
-    endArray () {
-      var splitStr = this.mode === mode.DATE ? '-' : ':'
-      var array = this.mode === mode.DATE ? this.dateArray : this.timeArray
-      var val = this.end.split(splitStr).map((val, i) => array[i].indexOf(
-        val))
-      if (val.indexOf(-1) >= 0) {
-        val = array.map((val) => val.length - 1)
-      }
-      return val
-    },
-    units () {
-      switch (this.mode) {
-        case mode.DATE:
-          return ['年', '月', '日']
-        case mode.TIME:
-          return ['时', '分']
-        default:
-          return []
-      }
-    }
-  },
-  watch: {
-    valueArray (val) {
-      if (this.mode === mode.TIME || this.mode === mode.DATE) {
-        let getValue = this.mode === mode.TIME ? this._getTimeValue : this._getDateValue
-        let valueArray = this.valueArray
-        let startArray = this.startArray
-        let endArray = this.endArray
-        if (this.mode === mode.DATE) {
-          const dateArray = this.dateArray
-          let max = dateArray[2].length
-          let day = dateArray[2][valueArray[2]]
-          let realDay = new Date(`${dateArray[0][valueArray[0]]}/${dateArray[1][valueArray[1]]}/${day}`).getDate()
-          day = Number(day)
-          if (realDay < day) {
-            valueArray[2] -= realDay + max - day
-          }
-        }
-        if (getValue(valueArray) < getValue(startArray)) {
-          this._cloneArray(valueArray, startArray)
-        } else if (getValue(valueArray) > getValue(endArray)) {
-          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)
-          }
-        }
-      })
-    },
-    visible (val) {
-      if (!val) {
-        this.$nextTick(() => this._setValue())
-      }
-    }
-  },
-  created () {
-    this._createTime()
-    this._createDate()
-    this._setValue()
-    this.$watch('value', this._setValue)
-    this.$watch('mode', this._setValue)
-  },
-  methods: {
-    _createTime () {
-      var hours = []
-      var minutes = []
-      hours.splice(0, hours.length)
-      for (let i = 0; i < 24; i++) {
-        hours.push((i < 10 ? '0' : '') + i)
-      }
-      minutes.splice(0, minutes.length)
-      for (let i = 0; i < 60; i++) {
-        minutes.push((i < 10 ? '0' : '') + i)
-      }
-      this.timeArray.push(hours, minutes)
-    },
-    _createDate () {
-      var years = []
-      var year = (new Date()).getFullYear()
-      for (let i = year - 150, end = year + 150; i <= end; i++) {
-        years.push(String(i))
-      }
-      var months = []
-      for (let i = 1; i <= 12; i++) {
-        months.push((i < 10 ? '0' : '') + i)
-      }
-      var days = []
-      for (let i = 1; i <= 31; i++) {
-        days.push((i < 10 ? '0' : '') + i)
-      }
-      this.dateArray.push(years, months, days)
-    },
-    _getTimeValue (val) {
-      return val[0] * 60 + val[1]
-    },
-    _getDateValue (val) {
-      return val[0] * 366 + (val[1] || 0) * 31 + (val[2] || 0)
-    },
-    /**
-     * 将右侧数组值同步到左侧（交集部分）
-     */
-    _cloneArray (val1, val2) {
-      for (let i = 0; i < val1.length && i < val2.length; i++) {
-        val1[i] = val2[i]
-      }
-    },
-    _setValue () {
-      var val = this.value
-      var valueArray
-      switch (this.mode) {
-        case mode.SELECTOR:
-          valueArray = [val]
-          break
-        case mode.MULTISELECTOR:
-          valueArray = [...val]
-          break
-        case mode.TIME:
-          // 处理默认值为当前时间
-          if (this.value === 0) {
-            val = formatDateTime({
-              mode: mode.TIME
-            })
-          }
-          valueArray = val.split(':').map((val, i) => this.timeArray[i].indexOf(val))
-          break
-        case mode.DATE:
-          // 处理默认值为当前日期
-          if (this.value === 0) {
-            val = formatDateTime({
-              mode: mode.DATE
-            })
-          }
-          valueArray = val.split('-').map((val, i) => this.dateArray[i].indexOf(val))
-          break
-      }
-      this.oldValueArray = [...valueArray]
-      this.valueArray = [...valueArray]
-    },
-    _getValue () {
-      var val = this.valueArray
-      switch (this.mode) {
-        case mode.SELECTOR:
-          return val[0]
-        case mode.MULTISELECTOR:
-          return val.map(val => val)
-        case mode.TIME:
-          return this.valueArray.map((val, i) => this.timeArray[i][val]).join(':')
-        case mode.DATE:
-          return this.valueArray.map((val, i) => this.dateArray[i][val]).join('-')
-      }
-    },
-    _change () {
-      this.$emit('close')
-      // 触发 View 层 change 事件
-      UniServiceJSBridge.publishHandler(this.pageId + '-picker-change', {
-        value: this._getValue()
-      }, this.pageId)
-    },
-    _cancel () {
-      // 通知父组件修改 visible
-      this.$emit('close')
-      // 触发 View 层 cancel 事件
-      UniServiceJSBridge.publishHandler(this.pageId + '-picker-cancel', {}, this.pageId)
-    }
-  }
-}
-</script>
-<style>
-uni-picker {
-  display: block;
-  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;
-  visibility: hidden;
-  transition: transform 0.3s, visibility 0.3s;
-}
-
-uni-picker .uni-picker.uni-picker-toggle {
-  visibility: visible;
-  transform: translate(0, 0);
-}
-
-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-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-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-confirm {
-  float: right;
-  color: #007aff;
-}
-
-/* .uni-picker {
-  position: relative;
-}
-.uni-picker-units {
-  position: absolute;
-  display: flex;
-  width: 100%;
-  line-height: 16px;
-  font-size: 14px;
-  top: 50%;
-  margin-top: 22.5px;
-  transform: translateY(-50%);
-  overflow: hidden;
-  color: #666666;
-  pointer-events: none;
-}
-.uni-picker-units > div {
-  flex: 1;
-  text-align: center;
-  transform: translateX(2em);
-} */
-</style>
+<template>
+  <uni-picker @click.stop="_show">
+    <div
+      ref="picker"
+      class="uni-picker-container"
+      @touchmove.prevent>
+      <transition name="uni-fade">
+        <div
+          v-show="visible"
+          class="uni-mask"
+          @click="_cancel" />
+      </transition>
+      <div
+        :class="{'uni-picker-toggle':visible}"
+        class="uni-picker">
+        <div
+          class="uni-picker-header"
+          @click.stop>
+          <div
+            class="uni-picker-action uni-picker-action-cancel"
+            @click="_cancel">取消</div>
+          <div
+            class="uni-picker-action uni-picker-action-confirm"
+            @click="_change">确定</div>
+        </div>
+        <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"
+            :key="index0">
+            <div
+              v-for="(item,index) in range"
+              :key="index"
+              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>
+    <div>
+      <slot />
+    </div>
+  </uni-picker>
+</template>
+
+<script>
+import { emitter } from 'uni-mixins'
+import { formatDateTime } from 'uni-shared'
+
+const mode = {
+  SELECTOR: 'selector',
+  MULTISELECTOR: 'multiSelector',
+  TIME: 'time',
+  DATE: 'date'
+  // 暂不支持城市选择
+  // REGION: 'region'
+}
+const fields = {
+  YEAR: 'year',
+  MONTH: 'month',
+  DAY: 'day'
+}
+export default {
+  name: 'Picker',
+  mixins: [emitter],
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    range: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    rangeKey: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: [Number, String, Array],
+      default: 0
+    },
+    mode: {
+      type: String,
+      default: mode.SELECTOR,
+      validator (val) {
+        return Object.values(mode).indexOf(val) >= 0
+      }
+    },
+    fields: {
+      type: String,
+      default: 'day',
+      validator (val) {
+        return Object.values(fields).indexOf(val) >= 0
+      }
+    },
+    start: {
+      type: String,
+      default () {
+        if (this.mode === mode.TIME) {
+          return '00:00'
+        }
+        if (this.mode === mode.DATE) {
+          let year = new Date().getFullYear() - 100
+          switch (this.fields) {
+            case fields.YEAR:
+              return year
+            case fields.MONTH:
+              return year + '-01'
+            case fields.DAY:
+              return year + '-01-01'
+          }
+        }
+        return ''
+      }
+    },
+    end: {
+      type: String,
+      default () {
+        if (this.mode === mode.TIME) {
+          return '23:59'
+        }
+        if (this.mode === mode.DATE) {
+          let year = new Date().getFullYear() + 100
+          switch (this.fields) {
+            case fields.YEAR:
+              return year
+            case fields.MONTH:
+              return year + '-12'
+            case fields.DAY:
+              return year + '-12-31'
+          }
+        }
+        return ''
+      }
+    },
+    disabled: {
+      type: [Boolean, String],
+      default: false
+    }
+  },
+  data () {
+    return {
+      valueSync: this.value || 0,
+      visible: false,
+      valueChangeSource: '',
+      timeArray: [],
+      dateArray: [],
+      valueArray: [],
+      oldValueArray: []
+    }
+  },
+  computed: {
+    rangeArray () {
+      var val = this.range
+      switch (this.mode) {
+        case mode.SELECTOR:
+          return [val]
+        case mode.MULTISELECTOR:
+          return val
+        case mode.TIME:
+          return this.timeArray
+        case mode.DATE:
+        {
+          let dateArray = this.dateArray
+          switch (this.fields) {
+            case fields.YEAR:
+              return [dateArray[0]]
+            case fields.MONTH:
+              return [dateArray[0], dateArray[1]]
+            case fields.DAY:
+              return [dateArray[0], dateArray[1], dateArray[2]]
+          }
+        }
+      }
+    },
+    startArray () {
+      var splitStr = this.mode === mode.DATE ? '-' : ':'
+      var array = this.mode === mode.DATE ? this.dateArray : this.timeArray
+      var val = this.start.split(splitStr).map((val, i) => array[i].indexOf(
+        val))
+      if (val.indexOf(-1) >= 0) {
+        val = array.map(() => 0)
+      }
+      return val
+    },
+    endArray () {
+      var splitStr = this.mode === mode.DATE ? '-' : ':'
+      var array = this.mode === mode.DATE ? this.dateArray : this.timeArray
+      var val = this.end.split(splitStr).map((val, i) => array[i].indexOf(
+        val))
+      if (val.indexOf(-1) >= 0) {
+        val = array.map((val) => val.length - 1)
+      }
+      return val
+    },
+    units () {
+      switch (this.mode) {
+        case mode.DATE:
+          return ['年', '月', '日']
+        case mode.TIME:
+          return ['时', '分']
+        default:
+          return []
+      }
+    }
+  },
+  watch: {
+    value (val) {
+      if (Array.isArray(val)) {
+        if (!Array.isArray(this.valueSync)) {
+          this.valueSync = []
+        }
+        this.valueSync.length = val.length
+        val.forEach((val, index) => {
+          if (val !== this.valueSync[index]) {
+            this.$set(this.valueSync, index, val)
+          }
+        })
+      } else if (typeof val !== 'object') {
+        this.valueSync = val
+      }
+    },
+    valueSync (value) {
+      if (this.valueChangeSource) {
+        this.$trigger(
+          'change',
+          {},
+          {
+            value
+          }
+        )
+      }
+    },
+    valueArray (val) {
+      if (this.mode === mode.TIME || this.mode === mode.DATE) {
+        let getValue =
+          this.mode === mode.TIME ? this._getTimeValue : this._getDateValue
+        let valueArray = this.valueArray
+        let startArray = this.startArray
+        let endArray = this.endArray
+        if (this.mode === mode.DATE) {
+          const dateArray = this.dateArray
+          let max = dateArray[2].length
+          let day = dateArray[2][valueArray[2]]
+          let realDay = new Date(
+            `${dateArray[0][valueArray[0]]}/${
+              dateArray[1][valueArray[1]]
+            }/${day}`
+          ).getDate()
+          day = Number(day)
+          if (realDay < day) {
+            valueArray[2] -= realDay + max - day
+          }
+        }
+        if (getValue(valueArray) < getValue(startArray)) {
+          this._cloneArray(valueArray, startArray)
+        } else if (getValue(valueArray) > getValue(endArray)) {
+          this._cloneArray(valueArray, endArray)
+        }
+      }
+      val.forEach((value, column) => {
+        if (value !== this.oldValueArray[column]) {
+          this.oldValueArray[column] = value
+          if (this.mode === mode.MULTISELECTOR) {
+            this.$trigger('columnchange', {}, {
+              column,
+              value
+            }
+            )
+          }
+        }
+      })
+    }
+  },
+  created () {
+    this.$dispatch('Form', 'uni-form-group-update', {
+      type: 'add',
+      vm: this
+    })
+    this._createTime()
+    this._createDate()
+    this.$watch('valueSync', this._setValue)
+    this.$watch('mode', this._setValue)
+  },
+  beforeDestroy () {
+    this.$dispatch('Form', 'uni-form-group-update', {
+      type: 'remove',
+      vm: this
+    })
+  },
+  methods: {
+    _show () {
+      if (this.disabled) {
+        return
+      }
+      this.valueChangeSource = ''
+      this._setValue()
+      var $picker = this.$refs.picker
+      $picker.remove();
+      (document.querySelector('uni-app') || document.body).append($picker)
+      $picker.style.display = 'block'
+      setTimeout(() => {
+        this.visible = true
+      }, 20)
+    },
+    _getFormData () {
+      return {
+        value: this.valueSync,
+        key: this.name
+      }
+    },
+    _resetFormData () {
+      this.valueSync = ''
+    },
+    _createTime () {
+      var hours = []
+      var minutes = []
+      hours.splice(0, hours.length)
+      for (let i = 0; i < 24; i++) {
+        hours.push((i < 10 ? '0' : '') + i)
+      }
+      minutes.splice(0, minutes.length)
+      for (let i = 0; i < 60; i++) {
+        minutes.push((i < 10 ? '0' : '') + i)
+      }
+      this.timeArray.push(hours, minutes)
+    },
+    _createDate () {
+      var years = []
+      var year = new Date().getFullYear()
+      for (let i = year - 150, end = year + 150; i <= end; i++) {
+        years.push(String(i))
+      }
+      var months = []
+      for (let i = 1; i <= 12; i++) {
+        months.push((i < 10 ? '0' : '') + i)
+      }
+      var days = []
+      for (let i = 1; i <= 31; i++) {
+        days.push((i < 10 ? '0' : '') + i)
+      }
+      this.dateArray.push(years, months, days)
+    },
+    _getTimeValue (val) {
+      return val[0] * 60 + val[1]
+    },
+    _getDateValue (val) {
+      return val[0] * 366 + (val[1] || 0) * 31 + (val[2] || 0)
+    },
+    /**
+     * 将右侧数组值同步到左侧（交集部分）
+     */
+    _cloneArray (val1, val2) {
+      for (let i = 0; i < val1.length && i < val2.length; i++) {
+        val1[i] = val2[i]
+      }
+    },
+    _setValue () {
+      var val = this.valueSync
+      var valueArray
+      switch (this.mode) {
+        case mode.SELECTOR:
+          valueArray = [val]
+          break
+        case mode.MULTISELECTOR:
+          valueArray = [...val]
+          break
+        case mode.TIME:
+          // 处理默认值为当前时间
+          if (this.value === 0) {
+            val = formatDateTime({
+              mode: mode.TIME
+            })
+          }
+          valueArray = val
+            .split(':')
+            .map((val, i) => this.timeArray[i].indexOf(val))
+          break
+        case mode.DATE:
+          // 处理默认值为当前日期
+          if (this.value === 0) {
+            val = formatDateTime({
+              mode: mode.DATE
+            })
+          }
+          valueArray = val
+            .split('-')
+            .map((val, i) => this.dateArray[i].indexOf(val))
+          break
+      }
+      this.oldValueArray = [...valueArray]
+      this.valueArray = [...valueArray]
+    },
+    _getValue () {
+      var val = this.valueArray
+      switch (this.mode) {
+        case mode.SELECTOR:
+          return val[0]
+        case mode.MULTISELECTOR:
+          return val.map(val => val)
+        case mode.TIME:
+          return this.valueArray
+            .map((val, i) => this.timeArray[i][val])
+            .join(':')
+        case mode.DATE:
+          return this.valueArray
+            .map((val, i) => this.dateArray[i][val])
+            .join('-')
+      }
+    },
+    _change () {
+      this._close()
+      this.valueChangeSource = 'click'
+      let value = this._getValue()
+      this.valueSync = Array.isArray(value) ? value.map(val => val) : value
+    },
+    _cancel () {
+      this._close()
+      this.$trigger('cancel', {}, {})
+    },
+    _close () {
+      this.visible = false
+      setTimeout(() => {
+        var $picker = this.$refs.picker
+        $picker.remove()
+        this.$el.prepend($picker)
+        $picker.style.display = 'none'
+      }, 260)
+    }
+  }
+}
+</script>
+
+<style>
+uni-picker {
+  display: block;
+}
+
+.uni-picker-container {
+  display: none;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  z-index: 999;
+  font-size: 16px;
+}
+
+.uni-picker-container .uni-picker * {
+  box-sizing: border-box;
+}
+
+.uni-picker-container .uni-picker {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  transform: translate(0, 100%);
+  backface-visibility: hidden;
+  z-index: 999;
+  width: 100%;
+  background-color: #efeff4;
+  visibility: hidden;
+  transition: transform 0.3s, visibility 0.3s;
+}
+
+.uni-picker-container .uni-picker.uni-picker-toggle {
+  visibility: visible;
+  transform: translate(0, 0);
+}
+
+.uni-picker-container .uni-picker-content {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 238px;
+  background-color: white;
+}
+
+.uni-picker-container .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-container .uni-picker-header {
+  display: block;
+  position: relative;
+  text-align: center;
+  width: 100%;
+  height: 45px;
+  background-color: #fff;
+}
+
+.uni-picker-container .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-container .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-container .uni-picker-action.uni-picker-action-cancel {
+  float: left;
+  color: #888;
+}
+
+.uni-picker-container .uni-picker-action.uni-picker-action-confirm {
+  float: right;
+  color: #007aff;
+}
+
+/* .uni-picker {
+  position: relative;
+}
+.uni-picker-units {
+  position: absolute;
+  display: flex;
+  width: 100%;
+  line-height: 16px;
+  font-size: 14px;
+  top: 50%;
+  margin-top: 22.5px;
+  transform: translateY(-50%);
+  overflow: hidden;
+  color: #666666;
+  pointer-events: none;
+}
+.uni-picker-units > div {
+  flex: 1;
+  text-align: center;
+  transform: translateX(2em);
+} */
+</style>