bjquanjiang
/
DigitalScholl

<template>
  <view class="cu-form-group">
    <view class="title">
      <text v-if="required" class="lr-required">*</text>
      {{ title }}
    </view>
    <picker
      @change="change"
      :customitem="customitem"
      :value="value"
      :disabled="disabled"
      :class="[arrow ? 'picker-arrow' : '']"
      mode="region"
    >
      <view class="picker">
        <slot>{{ display || placeholder }}</slot>
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  name: 'l-region-picker',

  props: {
    title: {},
    disabled: {},
    required: {},
    placeholder: { default: '请选择地区…' },
    multiple: {},
    customitem: {},
    value: {},
    arrow: { default: true }
  },

  methods: {
    change(e) {
      this.$emit('change', e.detail.value)
      this.$emit('input', e.detail.value)
    }
  },

  computed: {
    display() {
      if (!this.value || !this.value.length) {
        return this.placeholder || ''
      }

      return this.value.join(' ')
    }
  }
}
</script>