TextBox 文本域输入

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

基本用法

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

禁用

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

自定义高度

  1. <nut-textbox :txt-areaH="5" :max-num="300"> </nut-textbox>

自定义提示语

  1. <nut-textbox :place-text="'请填写详细情况请填写详细情况'" v-model="val1"> </nut-textbox>

自定义字数限制

  1. <nut-textbox :max-num="100" v-model="val2"> </nut-textbox>

限制字数不可超出

  1. <nut-textbox :switch-max="true" :max-num="10" :txt-areaH="100" text-bgColor="#efefef" v-model="val3"></nut-textbox>

字数超出报错

  1. <nut-textbox :max-num="10" :txt-areaH="2" @errorFunc="overLength"> </nut-textbox>

自定义文本框背景色

  1. <nut-textbox
  2. :switchMax="true"
  3. :max-num="10"
  4. :txt-areaH="2"
  5. text-bgColor="#feefef"
  6. ></nut-textbox>

不显示字数限制

  1. <nut-textbox :limitShow="false" :max-num="10"></nut-textbox>

输入回调返回文字

  1. <nut-textbox :max-num="10" txt-areaH="2" @inputFunc="inputText"></nut-textbox>
  1. export default {
  2. data() {
  3. return {
  4. val: '',
  5. val1:'',
  6. val2:'自定义数据'
  7. }
  8. },
  9. methods: {
  10. inputText(val) {
  11. alert(val)
  12. }
  13. }
  14. }

Prop

字段说明类型默认值
value当前 input 值,可使用 v-model 双向绑定数据String‘’
txt-areaH文本框高度Number1rem
place-text自定义 placeholder 文案提示String请您在此输
max-num最大字数Number50
switch-max控制字数超出是否不可输入,注意:最大字数限制,请设置 maxNumBooleanfalse
text-bgColor设置输入框背景色String#fff
limit-show不显示字数限制Booleantrue
disabled是否禁用Booleanfalse

Event

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

TextBox 文本域 - 图1