1
votes

Comment définir le bouton par défaut sur l'annulation dans la boîte de dialogue Quasar

J'ai besoin de mettre le focus sur le bouton d'annulation de ma boîte de dialogue de confim.

Je travaille avec vue / Quasar. J'ai un bouton de suppression et avant la suppression, je crée une boîte de dialogue de confirmation. C'est bon. Mais je veux juste que le bouton par défaut soit "Annuler" et non "ok"

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();
        }
    },
});

Avec cela, c'est le bouton OK sélectionné par défaut et non le bouton Annuler

UPDATE

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

Changer le tabindex mais pas le bouton de mise au point automatique

UPDATE 2

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

I Progression, maintenant je peux exécuter après l'événement de création de dialogue, mais je ne sais pas comment accéder au bouton. Je vois trop Autofocus = "autofocus" sur le bouton ok

Peut-être mieux si je mets mon composant complet. C'est un arbre avec une option à la fin de chaque ligne. Une option est la suppression. Je crée une boîte de dialogue pour demander une confirmation.

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


1 commentaires

Excellente question! Pour info, je viens de saisir un ticket pour ceci: github.com/quasarframework/quasar/issues/5671


3 Réponses :


1
votes

Avez-vous vérifié cet @show event ?

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


1 commentaires

Merci pour votre réponse. Je vois déjà cette page. Mais je ne sais pas comment accéder aux boutons de ma boîte de dialogue



0
votes

Enfin ... Au lieu de rechercher à partir de "this", j'utilise une simple fonction javascript

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

Ce n'est pas beau mais cela fonctionne car je n'ai qu'un élément avec une classe spécifique bg-negative


0 commentaires

0
votes

utiliser focus: 'annuler' mes exemples https://codepen.io/greyufo/pen/GRZvOoP

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


0 commentaires