Question

如何在没有激活器的v-btn之后关注dialog？

Answer 1

您可以使用watcher来检测何时打开对话框，然后使用ref和.focus()来访问要聚焦的按钮。

new Vue({
  el: '#app',
  data: () => ({
    dialog: false
  }),
  watch: {
    dialog: function(shown) {
      if (shown) {
        this.$nextTick(() => {
          this.$refs.button.$el.focus()
        })
      }
    }
  }
})

<html>

<head>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/vuetify/dist/vuetify.min.css">
</head>

<body>

  <div id="app">
    <v-app>
      <v-dialog v-model="dialog">
        <v-card class="text-xs-center">
          Dialog content
        </v-card>
      </v-dialog>

      <v-layout>
        <v-btn @click="dialog = true">Open Dialog</v-btn>
        <v-btn ref="button">Focused button</v-btn>
      </v-layout>
    </v-app>
  </div>

</body>

</html>

打开对话框后如何聚焦v-btn？

1 个答案: