assess-app/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: {
    map: {
      default:{}
    },
    localData: {
      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
    }
  },
  components: {},
  mounted() {
    this.setValue()
    this.setLabelWidth()
  },
  watch: {
    'value': function () {
      this.setValue()
    },
    'inputValue': function () {
      if (this.valueType === '1') {
        this.$emit('input', this.inputValue.join(','))
      } else {
        console.log('this.inputValue',this.inputValue)
        this.$emit('input', this.inputValue)
      }
    },
    'localData': function () {
      this.setValue()
    }
  },
  methods: {
    setValue() {
      let value = this.value
      if (typeof value === 'number') {
        value += '';
      }
      if (!value) {
        value = []
      } else if (typeof value === 'string') {
        value = value.split(',')
      }

      if (value && (this.inputValue !== value || this.optionName==='') ) {
        this.inputValue = value
        this.optionName = "";
        this.localData.forEach((one) => {
          if (this.inputValue[0] && one.value + '' === this.inputValue[0] + '') {
            this.optionName += one.text + " ";
            if (one.children) {
              one.children.forEach((two) => {
                if (this.inputValue[1] && two.value + '' === this.inputValue[1] + '') {
                  this.optionName += two.text + " ";
                  if (two.children) {
                    two.children.forEach((three) => {
                      if (this.inputValue[2] && three.value + '' === this.inputValue[2] + '') {
                        this.optionName += three.text + " ";
                      }
                    })
                  }
                }
              })
            }
          }
        })
      }

    },
    setPopupClosed() {
      this.showPicker = false;
    },
    showPickerObj() {
      this.$refs.pickerObj.show();
      this.showPicker = true;
    },
    pickerChange(data) {
      this.optionName = "";
      this.inputValue = [];
      console.log(data)
      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");

::v-deep .selected-item-active {
  border-bottom: 2px solid #FF0000 !important;
}

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

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

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

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

      .iconfont {
        float: right;
      }

      .no-option {
        color: #999999;
      }

    }
  }
}

</style>