Как установить кнопку по умолчанию для отмены в диалоге квазара - PullRequest
Новая
       16

Как установить кнопку по умолчанию для отмены в диалоге квазара

0 голосов
/ 22 октября 2019

Мне нужно сфокусироваться на кнопке отмены моего диалогового окна confim.

Я работаю с 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)
                })

Я прогресс, теперь я могу выполнить после создания диалогового окна события, но не знаю, как получить доступ ккнопка. Я также вижу Автофокус = "автофокус" на кнопку ОК

Perhpas лучше, если я поставлю свой полный компост. Это дерево с опцией в конце каждой строки. Одним из вариантов является удаление. Я создаю диалог, чтобы запросить подтверждение. 

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

Ответы [ 2 ]

1 голос
/ 23 октября 2019

Вы проверяли это @ show event ? 

  focus: function () {
    this.$refs.htmlElementToFocus.focus()
  }
0 голосов
/ 23 октября 2019

Наконец ... Вместо поиска из "этого" я использую простую функцию javascript 

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

Это не красиво, но работает, потому что у меня есть только один элемент с определенным классом bg-негативный

...