当前位置:网站首页>Wiper component encapsulation
Wiper component encapsulation
2022-04-23 16:59:00 【Endless cake】
swiper Components
<!-- Component calls -->
<ui-swipe :product-image="swiperList" :img-event="showImageViewer" key-name="imageUrl"></ui-swipe>
<!-- Component content -->
<template>
<div class="swipe" @click="imgEvent" style="visibility: 'visible' !important">
<div class="swipe-wrap">
<div class="swiper-container">
<div class="swiper-wrapper">
<figure class="swiper-slide" v-for="(pic, picIndex) in productImage" :key="picIndex" >
<template v-if="pic.linkUrl">
<a :href="pic.linkUrl || 'javascript:void(0)'">
<img
class="h100per"
alt="pic"
:src="pic[keyName]?pic[keyName]:defaultPic"
style="visibility: 'visible' !important"
/>
</a>
</template>
<template v-if="!pic.linkUrl">
<img
class="h100per"
alt="pic"
:src="pic[keyName]?pic[keyName]:defaultPic"
style="visibility: 'visible' !important"
/>
</template>
</figure>
</div>
<div class="swiper-pagination swiper-pagination-red"></div>
</div>
</div>
<slot></slot>
</div>
</template>
<script>
export default {
props: ['productImage', 'imgEvent', 'keyName', 'defaultPic'],
mounted() {
var that = this
Vue.nextTick(function() {
setTimeout(() => {
// eslint-disable-next-line no-undef
new Swiper('.swiper-container', {
autoplay: {
// Auto play
delay: 3000, // 3s
stopOnLast: false, // The last frame plays automatically
disableOnInteraction: false // It can also play normally after manual sliding
},
loop: that.productImage.length > 1, // Roll back
pagination: {
// Configure small points
el: '.swiper-pagination',
clickable: true
}
})
}, 200)
})
},
methods: {}
}
</script>
版权声明
本文为[Endless cake]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204230554520020.html
边栏推荐
- Detailed explanation of information abstract, digital signature, digital certificate, symmetric encryption and asymmetric encryption
- How to implement distributed locks with redis?
- Solution architect's small bag - 5 types of architecture diagrams
- 计组 | 【七 输入/输出系统】知识点与例题
- Read a blog, re understand closures and tidy up
- Public variables of robotframework
- Production environment——
- Use case labeling mechanism of robot framework
- MySQL restores data through binlog file
- groutine
猜你喜欢
Quick install mongodb
STM32__03—初识定时器
Customize my_ Strcpy and library strcpy [analog implementation of string related functions]
groutine
How vscode compares the similarities and differences between two files
Path environment variable
Easyexcel reads the geographical location data in the excel table and sorts them according to Chinese pinyin
ByteVCharts可视化图表库,你想要的我都有
File upload and download of robot framework
On lambda powertools typescript
随机推荐
Bytevcharts visual chart library, I have everything you want
Get the column name list of the table quickly in Oracle
Customize my_ Strcpy and library strcpy [analog implementation of string related functions]
[markdown notes]
Derivation of Σ GL perspective projection matrix
How to build tiktok user trust and drive fan growth
ByteVCharts可视化图表库,你想要的我都有
Use case labeling mechanism of robot framework
Encapsulating the logging module
Knowledge points and examples of [seven input / output systems]
Nacos + aspnetcore + Ocelot actual combat code
Zhimeng dedecms security setup Guide
Loggie source code analysis source file module backbone analysis
Detailed explanation of the penetration of network security in the shooting range
Installing labellmg tutorial in Windows
Go language RPC communication
websocket
TypeError: set_figure_params() got an unexpected keyword argument ‘figsize‘
Dancenn: overview of byte self-developed 100 billion scale file metadata storage system
Error in v-on handler: "typeerror: cannot read property 'resetfields' of undefined"