如何在点击q日期后打开和关闭q弹出窗口

Question

下面的代码中有一个日期。如何在q日期中只选择年份？我只是希望当模型或容器满足长度4时，我能以某种方式关闭div。我已经得到了。但当我点击日期时，它不会显示q日期，因为我将其设置为false。我该怎么办才能把它还原为真？

<q-input
style="width: 200px"
outlined
v-model="advance_search.advance_year_option_year_start"
mask="####"
label="Start Year"
stack-label
>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer"  >
<q-popup-proxy
v-if="qDateClose"
cover
transition-show="scale"
transition-hide="scale"
>
<q-date
v-model="advance_search.advance_year_option_year_start"
@update:model-value="closeQDate(advance_search.advance_year_option_year_start)"
default-view="Years"
mask="YYYY"
emit-immediately
minimal
/>
</q-popup-proxy>
</q-icon>
</template>
</q-input>

JavaScript代码的一部分

let qDateClose = ref(true);

let closeQDate = (value) => {
if(value.length == 4){
qDateClose.value = false;

}
};

或者请提出其他方式。

Answer 1

您可以尝试使用v-close-popup

在@navigation事件中将其设置为true，然后@update:model-value将其设置为false

Answer 2

我尝试了@Sarsa的答案中的提示，它有效：

const { ref } = Vue
const app = Vue.createApp({
setup () {
return {
date: ref('2019/02/01'),
dateClosePopup: ref(true)
}
}
})
app.use(Quasar, { config: {} })
app.mount('#q-app')

<!--
Forked from:
https://quasar.dev/vue-components/date/#example--with-qinput
-->
<div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md" style="max-width: 300px">
<q-input filled v-model="date" mask="date" :rules="['date']">
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
<q-date v-model="date"
v-close-popup="dateClosePopup"
@navigation="dateClosePopup=false"
@update:model-value="dateClosePopup=true"
>
<div class="row items-center justify-end">
<q-btn v-close-popup label="Close" color="primary" flat></q-btn>
</div>
</q-date>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
</div>