qusar组件库 ------- Date Picker（日期选择器），关于QInput选择日期后自动关闭日历问题

qusar提供了Date Picker（日期选择器），且可以与input一起使用，但是选择日期后只能点击按钮获取鼠标点击其他地方进行关闭，无法在选择日期后自动关闭，因此自己琢磨了这个方法

html

 <q-input v-model="date"
          mask="date"
          readonly // 设置为只读，可以使用户不能手动修改日期，只能通过日历选择
          borderless // 因为readonly会导致边框不是完整的实线，所以干脆去掉边框自己设置
          style="border: 1px solid #c7c6c6; border-radius:3px;">//此处就是手动设置边框
  <template v-slot:append>
    <q-icon name="event"
            class="cursor-pointer"
            @click="isClose = false"> //点击日历图标显示日历时，将isColse置为false
      <q-popup-proxy cover
                     transition-show="scale"
                     transition-hide="scale">
       <q-date v-model="date"
               :options="optionsFn" //用于设置可选日期范围
               @update:model-value="setDate(date)" //用于选择日期后关闭日历，也可获取选择日期
               v-close-popup="isClose">// 关闭日历的指令，通过isClose标志来决定（true关闭）
        </q-date>
      </q-popup-proxy>
    </q-icon>
  </template>
</q-input>

js

 isClose = false

  // 日期改变时会触发这个函数（即选择日期之后），将isColse设为true实现选择完日期自动关闭日历页面
  setDate(date) {
    this.isClose = true
  }