element-ui走马灯手动切换幻灯片问题（主要是通过vue-cli脚手架搭建项目）

element-ui走马灯手动切换幻灯片问题（主要是通过vue-cli脚手架搭建项目）

先上效果图

1. 安装和引入element-ui

• npm install element-ui -S

• 在main.js里面完整（按需）导入element-ui

2.使用走马灯

<div class="block">
<el-carousel height="480px"  ref="carousel" >
<el-carousel-item v-for="item in list" :key="item">
  <img :src="item.bgurl">
</el-carousel-item>
</el-carousel>
</div>

这里的v-for是用列表渲染，list数组里面存放的是从服务器里请求的数据，包含图片的url和id和title。ref主要用于父组件调用子组件的方法。

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例

注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册

通过鼠标悬浮在title上，对应的幻灯片显示给用户

 	     <div class="block">
              <el-carousel height="480px"  ref="carousel" >
              <el-carousel-item v-for="item in list" :key="item">
                 <img :src="item.bgurl">
              </el-carousel-item>
              </el-carousel>
          </div>
          <div class="newstitle">
              <ul>
                  <li v-for="item in list" :key="item"  @mouseover="change(item)">{{item.title}}</li>
              </ul>
          </div>

调用的是走马灯的setActiveItem方法

• 需要切换的幻灯片的索引，从 0 开始；或相应 el-carousel-item的 name 属性值
• 在methods里面定义上面的change方法，在方法内部通过this.$refs.carousel.setActiveItem(e.id)设定幻灯片的id与你鼠标所覆盖的title的id一样，这样通过父组件调用子组件的change方法，使得走马灯幻灯片的播放达到理想效果。