VUE 帮我协议一个 每张图片右下角放一个文本
时间: 2024-05-13 09:20:12 浏览: 33
文字环绕图片右下角
可以使用 Vue 组件的方式来实现该功能。可以将图片和文本都封装在同一个组件中,通过样式来定位文本在图片右下角。以下是示例代码:
```
<template>
<div class="image-with-text">
<img :src="imageUrl" alt="image">
<div class="text">{{text}}</div>
</div>
</template>
<script>
export default {
props: {
imageUrl: {
type: String,
required: true
},
text: {
type: String,
required: true
}
}
};
</script>
<style scoped>
.image-with-text {
position: relative;
}
.text {
position: absolute;
bottom: 0;
right: 0;
background-color: #fff;
padding: 10px;
opacity: 0.8;
}
</style>
```
在使用时,可以通过传入 `imageUrl` 和 `text` 的值来显示图片和文本,如下:
```
<image-with-text imageUrl="/path/to/image.jpg" text="这是图片右下角的文本"></image-with-text>
```
阅读全文