vue2.0 + element-ui 实战项目-实现一个简单的轮播图（六）

王小婷

发布于 2020-11-12 11:19:36

5.3K0

发布于 2020-11-12 11:19:36

文章被收录于专栏：编程微刊

自从用饿了么框架重构项目以来，遇到很多问题，我都有一一记录下来，现在特喜欢这个框架，说实话，如果你是用了vue这个技术栈的话，一定要用饿了么的pc端框架哦，遇到问题的时候在网上百度一下，就能找到解决方案，还有很多社区可以讨论，社区文档都比较成熟，很容易上手~~

Github地址：https://github.com/ElemeFE/element

Vue2.0官方网站：http://caibaojian.com/vue/guide/installation.html Element-ui官方网站：https://element.eleme.cn/#/zh-CN

在添加的时候，需要点击添加按钮，出现一个form弹框的效果

使用饿了么做项目，最重要的一个小功能，也是必不可少的，那就是轮播图，相信大部分的项目里面都是需要这个效果的，看了一下文档里面，也有写好了示例代码，给了一个比较专业的称呼，走马灯效果，也就是我们要的轮播图~~

参考文档： https://element.eleme.cn/#/zh-CN/component/carousel

<template>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

效果

这是例子里面的代码现在我们要将几张图片替换上去准备四张banner图片放在asset文件夹底下

参考

<template>
  <el-carousel indicator-position="outside"  style="width:800px">
    <el-carousel-item v-for="item in imgArray" :key="item">
      <img :src="item" class="rightImg">
    </el-carousel-item>
  </el-carousel>
</template>
<script>
export default {
  name: "XXXXXXX",
  data() {
    return {
      imgArray: [
        require('../assets/1.png'),
        require('../assets/2.png'),
        require('../assets/3.png'),
        require('../assets/4.png')
      ]
    }
  }
}
</script>
<style>
.rightImg {
  width: 800px;
  height: 540px;
}
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

ok，这样就可以了~~