vue3 文字悬浮在图片上

Vue3 中要让文字悬停在图片上，你可以结合 HTML、CSS 和 Vue 的模板语法来实现这一效果。这里是一个简单的示例：

1. 首先，在 HTML 结构中，创建一个包含图片和标题的 `<div>` 元素，并给它们设置基本样式。

<template>
  <div class="image-container">
    <img :src="imageUrl" alt="" />
    <span v-if="showTitle" class="caption">{{ title }}</span>
  </div>
</template>

2. 在 CSS 中，你可以使用绝对定位 (`position: absolute;`) 来将文字放置在图片上方，并添加一些动画效果，如 `transition` 属性，当鼠标悬停时改变位置或颜色等。

.image-container {
  position: relative;
}

.caption {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.image-container:hover .caption {
  opacity: 1;
}

3. 在 Vue 组件的 data 对象中，定义变量用于控制标题是否显示以及图片 URL。

export default {
  data() {
    return {
      imageUrl: 'path/to/image.jpg',
      title: '这是文字标题',
      showTitle: false,
    };
  },
};

然后，在适当的时候，比如点击某个按钮或满足其他条件时，通过 `v-model` 或者计算属性控制 `showTitle` 变量来切换标题的显示。