Excel图表与文本框/图片组合在一起
 
目标：
 把下图中的树叶放在图表里面，使之成为一体。
 
 方法：
 ①把树叶放在图表中合适的位置：
 
 ②单击选中整张图表，按ctrl键同时选中树叶的图片。在图片或者图表内的区域内邮件-【组合】，点击【组合】，这就完成了。
 用鼠标单击一下图表外的区域，再移动图表，树叶图片就会随着图表一起移动了。
 ③单击图表或者叶子图片后，可以对图片在图表中的位置进行移动修改。
 修改完成后，再次点击图表外的区域，然后重新移动整张图表就会发现，他们依然组合在一起。
 ④【取消组合】方法一样，用ctrl键同时选中整个图表和叶子图片，右键-【组合】-【取消组合】。
 
图片素材来自
 微信公众号： 兰色幻想-赵志东 Excel精英培训
 标题《卖茶叶做的Excel图表，为什么这么漂亮？》

<template>
	<view class='wrap'>
		<rich-text :nodes="information.informationContent|formatRichText"></rich-text>
	</view>
</template>

<script>
	import api from '../../server/index.js'
	import {
		ERR_OK
	} from '@/utils/config.js'
	export default {
		data() {
			return {
				information: "", 
			};
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText(html) { //控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;"');
			
				return newContent;
			}
		},
		async onLoad(options) {
			const consultDetail = await api.consult.getInformationInfo({
				informationId: options.informationId
			})
			if (consultDetail.errorCode === ERR_OK) {
				this.information = consultDetail.information
			}
		},
	}
</script>

<style lang="less">
	uni-rich-text img {
		max-width: 100% !important;
	}
</style>

 img元素的css有个vertical-align属性 用来控制图片的对齐方式
 
它的默认值是baseline 这样图片的底部会对齐文本的baseline 而且文本的baseline并不是文本的底部 input又正巧是放文字用的 所以img默认并不会对齐input的中线
 

 
所以解决这个问题就可以直接设置图片以middle方式对齐就可以了 如:
 
<input type="image" style="vertical-align: middle;" src="" /> 

给图片加上属性align="absmiddle"
 

 
 
<img src="" align="absmiddle" >