TextBox


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

示例
默认用法
  1. <nut-textbox></nut-textbox>

自定义高度:5rem
  1. <nut-textbox :txtAreaH='5' :maxNum='300'></nut-textbox>

自定义提示语
  1. <nut-textbox placeText='请填写详细情况'></nut-textbox>

自定义字数限制
  1. <nut-textbox :maxNum='100'></nut-textbox>

限制字数不可超出
  1. <nut-textbox :switchMax='true'
  2. :maxNum='10'
  3. :txtAreaH='2'
  4. textBgColor='#efefef'>
  5. </nut-textbox>

字数超出报错
  1. <nut-textbox
  2. :maxNum="10"
  3. txtAreaH="2"
  4. @errorFunc="overLength"
  5. ></nut-textbox>

  1. export default {
  2. methods:{
  3. overLength(){
  4. alert("字数超出");
  5. }
  6. }
  7. }

自定义文本框背景色
  1. <nut-textbox
  2. :switchMax="true"
  3. :maxNum="10"
  4. :txtAreaH="2"
  5. textBgColor="#feefef">
  6. </nut-textbox>

不显示字数限制
  1. <nut-textbox
  2. :limitShow="false">
  3. </nut-textbox>

输入回调返回文字
  1. <nut-textbox :maxNum="10" txtAreaH="2" @inputFunc="inputText" ></nut-textbox>
  2. export default {
  3. methods:{
  4. inputText(val){
  5. alert(val);
  6. }
  7. }
  8. }

Props
参数说明类型默认值可选值
txtAreaH文本框高度Number1rem
placeText自定义placeholder文案提示String请您在此输入
maxNum最大字数Number50
switchMax控制字数超出是否不可输入,注意:最大字数限制,请设置maxNumBooleanfalse
textBgColor设置输入框背景色String#fff
limitShow不显示字数限制Booleantrue
Events
事件名说明回调
errorFunc输入字数超过限定字数时触发事件
inputText文字输入事件回调,默认传回输入文本