wot-design/src/mixins/picker.js

Mobile UI components built on vue.js

import pickerViewProps from 'wot-design/packages/picker-view/src/pickerViewProps'
import pickerProps from 'wot-design/packages/picker/src/pickerProps'
import locale from 'wot-design/src/mixins/locale'

export default {
  mixins: [locale],

  data () {
    return {
      currentTarget: this,
      showValue: '',
      lastColumns: [],
      popupShow: false
    }
  },

  props: {
    ...pickerViewProps,
    ...pickerProps
  },

  components: {
    CustomCell: {
      render (h) {
        const parent = this.$parent
        const {
          disabled,
          readonly,
          labelWidth,
          label,
          value,
          placeholder,
          showValue,
          showPopup,
          required,
          t,
          arrowHtml,
          ellipsis
        } = parent
        const fieldClass = ['wd-picker__field']
        // 右箭头
        const arrow = !disabled && !readonly ? (<i class='wd-picker__arrow wd-icon-arrow-right'></i>) : ''

        const noValue = !value || (value instanceof Array && !value.length)
        // 右侧展示值
        let valueLabel = (noValue ? placeholder : (arrowHtml ? '' : showValue)) || t('wd.picker.placeholder')
        let valueDiv
        if (arrowHtml && !noValue) {
          valueDiv = <div
            class={['wd-picker__value ', noValue ? 'wd-picker__placeholder' : '']}
            domPropsInnerHTML={ showValue }
          >
            { valueLabel }
          </div>
        } else {
          valueDiv = <div
            class={['wd-picker__value ', noValue ? 'wd-picker__placeholder' : '', ellipsis ? 'is-ellipsis' : '']}
          >
            { valueLabel }
          </div>
        }
        // 左侧label
        const labelWrapper = label || parent.$slots.label ? (<div
          class={['wd-picker__label', required ? 'is-required' : '']}
          style={labelWidth ? `min-width: ${labelWidth}; max-width: ${labelWidth}` : ''
          }>
          {parent.$slots.label || (<div>{label}</div>)}
        </div>) : ''
        // 自定义cell
        const cell = parent.$slots.default || <div class={fieldClass}>
          {labelWrapper}
          {valueDiv}
          {arrow}
        </div>

        return <div onClick={showPopup}>{cell}</div>
      }
    },
    toolbar: {
      props: {
        target: Object
      },
      render (h) {
        const { onCancel, onConfirm, cancelButtonText, confirmButtonText, title, loading, t } = this.target
        const cancelButton = (
          <span
            class="wd-picker__action wd-picker__action--cancel"
            onClick={onCancel}
          >
            {cancelButtonText || t('wd.picker.cancel')}
          </span>
        )

        const confirmButton = (
          <span
            onClick={loading ? () => { } : onConfirm}
            class={['wd-picker__action', loading ? 'is-loading' : '']}
          >
            {confirmButtonText || t('wd.picker.done')}
          </span>
        )

        const titleBlock = title ? <span class="wd-picker__title">{title}</span> : ''
        return (
          <div class="wd-picker__toolbar">{cancelButton}{titleBlock}{confirmButton}</div>
        )
      }
    }
  },

  computed: {
    customClass () {
      const rootClass = ['wd-picker']
      this.error && rootClass.push('is-error')
      this.alignRight && rootClass.push('is-align-right')
      this.disabled && rootClass.push('is-disabled')
      this.size && rootClass.push(`is-${this.size}`)
      this.label | this.$slots.default && rootClass.push('is-cell')

      return rootClass.join(' ')
    }
  },

  methods: {
    showPopup () {
      if (this.disabled || this.readonly) return
      this.showPopInit && this.showPopInit()
      this.popupShow = true
    },

    closePopup () {
      this.popupShow = false
    },

    getPickerView () {
      return this.$refs.pickerView
    }
  }
}