uni-app开发(7)---兼容多类型DOM结构组件封装

在页面列表结构中，公共组件可以封装使用。但是，公共组件中类型可能有很多种，比如：文本、图文、视频、分享等等不同类型，我们在进行公共组件开发的时候，没有必要根据类型封装多个组件，我们只需要封装一个组件，其中根据不同类型使用多个template根据类型编译即可。

代码结构如下：

<view class="u-f-ajc">
	<!-- 图片 -->
	<template v-if="item.titlepic">
		<image :src="item.titlepic" mode="widthFix" lazy-load></image>
	</template>
	<!-- 视频 -->
	<template v-if="item.video">
		<view class="common-list-play icon iconfont icon-bofang"></view>
		<view class="common-list-playinfo">
			{{item.video.looknum}} 次播放 {{item.video.long}}
		</view>
	</template>
	<!-- 分享 -->
	<template v-if="item.share">
		<view class="common-list-share u-f-ac">
			<image :src="item.share.titlepic" mode="widthFix" lazy-load></image>
			<view>{{item.share.title}}</view>
		</view>
	</template>
</view>

效果图：