如何调整Quasar框架Dialog插件中取消、确定按钮的顺序？

兄弟我懂你的困扰！我之前也碰到过这个需求，翻了Quasar Dialog的文档确实没找到直接调整按钮顺序的props——默认就是取消按钮在左、确定按钮在右的布局，而且你提到的ok和cancel配置项，只能用来修改按钮的文本、颜色、图标这类样式属性，没法直接调整它们的排列顺序。

不过有两种可行的方法能实现你想要的“确定按钮左、取消按钮右”的效果：

方法一：使用自定义Dialog组件（官方推荐的灵活方案） #

这也是你提到的途径，自定义组件能完全掌控Dialog的布局，包括按钮顺序。

1. 先创建一个自定义的Dialog组件，比如命名为CustomConfirmDialog.vue：

<template>
  <q-dialog ref="dialog" @hide="onHide">
    <q-card style="width: 400px; max-width: 90vw;">
      <q-card-section>
        <div class="text-h6">{{ title }}</div>
      </q-card-section>
      <q-card-section class="q-pa-md">
        {{ message }}
      </q-card-section>
      <q-card-actions align="right" class="q-pa-md">
        <!-- 先放确定按钮 -->
        <q-btn label="Yes" color="positive" @click="onOk" />
        <!-- 再放取消按钮 -->
        <q-btn label="No" color="negative" @click="onCancel" class="q-ml-sm" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps(['title', 'message'])
const emit = defineEmits(['ok', 'cancel', 'hide'])

const dialog = ref(null)

const onOk = () => {
  emit('ok')
  dialog.value.hide()
}

const onCancel = () => {
  emit('cancel')
  dialog.value.hide()
}

const onHide = () => {
  emit('hide')
}

// 暴露显示方法给父组件
const show = () => {
  dialog.value.show()
}

defineExpose({ show })
</script>

2. 在需要调用Dialog的地方引入并使用这个组件：

import { ref } from 'vue'
import CustomConfirmDialog from './CustomConfirmDialog.vue'

const customDialog = ref(null)

// 调用自定义Dialog
const openConfirmDialog = () => {
  customDialog.value.show()
}

在模板里添加组件引用：

<CustomConfirmDialog 
  ref="customDialog"
  title="Confirm"
  message="Are you sure?"
  @ok="handleOk"
  @cancel="handleCancel"
/>

这样就能完全按照你想要的顺序排列按钮，还能自由扩展其他样式。

方法二：用CSS调整按钮顺序（快速方案） #

如果你不想写自定义组件，可以通过CSS修改Quasar Dialog的flex布局顺序：

Quasar的Dialog按钮容器默认使用flex布局，按钮的DOM顺序是取消按钮在前、确定按钮在后。我们可以利用CSS的order属性调整它们的显示顺序：

/* 全局生效：所有Dialog都改为确定按钮左、取消按钮右 */
.q-dialog__btns .q-btn--ok {
  order: -1;
}

/* 或者局部生效：给指定Dialog加自定义类 */
.custom-dialog-order .q-dialog__btns .q-btn--ok {
  order: -1;
}

调用Dialog的时候加上自定义类：

Dialog.create({
  title: "Confirm",
  message: "Are you sure?",
  ok: {
    label: "Yes",
    color: "positive",
  },
  cancel: {
    label: "No",
    color: "negative",
  },
  // 添加自定义类
  class: 'custom-dialog-order'
});

这种方法更快捷，但要注意如果Quasar更新了Dialog的DOM结构，可能会失效，适合快速实现需求的场景。

总结一下：目前Quasar Dialog没有提供直接调整按钮顺序的props，要么用自定义组件完全掌控布局，要么用CSS调整flex顺序来实现。

备注：内容来源于stack exchange，提问作者Skeletor