xiaoshi-wx/node_modules/wux-weapp/example/pages/input/index.wxml

<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" requiredMark />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-input label="Password" placeholder="Input your password" password visibilityToggle type="number" requiredMark />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-input label="Super long label text" labelWrap />
            </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="http://cdn.skyvow.cn/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 onlyShowClearWhenFocus="{{ false }}" 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="ReadOnly">
            <wux-cell hover-class="none">
                <wux-input readOnly label="WeChat" defaultValue="read-only mode" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-input readOnly 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>
        <wux-cell-group title="Keyboard accessory" label="tip: 视图最大高度为 200px">
            <wux-cell hover-class="none">
                <wux-input hold-keyboard="{{ true }}" placeholder="设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图">
                    <cover-view slot="keyboard-accessory" class="container" style="height: 50px;">
                        <cover-view style="flex: 1; background: green;">1</cover-view>
                        <cover-image src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" style="flex: 1; background: red;"></cover-image>
                    </cover-view>
                </wux-input>
            </wux-cell>
        </wux-cell-group>
    </view>
</view>