q-popup-proxy弹窗首次点击需两次打开的问题求助

问题描述 #

实现了基于Quasar的q-popup-proxy弹窗，代码如下：

按钮与弹窗模板：

<q-btn label="Add Fault" class="addFaultButton" dense @click="openPopUp()">
  <q-popup-proxy position="center" v-if="openFaults">
    <FaultListPicker />
  </q-popup-proxy>
</q-btn>

Setup中的状态与打开逻辑：

let openFaults = computed(() => store.closeFaultPopup);
function openPopUp() {
  store.closeFaultPopup = true;
  console.log('st ', store.closeFaultPopup)
}

弹窗内取消按钮逻辑：

function Cancel() {
  console.log('cancel');
  store.closeFaultPopup = false;
}

当前问题：点击打开按钮时首次点击控制台显示store状态已设为true，但弹窗不弹出，需点击第二次才正常显示；取消按钮可正常关闭弹窗。

问题根源 #

首次点击时，v-if="openFaults"条件满足，q-popup-proxy组件才开始挂载到DOM中。组件完成挂载后并没有自动触发显示动作，因此弹窗不会弹出；第二次点击时，组件已经存在，此时状态变化会触发组件的显示逻辑，所以弹窗正常弹出。

解决方案 #

方案一：使用visible属性控制弹窗显示（推荐） #

去掉v-if，改用q-popup-proxy自带的visible属性绑定状态，同时监听hide事件同步状态：

修改模板：

<q-btn label="Add Fault" class="addFaultButton" dense @click="openPopUp()">
  <q-popup-proxy 
    position="center" 
    :visible="openFaults" 
    @hide="handlePopupHide"
  >
    <FaultListPicker />
  </q-popup-proxy>
</q-btn>

更新setup代码：

// 改为可读写的computed，方便双向绑定
let openFaults = computed({
  get: () => store.closeFaultPopup,
  set: (value) => { store.closeFaultPopup = value }
});

function openPopUp() {
  openFaults.value = true;
}

// 弹窗关闭时自动同步状态
function handlePopupHide() {
  openFaults.value = false;
}

弹窗内的Cancel函数可以保持不变，或者也可以通过调用弹窗的hide方法来统一逻辑。

方案二：通过ref直接控制弹窗组件 #

使用ref获取q-popup-proxy实例，调用组件自带的show()和hide()方法来控制显示，无需依赖v-if：

修改模板：

<q-btn label="Add Fault" class="addFaultButton" dense @click="openPopUp()">
  <q-popup-proxy ref="faultPopup" position="center">
    <FaultListPicker @cancel="closePopUp" />
  </q-popup-proxy>
</q-btn>

更新setup代码：

import { ref } from 'vue';

const faultPopup = ref(null);

function openPopUp() {
  faultPopup.value?.show();
  // 如果需要同步store状态，可在这里设置
  // store.closeFaultPopup = true;
}

function closePopUp() {
  faultPopup.value?.hide();
  // 同步store状态
  store.closeFaultPopup = false;
}

弹窗内的Cancel方法需要触发cancel事件：

function Cancel() {
  console.log('cancel');
  this.$emit('cancel');
}

说明 #

两种方案都能解决首次点击不弹出的问题，方案一更贴合Vue的状态驱动思想，方案二更直接控制组件实例，可根据项目需求选择。

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