详细element-ui的走马灯carousel轻松实现自适应全

div部分

<el-carousel indicator-position="outside" :height="bannerHeight + 'px'">

    <el-carousel-item v-for="(item,index) in BannerImg">

      <img :src="item"  class="bannerImg" />

      <!-- <img src="../../assets/images/banner2.jpg" v-if="index == 1" class="bannerImg" />

      <img src="../../assets/images/banner3.jpg" v-if="index == 2" class="bannerImg" /> -->

    </el-carousel-item>

  </el-carousel>

CSS部分

.bannerImg{

    width: 100%;

    height: inherit;

    min-height: 600px;

    min-width: 1400px;

  }

vue.JS部分

var vm = new Vue({

el : '#apptwo',

data : {

bannerHeight:"",

BannerImg:[

          "${request.contextPath}/statics/BCHimg/b6.png",

        "${request.contextPath}/statics/BCHimg/b6.png"

          ],

mounted(){

this.setSize();

  const that = this;

  window.addEventListener('resize', function() {

    that.screenWidth = $(window).width();

    that.setSize();

  }, false);

    },

methods : {

setSize: function () {

console.log(this.bannerHeight)

    this.bannerHeight = 740 / 2560 * this.screenWidth

    if(this.bannerHeight > 740) this.bannerHeight = 740

    if(this.bannerHeight < 600) this.bannerHeight = 600

  },