xiamen-sb-uniapp/components/my-select/my-select.vue

<template>
  <view class="width-100">
    <!--<u-input disabled vModel={this.inputLabel} {...{ testFuture: true, on: on }} placeholder={this.placeholder} type="select" />
        <u-input vShow={false} vModel={this.value} placeholder="请选择仓库名称" type="select" />
        <u-select vModel={this.openState} defaultValue={defaultValue} {...{ props, on: mySelectOn }}></u-select>-->

    <view class="d-flex a-center" style="width:100%">
      <view @click="inputClick" class="d-flex px2" style="width:100%">
        <view class="input-box  flex1">
          <view v-if="inputLabel" class="text-color-3">{{inputLabel}}</view>
          <view v-else class="text-color-9">{{placeholder}}</view>
        </view>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>
    <u-select :list="list" :value-name="valueName" :label-name="labelName" :mode="mode" v-model="openState" :defaultValue="myDefaultValue" @cancel="selectCancel" @confirm="selectConfirm"></u-select>
  </view>
</template>
<script>
import Emitter from '@/uview-ui/libs/util/emitter.js'
export default {
  mixins: [Emitter],
  data() {
    return {
      myDefaultValue: [],
      openState: false,
      inputLabel: ''
    }
  },
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: [String, Number, Boolean],
      default: false
    },
    mode: {
      type: String,
      default: 'single-column'
    },
    list: {
      type: Array,
      default() {
        return []
      }
    },
    // 自定义value属性名
    valueName: {
      type: String,
      default: 'value'
    },
    // 自定义label属性名
    labelName: {
      type: String,
      default: 'label'
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  watch: {
    value(nVal, oVal) {
      if (nVal != null) {
        // this.myDefaultValue = [nVal];
        // console.log(nVal)
        this.initValue(nVal + '')
      }
    },
    list(nVal) {
      if (nVal != null) {
        if (this.value == null) {
          return
        }
        const { valueName, labelName } = this
        let selectItem = null
        const defaultValue = []
        for (let i = 0; i < nVal.length; i++) {
          const item = nVal[i]
          item[valueName] = item[valueName] + ''
          if (item[valueName] === this.value) {
            selectItem = item
            defaultValue.push(i)
            break
          }
        }
        this.myDefaultValue = defaultValue
        if (selectItem != null) {
          this.inputLabel = selectItem[labelName]
        } else {
          this.inputLabel = ''
        }
      }
    }
  },
  created() {
    //     // 初始化值
    this.$nextTick(() => {
      this.initValue(this.value)
    })
  },
  methods: {
    inputClick() {
      if (this.disabled) {
        uni.showToast({ title: '不允许选择', icon: 'none' })
        return
      }
      this.openState = !this.openState
    },
    initValue(val) {
      if (val == null) {
        return
      }
      const { valueName, labelName } = this
      let selectItem = null
      const defaultValue = []
      for (let i = 0; i < this.list.length; i++) {
        const item = this.list[i]
        item[valueName] = item[valueName] + ''
        if (item[valueName] === val) {
          selectItem = item
          defaultValue.push(i)
          break
        }
      }
      this.myDefaultValue = defaultValue
      if (selectItem != null) {
        this.inputLabel = selectItem[labelName]
      } else {
        this.inputLabel = ''
      }
    },
    selectCancel() {
      this.dispatch('u-form-item', 'on-form-change')
    },
    async selectConfirm(data) {
      if (this.value + '' === data[0].value + '') {
        return
      }
      this.$emit('input', data[0].value + '')
      const { valueName } = this
      this.inputLabel = data[0].label
      let selectItem = null
      for (let i = 0; i < this.list.length; i++) {
        const item = this.list[i]
        if (item[valueName] + '' === data[0].value + '') {
          selectItem = item
          break
        }
      }
      this.$emit('selected', data[0].value, selectItem)
    }
  }
}
</script>

<style scoped>
.width-100 {
  width: 100%;
}
</style>