cubi实现图片预览_王小蕾的博客

效果

<template>
	<div class="good">
		<cube-button  @click="showImagePreview">
			<cube-slide  class="good-img"  :auto-play="false" ref="slide" :data="items" @change="changePage">
				<cube-slide-item v-for="(item, index) in items" :key="index" >
					<img class="img" :src="item.image"  @click="handleImgsClick(index)">
				</cube-slide-item>
				<template slot-scope="props" slot="dots">
					<span class="my-dot" :class="{active: props.current == index}" v-for="(item,index) in props.dots" ></span>	
				</template>
			</cube-slide>
		</cube-button>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				initialIndex: 0,
				imgs:[
				'https://img3m1.ddimg.cn/23/34/25340261-1_e_2.jpg',
				'https://img3m1.ddimg.cn/23/34/25340261-4_e_6.jpg',
				'https://img3m1.ddimg.cn/23/34/25340261-3_e_4.jpg',
				'https://img3m1.ddimg.cn/23/34/25340261-5_e_2.jpg',
				],
				items: [
				{
					url: '',
					image: 'https://img3m1.ddimg.cn/23/34/25340261-1_e_2.jpg'
				},
				{
					url: '',
					image: 'https://img3m1.ddimg.cn/23/34/25340261-4_e_6.jpg'
				},
				{
					url: '',
					image: 'https://img3m1.ddimg.cn/23/34/25340261-3_e_4.jpg'
				},
				{
					url: '',
					image: 'https://img3m1.ddimg.cn/23/34/25340261-5_e_2.jpg'
				}],
				props: {
					current: 0,
					dots: [1,2,3,4],
				}
			}
		},
		methods:{
			changePage(current) {
				console.log('当前轮播图序号为:' + current)
				this.props.current = current;
				console.log(this.props.current)
			},
			handleImgsClick(index) {
				this.initialIndex = index
				const params = {
					$props: {
						imgs: this.imgs,
                        initialIndex: 'initialIndex', // 响应式数据的key名
                        loop: false
                    },
                    $events: {
                    	change: (i) => {
                             // 必须更新 initialIndex
                             this.initialIndex = i
                        }
                    }
                }
                this.$createImagePreview({ ...params }).show()
            },

        }
    }
</script>

<style lang="stylus" scoped>
	.good{
		
		.my-dot{
			height: 10px;
			width: 10px;
			background-color: rgba(0,0,0,0.3);
			border-radius: 50%;
			color: red;
			margin: 0 4px
		}
		.img{
			/*display inline-block*/
			width 10rem
			height 250px
		}
		.active{
			background-color: #fff!important;
		}
		.cube-btn{
			padding: 0;
			background-color: #fff;
		}
	}
</style>
<template>
	<div class="good">