0

我是一个vuejs初学者,今天在使用elementui走马灯的时候,发现不能根据图片设置高度,我也没办法获取图片的动态高度。

<template>
    <div class="main">
        <el-row>
            <el-col :span="24">
                <el-carousel indicator-position="outside">
                    <el-carousel-item v-for="(item, key, index) in picList" :key="index" >
                        <el-button id="carouselBtn" type="text" v-on:click="openDownLoad(item.id)" >
                        <img :src="item.img" :alt="item.altstring" class="img-responsive center-block" ref="img" >
                        </el-button>
                    </el-carousel-item>
                </el-carousel>
            </el-col>
        </el-row>

        
    <!--弹出层:下载对话框-->
        <el-dialog title="二维码下载客户端" :visible.sync="dialogFormVisible">
            <img :src="QRCodeIMG" alt="二维码" class="img-responsive center-block">   
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            QRCodeIMG:'',
            dialogFormVisible:false,
            picList:[{img:"static/assets/banner@3x.png", altstring:"商户端",id:"1"},{img:"static/assets/beijing-@3x.png",altstring:"用户端",id:"2"}],
        }
    },
    methods:{
        openDownLoad(indexNum){
            if(indexNum==1){
                this.QRCodeIMG='static/assets/商户端二维码.jpg';
            }else{
                this.QRCodeIMG='static/assets/用户端二维码.jpg';
            }
            this.dialogFormVisible=true;

        }
    }
}
</script>

<style scoped>
#carouselBtn{
    padding: 0px 0px;
}



</style>

这是我的代码,我想做一个类似ofo官网那样,随着图片缩小,走马灯的高度也缩小,我该怎么写?

1 个回答

0

换插件:vue-awesome-swiper