wxc-input

输入框组件 - 小程序组件

Install

  1. $ min install @minui/wxc-input

Demos

基础用法

输入框 input - 图1

  1. <template>
  2.   <view class="container">
  3.     <view class="input-wrap">
  4.       <wxc-input type="text" title="收货人" placeholder="名字"></wxc-input>
  5.       <wxc-input type="number" title="联系电话" placeholder="请输入手机号"></wxc-input>
  6.       <wxc-input type="text" title="详细地址" mode="none" placeholder="请输入详细地址"></wxc-input>
  7.     </view>
  8.   </view>
  10. </template>
  12. <script>
  13. export default {
  14.   config: {
  15.     usingComponents: {
  16.       'wxc-input': '@minui/wxc-input'
  17.     }
  18.   },
  19.   data: { },
  20.   methods: { }
  21. }
  22. </script>
  24. <style>
  25.   .container {
  26.     width: 100%;
  27.   }
  28.   .input-wrap {
  29.     background: #fff;
  30.   }
  31. </style>

带icon的输入框

输入框 input - 图2

  1. <template>
  2.     <view class="input-wrap">
  3.         <wxc-input type="text"
  4.                    icon="search"
  5.                    placeholder="搜索从这里开始">
  6.         </wxc-input>
  7.     </view>
  8. </template>
  10. <script>
  11.     export default {
  12.         config: {
  13.             usingComponents: {
  14.                 'wxc-input': '@minui/wxc-input'
  15.             }
  16.         },
  17.         data: { },
  18.         methods: { }
  19.     }
  20. </script>
  22. <style>
  23.     .input-wrap {
  24.         position: relative;
  25.         margin: 20rpx 10rpx 0 10rpx;
  26.     }
  27. </style>

无标题输入框

输入框 input - 图3

  1. <template>
  2.     <wxc-input type="text" placeholder="请输入收货人姓名"></wxc-input>
  3. </template>
  5. <script>
  6.     export default {
  7.         config: {
  8.             usingComponents: {
  9.                 'wxc-input': '@minui/wxc-input'
  10.             }
  11.         },
  12.         data: { },
  13.         methods: { }
  14.     }
  15. </script>
  17. <style>
  18. </style>

号码输入框，带校验

输入框 input - 图4

  1. <template>
  2.     <view class="input-wrap">
  3.         <wxc-input type="number"
  4.                    src="https://s10.mogucdn.com/mlcdn/c45406/171025_7abllhkc011ka5kici7532af6202g_28x40.png"
  5.                    value="{{mobileNumber}}"
  6.                    placeholder="请输入充值手机号码"
  7.                    maxlength="11"
  8.                    data-type="mobile"
  9.                    bind:input="onInput"
  10.                    bind:blur="onBlur">
  11.         </wxc-input>
  12.         <view class="tips">
  13.             <text wx:if="{{mobileTip}}" class="warn-tip">请输入正确的手机号码</text>
  14.             <view wx:if="{{mobileNumber && mobileNumber.length}}" class="clear-wrap" data-type="mobile" bindtap="clearInput">
  15.                 <icon type="clear" size="14" color="#ccc"/>
  16.             </view>
  17.         </view>
  18.     </view>
  19.     <view class="input-wrap">
  20.         <wxc-input type="number"
  21.                    src="https://s10.mogucdn.com/mlcdn/c45406/171024_4dk50g015la22946k786bi8je3j3d_60x60.png"
  22.                    value="{{qqNumber}}"
  23.                    placeholder="请输入充值QQ号码"
  24.                    maxlength="11"
  25.                    data-type="qq"
  26.                    bind:input="onInput"
  27.                    bind:blur="onBlur">
  28.         </wxc-input>
  29.         <view class="tips">
  30.             <text wx:if="{{qqTip}}" class="warn-tip">请输入正确的QQ号码</text>
  31.             <view wx:if="{{qqNumber && qqNumber.length}}" class="clear-wrap" data-type="qq" bindtap="clearInput">
  32.                 <icon type="clear" size="14" color="#ccc"/>
  33.             </view>
  34.         </view>
  35.     </view>
  36. </template>
  38. <script>
  39.     export default {
  40.         config: {
  41.             usingComponents: {
  42.                 'wxc-input': '@minui/wxc-input'
  43.             }
  44.         },
  45.         data: {
  46.             mobileNumber: '12655324',
  47.             qqNumber: '01223',
  48.             mobileTip: true,
  49.             qqTip: true
  50.         },
  51.         /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  52.         methods: {
  53.             onInput(e) {
  54.                 let type = e.target.dataset.type;
  55.                 let number = e.detail.value;
  57.                 this.setData({
  58.                     [type + 'Number']: number
  59.                 });
  60.                 this.validate(number, type);
  61.             },
  62.             onBlur(e) {
  63.                 let type = e.target.dataset.type;
  64.                 let number = e.detail.value;
  65.                 this.validate(number, type);
  66.             },
  67.             clearInput(e) {
  68.                 let type = e.currentTarget.dataset.type;
  69.                 this.setData({
  70.                     [type + 'Number']: "",
  71.                     [type + 'Tip']: false
  72.                 });
  73.             },
  74.             validate(number, type) {
  75.                 if (type === "mobile") {
  76.                     this.validateTelephone(number);
  77.                 }
  79.                 if (type === "qq") {
  80.                     this.validateQQ(number);
  81.                 }
  82.             },
  83.             validateTelephone(number) {
  84.                 let regPhone = /^1(3|4|5|7|8)\d{9}$/;
  85.                 let tip = false;
  86.                 if (!regPhone.test(number) && number.length > 0) {
  87.                     // 输入7位以上开始校验手机号码
  88.                     tip = true;
  89.                 }
  90.                 this.setData({
  91.                     mobileTip: tip
  92.                 });
  93.             },
  94.             validateQQ(number) {
  95.                 let tip = false;
  96.                 let regQQ = /^[1-9]\d{4,10}$/;
  97.                 if (!regQQ.test(number) && number.length > 0) {
  98.                     // 输入4位以上开始qq号码
  99.                     tip = true;
  100.                 }
  101.                 this.setData({
  102.                     qqTip: tip
  103.                 });
  104.             }
  105.         }
  106.     }
  107. </script>
  109. <style>
  110.     .input-wrap {
  111.         position: relative;
  112.         margin: 20rpx 10rpx 0 10rpx;
  113.     }
  114.     .tips {
  115.         display: flex;
  116.         position: absolute;
  117.         top: 50%;
  118.         right: 0;
  119.         font-size: 0;
  120.         transform: translate(0, -50%);
  121.         -webkit-transform: -webkit-translate(0, -50%);
  122.         z-index: 100;
  123.     }
  124.     .clear-wrap {
  125.         display: flex;
  126.         width: 40rpx;
  127.         height:104rpx;
  128.         align-items:center;
  129.         justify-content: flex-end;
  130.     }
  131.     .warn-tip {
  132.         line-height: 104rpx;
  133.         font-size: 28rpx;
  134.         color: #ff5777;
  135.     }
  136. </style>

圆角输入框

输入框 input - 图5

  1. <template>
  2.     <view class="input-wrap">
  3.         <wxc-input type="number" mode="wrapped" right="{{true}}" title="消费总额" placeholder="询问收银员后输入"></wxc-input>
  4.     </view>
  6.     <view class="input-wrap">
  7.         <wxc-input type="number" mode="wrapped" right="{{true}}" error="{{true}}" title="不参与优惠金额" placeholder="询问收银员后输入"></wxc-input>
  8.     </view>
  10.     <view class="input-wrap">
  11.         <wxc-input type="number" mode="wrapped" placeholder="请输入消费金额"></wxc-input>
  12.     </view>
  14. </template>
  16. <script>
  17.     export default {
  18.         config: {
  19.             usingComponents: {
  20.                 'wxc-input': '@minui/wxc-input'
  21.             }
  22.         },
  23.         data: { },
  24.         methods: { }
  25.     }
  26. </script>
  28. <style>
  29.     .input-wrap {
  30.         position: relative;
  31.         margin: 20rpx 10rpx 0 10rpx;
  32.     }
  33. </style>

API

Input

名称描述
title[说明]：输入框前面的标题。若 src 或 icon 同时指定，title 的优先级最高，src 次之，icon 最低。[类型]：String[默认值]：""
src[说明]：输入框前面的图标，自定义图片链接。[类型]：String[默认值]：""
icon[说明]：输入框前面的图标，类型见 wxc-icon 组件。[类型]：String[默认值]：""
icon-color[说明]：输入框前面的图标颜色，与 icon 一同使用。[类型]：String[默认值]：""
mode[说明]：输入框边框模式。[类型]：String[可选值]：wrapped，有边框包裹；normal，只有下边框；none，无边框。[默认值]：normal
right[说明]：输入框文本是否向右对齐。[类型]：Boolean[默认值]：false
error[说明]：是否显示为输入框错误情况下的样式。[类型]：Boolean[默认值]：false
value[说明]：输入框的内容。[类型]：String[默认值]：""
type[说明]：input 的类型。[类型]：String[可选值]：text, number, idcard, digit[默认值]："text"
password[说明]：是否是密码类型。[类型]：Boolean[默认值]：false
placeholder[说明]：输入框为空时占位符。[类型]：String[默认值]：""
placeholder-style[说明]：指定 placeholder 的样式。[类型]：String[默认值]：""
disabled[说明]：是否禁用。[类型]：Boolean[默认值]：false
maxlength[说明]：最大输入长度，设置为 -1 的时候不限制最大长度。[类型]：Number[默认值]：140
cursor-spacing[说明]：指定光标与键盘的距离，单位 px。[类型]：Number[默认值]：0
focus[说明]：获取焦点。[类型]：Boolean[默认值]：false
confirm-type[说明]：设置键盘右下角按钮的文字。[类型]：String[可选值]：send, search, next, go, done[默认值]：done
confirm-hold[说明]：点击键盘右下角按钮时是否保持键盘不收起。[类型]：Boolean[默认值]：false
cursor[说明]：指定focus时的光标位置。[类型]：Number[默认值]：0
selection-start[说明]：光标起始位置，自动聚集时有效，需与selection-end搭配使用。[类型]：Number[默认值]：-1
selection-end[说明]：光标结束位置，自动聚集时有效，需与selection-start搭配使用。[类型]：Number[默认值]：-1
adjust-position[说明]：键盘弹起时，是否自动上推页面。[类型]：Boolean[默认值]：true
bind:input[说明]：当键盘输入时，触发input事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bind:focus[说明]：输入框聚焦时触发，event.detail = { value, height }，height 参数在基础库 1.9.90 起支持
bind:blur[说明]：输入框失去焦点时触发，event.detail = {value: value}
bind:confirm[说明]：点击完成按钮时触发，event.detail = {value: value}

Note

小程序组件系统中组件是隔离的，所以提交表单时无法用 form 表单获取输入框中的值，只能单独获取。

ChangeLog

v1.0.0（2018-3-29）

  • 初始版本