wxc-input

    基础用法

    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>
    23. <style>
    24.   .container {
    25.     width: 100%;
    26.   }
    27.   .input-wrap {
    28.     background: #fff;
    29.   }
    30. </style>

    带icon的输入框

    无标题输入框

    输入框 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 - 图5

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

    Input

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

    v1.0.0（2018-3-29）