我们将 Quasar Framework 与 Vue.js 结合使用。考虑以下可点击的 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>
q-card
如何实现与 q-btn
相同的效果?
目前正在使用类 cursor-pointer它只修复鼠标指针,而不修复像 q-btn
那样的阴影效果。
最佳答案
您可以使用 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>
关于vue.js - 如何制作可点击的带有悬停效果的q卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64890882/