Input表单

    引入

    在app.json或index.json中引入组件，默认为ES6版本注意：在开发工具中可能存在无法输入的情况，但是在真机中是正常的，不影响使用。

    1.       "usingComponents": {
    2.     "vtu-input": "/miniprogram_npm/vtuweapp/input/item/vtu-input",
    3.     "vtu-input-group": "/miniprogram_npm/vtuweapp/input/group/vtu-input-group"
    4. }
    5.

    代码演示

    普通表单

    1. <vtu-input-group title="普通表单">
    2.   <vtu-input title="姓名" border placeholder="请输入姓名" type="input" text-align="left"></vtu-input>
    3.   <vtu-input title="电话" border placeholder="请输入电话" message="请输入正确的电话号码" status="error" value="48568" type="input" text-align="left" input-type="number"></vtu-input>
    4.   <vtu-input title="密码" must border placeholder="请输入密码" value="" type="input" text-align="left" input-type="password"></vtu-input>
    5.   <vtu-input title="身份证" must border placeholder="请输入身份证" value="" type="input" text-align="left" input-type="idcard"></vtu-input>
    6.   <vtu-input title="小数" border placeholder="请输入小数" value="" type="input" text-align="left" input-type="digit"></vtu-input>
    7.   <vtu-input title="价格" placeholder="请输入价格" value="" disabled type="input" text-align="left" input-type="digit">
    8.     <view slot="after">元</view>
    9.   </vtu-input>
    10. </vtu-input-group>
    11.

    自动换行

    1. <vtu-input-group title="自动换行">
    2.   <vtu-input title="个人简介" border placeholder="请输入个人简介" value="" type="textarea" auto-height="{{true}}"  text-align="left"></vtu-input>
    3.   <vtu-input title="最大输入" border placeholder="请输入内容" value="" type="textarea" text-align="left" text-height="100px" show-max-label="{{true}}" maxlength="300"></vtu-input>
    4. </vtu-input-group>
    5.

    高级用法

    1. <vtu-input-group title="表单">
    2.   <vtu-input title="开关" icon="iconfont icon-kefu" icon-color="#1989fa" border>
    3.     <vtu-switch slot="after" checked="{{true}}" size="small" bind:change="bindchange"></vtu-switch>
    4.   </vtu-input>
    5.   <vtu-input title="普通选项" icon="iconfont icon-kefu" icon-color="#1989fa" border value="{{pickerIndex}}" range="{{pickerArray1}}" range-key="label" type="picker" bindchange="pickerChange" arrow></vtu-input>
    6.   <vtu-input title="日期" placeholder="选择日期" icon="iconfont icon-kefu" border icon-color="#1989fa" border value="{{pickerDate}}" type="picker" mode="date" bindchange="pickerDateChange" arrow></vtu-input>
    7.   <vtu-input title="时间" placeholder="选择时间" icon="iconfont icon-kefu" start="09:00" icon-color="#f5bf49" border value="{{pickerTime}}" type="picker" mode="time" bindchange="pickerTimeChange" arrow></vtu-input>
    8.   <vtu-input title="地址" placeholder="选择地址" icon="iconfont icon-kefu" border icon-color="#f5bf49" border value="{{pickerRegion}}" type="picker" mode="region" bindchange="pickerRegionChange" arrow></vtu-input>
    9.   <vtu-input title="短信验证码" border icon="iconfont icon-kefu" icon-color="#f5bf49" text-align="left"  placeholder="请输入短信验证码" value="" type="input" input-type="number">
    10.     <vtu-btn slot="after" my-class="phoneNumberBtn" type="primary" size="small">发送验证码</vtu-btn>
    11.   </vtu-input>
    12.   <vtu-input title="计数器" icon="iconfont icon-kefu" icon-color="#f5bf49" border text-align="right" placeholder="请输入数量">
    13.     <vtu-stepper slot="after" my-class="stepNumberBtn" size="small" value="3"></vtu-stepper>
    14.   </vtu-input>
    15.   <vtu-input title="评分" border icon="iconfont icon-kefu" icon-color="#f5bf49">
    16.     <vtu-rate slot="after" my-class="rateBtn" value="3"></vtu-rate>
    17.   </vtu-input>
    18.   <vtu-input title="选择城市" icon="iconfont icon-kefu" arrow border icon-color="#f5bf49" value="{{radioVal}}" bind:click="showRadioEvent"></vtu-input>
    19. </vtu-input-group>
    21. <vtu-radio-prop show="{{showRadioProp}}"
    22.                 model="{{radioVal}}"
    23.                 align="right"
    24.                 active-color="red"
    25.                 radio-icon="iconfont icon-xuanze"
    26.                 active-radio-icon="iconfont icon-xuanze-danxuan"
    27.                 bind:change="radioChange">
    28.   <vtu-radio-prop-item value="{{1}}" label="北京" icon="iconfont icon-biaoxing" ></vtu-radio-prop-item>
    29.   <vtu-radio-prop-item value="{{2}}" label="上海" icon="iconfont icon-xihuan" ></vtu-radio-prop-item>
    30.   <vtu-radio-prop-item value="{{3}}" label="深圳" icon="iconfont icon-sousuo"></vtu-radio-prop-item>
    31.   <vtu-radio-prop-item value="{{4}}" label="南京" icon="iconfont icon-shangchuan"></vtu-radio-prop-item>
    32. </vtu-radio-prop>
    33.  
    34.

    .js文件

    1.           Page({
    2.   data: {
    3.     input: null,
    4.     switch: true,
    5.     pickerIndex: 0,
    6.     pickerArray1: [{type: 1, label: '选项一'}, {type: 2, label: '选项二'}, {type: 3, label: '选项三'}],
    7.     pickerTime:  null,
    8.     pickerRegion: [],
    9.     pickerDate: null,
    10.     radioVal: 1,
    11.     showRadioProp: false
    12.   },
    13.   pickerChange: function(e) {
    14.     this.setData({
    15.       pickerIndex: parseInt(e.detail.value)
    16.     })
    17.   },
    18.   pickerDateChange: function(e) {
    19.     this.setData({
    20.       pickerDate: e.detail.value
    21.     })
    22.   },
    23.   pickerTimeChange: function(e) {
    24.     this.setData({
    25.       pickerTime: e.detail.value
    26.     })
    27.   },
    28.   pickerRegionChange: function(e) {
    29.     this.setData({
    30.       pickerRegion: e.detail.value
    31.     })
    32.   },
    33.   showRadioEvent: function() {
    34.     this.setData({
    35.       showRadioProp: true
    36.     })
    37.   },
    38.   radioChange: function(e){
    39.     this.setData({
    40.       radioVal: e.detail.value
    41.     })
    42.   }
    43. });
    44.

    .json文件

    1.           {
    2.     "usingComponents": {
    3.         "vtu-btn": "/miniprogram_npm/vtuweapp/button/vtu-btn",
    4.         "vtu-rate": "/miniprogram_npm/vtuweapp/rate/vtu-rate",
    5.         "vtu-navbar": "/miniprogram_npm/vtuweapp/navbar/vtu-navbar",
    6.         "vtu-switch": "/miniprogram_npm/vtuweapp/switch/vtu-switch",
    7.         "vtu-input": "/miniprogram_npm/vtuweapp/input/item/vtu-input",
    8.         "vtu-input-group": "/miniprogram_npm/vtuweapp/input/group/vtu-input-group",
    9.         "vtu-radio-prop": "/miniprogram_npm/vtuweapp/prop/radio/prop/vtu-radio-prop",
    10.         "vtu-radio-prop-item": "/miniprogram_npm/vtuweapp/prop/radio/item/vtu-radio-prop-item"
    11.     }
    12. }
    13.  
    14.

    组件参数

    Props

    参数说明类型默认值必填
    title标题String-否
    title-color标题颜色String-否
    icon图标String-否
    icon-color图标颜色String-否
    value输入框的初始内容/显示内容String | Number-否
    value-color内容颜色String-否
    type类型defaultinputtextareainputNumberswitchpickerStringdefault否
    arrow是否显示右部箭头Booleanfalse否
    input-type文本框类型，具体参考微信开发文档Stringtext否
    placeholder文本框占位符String-否
    text-align文本框内容位置leftcenterrightStringright否
    content详细描述String-否
    border是否显示底部边框Booleanfalse否
    confirm-type设置键盘右下角按钮的文字，仅在type='text'时生效，具体参考微信开发文档String-否
    confirm-hold点击键盘右下角按钮时是否保持键盘不收起Booleanfalse否
    maxlength最大输入长度Number0否
    disabled是否禁用Booleanfalse否
    adjust-position键盘弹起时，是否自动上推页面Booleanfalse否
    focus获取焦点Booleanfalse否
    cursorSpacing指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离Number0否
    mode选择器类型，仅在type='picker'时生效，具体参考微信开发文档Stringselector否
    rangemode 为 selector 或 multiSelector 时，range 有效Array-否
    range-key当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容String-否
    start表示有效时间范围的开始，字符串格式为"hh:mm"，mode 为time时有有效String-否
    end表示有效时间范围的结束，字符串格式为"hh:mm"，mode 为time时有有效String-否
    auto-height是否自动增高，设置auto-height时，style.height不生效，仅在type=‘textarea’时生效Booleanfalse否
    titleAlign标题位置leftcenterrightStringleft否
    show-confirm-bar是否显示键盘上方带有”完成“按钮那一栏，仅在type=‘textarea’时生效Booleantrue否
    must是否为必填项Booleanfalse否
    text-heighttextarea文本域高度，仅在type=‘textarea’时生效String-否
    showMaxLabel是否显示textarea可输入最大值提示，仅在type=‘textarea’时生效Booleantrue否
    status状态提示，successwarningerrorString-否
    message提示信息String-否
    clearable是否可清空Booleantrue否

    Events

    事件说明返回值
    bind:input键盘输入时触发event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。
    bind:confirm点击完成按钮时触发event.detail = {value: value}
    bind:focus输入框聚焦时触发event.detail = { value, height }，height 为键盘高度
    bind:blur输入框失去焦点时触发event.detail = {value: value}
    bind:clear输入框内容清空时触发-
    bind:changevalue 改变时触发 change 事件event.detail = {value}
    bind:columnchange列改变时触发-
    bind:linechange输入框行数变化时调用event.detail = {height: 0, heightRpx: 0, lineCount: 0}
    bind:keyboardheightchange键盘高度发生变化的时候触发此事件event.detail = {height: height, duration: duration}
    bind:click点击事件-

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Input 表单 - 图1