系列文章目录

Vue基础篇一：编写第一个Vue程序
Vue基础篇二：Vue组件的核心概念
Vue基础篇三：Vue的计算属性与侦听器
Vue基础篇四：Vue的生命周期（秒杀案例实战）
Vue基础篇五：Vue的指令
Vue基础篇六：Vue使用JSX进行动态渲染
Vue提高篇一：使用Vuex进行状态管理
Vue提高篇二：使用vue-router实现静态路由
Vue提高篇三：使用vue-router实现动态路由
Vue提高篇四：使用Element UI组件库
Vue提高篇五：使用Jest进行单元测试
Vue提高篇六：使用Vetur+ESLint+Prettier插件提升开发效率
Vue实战篇一：使用Vue搭建注册登录界面
Vue实战篇二：实现邮件验证码发送
Vue实战篇三：实现用户注册
Vue实战篇四：创建多步骤表单
Vue实战篇五：实现文件上传
Vue实战篇六：表格渲染动态数据
Vue实战篇七：表单校验
Vue实战篇八：实现弹出对话框进行交互
Vue实战篇九：使用省市区级联选择插件
Vue实战篇十：响应式布局
Vue实战篇十一：父组件获取子组件数据的常规方法
Vue实战篇十二：多项选择器的实际运用
Vue实战篇十三：实战分页组件
Vue实战篇十四：前端excel组件实现数据导入
Vue实战篇十五：表格数据多选在实际项目中的技巧
Vue实战篇十六：导航菜单
Vue实战篇十七：用树型组件实现一个知识目录
Vue实战篇十八：搭建一个知识库框架
Vue实战篇十九：使用printjs打印表单
Vue实战篇二十：自定义表格合计
Vue实战篇二十一：实战Prop的双向绑定
Vue实战篇二十二：生成二维码
Vue实战篇二十三：卡片风格与列表风格的切换
Vue实战篇二十四：分页显示
 Vue实战篇二十五：使用ECharts绘制疫情折线图
 Vue实战篇二十六：创建动态仪表盘

一、背景

我们有时候需要在有限空间内，循环播放同一类型的图片、文字等内容。比如首页轮播图片，商品信息循环播放等，这种效果统称为走马灯。

二、Element Carousel 走马灯组件

基本用法

结合使用el-carousel和el-carousel-item标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在el-carousel-item标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置trigger属性为click，可以达到点击触发的效果

<el-carousel trigger="click" height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
      <h3 class="small">{{ item }}</h3>
    </el-carousel-item>
 </el-carousel>

基本效果

三、走马灯式轮播的实现

准备iPhone mini,iPhone pro,iPhone max三款手机的图片, 放置到 /src/assets/images目录下
编写页面
– 将Element Carousel 走马灯组件设置为 card卡片效果
– 将三张手机图片放置在数组中,循环读取
– 图片自适应，走马灯组件高度、宽度随图片大小调整

<template>
  <div class="carousel">
    <el-carousel :interval="2000" type="card" :height="carouselHeight + 'px'">
      <el-carousel-item v-for="item in images" :key="item">
        <img
          ref="images"
          :src="require('@/assets/images/' + item)"
          class="img"
          @load="resize()"
        >
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      // 图片数组
      images: ['mini.png', 'pro.png', 'max.png'],
      imageHeight: 355,
      carouselHeight: 355

    }
  },
  mounted() {
    // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.resize()
    }
  },
  methods: {
    resize() {
      // 监听屏幕视口大小如果'resize',发生改变了，就获取图片的高度height，然后渲染到页面
      this.$nextTick(() => {
        this.carouselHeight = this.$refs.images[0].height
      })
    }
  }

}
</script>

<style>
.carousel {
  margin: 10px;
  padding: 5px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
</style>