vue.js - Vue awesome swiper 在 vue js modal 插件中无法正常工作
问题描述
我正在使用vue-js-modal进行产品快速查看,我正在尝试使用vue-awesome-swiper创建一个图片库,但问题出在这个模态图片库之外工作正常,因为我在方面但在模态插件里面显示错误且无法正常工作
我没有找到关于这个主题的任何解决方案,请帮助我任何人
我的代码如下
<template>
<modal name="quick-view" width="90%" height="auto" :maxWidth="1000" :maxHeight="600" :adaptive="true">
<div class="modal-content-wrapper">
<button @click="hide" class="modal-close">Close me</button>
<div class="product-details">
<div class="product-carousel">
<!-- swiper1 -->
<swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
<swiper-slide>
<img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/GreenLimes_jrodle.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/Yellow_Limes_y0lbyo.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614569/pickbazar/grocery/RedCherries_zylnoo.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/CelerySticks_ulljfz.jpg" alt="">
</swiper-slide>
</swiper>
<!-- swiper2 Thumbs -->
<swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
<swiper-slide>
<img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/GreenLimes_jrodle.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/Yellow_Limes_y0lbyo.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614569/pickbazar/grocery/RedCherries_zylnoo.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/CelerySticks_ulljfz.jpg" alt="">
</swiper-slide>
</swiper>
</div>
<div class="p-10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur at,
dignissimos dolorum enim ex expedita fuga harum.
</div>
</div>
</div>
</modal>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
name: "Products",
components : {
Swiper, SwiperSlide
},
data() {
return {
swiperOptionTop: {
loop: true,
loopedSlides: 5, // looped slides should be the same
spaceBetween: 10,
},
swiperOptionThumbs: {
loop: true,
loopedSlides: 5, // looped slides should be the same
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true
}
}
},
mounted() {
this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.$swiper
const swiperThumbs = this.$refs.swiperThumbs.$swiper
swiperTop.controller.control = swiperThumbs
swiperThumbs.controller.control = swiperTop
})
},
methods : {
show () {
this.$modal.show('quick-view');
},
hide () {
this.$modal.hide('quick-view');
}
}
}
</script>
解决方案
在模态变得可见或开始转换后,您必须使用事件来进行ref
工作使用@opened
事件 Emits。在此处查看此插件事件
<template>
<modal name="quick-view" width="90%" height="auto" :maxWidth="1000" :maxHeight="600" :adaptive="true"
@opened="opened"
>
............
</modal>
</template>
<script>
export default {
methods: {
opened() {
this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.$swiper
const swiperThumbs = this.$refs.swiperThumbs.$swiper
swiperTop.controller.control = swiperThumbs
swiperThumbs.controller.control = swiperTop
})
}
}
}
</script>
推荐阅读
- vue.js - axios 在 vuex 操作中发布具有多个参数的请求
- sql - 创建动态 SQL 查询以列出所有数据库中的所有用户
- stm32 - STM32 - ESP8266 下载文件
- javascript - 倒数计时器不起作用javascript
- javascript - 需要从地图中删除以前的标记而不刷新谷歌地图
- unix - 将单引号添加到变量到bash中的一行
- python - Tkinter Python 更新变量
- python - 如果我手动运行 dag,如何自动并行运行 apache 气流
- python - 单偶数的幻方,制作numpy数组
- apache-spark - spark_session 和 sqlContext 加载本地文件的区别