uniapp - 多行文本框

 

sunui-textarea - 封裝uniapp的textarea方便調用.

 

v1.0.0 於 2020.01.08更新

v1.0.1 於 2020.01.09更新：增加v-show，彈出的textarea層級較高會影響到遮罩層輸入。點擊查看本篇文章

 

 

示例代碼：

<template>
	<view class="index-page">
		<!-- indent代表首行縮進，一般用2em即可 -->
		<!-- styTextarea設置textarea樣式：font-size:0.8em;padding:2%;background-color:#F5F5F5; -->
		<!-- styMaxnum設置輸入提示樣式：text-align:right;color:#4888F2; -->
		<sunui-textarea ref="textarea" indent="0em" @input="getInput"></sunui-textarea>
	</view>
</template>

<script>
	import sunUiTextarea from "@/components/sunui-textarea/sunui-textarea.vue";
	export default {
		components: {
			'sunui-textarea': sunUiTextarea
		},
		data() {
			return {}
		},
		onShow() {

		},
		onLoad() {
			this.setRefsTextarea();
		},
		methods: {
			setRefsTextarea() {
				this.$nextTick(function() {
					// 是否顯示輸入輸入樣式提示,默認false
					this.$refs.textarea.maxnum = true;
					// 輸入最大數量,傳-1代表無限,默認為-1
					this.$refs.textarea.maxlength = 40;
					// 彈出鍵盤高度,默認40
					this.$refs.textarea.cursor = 40;
					// 是否禁用輸入,默認不禁用
					this.$refs.textarea.disabled = false;
					// 是否顯示組件,默認顯示（控制它顯示隱藏textarea）
					this.$refs.textarea.show = true;
					// 描述文字,默認簡述文字...
					this.$refs.textarea.placeholder = "請輸入你的備注...";
				});
			},
			getInput(e) {
				console.log(e);
			}
		}
	}
</script>

<style>

</style>

 

點擊下載插件：sunui-textarea