nutui/src/packages/textbox/demo.vue

<template>
    <div class="textbox-demo">
        <!-- <h4>示例</h4> -->
        <h4>默认用法 支持异步回显数据</h4>
         <nut-textbox v-model="val"></nut-textbox>
        <h4>自定义高度:100px</h4>
        <nut-textbox :txtAreaH="100" :maxNum="300" v-model="val"></nut-textbox>

        <h4>自定义提示语</h4>
        <nut-textbox :placeText="'请填写详细情况请填写详细情况'" v-model="val1"></nut-textbox>
        

        <h4>自定义字数限制</h4>
        <nut-textbox :maxNum="100" v-model="val2"></nut-textbox>
        

        <h4>限制字数不可超出</h4>
        <nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="100" textBgColor="#efefef"></nut-textbox>
        

        <h4>字数超出报错</h4>
        <nut-textbox :maxNum="10" :txtAreaH="100"  @errorFunc="overLength" v-model="val1" ></nut-textbox>
        

        <h4>自定义文本框背景色</h4>
        <nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="100" textBgColor="#feefef" v-model="val1"></nut-textbox>

        <h4>不显示字数限制</h4>
        <nut-textbox :limitShow="false" :maxNum="10" v-model="val1" ></nut-textbox>
       
        <h4>输入回调返回文字</h4>
        <nut-textbox  :maxNum="10" txtAreaH="100" @inputFunc="inputText" ></nut-textbox>
    </div>
</template>

<script>
export default {
    data(){
        return{
            val: '',
            val1:"",
            val2:"自定义数据"
        }
    },
    methods:{
        overLength(){
            alert("字数超出");
        },
        inputText(val){
           alert(val);
        }
    },
    mounted(){
        var that=this;
        this.val="初始测试数据"
        setTimeout(function(){
            that.val="异步测试数据123";
        },1000)
        }
}
</script>