用“ esc”按钮关闭“ v-dialog”无法正常工作

时间:2019-07-10 09:26:54

标签: vue.js vuetify.js

我有两个v-dialog v1和v2,单击v1对话框上的按钮会打开v2对话框。所以这里的问题是,当我按“ esc”按钮时,v1对话框而不是v2关闭。

在链接中找到代码:https://codepen.io/anon/pen/qzgdEg?&editable=true&editors=101

<div id="app">
  <v-app id="inspire">
    <div>
      <v-layout row justify-center>

        <v-btn color="primary" dark @click="dialog2 = true">Open Dialog 2</v-btn>

        <v-menu bottom offset-y>
          <template v-slot:activator="{ on }">
            <v-btn v-on="on">A Menu</v-btn>
          </template>
          <v-list>
            <v-list-tile v-for="(item, i) in items" :key="i" @click="">
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-menu>
        <v-dialog v-model="dialog2" max-width="500px">
          <v-card>
            <v-card-title>
              Dialog 2
            </v-card-title>
            <v-card-text>
              <v-btn color="primary" dark @click="dialog3 = !dialog3">Open Dialog 3</v-btn>
              <v-select
                :items="select"
                label="A Select List"
                item-value="text"
              ></v-select>
            </v-card-text>
            <v-card-actions>
              <v-btn color="primary" flat @click="dialog2=false">Close</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <v-dialog v-model="dialog3" max-width="500px">
          <v-card>
            <v-card-title>
              <span>Dialog 3</span>
              <v-spacer></v-spacer>
              <v-menu bottom left>
                <template v-slot:activator="{ on }">
                  <v-btn icon v-on="on">
                    <v-icon>more_vert</v-icon>
                  </v-btn>
                </template>
                <v-list>
                  <v-list-tile v-for="(item, i) in items" :key="i" @click="">
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
            </v-card-title>
            <v-card-actions>
              <v-btn color="primary" flat @click="dialog3=false">Close</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-layout>
    </div>
  </v-app>
</div>
new Vue({
  el: '#app',
  data () {
    return {
      dialog: false,
      dialog2: false,
      dialog3: false,
      notifications: false,
      sound: true,
      widgets: false,
      items: [
        {
          title: 'Click Me'
        },
        {
          title: 'Click Me'
        },
        {
          title: 'Click Me'
        },
        {
          title: 'Click Me 2'
        }
      ],
      select: [
        { text: 'State 1' },
        { text: 'State 2' },
        { text: 'State 3' },
        { text: 'State 4' },
        { text: 'State 5' },
        { text: 'State 6' },
        { text: 'State 7' }
      ]
    }
  }
})

我希望在单击“ Esc”按钮而不是v1对话框时关闭v2对话框。

0 个答案:

没有答案