ZVue

# 图片预览

# 普通用法


<z-image :data="data"
		:option="option" />

<script>
	export default {
		data() {
			return {
				data: [{
					url:'http://head.images.muchuantong.com/de4e7829-8695-46b2-8437-ddcbca7f0831.jpg'
				},{
					url:'http://head.images.muchuantong.com/e86be7b4-5e2c-4c51-919a-27274cac3abc.jpg'
				}],
				option: {
					miniWidth:'120px',
					miniHeight:'120px',
					firstTip:'这就是第一张了',
					finalTip:'这就是最后一张了',
					mskStyle: {
						'position': 'fixed',
						'top': 0,
						'left': 0,
						'right': 0,
						'bottom': 0,
						'z-index': 9999,
						'height': ' 100%',
						'width': '100%',
					},
				},
			}
		}
	}
</script>
Expand Copy

# 对比浏览


<div class="div">
	<z-image :data="data"
			:option="option" />
	<z-image :data="data2"
			:option="option2" />
</div>

<script>
	export default {
		data() {
			return {
				data: [{
					url:'http://head.images.muchuantong.com/de4e7829-8695-46b2-8437-ddcbca7f0831.jpg'
				},{
					url:'http://head.images.muchuantong.com/e86be7b4-5e2c-4c51-919a-27274cac3abc.jpg'
				}],
				data2: [{
					url:'http://head.images.muchuantong.com/de4e7829-8695-46b2-8437-ddcbca7f0831.jpg'
				},{
					url:'http://head.images.muchuantong.com/e86be7b4-5e2c-4c51-919a-27274cac3abc.jpg'
				}],
				option: {
					miniWidth:'120px',
					miniHeight:'120px',
					firstTip:'这就是第一张了',
					finalTip:'这就是最后一张了',
					mskStyle: {
						'position': 'fixed',
						'top': 0,
						'left': 0,
						'right': 0,
						'bottom': 0,
						'z-index': 9999,
						'height': ' 100%',
						'width': 'calc(50% - 5px)',
					},
				},
				option2: {
					miniWidth:'120px',
					miniHeight:'120px',
					firstTip:'这就是第一张了',
					finalTip:'这就是最后一张了',
					mskStyle: {
						'position': 'fixed',
						'top': 0,
						'left': 0,
						'left': 'calc(50% + 10px)',
						'right': 0,
						'bottom': 0,
						'z-index': 9999,
						'height': ' 100%',
						'width': 'calc(50% - 5px)',
					},
				},
			}
		}
	}
</script>
<style>
.div{
	display:flex
}
</style>
Expand Copy

# option参数

参数名称 说明 类型 是否必填 可选值 默认值
miniWidth 小图片宽度(需带上px) String 否 — 120px
miniHeight 小图片高度 (需带上px) String 否 — 120px
firstTip 第一张之后提示 String 否 — 已是第一张
finalTip 最后一张之后提示 String 否 — 已是最后一张
mskStyle 遮罩样式，可用于控制遮罩宽度，实现图片对比预览 Object 否 — —

← 文件上传 →