TelInput

电话号码输入框，支持自定义间隔位数，支持基本电话号码校验。

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

自定义输入框宽高、带有清除按钮
  1. <nut-telinput 
  2.   telWidth="50%" 
  3.   telHeight="1" 
  4.   :clearPic="true"
  5. ></nut-telinput>

增加回调函数，且提示信息位置在输入框下面
  1. <nut-telinput 
  2. :gapone="3" 
  3. :gapsec="7" 
  4. telWidth="4"
  5. telHeight="1" 
  6. :clearPic="true"
  7. tipsInfo="请输入正确的电话号码"
  8. placeText="请输入自定义文案"
  9. tipsPosition="bottom"
  10. class="input-telnum"
  11. @pass-test="passTest"
  12. @clear="clear"
  13. @error-tel="errorTel"
  14. ></nut-telinput>

  1. .input-telnum .nut-telinput-box ::placeholder{
  2.     color:green;
  3. };

Props
参数说明类型默认值可选值
gapone第1个空格的位置Number3—
gapsec第2个空格的位置Number7—
telWidth输入框的宽度，支持数字和百分比String4(单位rem)—
telHeight输入框的高度，支持数字和百分比String1(单位rem)—
clearPic是否显示清除按钮Booleanfalsetrue/false
tipsInfo错误提示信息String请输入正确的电话号码—
placeText输入框默认提示文案String请输入电话号码—
tipsPosition错误提示信息位置String'left'提示信息在输入框左侧'left'/'bottom'
Events
事件名说明回调参数
pass-test输入的是正确的电话号码时触发事件返回带有间隔的电话号码
error-tel输入的是错误的电话号码时触发事件返回带有间隔的电话号码
clear点击清除按钮时的触发事件—