如何在类星体对话框中设置默认按钮取消

Question

我需要把重点放在我的确认对话框的取消按钮上。

我与 vue/Quasar 合作。 我有一个删除按钮，在删除之前我创建了一个确认对话框。 没关系。 但只希望默认按钮的焦点是“取消”而不是“确定”

this.$q.dialog({
    title: 'Confirmation',
    message: "Etes-vous sûr de vouloir supprimer l''entité: " ,
    ok: 'Suppression',
    cancel: {
        push: true,
        color: 'negative',
        label:"Annuler"
    },
    persistent: true
})

有了它，默认选择的是按钮而不是取消按钮

更新

this.$q.dialog({
    title: 'Confirmation',
    message: "Etes-vous sûr de vouloir supprimer l''entité: " + libelle,
    ok: {
        push: true,
        label: "Suppression",
        tabindex: 1
    },
    cancel: {
        push: true,
        color: 'negative',
        label: "Annuler",
        tabindex: 0
    },
    persistent: true
})

更改 tabindex 但不更改按钮上的自动对焦

更新 2

this.$q.dialog({
    ref: "ConfirmDialog",
    title: 'Confirmation',
    message: "Etes-vous sûr de vouloir supprimer l''entité: " + libelle,
    ok: {
        push: true,
        label: "Suppression",
        tabindex: 1
    },
    cancel: {
        ref:"btnAnnul",
        push: true,
        color: 'negative',
        label: "Annuler",
        tabindex: 0
    },
    persistent: true,
    created: setTimeout(x => {this.$nextTick(() => this.focus());}, 1000)
})

我进步了，现在我可以在创建对话框事件后执行，但不知道如何访问按钮。 我在确定按钮上也看到 Autofocus="autofocus"

如果我全力以赴，可能会更好。 这是一棵树，每行末尾都有选项。 一种选择是删除。 我创建一个对话框要求确认。

Vue.component('select-tree-nocheck', {
    inject: ['IsConnected', 'showNotifError'],
    props: ['treedata'],
    template: ' <div class="q-pa-md  q-col-gutter-sm">\
                    <q-input ref="filter" filled v-model="treedata.filter" label="Filtrer">\
                        <template v-slot: append>\
                            <q-icon v-if="treedata.filter !== \'\'" name="clear" class="cursor-pointer" v-on:click="resetFilter" />\
                        </template>\
                    </q-input>\
                    <q-tree ref="tree" class="col-12" accordion v-bind:nodes="treedata.nodes" node-key="id"  v-bind:filter="treedata.filter">\
                        <template v-slot:default-header="prop">\
                            <div class="row">\
                                  <div>{{ prop.node.label }}\
                            &nbsp;&nbsp;...<q-menu anchor="top right" self="top left"><q-list style="min-width: 100px">\
                                   
                                    <q-item clickable v-close-popup><q-item-section v-on:click="Suppression(prop.node.id,prop.node.label)">Supprimer</q-item-section></q-item>\
                                </q-list></q-menu>\
                            </div></div>\
                        </template>\
                    </q-tree>\
                </div>',
    methods: { 
        Suppression(value, libelle) {
            this.IsConnected().then(retour => {
                if (retour == 1) {
                    this.$q.dialog({
                        $ref: "ConfirmDialog",
                        title: 'Confirmation',
                        message: "Etes-vous sûr de vouloir supprimer l''entité: " + libelle,
                        ok: {
                            push: true,
                            label: "Suppression",
                            tabindex: 1
                        },
                        cancel: {
                            $ref:"btnAnnul",
                            push: true,
                            color: 'negative',
                            label: "Annuler",
                            tabindex: 0
                        },
                        persistent: true,
                        created: setTimeout(x => {this.$nextTick(() => this.focus());}, 1000)
                    }).onOk(() => {
                        
                    });
                }
            });
        },
        resetFilter() {
            this.treedata.filter = '';
            this.$refs.filter.focus();
        }
    },
});

Answer 1

你检查过这个@show 事件吗？

  focus: function () {
    this.$refs.htmlElementToFocus.focus()
  }

Answer 2

最后......而不是从“this”搜索，我使用简单的 javascript function

created: setTimeout(x => { this.$nextTick(() => document.getElementsByClassName('bg-negative')[0].focus()); }, 1000)

它并不漂亮，但它有效，因为我只有一个具有特定 class bg-negative 的元素

Answer 3

使用焦点：'取消'我的例子https://codepen.io/greyufo/pen/GRZvOoP

this.$q.dialog({
                ...
                focus:'cancel',
                ...
                })