自定义uni-app图片预览组件

图片预览组件在uni-app官网uni-previewImage实现的但是感觉他的这个满足不了自己的需求，就自己写了个

1.定义公共组件cu-previewImg.vue

<template>
	<view class="">
		<view class="img-box" :style="`width: ${width}rpx;height: ${height}rpx;`" @click="show = !show">
			<img :src="src" alt="" style="width: 100%; height: 100%;">
		</view>
		<view class="previewImg" v-if="show" @click="show = !show">
			<img :src="src" alt="" class="previewImg-img">
		</view>
	</view>
</template>

<script>
	/**
      *height 所展示图片的高度
	  * width 所展示图片的宽度
	  * src 所访问图片的路径
	 */
	export default {
		props: {
			width: {
				type: [Number,String],
				default: 10
			},
			height: {
				type: [Number,String],
				default: 10
			},
// 这里有默认图片可以定义默认图片地址
			src: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				show: false
			}
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	.previewImg{
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		    background-color: rgba(0, 0, 0, 0.6);
		    z-index: 10073;
		    transition: all 0.25s ease-in-out 0s;
		    transform: scale(1, 1);
			&-img {
				width: 50vh;
				height: 50%;
			}
	}
</style>

2.直接在想要展示的位置引用该组件就Ok了

 <cu-previewImg :src="form.imgUrl"   width="78.13" height="78.13"></cu-previewImg>