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

Question

I Need to put focus on cancel button of my confim dialog box.

I work with vue/Quasar. I've a delete button, and before deletion I create a confim dialogbox. It's Ok. But just want the default button focused is "Cancel" not "ok"

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
})

With that it'sok button selectd by default not the cancel button

UPDATE

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
})

Change the tabindex but not the autofocus on button

UPDATE 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)
})

I Progress, Now I can execute after create dialog event, but don't know how access to the button. I see too Autofocus="autofocus" on ok button

Perhpas better if I put my full compoment. It's a tree with option on end of each line. One option is delete. I Create a dialog to ask confirmation.

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

Have you checked this out @show event ?

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

Answer 2

Finally... Instead of search from "this", I use simple javascript function

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

It's not beautifull but it works cause I've just one element with specific class bg-negative

Answer 3

use focus:'cancel' my examples https://codepen.io/greyufo/pen/GRZvOoP

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