如何在单击时使用输入来制作自定义选择器？

Question

请帮我制作一个元素！ 我有一个带有自定义选择器的元素。当您单击箭头时，您会打开选择器。当您精确单击一个元素时，您会打开一个输入。问题是输入应该在打开后立即收到焦点，而不是在第二次点击后。我试图用“$refs”来实现它，但它没有用。现在我有一个想法，要创建一个函数来创建这个输入，也许它会获得焦点。

  <div class="mainBuySelector">
    <div :style="{width: mainWidth, height: mainHeight}" class="selectorUp">
      <div @click="openSelector = !openSelector" class="selectorArrow"/>
      <div @click="makeFocusOnInput" class="activeOption thin">
        <div class="thin" v-if="setChangeValue">{{setChangeValue}}</div>
        <div class="thin" v-else-if="defaultValue">{{defaultValueStr}}</div>
        <div v-else>{{data.items[selected].index}}</div>
      </div>
    </div>
    <portal to="destinationAdd">
      <div v-if="openSelector" class="mainOpenSelector"> 
        <div class="positioningWrap">
        <div v-if="openSelector" :style="optionStyle" class="selectorOptions">
          <div class="innerSelectorWrap" v-for="(el, key) in data.items" :key="key">
            <div @click="select(key)" class="smallText selectorBuyItem">{{el.index}}</div>
          </div>
        </div>
        </div>
        <div @click="hide()" class="closeSelContainer" />
      </div>
    </portal>
    <div 
      :style="{top: alignDataInput.top, left: alignDataInput.left, bottom: alignDataInput.bottom, right:alignDataInput.right, width: inputWidth}" 
      class="inputWrapBuy"
      v-show="selectorInput"
    >
      <div >
        <input 
          ref="myInputs"
          @input="sendInput()"
          :style="{width: inputInnerWidth}"
          :type='type'
          v-model="selInput"
          :placeholder="defaultPlaceholder"
          class="inputBuy thin" />
      </div>
      <div @click="closeInput()" class="arrow"></div>
    </div>
  </div>
</template>

<script>
import {
  GET_BUYING_INF
} from '@/store/rest/action-types'
import { Socketervice } from '@/api/service'
export default {
  props: {
    mainWidth: String,
    mainHeight: String,
    width: String,
    height: String,
    inputWidth: String,
    objectOptionChoice: Number,
    alignData: Object,
    alignDataInput: Object,
    data: Object,
    alignDataAdd: Object,
    inputInnerWidth: String,
    defaultPlaceholder: String,
    defaultValueStr: String,
    type: String,
    setValue: String
  },
  data () {
    return {
      emails: [],
      selected: 0,
      optionStyle: Object.assign(this.alignData, {width: this.width, height: this.height}),
      openSelector: false,
      selectorInput: false,
      defaultValue: true,
      selInput: '',
      setChangeValue: ''
    }
  },
  methods: {
    makeFocusOnInput () {
      // this.$nextTick(() => {
      //   const lastIdx = 0;
      //   console.log(this.$refs)
      //   this.$refs.myInputs[lastIdx].focus();
        
      // })
      // this.$refs["myInputs"].open = true;
      // this.$refs["myInputs"].focus()
      // this.selectorInput = true


      
    },
    select (key) {
      this.openSelector = false
      this.defaultValue = false
      this.selected = key
      const val = this.data.items[this.selected].param
      Socketervice.send({
        service: 'booking_price',
        data: {
          pc: this.computerInfo.id,
          date_start: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
          date_end: this.$moment(new Date(Date.now() + val * (60 * 60 * 1000))).format('YYYY-MM-DD HH:mm:ss'),
          type: 1
        }
      })
    },
    sendInput () {
      let obj = new Object()
      if (this.type === 'time') {
        obj.avaliableTime = this.selInput
      }
      else if (this.type === 'customTime') {
        obj.customTime = this.selInput
      }
      else if (this.type === 'price') {
        obj.price = this.selInput
      }
      console.log(obj)
      this.$store.dispatch(GET_BUYING_INF)
    },
    closeInput () {
      this.selectorInput = false
      this.openSelector = true
    },
    hide () {
      this.openSelector = false
    }
  },
  watch: {
    setValue: function (val) {
      if (val) {
        this.setChangeValue = val
      }
    }
  },
  computed: {
    computerInfo () {
      return this.$store.state.computerInfo
    },
    buyInfInput () {
      return this.$store.state.buyingInf
    }
  }
}

</script>```

Answer 1

解决办法是添加

makeFocusOnInput () {
      this.selectorInput = true
      this.$nextTick(() => {
        this.$refs.myInputs.focus()
      })
    }