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>