移动app

uni-im示例/uni_modules/uni-id-pages/components/cloud-image/cloud-image.vue

@@ -0,0 +1,73 @@
+<template>
+	<view @click="onClick" :style="{width,height}" style="justify-content: center;">
+		<image v-if="cSrc" :style="{width,height}" :src="cSrc" :mode="mode"></image>
+	</view>
+</template>
+
+<script>
+	/**
+	* cloud-image 
+	* @description 兼容普通资源和unicloud图片资源渲染的组件
+	* @property {String} mode	图片裁剪、缩放的模式。默认为widthFix，支持所有image组件的mode值
+	* @property {String} src	资源完了链接或uniCloud云存储资源的fileid
+	* @property {String} width	图片的宽，默认为：100rpx
+	* @property {String} height	图片的高，默认为：100rpx
+	* @event {Function} click 点击 cloud-image 触发事件
+	*/
+	export default {
+		name: "cloud-image",
+		emits:['click'],
+		props: {
+			mode: {
+				type:String,
+				default () {
+					return 'widthFix'
+				}
+			},
+			src: {
+				// type:String,
+				default () {
+					return ""
+				}
+			},
+			width: {
+				type:String,
+				default () {
+					return '100rpx'
+				}
+			},
+			height: {
+				type:String,
+				default () {
+					return '100rpx'
+				}
+			}
+		},
+		watch: {
+			src:{
+				handler(src) {
+					if (src&&src.substring(0, 8) == "cloud://") {
+						uniCloud.getTempFileURL({
+							fileList: [src]
+						}).then(res=>{
+							this.cSrc = res.fileList[0].tempFileURL
+						})
+					}else{
+						this.cSrc = src
+					}
+				},
+				immediate: true
+			}
+		},
+		methods:{
+			onClick(){
+				this.$emit('click')
+			}
+		},
+		data() {
+			return {
+				cSrc:false
+			};
+		}
+	}
+</script>