elementui 走马灯图片自适应

点击单元格后弹出对话框轮播图片，用Carousel 走马灯实现。

希望图片无论分辨率多少，都能在一屏内显示，这时就要用图片自适应。

图片外层容器，使用 flex 布局，设置对齐方式为主轴、交叉轴居中

display: flex;

align-items: center;

justify-content: center;

图片自适应宽高

max-width: 100%; height-width: 100%

完整的栗子

<template>

  <el-dialog :visible.sync="visible"

        :top="0"

        :modal="true"

        @close="$emit('update:show', false)"

            >

      <div align="center">

        <el-carousel indicator-position="outside" trigger="click" height="90vh">

          <el-carousel-item class="el-carousel__item" v-for="(p, idx) in imageUrlList" :key="idx">

            <img class="carousel-image" :src="p | slimPic" />

          </el-carousel-item>

        </el-carousel>

      </div>

    </el-dialog>

</template>

<script>

import { slimPic } from '@/utils/qiniu.js'

export default {

  name: 'DialogImageCarousel',

  props: {

    // 是否可见

    show: {

      type: Boolean,

      default: false,

    },

    // 传入的图片url数组

    imageUrlList: {

      type: Array,

      default(){

        return []

      }

    }

  },

  filters: {

    slimPic

  },

  watch: {

    show(){

      this.visible = this.show

    }

  },

  data(){

    return {

      visible: this.show,

    }

  },

}

</script>

<style lang="scss" scoped>

.el-carousel__item {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  .carousel-image {

    max-width: 100%;

    max-height: 100%;

  }

}

</style>

巴特西

elementui 走马灯图片自适应

最新文章

热门文章