cloud-image.uvue

<template>
	<view @click="onClick" :style="{width,height}" style="justify-content: center;">
		<image v-if="cSrc.length != 0" :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: 'widthFix'
			},
			src: {
				type: String,
				default: ""
			},
			width: {
				type: String,
				default: '100rpx'
			},
			height: {
				type: String,
				default: '100rpx'
			}
		},
		watch: {
			src: {
				handler(src : string) {
					if (src.length != 0 && src.substring(0, 8) == "cloud://") {
						uniCloud.getTempFileURL({
							fileList: [src]
						}).then((res : UniCloudGetTempFileURLResult) => {
							// console.log('res=====',res);
							this.cSrc = res.fileList[0].tempFileURL
						})
					} else {
						this.cSrc = src
					}
				},
				immediate: true
			}
		},
		methods: {
			onClick() {
				this.$emit('click')
			}
		},
		data() {
			return {
				cSrc: ""
			};
		}
	}
</script>