如何对 QCard 中的模糊/失焦做出反应？

Answer 1

默认情况下，无输入 HTML 元素不接受焦点。要使其可聚焦，请指定其

tabindex

属性。

<div>not focusable </div>
<div tabindex="0"> focusable </div>

q-card

是

div

，因此您可以利用相同的机制。

<template>
<q-card
  bordered
  flat
  v-for="pill in loadedPerson?.Pills" :key="pill.ID"
  class="pill text-center bg-blue-1"
  @blur="updatePill(pill)"
  tabindex="0"
>
  <q-card-section class="q-pb-none">
    <div class="text-h4 text-bold">{{ pill.Name }}</div>
  </q-card-section>
  <q-card-section class="flex row q-pt-none flex-center items-center">
    <q-input maxlength="2" size="2" dense borderless v-model="pill.Amount"
             class="text-h4 text-bold amountPills"></q-input>
    <q-icon size="xl" name="las la-plus-circle" class="cursor-pointer" @click="pill.Amount++"></q-icon>
    <q-icon size="xl" name="las la-minus-circle" class="cursor-pointer" @click="pill.Amount--"></q-icon>
  </q-card-section>
</q-card>
</template>

<script setup lang="ts">
const loadedPerson = {
  Pills: [
    {
      ID: '1',
      Name: 'Name 1',
      Amount: 11,
    },
    {
      ID: '2',
      Name: 'Name 2',
      Amount: 12,
    },
  ],
};

function updatePill(pill: any) {
  console.log('-> updatePill', pill);
}
</script>