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

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

先上效果图

element-ui走马灯手动切换幻灯片问题(主要是通过vue-cli脚手架搭建项目)_第1张图片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-itemname 属性值
  • 在methods里面定义上面的change方法,在方法内部通过this.$refs.carousel.setActiveItem(e.id)设定幻灯片的id与你鼠标所覆盖的title的id一样,这样通过父组件调用子组件的change方法,使得走马灯幻灯片的播放达到理想效果。

你可能感兴趣的:(学习记录,vue,element-ui)