<template>
<div>
<lc-title title="幻灯片" class="title"></lc-title>
<category title="使用案例"></category>
<img class="demo-image"
src="https://dqloa7ej5.lightyy.com/images/lightui/banner1.jpg"
@click="showSwiperfull=true"/>
<p class="image-text">点击图片弹出全屏图片</p>
<lc-button class="btn-margin" @click="showSwiperfull=true">点击按钮弹出全屏图片</lc-button>
<lc-swiperfull
:width="375"
:height="300"
:dataImgItem="dataImgItem"
:show="showSwiperfull"
@swiperfullMaskClicked="maskClick">
</lc-swiperfull>
</div>
</template>
<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
components: { LcTitle, Category },
data(){
return{
showSwiperfull:false,
dataImgItem:[]
}
},
mounted(){
this.dataImgItem = [
{
imgSrc:'images/banner1.jpg'
},
{
imgSrc:'images/banner2.jpg'
},
{
imgSrc:'images/banner3.jpg'
}
]
},
methods:{
maskClick(){
this.showSwiperfull=false;
}
}
}
</script>
<style scoped>
.demo-image {
display: flex;
width: 150px;
height: 150px;
margin: 20px auto;
}
.image-text {
display: flex;
font-size: 13px;
color: #9B7B56;
justify-content: center;
}
.btn-margin{display: flex; margin: 40px auto;}
</style>
|
