Textarea 多行输入框

多行输入框。

使用指南

在 page.json 中引入组件

{
    "navigationBarTitleText": "Textarea",
    "usingComponents": {
        "wux-cell-group": "../../dist/cell-group/index",
        "wux-cell": "../../dist/cell/index",
        "wux-textarea": "../../dist/textarea/index"
    }
}

示例

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

<view class="page">
    <view class="page__hd">
        <view class="page__title">Textarea</view>
        <view class="page__desc">多行输入框</view>
    </view>
    <view class="page__bd">
        <wux-cell-group title="Normal Usage">
            <wux-cell hover-class="none">
                <wux-textarea placeholder="No label" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea label="First name" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea label="Last name" placeholder="Input your last name" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Auto / Fixed height">
            <wux-cell hover-class="none">
                <wux-textarea autoHeight label="First name" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea rows="3" label="Last name" placeholder="Input your last name" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Count">
            <wux-cell hover-class="none">
                <wux-textarea hasCount rows="3" cursorSpacing="80" placeholder="Count..." />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Custom title">
            <wux-cell hover-class="none">
                <wux-textarea>First name</wux-textarea>
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea placeholder="Input your last name">
                    <image style="width: 20px; height: 20px; margin-right: 5px" src="https://wux.cdn.cloverstd.com/logo.png" />
                </wux-textarea>
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Show clear">
            <wux-cell hover-class="none">
                <wux-textarea clear label="First name" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea clear label="Last name" placeholder="Input your last name" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Extra">
            <wux-cell hover-class="none">
                <wux-textarea label="Dollar" defaultValue="1024" extra="$" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea label="RMB" defaultValue="1024">
                    <view slot="footer" style="margin-left: 5px">￥</view>
                </wux-textarea>
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Disabled">
            <wux-cell hover-class="none">
                <wux-textarea disabled label="First name" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea disabled label="Last name" defaultValue="1024" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Controlled">
            <wux-cell hover-class="none">
                <wux-textarea label="Uncontrolled" defaultValue="1024" />
            </wux-cell>
            <wux-cell hover-class="none">
                <wux-textarea label="Controlled" value="{{ value }}" controlled 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-textarea label="Tel number" value="{{ value }}" controlled error="{{ error }}" 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,
        })
    },
})

视频演示

Textarea

API

Textarea props

Textarea slot

Textarea externalClasses