uni-app图片预览组件（简版）

需求：uni-app图片预览组件实现图片大图预览双指缩放功能

<template>
	<view class="preview-pic" @click.stop="close">
		<movable-area scale-area>
			<movable-view class="pic" direction="all" @scale="onScale" scale="true" scale-min="1" scale-max="4" :scale-value="scale">
				<image :src="src" mode="widthFix"></image>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		name: 'PreviewPic',
		props: {
			src: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				scale: 1, // 0.5 -10 缩放的倍数
			};
		},
		methods: {
			close() {
				this.$emit('close')
			},
			onScale() {
				console.log('双指缩放')
			}
		}
	}
</script>

<style lang="less" scoped>
	.preview-pic {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 2021;
		background-color: #000000;
		
		movable-area {height: 100%;
			width: 100%;
		}
		
		movable-view image {
			width: 100%;
		}

		.pic {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			display: flex;
			background-color: #000000;

			image {
				width: 100%;
			}
		}
	}

</style>