javascript - 如何在类星体对话框中设置默认按钮取消
问题描述
我需要把重点放在我的确认对话框的取消按钮上。
我与 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 }}\
...<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();
}
},
});
解决方案
你检查过这个@show 事件吗?
focus: function () {
this.$refs.htmlElementToFocus.focus()
}
推荐阅读
- python - Tkinter Fadein Fadeout 幻灯片
- android - Android地理围栏重叠预期行为?
- mysql - django 模型多对多不使用 charfield 作为主键
- django - 在 Django 数据库中保存表示图像的 Base64 字符串
- typescript - 如何在 typescript 中声明一个类,就像使用“class”关键字一样?
- c++ - 为什么 round() 让我的表达给出错误的答案?
- reactjs - 使用 react-table-6 从 json 递归创建嵌套表
- keycloak - 使用 keycloak OIDC [SSL: CERTIFICATE_VERIFY_FAILED] 打开 edx
- css - 用 sass 更改 Bootstrap 5 颜色,但指定互补色
- php - 是否可以在使用 PHP 更新 cookie 后获得新值,而无需刷新屏幕?