功能描述:写了一个图片的可滑动的菜单,我想在切换滑动图片的时候获取图片的地址,这样我点击下方的使用该图片按钮就可以获取到图片的一些数据,在Vue中只需要@slideChange="change()"就可以啦~
部分代码:
<template>
<el-form>
<el-form-item>
<swiper
:options="swiperOption"
ref="demoSwiper"
@slideChange="change()"
>
<swiper-slide
v-for="(item, index) in imgList"
:key="index"
class="imgListItem"
>
<el-image
:key="index"
:src="item"
style="max-width:200px;max-height:200px"
>
</el-image>
</swiper-slide>
<div class="swiper-button-prev" v-show="!loading" slot="button-prev"></div>
<div class="swiper-button-next" v-show="!loading" slot="button-next"></div>
</swiper>
</el-form-item>
<el-form-item class="example-btn-box">
<el-button type="primary" @click="clickExample()" style="margin-bottom:5%"
>使用该图片</el-button
>
</el-form-item>
</el-form>
</template>
methods: {
change() {
this.imgIndex = this.$refs.demoSwiper.swiper.activeIndex;
},