@wines/input

@wines/input

Input 文本输入框

文本输入框。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Input",
  "usingComponents": {
    "wux-input": "@wines/input",
    "wux-cell": "@wines/cell",
    "wux-cell-group": "@wines/cell-group"
  }
}

示例

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="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 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>

import './index.less';

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() {
    void wx.showModal({
      title: 'Please enter 11 digits',
      showCancel: !1,
    });
  },
});

API

Input props

Input slot

Input externalClasses