使用 Vue 3 来实现并优化鼠标在表格悬停显示图片的效果

悬停

1. 创建 Vue 3 项目结构

首先，确保你已经有了 Vue 3 的项目。如果没有，可以使用 Vue CLI 创建一个新的项目：

npm install -g @vue/cli
vue create hover-image
cd hover-image
npm run serve

2. 在 App.vue 中实现鼠标悬停显示图片的功能

在 App.vue 文件中，你可以如下实现鼠标悬停显示图片的功能：

<template>
  <div id="app">
    <div class="table-wrapper">
      <table class="hover-table">
        <thead>
          <tr>
            <th>作品タイトル</th>
            <th>放送開始日</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <HoverImage 
                hoverText="あたしンちNEXT"
                imageUrl="https://atashinchi30th-anime.shin-ei-animation.jp/assets/img/top/ttl_pc.png"
                imageAlt="あたしンちNEXT"
                linkUrl="https://atashinchi30th-anime.shin-ei-animation.jp/"
              />
            </td>
            <td>2024/06/05(水)</td>
          </tr>
          <tr>
            <td>
              <HoverImage 
                hoverText="まぁるい彼女と残念な彼氏"
                imageUrl="https://animationid.com/marukano/assets/img/main-pc.jpg"
                imageAlt="まぁるい彼女と残念な彼氏"
                linkUrl="https://animationid.com/marukano/index.html"
              />
            </td>
            <td>2024/06/07(金)    </td>
          </tr>
          <!-- 其他表格项 -->
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import HoverImage from './components/HoverImage.vue';
</script>

<style scoped>
/* 表格的容器允许内容溢出 */
.table-wrapper {
  position: relative;
  overflow: visible; /* 允许内容溢出表格边界 */
}

/* 表格基本样式 */
.hover-table {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: visible; /* 允许内容溢出表格边界 */
}

.hover-table th, .hover-table td {
  padding: 15px;
  text-align: left;
  font-size: 16px;
}

.hover-table th {
  background-color: #f0f0f0;
  color: #333;
  font-weight: bold;
}

.hover-table td {
  border-bottom: 1px solid #e0e0e0;
}

.hover-table tr:last-child td {
  border-bottom: none;
}
</style>

3. 创建 HoverImage 组件

在 src/components 目录下创建一个新的文件 HoverImage.vue，实现悬停显示图片的功能：

<template>
  <div class="hover-image-container">
    <!-- 链接文字，点击后跳转到指定链接 -->
    <a :href="linkUrl" target="_blank">{{ hoverText }}</a>
    <!-- 悬停时显示的图片 -->
    <img :src="imageUrl" :alt="imageAlt" class="hover-image" />
  </div>
</template>

<script setup>
defineProps({
  hoverText: String,    // 悬停显示的文本
  imageUrl: String,     // 图片链接
  imageAlt: String,     // 图片的alt属性
  linkUrl: String       // 链接的跳转地址
});
</script>

<style scoped>
/* 设置悬停图片的显示样式 */
.hover-image-container {
  display: inline-block;
  position: relative;
}

.hover-image-container:hover .hover-image {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

/* 控制悬停图片的位置和样式 */
.hover-image {
  display: none;
  position: absolute;
  top: -10px; /* 调整到文字上方或者其他位置 */
  left: 100%; /* 图片显示在文字右侧 */
  transform: translateX(10px);
  z-index: 1000; /* 增加z-index，确保图片显示在最上层 */
  padding: 8px;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  max-width: 200px;
  max-height: 200px;
  object-fit: cover;
}

/* 增加淡入动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10%); }
  to { opacity: 1; transform: translateY(0); }
}

/* 链接文本样式 */
a {
  color: #0000ff;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}
</style>

4. 运行应用

保存所有文件，回到命令行中，确保你正在运行 Vue 应用程序 (npm run serve)，然后在浏览器中查看效果。

5.出错误

打开package.json文件，找到eslintConfig，补上rules

"eslintConfig": {
  "root": true,
  "env": {
   "node": true
  },
  "extends": [
   "plugin:vue/vue3-essential",
   "eslint:recommended"
  ],
  "parserOptions": {
   "parser": "@babel/eslint-parser"
  },
  "rules": {
   "no-unused-vars": "off",
   "vue/no-unused-components": "off",
   "no-undef": "off"
  }
 },