Vue使用Element-ui走马灯功能动态改变图片和容器大小

Z时代
2024-01-10
分类：综合

vue

　　在Vue项目开发中,发现使用Element的走马灯功能实例中

<template>
  <div class="block">
    <span class="demonstration">默认 Hover 指示器触发</span>
    <el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="block">
    <span class="demonstration">Click 指示器触发</span>
    <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>
  </div>
</template>
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
img{
width:100%;
}
</style>

　　由于img的宽度设置了100%,所以高度会根据图片来自动调整，但当浏览器的大小发生改变,会出现图片下面出现空白现象,如果固定img的高度,那么图片就可以会随浏览器的变化发生变形。

　　图片下面出现空白现象

　　　图片就可以会随浏览器的变化发生变形

　　这个时候可以通过动态设置父级容器的高度来解决这个问题，代码如下

<template>
    <div id="banner">
      <!--动态将图片轮播图的容器高度设置成与图片一致-->
      <el-carousel :height="bannerHeight + \'px\'" >
        <!--遍历图片地址,动态生成轮播图-->
        <el-carousel-item v-for="item in img_list" :key="item">
          <img :src="item" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
</template>
<script>
    export default {
        name: "Banner",
        data(){
          return{
            // 图片地址数组
            img_list:[
              "/static/image/111.png",
              "/static/image/222.png",
              "/static/image/333.png",
              "/static/image/444.png",
            ],
            // 图片父容器高度
            bannerHeight :1000,
            // 浏览器宽度
            screenWidth :0,
          }
        },
        methods:{
          setSize:function () {
            // 通过浏览器宽度(图片宽度)计算高度
            this.bannerHeight = 400 / 1920 * this.screenWidth;
          },
        },
      mounted() {
          // 首次加载时,需要调用一次
          this.screenWidth =  window.innerWidth;
          this.setSize();
          // 窗口大小发生改变时,调用一次
          window.onresize = () =>{
          this.screenWidth =  window.innerWidth;
          this.setSize();
        }
      }
    }
</script>
<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    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;
  }
  img{
    /*设置图片宽度和浏览器宽度一致*/
    width: 100%;
    height: inherit;
  }
</style>