ElementUi轮播图走马灯添加图片

女爷i 2023-03-13 13:53 37阅读 0赞

### ElementUi轮播图走马灯添加图片 ###

*  官网例子
 *  改造适用
 *  效果

# 官网例子 #

这里我们拿官网的例子作为讲解  
链接: [官网][Link 1].  
代码

<template>
      <el-carousel :interval="4000" type="card" height="200px">
       
        <el-carousel-item v-for="item in 6" :key="item">
          <h3 class="medium">{ {  item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </template>
    
    <style>
      .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;
      }
    </style>

# 改造适用 #

从官网中我们可知，要想显示图片，item循环的List中就必须要是个图片的List。因此我们在data中定义一个图片的List集合(后台传同理)。

<template>
        <div class="index">
            
            <div>   
                <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="item in imgList" :key="item.id">
                         <img :src="item.idView" class="image">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </template>
    
    <script>
    export default { 
        name: 'index',
        data(){ 
            return { 
                imgList: [
                    { id:0,idView:'./static/image/monster/dog.jpg'},
                    { id:1,idView:'./static/image/monster/lion.jpg'},
                    { id:2,idView:'./static/image/monster/snake.jpg'},
                    { id:3,idView:'./static/image/monster/tree.jpg'}            
                ]
            };
            },
        methods: {  
        }
    }
    </script>
    <style>
      .index{ 
        background: #c8cfd8;
        width: 80%;
        text-align: center;
        margin-left: 142px;
        width: 80.6%;
        
      }
      .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;
      }
    </style>

注意：

//image中的url，当为当前项目的静态文件时，在本项目下的静态图片。
    { id:0,idView:'./static/image/monster/dog.jpg'},
    //为动态路径时
    { id:0,idView:require("@/assets/images/fk.jpg")},

注意：跑马灯的图片尽量尺寸一致，可以通过工具将图片缩放至同一尺寸。

# 效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc3NDQx_size_16_color_FFFFFF_t_70]

[Link 1]: https://element.eleme.cn/#/zh-CN/component/carousel
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc3NDQx_size_16_color_FFFFFF_t_70]: /images/20230312/6f4da3e8df934fd894d68e14eca024ae.png