elementui走马灯图片
时间: 2023-10-10 07:06:59 浏览: 137
zoumadeng.rar_03057336_8279_走马灯
Element UI 提供了一个 Carousel 走马灯组件,可以用来展示图片。你可以通过以下代码来实现:
```html
<template>
<el-carousel :interval="4000">
<el-carousel-item v-for="item in items" :key="item.id">
<img :src="item.imageUrl" alt="">
</el-carousel-item>
</el-carousel>
</template>
<script>
export default {
data() {
return {
items: [
{
id: 1,
imageUrl: 'https://example.com/image1.jpg'
},
{
id: 2,
imageUrl: 'https://example.com/image2.jpg'
},
{
id: 3,
imageUrl: 'https://example.com/image3.jpg'
}
]
};
}
};
</script>
```
在上面的代码中,`items` 数组包含了需要展示的图片信息。你可以根据自己的需求修改 `items` 数组中的数据,增加或删除图片。`el-carousel` 组件的 `:interval` 属性用于设置轮播间隔时间,单位为毫秒。
请注意,上面的代码只是一个简单的示例,你还可以根据自己的需求进行进一步的定制和样式调整。更多关于 Element UI Carousel 的用法和配置选项,请参考 Element UI 的官方文档。
阅读全文