Quasar中QField结合QPopupProxy时焦点丢失及弹窗触发问题求助

针对你遇到的两个问题，可通过以下修改解决：

问题1：弹窗打开时字段失焦触发验证错误 #

QPopupProxy默认会让触发元素失去焦点，而QField的lazy-rules会在失焦时触发验证。给QPopupProxy添加keep-focus属性，让QField保持焦点，避免触发失焦验证：

<q-popup-proxy keep-focus>

问题2：点击字段标签区域无法打开弹窗 #

默认只有#control插槽内的元素能触发弹窗，需要给QField添加点击事件，手动控制弹窗的显示/隐藏：

1. 给QField添加ref和@click事件：

<q-field
  ref="dateField"
  label="Input date"
  v-model="date"
  :rules="[val => !!val || 'This field is required']"
  lazy-rules
  @click="togglePopup"
>

2. 给QPopupProxy添加v-model绑定，控制弹窗状态，并关闭自身点击触发逻辑避免冲突：

<q-popup-proxy v-model="popupVisible" keep-focus toggle-on-click="false">

3. 在script中定义相关变量和方法：

const date = ref();
const popupVisible = ref(false);

function togglePopup() {
  popupVisible.value = !popupVisible.value;
}

function transformToDate(value, reason) {
  // 执行你的日期转换逻辑
  date.value = /* 转换后的日期值 */;
  popupVisible.value = false; // 选择日期后关闭弹窗
}

完整修改后的代码 #

<template>
  <q-field
    ref="dateField"
    label="Input date"
    v-model="date"
    :rules="[val => !!val || 'This field is required']"
    lazy-rules
    @click="togglePopup"
  >
    <template #control="{ modelValue, emitValue }">
      <q-popup-proxy v-model="popupVisible" keep-focus toggle-on-click="false">
        <q-date
          mask="YYYY-MM-DD"
          :model-value="transformToString(modelValue)"
          @update:model-value="(value, reason) => transformToDate(value, reason)"
          v-close-popup
        ></q-date>
      </q-popup-proxy>
      
      <div v-if="date">{{ date }}</div>
    </template>
  </q-field>
</template>

<script setup>
import { ref } from 'vue';

const date = ref();
const popupVisible = ref(false);

function transformToString(value) {
  // 示例：将Date对象转为YYYY-MM-DD格式字符串
  if (!value) return '';
  return new Date(value).toISOString().split('T')[0];
}

function transformToDate(value, reason) {
  // 示例：将字符串转为Date对象
  if (value) {
    date.value = new Date(value);
  }
  popupVisible.value = false;
}

function togglePopup() {
  popupVisible.value = !popupVisible.value;
}
</script>

额外说明 #

• keep-focus属性确保QField在弹窗打开时保持焦点，避免触发失焦验证；
• toggle-on-click="false"避免QPopupProxy自身的点击逻辑和QField的点击事件冲突；
• 点击QField的任意区域（包括标签）都会触发弹窗的显示/隐藏；
• 在transformToDate中手动关闭弹窗，确保选择日期后弹窗自动隐藏。

内容的提问来源于stack exchange，提问作者KorbenDose