forest-traced-H5-UI/src/components/preview.vue

<template>
	<div class="img-list">
		<template v-for="src in value">
			<video v-if="type(src)" :src="src | host" :key="src" controls></video>
			<el-image class="img" v-else :src="src | host" :key="src" :preview-src-list="src | hostList">
				<div slot="placeholder" class="img-loading"><i class="el-icon-loading"></i></div>
				<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
			</el-image>
		</template>
	</div>
</template>

<script>
//图片、视频预览组件
export default {
	props: {
		value: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	methods: {
		//类型
		type(value = '') {
			const t = value.split('.').pop();
			switch (t) {
				case 'mp4':
				case 'ogg':
					return true;
					break;
				default:
					return false;
					break;
			}
		}
	}
};
</script>

<style lang="less" scoped>
.img-loading,
.image-slot {
	display: flex;
	font-size: .5rem;
	justify-content: center;
	align-items: center;
	padding: .5rem 0;
}
</style>