element ui走马灯怎么添加_element-ui对话框与走马灯一起用

一、需求分析

通过点击一组图片中的某一张图片，显示出当前的图片在对话框中，并可以通过走马灯的方式左右切换出其他图片，图片大小和对话框大小为自适应

二、实现步骤

1、布局代码

:src="item.dcid"

v-if="item.format.toUpperCase() == 'JPEG' || item.format.toUpperCase() == 'PNG' || item.format.toUpperCase() == 'JPG'"

@click="ShowBigPic($event, items.aList, index)"

:title="items.startDate + '年 ' + data.name"

v-for="(item, index) of items.aList"

:key="item.dcid"

>

暂无图片

:title="imgtitle"

:visible.sync="dialogVisible"

:before-close="closeBigPic"

top="1vh"

:width='this.dialogwidth'

>

indicator-position="none"

:autoplay="false"

:initial-index="this.carouselArrIndex"

:height="this.dialogheight"

arrow="always"

v-if="isCarouselShow"

@change="changeCarousel"

>

2、逻辑代码

2.1、data中的设置

data() {

return {

imgsrc: '',

imgtitle: '',

carouselArr: [],

carouselArrIndex: 0,

radio: '1',

activeName: '0',

dialogheight: "500px",

dialogwidth: "50%",

......

},

2.2、方法代码

methods: {

......

ShowBigPic(e, data, index) {

let title = e.target.title

this.imgtitle = title

this.carouselArr = data

this.carouselArrIndex = index

this.dialogheight = e.target.naturalHeight.toString() + "px"

this.dialogwidth = e.target.naturalWidth.toString() + "px"

this.changeIsCarouselShow(true)

this.changeDialogVisible(true)

},

changeCarousel(e) {

this.dialogheight = this.$refs.carouselIMG[e].naturalHeight + "px"

this.dialogwidth = this.$refs.carouselIMG[e].naturalWidth + "px"

}

},

3、样式表

自己搞定(╯•̀ὤ•́)╯

三、效果展示

图片展示.png

图片弹出展示01.png

图片弹出展示02.png

四、自卖自夸

UI设计很舒适，符合大众审美

图片展示方式很nice

走马灯与对话框完美自适应

可用性很强啊！