TextBox 文本域输入请使用手机扫码体验

多行文本输入框，支持字数提示、字数限制等功能。

基本用法

  1. html
    <nut-textbox v-model="val"></nut-textbox>

自定义高度

  1. html
    <nut-textbox :txtAreaH="5" :maxNum="300"> </nut-textbox>

自定义提示语

  1. html
    <nut-textbox :placeText="'请填写详细情况请填写详细情况'"> </nut-textbox>

自定义字数限制

  1. html
    <nut-textbox :maxNum="100"> </nut-textbox>

限制字数不可超出

  1. html
    <nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="2" textBgColor="#efefef">
  2. </nut-textbox>

字数超出报错

  1. html
    <nut-textbox :maxNum="10" :txtAreaH="2" @errorFunc="overLength"> </nut-textbox>

自定义文本框背景色

  1. html
    <nut-textbox
  2.   :switchMax="true"
  3.   :maxNum="10"
  4.   :txtAreaH="2"
  5.   textBgColor="#feefef"
  6. ></nut-textbox>

不显示字数限制

  1. html
    <nut-textbox :limitShow="false" :maxNum="10"></nut-textbox>

输入回调返回文字

  1. html
    <nut-textbox :maxNum="10" txtAreaH="2" @inputFunc="inputText"></nut-textbox>
  1. javascript
    export default {
  2.   data() {
  3.     return {
  4.       val: ''
  5.     }
  6.   },
  7.   methods: {
  8.     inputText(val) {
  9.       alert(val)
  10.     }
  11.   }
  12. }

Prop

字段说明类型默认值
value当前 input 值，可使用 v-model 双向绑定数据String‘’
txtAreaH文本框高度Number1rem
placeText自定义 placeholder 文案提示String请您在此输
maxNum最大字数Number50
switchMax控制字数超出是否不可输入，注意：最大字数限制，请设置 maxNumBooleanfalse
textBgColor设置输入框背景色String#fff
limitShow不显示字数限制Booleantrue

Event

字段说明回调参数
errorFunc输入字数超过限定字数时触发事件—
inputFunc文字输入事件回调，默认传回输入文本—

TextBox 文本域 - 图1