vue antd 卡片 列表 hover 实现

<a-list
  item-layout="horizontal"
  :data-source="dataSource"
  :bordered="false"
  :split="false"
  style="overflow: auto; height: 80vh;"
>
  <template #renderItem="{ item }">
    <a-list-item>
      <a-card
        style="width: 100%; "
        :bodyStyle="{ border: `1px solid ${ hoverId === item.id ? '#108EE9' : '#DEE0E3'}`}"
        @click="detailDisplay(item.id)"
        @mouseenter="enter(item.id)"
        @mouseleave="leave(item.id)"
      >
      </a-card>
    </a-list-item>
  </template>
</a-list>

export default {
  data () {
    return {
      hoverId: null,
    }
  },
  methods: {
    enter (id) {
      console.log('enter -----------');
      console.log(id);
      this.hoverId = id;
    },
    leave (id) {
      console.log('leave -----------');
      console.log(id);
      this.hoverId = null;
    },
  }
}