如何创建具有悬停效果的可点击 q 卡？

Question

我们在 Vue.js 中使用 Quasar 框架。考虑以下q-card可点击的内容：

<div class="q-pa-md row items-start q-gutter-md cursor-pointer">
  <q-card class="my-card" clickable @click="GetSapRoster">
    <q-card-section class="bg-primary text-white">
      <div class="text-h6">SAP Truck Roster</div>
      <div class="text-subtitle2">Get the truck planning</div>
    </q-card-section>
  </q-card>
</div>

a 怎么可能达到q-card和 a一样的效果q-btn？

在使用类cursor-pointer 时，它只修复了鼠标指针，而不是像 a 一样的阴影效果q-btn。

Answer 1

您可以使用 v-ripple + q-hoverable + q-focus-helper 来模拟按钮。

例如：

<q-card v-ripple class="my-box cursor-pointer q-hoverable">
     <span class="q-focus-helper"></span>
     <q-card-section>
        ...
     </q-card-section>
</q-card>