vuejs用指针使一行可点击

Question

我有一个表格，该行必须是可点击的。此单击应触发父组件中的功能。下面的示例确实有效，但它变得混乱。通常我会将该行包装在<router-link> 标记中，但一个单元格的值可能无法单击。

<td
  @click.prevent="(!day.submitted || day.rejected ) ? $emit('update', day) : ''" 
  onMouseOver="this.style.cursor='pointer'"
  class="py-0 w-1/4">

可以写得更短吗？我已经尝试使用自定义指令，但我无法让它工作。

<td clickMe>{{ day.hours }}</td>

这样的事情会很理想，有什么想法可以实现吗？

Answer 1

最简单的方法是使用自定义css类class="pointer"：

在<template>:

<td
  @click.prevent="(!day.submitted || day.rejected ) ? $emit('update', day) : ''" 
  class="py-0 w-1/4 pointer">

在<style> 或<style scoped>：

<style>
.pointer {
  cursor: pointer;
}
</style>