XhMultiInput.vue 1.17 KB
<!-- *******************  多个输入框  *******************  -->
<template>
  <view class="u-flex u-flex-wrap">
    <u-input
      class="input-item"
      v-for="(item, index) in inputOptions"
      v-model="item.value"
      @input="
        (val) => {
          getValue(item)
        }
      "
      type="text"
      :key="index"
      :border="true"
      :placeholder="item.placeholder"
      :disabled="disabled"
    />
  </view>
</template>

<script>
import objMixin from './objMixin'
export default {
  name: 'XhMultiInput',
  components: {},
  mixins: [objMixin],
  props: {},
  data() {
    return {}
  },
  computed: {
    inputOptions() {
      let options = this.item.inputOptions || []
      let result = options.map((item) => {
        return {
          ...item,
          value: '',
        }
      })
      return result
    },
  },
  watch: {},
  mounted() {},
  methods: {
    getValue(item) {
      let currentValue = {}
      currentValue[item.fieldsName] = item.value
      // 以key,value的对象形式传递
      this.valueChange(currentValue)
    },
  },
}
</script>

<style scoped>
.input-item {
  width: 31%;
  margin: 5rpx;
  background: #f4f5f7;
}
</style>