如何在類星體對話框中設置默認按鈕取消

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',
                ...
                })