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 }}\ ...<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
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
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 })
3 Réponses :
Avez-vous vérifié cet @show event ?
focus: function () { this.$refs.htmlElementToFocus.focus() }
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
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
utiliser focus: 'annuler' mes exemples https://codepen.io/greyufo/pen/GRZvOoP
this.$q.dialog({ ... focus:'cancel', ... })
Excellente question! Pour info, je viens de saisir un ticket pour ceci: github.com/quasarframework/quasar/issues/5671 a>