elementui2.0走马灯图片的名字显示出来怎么做
时间: 2023-06-18 14:03:34 浏览: 103
纯css图片无缝走马灯效果源码
在 ElementUI 2.0 中,走马灯(Carousel)组件默认是不会显示图片名称的,如果需要显示图片名称可以通过以下步骤实现:
1. 在走马灯组件中添加一个 `slot` 插槽,用于自定义显示图片名称的内容:
```html
<el-carousel>
<el-carousel-item v-for="(item, index) in items" :key="index">
<img :src="item.src" alt="">
<div class="image-name">{{ item.name }}</div>
</el-carousel-item>
<template slot="indicator"></template>
</el-carousel>
```
2. 在添加图片时,给每张图片设置一个 `name` 属性,用于显示图片名称:
```js
data() {
return {
items: [
{
src: 'https://picsum.photos/800/400/?image=1',
name: '图片1'
},
{
src: 'https://picsum.photos/800/400/?image=2',
name: '图片2'
},
{
src: 'https://picsum.photos/800/400/?image=3',
name: '图片3'
}
]
}
}
```
3. 在 CSS 样式中设置 `.image-name` 的样式,用于控制图片名称的显示样式:
```css
.image-name {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 16px;
text-align: center;
}
```
这样就可以在走马灯组件中显示每张图片的名称了。
阅读全文