一、准备工作

在开始之前，请确保你的开发环境中已经安装了Vue。以下是一个简单的Vue项目结构：

src/
|-- components/
|   |-- ImageWithText.vue
|-- App.vue
|-- main.js

二、创建ImageWithText组件

  1. 创建ImageWithText.vue文件

在src/components目录下创建ImageWithText.vue文件，并添加以下内容：

<template>
  <div class="image-with-text">
    <img :src="imageSrc" alt="图片" />
    <div class="text">{{ text }}</div>
  </div>
</template>

<script>
export default {
  name: 'ImageWithText',
  props: {
    imageSrc: String,
    text: String
  }
}
</script>

<style scoped>
.image-with-text {
  position: relative;
  width: 100%;
}
.image-with-text img {
  width: 100%;
  height: auto;
}
.text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
}
</style>
  1. 解释代码
  • <template>：定义组件的HTML结构，其中img标签用于展示图片，div标签用于展示文字。
  • <script>：定义组件的JavaScript逻辑，通过props接收图片路径和文字内容。
  • <style>：定义组件的CSS样式，其中.image-with-text类用于设置图片的样式，.text类用于设置文字的样式。

三、在App.vue中使用ImageWithText组件

  1. 引入ImageWithText组件

在App.vue文件中，首先引入ImageWithText组件：

import ImageWithText from './components/ImageWithText.vue'
  1. 使用ImageWithText组件

在App.vue的<template>部分，使用ImageWithText组件：

<template>
  <div id="app">
    <image-with-text :image-src="imageUrl" :text="text"></image-with-text>
  </div>
</template>
  1. 解释代码
  • image-with-text：使用ImageWithText组件，并通过:image-src和:text属性传递图片路径和文字内容。
  • :image-src="imageUrl"：将图片路径绑定到imageSrc属性。
  • :text="text"：将文字内容绑定到text属性。
  1. 设置图片路径和文字内容
<script>
import ImageWithText from './components/ImageWithText.vue'

export default {
  name: 'App',
  components: {
    ImageWithText
  },
  data() {
    return {
      imageUrl: 'path/to/your/image.jpg',
      text: '个性文字'
    }
  }
}
</script>

四、总结