Input 文本输入框

文本输入框。

使用指南

在 page.json 中引入组件

{
    "navigationBarTitleText": "Input",
    "usingComponents": {
        "wux-cell-group": "../../dist/cell-group/index",
        "wux-cell": "../../dist/cell/index",
        "wux-input": "../../dist/input/index"
    }
}

示例

!> Input 组件建议用 Cell 组件包裹使用。

<view class="page">
    <view class="page__hd">
        <view class="page__title">Input</view>
        <view class="page__desc">文本输入框</view>
    </view>
    <view class="page__bd">
        <wux-cell-group title="Normal Usage">
            <wux-cell hover-class="none">
                <wux-input placeholder="No label" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-input label="WeChat" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-input label="QQ" placeholder="Input your QQ" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-input label="Password" placeholder="Input your password" password type="number" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Custom title">
            <wux-cell hover-class="none">
                <wux-input>WeChat</wux-input>
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-input placeholder="Input your QQ">
                    <image style="width: 20px; height: 20px; margin-right: 5px" src="https://wux.cdn.cloverstd.com/logo.png" />
                </wux-input>
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Show clear">
            <wux-cell hover-class="none">
                <wux-input clear label="WeChat" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-input clear label="QQ" placeholder="Input your QQ" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Extra">
            <wux-cell hover-class="none">
                <wux-input label="Dollar" defaultValue="1024" extra="$" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-input label="RMB" defaultValue="1024">
                    <view slot="footer" style="margin-left: 5px">￥</view>
                </wux-input>
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Disabled">
            <wux-cell hover-class="none">
                <wux-input disabled label="WeChat" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-input disabled label="QQ" defaultValue="1024" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Controlled">
            <wux-cell hover-class="none">
                <wux-input label="Uncontrolled" defaultValue="1024" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-input label="Controlled" value="{{ value }}" controlled type="number" bind:change="onChange" bind:focus="onFocus" bind:blur="onBlur" bind:confirm="onConfirm" bind:clear="onClear" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Error">
            <wux-cell hover-class="none">
                <wux-input label="Tel number" value="{{ value }}" controlled error="{{ error }}" type="number" bind:change="onChange" bind:focus="onFocus" bind:blur="onBlur" bind:confirm="onConfirm" bind:clear="onClear" bind:error="onError" />
            </wux-cell>
        </wux-cell-group>
    </view>
</view>

const isTel = (value) => !/^1[34578]\d{9}$/.test(value)
Page({
    onChange(e) {
        console.log('onChange', e)
        this.setData({
            error: isTel(e.detail.value),
            value: e.detail.value,
        })
    },
    onFocus(e) {
        this.setData({
            error: isTel(e.detail.value),
        })
        console.log('onFocus', e)
    },
    onBlur(e) {
        this.setData({
            error: isTel(e.detail.value),
        })
        console.log('onBlur', e)
    },
    onConfirm(e) {
        console.log('onConfirm', e)
    },
    onClear(e) {
        console.log('onClear', e)
        this.setData({
            error: true,
            value: '',
        })
    },
    onError() {
        wx.showModal({
            title: 'Please enter 11 digits',
            showCancel: !1,
        })
    },
})

视频演示

Input

API

Input props

Input slot

Input externalClasses