图片预览

src/components/image-preview/image-preview.vue

@@ -1,5 +1,12 @@
 <template>
-	<image :src="imgUrlShow" fit="cover" :mode="mode"></image>
+	<view v-bind="$attrs">
+		<image :src="imgUrlShow"  fit="cover" :mode="mode" @click="showDetail" style="width: 100%;height: 100%;"></image>
+		<uv-overlay :show="showModel" opacity=".6" @click="showModel = false">
+			<view class="overlay-box">
+				<image class="detail-img" :src="imgUrlShow" fit="cover" :mode="mode"></image>
+			</view>
+		</uv-overlay>
+	</view>
 </template>
 
 <script>
@@ -35,12 +42,17 @@
 				type: String,
 				default: 'widthFix'
 			},
+			previewDetail: {
+				default: '',
+				type:[String, Boolean]
+			}
 		},
 		data() {
 			return {
 				imgUrlShow: '',
 				watching: false,
-				base_url: get_base_url()
+				base_url: get_base_url(),
+				showModel: false
 			};
 		},
 		computed:{
@@ -52,6 +64,10 @@
 		watch: {
 			imgId: {
 				handler(newval, oldval) {
+					if(newval.indexOf('http') === 0){
+						this.imgUrlShow = newval
+						return
+					}
 					if (newval && this.watching) {
 						this.getPreviewUrlBlob(newval);
 					}
@@ -70,6 +86,11 @@
 			}
 		},
 		methods: {
+			showDetail(){
+				if(!!this.previewDetail){
+					this.showModel = true
+				}
+			},
 			getPreviewUrlBlob(id) {
 				if (!id) {
 					this.imgUrlShow = ''
@@ -107,7 +128,11 @@
 		},
 		mounted() {
 			if (this.imgId) {
-				this.getPreviewUrlBlob(this.imgId);
+				if(this.imgId.indexOf('http') === 0){
+					this.imgUrlShow = this.imgId
+				}else{
+					this.getPreviewUrlBlob(this.imgId);
+				}
 			}
 			this.watching = true
 			if(this.src) {
@@ -117,6 +142,17 @@
 	}
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+.overlay-box{
+	position: relative;
+	height: 100%;
+	.detail-img{
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		max-width: 100%;
+		max-height: 100%;
+		transform: translate(-50%, -50%);
+	}
+}
 </style>

src/components/image-preview/video-preview.vue

@@ -30,6 +30,10 @@
 		watch: {
 			fileId: {
 				handler(newval, oldval) {
+					if(newval.indexOf('http:') === 0){
+						this.fileUrlShow = newval
+						return
+					}
 					if (newval && this.watching) {
 						this.getPreviewUrlBlob(newval);
 					}
@@ -57,7 +61,11 @@
 		},
 		mounted() {
 			if (this.fileId) {
-				this.getPreviewUrlBlob(this.fileId);
+				if(this.fileId.indexOf('http:') === 0){
+					this.fileUrlShow = this.fileId
+				}else{
+					this.getPreviewUrlBlob(this.fileId);
+				}
 			}
 			this.watching = true
 		},