lcoco/components/en-utils/en-popup/en-picker.vue

<template>
  <view v-show="showPicker">
    <uni-data-picker :popup-title="'选择'+label" :localdata="localData" ref="pickerObj"
                     @change="pickerChange" :border="false" :clear-icon="false" @popupclosed="setPopupClosed">
    </uni-data-picker>
  </view>
</template>

<script>
import EnPopup from "@/components/en-utils/en-popup/en-popup";
export default {
  name: "en-picker",
  components: {EnPopup},
  props: {
    localData: {
      type: Array,
      default: []
    },
    label: {
      type: String,
      default: '标题'
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: 'text'
    },
    valueType: {
      type: String,
      default: '1'
    },
    value: {
      default: ''
    }
  },
  data() {
    return {
      inputValue: [],
      optionName: '',
      labelWidth: 0,
      showPicker:false
    }
  },
  watch: {
    'value': function () {
      this.setValue()
    },
    'inputValue': function () {
      console.log(this.inputValue)
      if(this.valueType==='1'){
        this.$emit('change', this.inputValue.join(','))
      }else {
        this.$emit('change', this.inputValue)
      }
    }
  },
  mounted() {

  },
  methods: {
    setValue(){
      let value=this.value
      if(!value){
        value=[]
      }else if(typeof value==='string'){
        value=value.split(',')
      }
      if(this.inputValue!==value){
        this.inputValue=value
        this.optionName = "";
        this.localData.forEach((one)=>{
          if(one.value+''===this.inputValue[0]+''){
            this.optionName += one.text + " ";
            if(one.children){
              one.children.forEach((two)=>{
                if(two.value+''===this.inputValue[1]+''){
                  this.optionName += two.text + " ";
                  if(two.children){
                    two.children.forEach((three)=>{
                      if(three.value+''===this.inputValue[2]+''){
                        this.optionName += three.text + " ";
                      }
                    })
                  }
                }
              })
            }
          }
        })
      }

    },
    setPopupClosed() {
      this.showPicker = false;
    },
    showPickerObj() {
      this.showPicker = true;
      this.$refs.pickerObj.show();
    },
    pickerChange(data) {
      this.optionName = "";
      this.inputValue = [];
      data.detail.value.forEach((item) => {
        this.optionName += item.text + " ";
        this.inputValue.push(item.value)
      });
      this.showPicker = false;
    },

  }
}
</script>

<style scoped lang="scss">

</style>