一个页面多个el-carousel问题
时间: 2023-08-14 22:06:05 浏览: 165
如果你想在同一个页面上使用多个 `el-carousel`,可以在每个 `el-carousel` 中添加一个不同的 `ref` 属性,然后在代码中使用该 `ref` 属性来控制每个 `el-carousel` 的行为。以下是一个示例代码:
```
<template>
<div>
<el-carousel ref="carousel1">
<!-- carousel1 content here -->
</el-carousel>
<el-carousel ref="carousel2">
<!-- carousel2 content here -->
</el-carousel>
</div>
</template>
<script>
export default {
mounted() {
this.$refs.carousel1.setActiveItem(1); // set the active item of carousel1
this.$refs.carousel2.prev(); // move to the previous item in carousel2
}
}
</script>
```
在上面的示例代码中,我们使用了两个 `el-carousel`,分别使用了 `ref="carousel1"` 和 `ref="carousel2"`。在 `mounted` 生命周期钩子中,我们使用 `$refs` 来访问这两个 `el-carousel`,并分别调用了 `setActiveItem` 和 `prev` 方法来控制它们的行为。