element ui 走马灯使用

1.图片遍历渲染：创建一个存放图片数组imgUrl;图片地址使用require就可以动态使用了。

如：{id:1, idviews: require("@/assets/img/baiyang.jpg") },

<el-carousel :interval="4000" type="card" :height="bannerHeight +'px'">

      <el-carousel-item v-for="item in imgUrl" :key="item.id">

        <img style="object-fit: scale-down; width: 100%;height: 100%;" :src="item.idviews" alt="" />

        <h3 class="medium">{{ item }}</h3>

      </el-carousel-item>

    </el-carousel>

2.在图片上加上style="object-fit: scale-down; width: 100%;height: 100%;"可以让图片自适应大小；

3.让走马灯在浏览器改变的时候，图片以及容器不会发生变化，达到自适应

a.动态设置高度:height="bannerHeight +'px'"；

b.

data() {

    return {

      imgUrl: [

        {id:1, idviews: require("@/assets/img/baiyang.jpg") },

        {id:10, idviews: require("@/assets/img/tiancheng.jpg") },

        {id:11, idviews: require("@/assets/img/tianxie.jpg") },

        {id:12, idviews: require("@/assets/img/shuangzi.jpg") },

      ],

      //图片父容器高度：和图片一样高

      bannerHeight:200,

      //浏览器高度

      screenWidth:0,

    };

  },

c.编写函数方法以及mounted

mounted() {

    //首次加载时，调用一次

    this.screenWidth = window.innerWidth;

    this.setSize();

    //窗口大小发送改变时，调用一次

    window.οnresize=()=>{

      this.screenWidth = window.innerWidth;

      this.setSize()

    }

  },

  methods: {

    setSize:function(){

      //通过浏览器高度（图片宽度）计算高度

      this.bannerHeight = 400/1920 * this.screenWidth;

    }

  },