mui-vue开发笔记 textarea根据输入内容自适应高度

textarea {
	color: #222222;
	overflow: hidden;
	font-size: 0.9rem;
	margin-left: 2%;
	width: 95%;
	height: 4rem;
	border: 1px solid #EAEAEA;
	margin-top: 5px;
	padding:0px;
}

textarea {
    outline: 0 None;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}

/**
 * 文本框根据输入内容自适应高度
 * @param                {HTMLElement}        输入框元素
 * @param                {Number}                设置光标与输入框保持的距离(默认0)
 * @param                {Number}                设置最大高度(可选)
 */
var autoTextarea = function(elem, extra, maxHeight) {
	extra = extra || 0;
	var isFirefox = !!document.getBoxObjectFor || \'mozInnerScreenX\' in window,
		isOpera = !!window.opera && !!window.opera.toString().indexOf(\'Opera\'),
		addEvent = function(type, callback) {
			elem.addEventListener ?
				elem.addEventListener(type, callback, false) :
				elem.attachEvent(\'on\' + type, callback);
		},
		getStyle = elem.currentStyle ? function(name) {
			var val = elem.currentStyle[name];

			if (name === \'height\' && val.search(/px/i) !== 1) {
				var rect = elem.getBoundingClientRect();
				return rect.bottom - rect.top -
					parseFloat(getStyle(\'paddingTop\')) -
					parseFloat(getStyle(\'paddingBottom\')) + \'px\';
			};

			return val;
		} : function(name) {
			return getComputedStyle(elem, null)[name];
		},
		minHeight = parseFloat(getStyle(\'height\'));

	elem.style.resize = \'none\';

	var change = function() {
		var scrollTop, height,
			padding = 0,
			style = elem.style;

		if (elem._length === elem.value.length) return;
		elem._length = elem.value.length;

		if (!isFirefox && !isOpera) {
			padding = parseInt(getStyle(\'paddingTop\')) + parseInt(getStyle(\'paddingBottom\'));
		};
		scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

		elem.style.height = minHeight + \'px\';
		if (elem.scrollHeight > minHeight) {
			if (maxHeight && elem.scrollHeight > maxHeight) {
				height = maxHeight - padding;
				style.overflowY = \'auto\';
			} else {
				height = elem.scrollHeight - padding;
				style.overflowY = \'hidden\';
			};
			style.height = height + extra + \'px\';
			scrollTop += parseInt(style.height) - elem.currHeight;
			document.body.scrollTop = scrollTop;
			document.documentElement.scrollTop = scrollTop;
			elem.currHeight = parseInt(style.height);
		};
	};

	addEvent(\'propertychange\', change);
	addEvent(\'input\', change);
	addEvent(\'focus\', change);
	change();
};

<textarea id=\"textarea\" placeholder=\"\"></textarea>
    <script>
        var text = document.getElementById(\"textarea\");
        autoTextarea(text);// 调用
    </script>