src/platforms/h5/view/components/picker/index.vue

<template>
  <uni-picker
    :disabled="disabled"
    @click="_show"
    v-on="$listeners"
  >
    <div
      ref="picker"
      class="uni-picker-container"
      :class="`uni-${mode}-${selectorTypeComputed}`"
      @wheel.prevent
      @touchmove.prevent
    >
      <transition name="uni-fade">
        <div
          v-show="visible"
          class="uni-mask uni-picker-mask"
          @click="_cancel"
          @mousemove="_fixInputPosition"
        />
      </transition>
      <div
        v-if="!system"
        :class="{ 'uni-picker-toggle': visible }"
        :style="popupStyle.content"
        class="uni-picker-custom"
      >
        <div
          class="uni-picker-header"
          @click.stop
        >
          <div
            class="uni-picker-action uni-picker-action-cancel"
            @click="_cancel"
          >
            {{ $$t("uni.picker.cancel") }}
          </div>
          <div
            class="uni-picker-action uni-picker-action-confirm"
            @click="_change"
          >
            {{ $$t("uni.picker.done") }}
          </div>
        </div>
        <v-uni-picker-view
          v-if="contentVisible"
          :value="_l10nColumn(valueArray)"
          class="uni-picker-content"
          @change="_pickerViewChange"
        >
          <v-uni-picker-view-column
            v-for="(rangeItem, index0) in _l10nColumn(rangeArray)"
            :key="index0"
          >
            <div
              v-for="(item, index) in rangeItem"
              :key="index"
              class="uni-picker-item"
            >
              {{
                typeof item === "object"
                  ? item[rangeKey] || ""
                  : _l10nItem(item, index0)
              }}
            </div>
          </v-uni-picker-view-column>
        </v-uni-picker-view>
        <div
          ref="select"
          class="uni-picker-select"
          @wheel.stop
          @touchmove.stop
        >
          <div
            v-for="(item, index) in rangeArray[0]"
            :key="index"
            class="uni-picker-item"
            :class="{ selected: valueArray[0] === index }"
            @click="
              valueArray[0] = index;
              _change();
            "
          >
            {{ typeof item === "object" ? item[rangeKey] || "" : item }}
          </div>
        </div>
        <div :style="popupStyle.triangle" />
      </div>
    </div>
    <div>
      <slot />
    </div>
    <div
      v-if="system"
      class="uni-picker-system"
      @mousemove="_fixInputPosition"
    >
      <input
        ref="input"
        :value="valueSync"
        :type="mode"
        tabindex="-1"
        :min="start"
        :max="end"
        :class="[system, popupStyle.dock]"
        @change.stop="_input"
      >
    </div>
    <keypress
      :disable="!visible"
      @esc="_cancel"
      @enter="_change"
    />
  </uni-picker>
</template>

<script>
import { emitter } from 'uni-mixins'
import { formatDateTime } from 'uni-shared'
import popup from '../../../components/app/popup/mixins/popup'
import keypress from '../../../helpers/keypress'
import {
  i18nMixin,
  getLocale
} from 'uni-core/helpers/i18n'

function getDefaultStartValue () {
  if (this.mode === mode.TIME) {
    return '00:00'
  }
  if (this.mode === mode.DATE) {
    const year = new Date().getFullYear() - 150
    switch (this.fields) {
      case fields.YEAR:
        return year.toString()
      case fields.MONTH:
        return year + '-01'
      default:
        return year + '-01-01'
    }
  }
  return ''
}

function getDefaultEndValue () {
  if (this.mode === mode.TIME) {
    return '23:59'
  }
  if (this.mode === mode.DATE) {
    const year = new Date().getFullYear() + 150
    switch (this.fields) {
      case fields.YEAR:
        return year.toString()
      case fields.MONTH:
        return year + '-12'
      default:
        return year + '-12-31'
    }
  }
  return ''
}

function getYearStartEnd (props) {
  const year = new Date().getFullYear()
  let start = year - 150
  let end = year + 150
  if (props.start) {
    const _year = new Date(props.start).getFullYear()
    if (!isNaN(_year) && _year < start) {
      start = _year
    }
  }
  if (props.end) {
    const _year = new Date(props.end).getFullYear()
    if (!isNaN(_year) && _year > end) {
      end = _year
    }
  }

  return {
    start,
    end
  }
}

const mode = {
  SELECTOR: 'selector',
  MULTISELECTOR: 'multiSelector',
  TIME: 'time',
  DATE: 'date'
  // 暂不支持城市选择
  // REGION: 'region'
}
const fields = {
  YEAR: 'year',
  MONTH: 'month',
  DAY: 'day'
}
const selectorType = {
  PICKER: 'picker',
  SELECT: 'select'
}
export default {
  name: 'Picker',
  components: { keypress },
  mixins: [i18nMixin, emitter, popup],
  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).includes(val)
      }
    },
    fields: {
      type: String,
      default: ''
    },
    start: {
      type: String,
      default: getDefaultStartValue
    },
    end: {
      type: String,
      default: getDefaultEndValue
    },
    disabled: {
      type: [Boolean, String],
      default: false
    },
    selectorType: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      valueSync: null,
      visible: false,
      contentVisible: false,
      popover: null,
      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:
        {
          const dateArray = this.dateArray
          switch (this.fields) {
            case fields.YEAR:
              return [dateArray[0]]
            case fields.MONTH:
              return [dateArray[0], dateArray[1]]
            default:
              return [dateArray[0], dateArray[1], dateArray[2]]
          }
        }
      }
      return []
    },
    startArray () {
      return this._getDateValueArray(this.start, getDefaultStartValue.bind(this)())
    },
    endArray () {
      return this._getDateValueArray(this.end, getDefaultEndValue.bind(this)())
    },
    selectorTypeComputed () {
      const type = this.selectorType
      if (Object.values(selectorType).includes(type)) {
        return type
      }
      return String(navigator.vendor).indexOf('Apple') === 0 && navigator.maxTouchPoints > 0 ? selectorType.PICKER : selectorType.SELECT
    },
    system () {
      if (this.mode === mode.DATE && !Object.values(fields).includes(this.fields) && this.isDesktop && /win|mac/i.test(navigator.platform)) {
        if (navigator.vendor === 'Google Inc.') {
          return 'chrome'
        } else if (/Firefox/.test(navigator.userAgent)) {
          return 'firefox'
        }
      }
      return ''
    }
  },
  watch: {
    visible (val) {
      if (val) {
        clearTimeout(this.__contentVisibleDelay)
        this.contentVisible = val
        this._select()
      } else {
        this.__contentVisibleDelay = setTimeout(() => {
          this.contentVisible = val
        }, 300)
      }
    },
    value () {
      this._setValueSync()
    },
    mode () {
      this._setValueSync()
    },
    range () {
      this._setValueSync()
    },
    valueSync () {
      this._setValueArray()
    },
    valueArray (val) {
      if (this.mode === mode.TIME || this.mode === mode.DATE) {
        const getValue =
          this.mode === mode.TIME ? this._getTimeValue : this._getDateValue
        const valueArray = this.valueArray
        const startArray = this.startArray
        const endArray = this.endArray
        if (this.mode === mode.DATE) {
          const dateArray = this.dateArray
          const max = dateArray[2].length
          const day = Number(dateArray[2][valueArray[2]]) || 1
          const realDay = new Date(
            `${dateArray[0][valueArray[0]]}/${dateArray[1][valueArray[1]]
            }/${day}`
          ).getDate()
          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._setValueSync()
  },
  beforeDestroy () {
    this.$refs.picker.remove()
    this.$dispatch('Form', 'uni-form-group-update', {
      type: 'remove',
      vm: this
    })
  },
  methods: {
    _show (event) {
      if (this.disabled) {
        return
      }
      this.valueChangeSource = ''
      var $picker = this.$refs.picker
      $picker.remove();
      (document.querySelector('uni-app') || document.body).appendChild($picker)
      $picker.style.display = 'block'
      const rect = event.currentTarget.getBoundingClientRect()
      this.popover = {
        top: rect.top,
        left: rect.left,
        width: rect.width,
        height: rect.height
      }
      setTimeout(() => {
        this.visible = true
      }, 20)
    },
    _getFormData () {
      return {
        value: this.valueSync,
        key: this.name
      }
    },
    _resetFormData () {
      switch (this.mode) {
        case mode.SELECTOR:
          this.valueSync = 0
          break
        case mode.MULTISELECTOR:
          this.valueSync = this.value.map(val => 0)
          break
        case mode.DATE:
        case mode.TIME:
          this.valueSync = ''
          break
        default:
          break
      }
    },
    _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 = getYearStartEnd(this)
      for (let i = year.start, end = year.end; 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) {
      const DAY = 31
      return val[0] * DAY * 12 + (val[1] || 0) * DAY + (val[2] || 0)
    },
    /**
     * 将右侧数组值同步到左侧（交集部分）
     */
    _cloneArray (val1, val2) {
      for (let i = 0; i < val1.length && i < val2.length; i++) {
        val1[i] = val2[i]
      }
    },
    _setValueSync () {
      let val = this.value
      switch (this.mode) {
        case mode.MULTISELECTOR:
          {
            if (!Array.isArray(val)) {
              val = this.valueArray
            }
            if (!Array.isArray(this.valueSync)) {
              this.valueSync = []
            }
            const length = this.valueSync.length = Math.max(val.length, this.range.length)
            for (let index = 0; index < length; index++) {
              const val0 = Number(val[index])
              const val1 = Number(this.valueSync[index])
              const val2 = isNaN(val0) ? (isNaN(val1) ? 0 : val1) : val0
              const maxVal = this.range[index] ? this.range[index].length - 1 : 0
              this.valueSync.splice(index, 1, (val2 < 0 || val2 > maxVal) ? 0 : val2)
            }
          }
          break
        case mode.TIME:
        case mode.DATE:
          this.valueSync = String(val)
          break
        default: {
          const valueSync = Number(val)
          this.valueSync = valueSync < 0 ? 0 : valueSync
          break
        }
      }
    },
    _setValueArray () {
      var val = this.valueSync
      var valueArray
      switch (this.mode) {
        case mode.MULTISELECTOR:
          valueArray = [...val]
          break
        case mode.TIME:
          valueArray = this._getDateValueArray(val, formatDateTime({
            mode: mode.TIME
          }))
          break
        case mode.DATE:
          valueArray = this._getDateValueArray(val, formatDateTime({
            mode: mode.DATE
          }))
          break
        default:
          valueArray = [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('-')
      }
    },
    _getDateValueArray (valueStr, defaultValue) {
      const splitStr = this.mode === mode.DATE ? '-' : ':'
      const array = this.mode === mode.DATE ? this.dateArray : this.timeArray
      let max
      if (this.mode === mode.TIME) {
        max = 2
      } else {
        switch (this.fields) {
          case fields.YEAR:
            max = 1
            break
          case fields.MONTH:
            max = 2
            break
          default:
            max = 3
            break
        }
      }
      const inputArray = String(valueStr).split(splitStr)
      let value = []
      for (let i = 0; i < max; i++) {
        const val = inputArray[i]
        value.push(array[i].indexOf(val))
      }
      if (value.indexOf(-1) >= 0) {
        value = defaultValue ? this._getDateValueArray(defaultValue) : value.map(() => 0)
      }
      return value
    },
    _change () {
      this._close()
      this.valueChangeSource = 'click'
      const value = this._getValue()
      this.valueSync = Array.isArray(value) ? value.map(val => val) : value
      this.$trigger('change', {}, {
        value
      })
    },
    _cancel ($event) {
      if (this.system === 'firefox') {
        // Firefox 在 input 同位置区域点击无法隐藏控件
        const { top, left, width, height } = this.popover
        const { pageX, pageY } = $event
        if (pageX > left && pageX < left + width && pageY > top && pageY < top + height) {
          return
        }
      }
      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)
    },
    _select () {
      if (this.mode === mode.SELECTOR && this.selectorTypeComputed === selectorType.SELECT) {
        this.$refs.select.scrollTop = this.valueArray[0] * 34
      }
    },
    _input ($event) {
      this.valueSync = $event.target.value
      this.$nextTick(() => {
        this._change()
      })
    },
    _fixInputPosition ($event) {
      if (this.system === 'chrome') {
        const rect = this.$el.getBoundingClientRect()
        const style = this.$refs.input.style
        const fontSize = 32
        style.left = `${$event.clientX - rect.left - fontSize * 1.5}px`
        style.top = `${$event.clientY - rect.top - fontSize * 0.5}px`
      }
    },
    _pickerViewChange (event) {
      this.valueArray = this._l10nColumn(event.detail.value, true)
    },
    _l10nColumn (array, normalize) {
      if (this.mode === mode.DATE) {
        const locale = getLocale()
        if (!locale.startsWith('zh')) {
          switch (this.fields) {
            case fields.YEAR:
              return array
            case fields.MONTH:
              return [array[1], array[0]]
            default:
              switch (locale) {
                case 'es':
                case 'fr':
                  return [array[2], array[1], array[0]]
                // case 'en':
                default:
                  return normalize ? [array[2], array[0], array[1]] : [array[1], array[2], array[0]]
              }
          }
        }
      }
      return array
    },
    _l10nItem (item, index) {
      if (this.mode === mode.DATE) {
        const locale = getLocale()
        if (locale.startsWith('zh')) {
          const array = ['年', '月', '日']
          return item + array[index]
        } else if (this.fields !== fields.YEAR && index === (this.fields !== fields.MONTH && (locale === 'es' || locale === 'fr') ? 1 : 0)) {
          let array
          switch (locale) {
            case 'es':
              array = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', '​​julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre']
              break
            case 'fr':
              array = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
              break
            // case 'en':
            default:
              array = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
              break
          }
          return array[Number(item) - 1]
        }
      }
      return item
    }
  }
}
</script>

<style>
uni-picker {
  position: relative;
  display: block;
  cursor: pointer;
}

uni-picker[hidden] {
  display: none;
}

uni-picker[disabled] {
  cursor: not-allowed;
}

.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-custom * {
  box-sizing: border-box;
}

.uni-picker-container .uni-picker-custom {
  position: fixed;
  left: 0;
  bottom: 0;
  transform: translate(0, 100%);
  backface-visibility: hidden;
  z-index: 999;
  width: 100%;
  background-color: #fff;
  visibility: hidden;
  transition: transform 0.3s, visibility 0.3s;
}

.uni-picker-container .uni-picker-custom.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;
  cursor: pointer;
}

.uni-picker-container .uni-picker-header {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  height: 45px;
}

.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;
  cursor: pointer;
}

.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-container .uni-picker-select {
  display: none;
}

.uni-picker-system {
  position: absolute;
  display: none;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.uni-picker-system > input {
  position: absolute;
  border: none;
  height: 100%;
  opacity: 0;
  /* Chrome 无效 */
  cursor: pointer;
}

.uni-picker-system > input.firefox {
  top: 0;
  left: 0;
  width: 100%;
}

.uni-picker-system > input.chrome {
  /* 日历空白位置宽度 32px */
  top: 0;
  left: 0;
  width: 2em;
  font-size: 32px;
  height: 32px;
}

@media screen and (min-width: 500px) and (min-height: 500px) {
  .uni-mask.uni-picker-mask {
    background: none;
  }
  .uni-picker-container .uni-picker-custom {
    width: 300px;
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    opacity: 0;
    border-radius: 5px;
    transition: opacity 0.3s, visibility 0.3s;
    box-shadow: 0px 0 20px 5px rgba(0, 0, 0, 0.3);
  }
  .uni-picker-container .uni-picker-header {
    border-radius: 5px 5px 0 0;
  }
  .uni-picker-container .uni-picker-content {
    /* transform 用于解决 Safari overflow 失效的问题 */
    transform: translate(0 0);
    overflow: hidden;
    border-radius: 0 0 5px 5px;
  }
  .uni-picker-container .uni-picker-custom.uni-picker-toggle {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  .uni-selector-select .uni-picker-header,
  .uni-selector-select .uni-picker-content {
    display: none;
  }
  .uni-selector-select .uni-picker-select {
    display: block;
    max-height: 300px;
    overflow: auto;
    background-color: white;
    border-radius: 5px;
    padding: 6px 0;
  }
  .uni-selector-select .uni-picker-item {
    padding: 0 10px;
    color: #555555;
  }
  .uni-selector-select .uni-picker-item:hover {
    background-color: #f6f6f6;
  }
  .uni-selector-select .uni-picker-item.selected {
    color: #007aff;
  }
}

@media (prefers-color-scheme: dark) {
  .uni-picker-container .uni-picker-content {
    background-color: var(--UI-BG-2);
  }
  .uni-picker-container .uni-picker-item,
  .uni-selector-select .uni-picker-item,
  .uni-picker-container .uni-picker-action.uni-picker-action-cancel {
    color: var(--UI-FG-0);
  }
  .uni-picker-container .uni-picker-custom {
    background-color: var(--UI-BG-2);
  }
  .uni-picker-container .uni-picker-header:after {
    border-bottom-color: var(--UI-FG-3);
  }
}
</style>