uni-app 实现图文混排

今天淦我的小组比赛项目的时候碰到了一个问题

因为我做这个比赛项目之前打的前端都是h5的，而这个比赛项目是做移动端的，所以就一直用h5的写法在写，但是很多东西h5有的app是没有的，就比如我今天用到的document.createElement()，在HBuliderX里测试好好的，一上真机，直接报错，然后没办法，只能换方法，但是app的内容我又没学多少，所以就只能摸，结果花了3个小时才摸出来...

实现：点开一片文章显示详情，所以这个布局用在详情页，可以实现简单的图文混排

布局部分：

<view class="container" v-for="(item,index) in containerSplitList" :key="index">
		<view v-if="item.type === 'text'" class="container">{{item.content}}</view>
		<image v-else-if="item.type === 'image'" :src="item.content"></image>
</view>

data部分：

data() {
			return {
				container: {
					title: '镇海口海防历史故事',
					content: '$../../static/images/culture_1.jpg$ABCDEF$../../static/images/culture_1.jpg$GHIJKLM$../../static/images/culture_2.jpg$OPQRST$../../static/images/culture_2.jpg$',
					time: ''
				},
				containerSplitList: [],
			}
		},

methods部分：

illustrate() {
				this.$nextTick(function() {
					const that = this;
					// 初始取值
					let con = that.container.content;
					// 用于记录每一次获取打'$'的下标
					let index = 0;
					// 先定义空数组结束后再赋值
					let list = [];
					while (con.indexOf('$') != -1) {
						// 记录循环内第一次查找到'$'的下标
						index = con.indexOf('$');
						// 第一次往列表存，内容是文字，type: 'text'作为标识
						list.push({
							type: 'text',
							content: con.substring(0, index)
						})
						// 文字取完后把第一个'$'前包括'$'的全截掉
						con = con.substring(index + 1, con.length);
						// 再获取一次'$'的位置，此时还是第一个'$'
						index = con.indexOf('$');
						// 第二次往列表存，内容是图片，type: 'image'作为标识
						list.push({
							type: 'image',
							content: con.substring(0, con.indexOf('$'))
						})
						// 图片取完后把第二个(上一次截取前，没有上一次截取这个就是第二个)'$'前包括'$'的全截掉，
						con = con.substring(con.indexOf('$') + 1, con.length);
						// 循环结束，此时需要继续截取的字符串的结构还是：文字+$+图片地址+$+...
					}
					// 补尾巴，循环结束后肯定没有图片了
					list.push({
						type: 'text',
						content: con
					})
					that.containerSplitList = list;
				})
			},

说明：为实现效果，需要对container的content部分修改为：...+文字+$+图片路径+$+...

其中，$可以任意替换，但要注意作为标识符，在整片文章中除了图片路径前后以外，都不能再次出现