0

我一直在尝试将我的输入放在 v-expansion-panels 中，以便在用户按 Enter 后专注于下一个：我已经成功做到了，所以下一个扩展面板打开了，但即使我得到了正确的输入通过 $refs API，我似乎无法使输入成为焦点。这是我的一些代码：

<v-expansion-panels v-model="openedPanel" :accordion="true">
              <v-expansion-panel class="panel">
                <!-- Unidade Produtiva -->
                <v-expansion-panel-header>Unidade produtiva</v-expansion-panel-header>
                <v-expansion-panel-content eager>
                  <label class="panel-label">Número do Talhão</label>

                  <v-container>
                    <v-row>
                      <v-col class="spacing-container" cols="12" md="12">
                        <ValidationProvider name="production-field" rules="required">
                          <input
                            ref="field"
                            v-on:keyup.enter="$refs.height.focus"
                            class="default-input"
                            v-model="production.field"
                            type="number"
                            placeholder="Ex.: 1"
                          />
                        </ValidationProvider>
                      </v-col>
                    </v-row>
                  </v-container>
                  <label class="panel-label">Tamanho do Canteiro</label>
                  <v-container>
                    <v-row>
                      <v-col class="spacing-container" cols="12" md="6">
                        <label class="input-label">Comprimento (m)</label>
                        <ValidationProvider name="production-height" rules="required">
                          <input
                            ref="height"
                            v-on:keyup.enter="$refs.width.focus"
                            class="default-input"
                            v-model="production.height"
                            type="number"
                            step="0.001"
                            min="0.001"
                            placeholder="Ex.: 1.23"
                          />
                        </ValidationProvider>
                      </v-col>
                      <v-col class="spacing-container" cols="12" md="6">
                        <label class="input-label">Largura (m)</label>
                        <ValidationProvider name="production-width" rules="required">
                          <input
                            ref="width"
                            v-on:keyup.enter="$refs.spacew.focus"
                            class="default-input"
                            v-model="production.width"
                            type="number"
                            step="0.001"
                            min="0.001"
                            placeholder="Ex.: 1.23"
                          />
                        </ValidationProvider>
                      </v-col>
                    </v-row>
                  </v-container>
                  <label class="panel-label">Espaçamento</label>
                  <v-container>
                    <v-row>
                      <v-col class="spacing-container" cols="12" md="6">
                        <label class="input-label">Entre linhas (cm)</label>
                        <ValidationProvider name="production-spacew" rules="required">
                          <input
                            ref="spacew"
                            v-on:keyup.enter="$refs.spaceh.focus"
                            class="default-input"
                            v-model="production.spacew"
                            type="number"
                            step="0.001"
                            min="0.001"
                            placeholder="Ex.: 1.23"
                          />
                        </ValidationProvider>
                      </v-col>
                      <v-col class="spacing-container" cols="12" md="6">
                        <label class="input-label">Entre colunas (cm)</label>
                        <ValidationProvider name="production-spaceh" rules="required">
                          <input
                            ref="spaceh"
                            v-on:keyup.enter="handleNext(1, 'name')"
                            class="default-input"
                            v-model="production.spaceh"
                            type="number"
                            step="0.001"
                            min="0.001"
                            placeholder="Ex.: 1.23"
                          />
                        </ValidationProvider>
                      </v-col>
                    </v-row>
                  </v-container>
                </v-expansion-panel-content>
              </v-expansion-panel>
              <v-expansion-panel class="panel">
                <!-- Nome do produto -->
                <v-expansion-panel-header>Nome do produto</v-expansion-panel-header>
                <v-expansion-panel-content eager>
                  <label class="panel-label">Nome</label>
                  <ValidationProvider name="production-name" rules="required">
                    <input
                      ref="name"
                      v-on:keyup.enter="handleNext(2, 'bed')"
                      class="default-input"
                      v-model="production.name"
                      type="text"
                      placeholder="Ex.: Macaxeira"
                    />
                  </ValidationProvider>
                </v-expansion-panel-content>
              </v-expansion-panel>
            </v-expansion-panels>

这是我正在使用的方法

openPanel(index) {
      this.openedPanel = index;
    },
    closeAllPanels() {
      this.openedPanel = null;
    },
    handleNext(index, refInput) {
      this.closeAllPanels();
      this.openPanel(index);
      this.$refs[refInput].focus();
      console.log(refInput);
      console.log(this.$refs[refInput]);
    },

编辑：焦点到焦点（），仍然没有解决它。

4

1 回答 1

0

看来您必须使用setTimeout等到<v-expansion-panel-content>完成其转换。

例子：

...
  handleNext(index, refInput) {
    if (this.openedPanel === index) {
      this.$refs[refInput].focus();
    } else {
      this.openPanel(index);
      setTimeout(() => {
        this.$refs[refInput].focus();
      }, 350); // by default vuetify use 300ms for transition
    }
  }
...

JSFiddle

于 2020-09-25T09:37:28.293 回答