lcoco/components/en-from/en-select/en-select.vue

<template>
  <view class="box">
    <view class="input-box">
      <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
        {{ label }}
      </view>
      <view class="input-box-right" @click="showPickerObj">
        <text :class="{'no-option':!optionName}">{{ optionName ? optionName : placeholder }}</text>
        <text class="iconfont">&#xe62b;</text>
      </view>
    </view>
    <uni-data-picker :popup-title="'选择'+label" :localdata="localData" ref="pickerObj" v-show="showPicker"
                     @change="pickerChange" :border="false" :clear-icon="false" @popupclosed="setPopupClosed">
    </uni-data-picker>
  </view>
</template>

<script>
export default {
  name: 'en-select',
  props: {
    localData: {
      type: Array,
      default: [{
        text: "一年级",
        value: "1-0",
        children: [{
          text: "1.1班",
          value: "1-1"
        },
          {
            text: "1.2班",
            value: "1-2"
          }]
      },
        {
          text: "二年级",
          value: "2-0",
          children: [{
            text: "2.1班",
            value: "2-1"
          },
            {
              text: "2.2班",
              value: "2-2"
            }]
        }]
    },
    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
    }
  },
  components: {},
  mounted() {
    this.setValue()
    this.setLabelWidth()
  },
  watch: {
    'value': function () {
      this.setValue()
    },
    'inputValue': function () {
      if(this.valueType==='1'){
        this.$emit('input', this.inputValue.join(','))
      }else {
        this.$emit('input', this.inputValue)
      }
    }
  },
  methods: {
    setValue(){
      let value=this.value
      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() {
      console.log(this.$refs.pickerObj)
      this.$refs.pickerObj.show();
      this.showPicker = true;
    },
    pickerChange(data) {
      this.optionName = "";
      this.inputValue = [];
      data.detail.value.forEach((item) => {
        this.optionName += item.text + " ";
        this.inputValue.push(item.value)
      });
      this.showPicker = false;
    },
    setLabelWidth() {
      let differenceNum = 4 - this.label.length;
      if (differenceNum === 2) {
        this.labelWidth = '2em'
      } else if (differenceNum === 1) {
        this.labelWidth = '0.5em'
      }
    }
  }

}
</script>

<style lang="scss" scoped>
@import url("../../static/css/en-common.css");

.box {
  .input-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .input-box-left {
      width: 210rpx;
      font-size: 32rpx;
      color: #333333;
    }

    .input-box-right {
      width: 100%;

      text {
        font-size: 32rpx;
        color: #333;
      }

      .iconfont {
        float: right;
      }

      .no-option {
        color: #999999;
      }

    }
  }
}

</style>