mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-23 18:00:33 +08:00
[breaking change] Field: rewrite
This commit is contained in:
陈嘉涵
parent
6ff8676fa5
commit
d5eca77afc
@ -1,68 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
// 基础类型输入框配置
|
|
||||||
base: {
|
|
||||||
name: {
|
|
||||||
focus: true,
|
|
||||||
title: '收货人',
|
|
||||||
placeholder: '名字'
|
|
||||||
},
|
|
||||||
tel: {
|
|
||||||
error: true,
|
|
||||||
title: '联系电话',
|
|
||||||
inputType: 'number',
|
|
||||||
placeholder: '请输入手机号'
|
|
||||||
},
|
|
||||||
address: {
|
|
||||||
title: '详细地址',
|
|
||||||
type: 'textarea',
|
|
||||||
placeholder: '请输入详细地址(最多50字)'
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
title: '用户信息',
|
|
||||||
disabled: true,
|
|
||||||
value: '输入框已禁用'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 无标题输入框
|
|
||||||
notitle: {
|
|
||||||
placeholder: '请输入收货人姓名',
|
|
||||||
componentId: 'textarea:test'
|
|
||||||
},
|
|
||||||
// 圆角输入框
|
|
||||||
radius: {
|
|
||||||
totalPrice: {
|
|
||||||
right: true,
|
|
||||||
mode: 'wrapped',
|
|
||||||
title: '消费总额',
|
|
||||||
inputType: 'number',
|
|
||||||
placeholder: '询问收银员后输入'
|
|
||||||
},
|
|
||||||
excludePrice: {
|
|
||||||
right: true,
|
|
||||||
error: true,
|
|
||||||
mode: 'wrapped',
|
|
||||||
title: '不参与优惠金额',
|
|
||||||
inputType: 'number',
|
|
||||||
placeholder: '询问收银员后输入'
|
|
||||||
},
|
|
||||||
notitle: {
|
|
||||||
mode: 'wrapped',
|
|
||||||
inputType: 'number',
|
|
||||||
placeholder: '请输入消费金额'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// Form 中使用输入框
|
|
||||||
form: {
|
|
||||||
name: {
|
|
||||||
name: 'name',
|
|
||||||
placeholder: '请输入收货人姓名',
|
|
||||||
componentId: 'form:test:name'
|
|
||||||
},
|
|
||||||
tel: {
|
|
||||||
name: 'tel',
|
|
||||||
inputType: 'tel',
|
|
||||||
placeholder: '请输入收货人手机号码',
|
|
||||||
componentId: 'form:test:tel'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -1,82 +1,18 @@
|
|||||||
const config = require('./config');
|
|
||||||
|
|
||||||
Page({
|
Page({
|
||||||
data: {
|
data: {
|
||||||
config,
|
sms: '',
|
||||||
value: 'test',
|
value: '',
|
||||||
textareaValue: 'test textarea',
|
password: '',
|
||||||
area: ['省份', '北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾省', '香港特别行政区', '澳门特别行政区'],
|
username: '',
|
||||||
areaIndex: 0,
|
username2: '',
|
||||||
// picker-view 示例配置
|
message: '',
|
||||||
pickerViewConfig: {
|
phone: '1365577'
|
||||||
show: false,
|
|
||||||
value: [0, 0],
|
|
||||||
year: [2016, 2017, 2018],
|
|
||||||
sex: ['男', '女']
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onAreaChange(e) {
|
onTapIcon() {
|
||||||
this.setData({
|
wx.showToast({
|
||||||
areaIndex: e.detail.value
|
icon: 'none',
|
||||||
});
|
title: '点击图标'
|
||||||
},
|
|
||||||
|
|
||||||
handleZanFieldChange(e) {
|
|
||||||
const { detail } = e;
|
|
||||||
|
|
||||||
console.log('[zan:field:change]', detail);
|
|
||||||
},
|
|
||||||
|
|
||||||
handleZanFieldFocus(e) {
|
|
||||||
const { detail } = e;
|
|
||||||
|
|
||||||
console.log('[zan:field:focus]', detail);
|
|
||||||
},
|
|
||||||
|
|
||||||
handleZanFieldBlur(e) {
|
|
||||||
const { detail } = e;
|
|
||||||
|
|
||||||
console.log('[zan:field:blur]', detail);
|
|
||||||
},
|
|
||||||
|
|
||||||
clearInput() {
|
|
||||||
this.setData({
|
|
||||||
value: ''
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
clearTextarea() {
|
|
||||||
this.setData({
|
|
||||||
textareaValue: ''
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
formSubmit(event) {
|
|
||||||
console.log('[zan:field:submit]', event.detail.value);
|
|
||||||
},
|
|
||||||
|
|
||||||
formReset(event) {
|
|
||||||
console.log('[zan:field:reset]', event);
|
|
||||||
},
|
|
||||||
|
|
||||||
/* piker-view 示例相关函数 */
|
|
||||||
handleDateFieldClick() {
|
|
||||||
this.setData({
|
|
||||||
'pickerViewConfig.show': true
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
handlePopupDateChange(e) {
|
|
||||||
this.setData({
|
|
||||||
'pickerViewConfig.value': e.detail.value
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
hideDatePopup() {
|
|
||||||
this.setData({
|
|
||||||
'pickerViewConfig.show': false
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
{
|
{
|
||||||
"navigationBarTitleText": "Field 输入框",
|
"navigationBarTitleText": "Field 输入框",
|
||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"van-button": "../../dist/button/index",
|
"demo-block": "../../components/demo-block/index",
|
||||||
"van-cell-group": "../../dist/cell-group/index",
|
|
||||||
"van-field": "../../dist/field/index",
|
"van-field": "../../dist/field/index",
|
||||||
"van-panel": "../../dist/panel/index"
|
"van-button": "../../dist/button/index",
|
||||||
|
"van-cell-group": "../../dist/cell-group/index"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,90 +1,88 @@
|
|||||||
<!-- Field 基础用法 -->
|
<demo-block title="基础用法">
|
||||||
<van-panel title="基础用法">
|
<van-cell-group>
|
||||||
|
<van-field value="{{ value }}" placeholder="请输入用户名" border="{{ false }}" />
|
||||||
|
</van-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="自定义类型">
|
||||||
<van-cell-group>
|
<van-cell-group>
|
||||||
<van-field
|
<van-field
|
||||||
title="{{ config.base.name.title }}"
|
value="{{ username }}"
|
||||||
placeholder="{{ config.base.name.placeholder }}"
|
label="用户名"
|
||||||
focus="{{ config.base.name.focus }}"
|
placeholder="请输入用户名"
|
||||||
value="{{ value }}"
|
clearable
|
||||||
>
|
icon="question"
|
||||||
</van-field>
|
icon-class="icon"
|
||||||
|
required
|
||||||
|
bind:tap-icon="onTapIcon"
|
||||||
|
/>
|
||||||
<van-field
|
<van-field
|
||||||
title="{{ config.base.tel.title }}"
|
value="{{ password }}"
|
||||||
placeholder="{{ config.base.tel.placeholder }}"
|
type="password"
|
||||||
error="{{ config.base.tel.error }}"
|
label="密码"
|
||||||
input-type="{{ config.base.tel.inputType }}"
|
placeholder="请输入密码"
|
||||||
>
|
required
|
||||||
</van-field>
|
border="{{ false }}"
|
||||||
|
/>
|
||||||
|
</van-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="禁用输入框">
|
||||||
|
<van-cell-group>
|
||||||
<van-field
|
<van-field
|
||||||
title="{{ config.base.address.title }}"
|
value="输入框已禁用"
|
||||||
type="{{ config.base.address.type }}"
|
label="用户名"
|
||||||
placeholder="{{ config.base.address.placeholder }}"
|
left-icon="contact"
|
||||||
maxlength="50"
|
disabled
|
||||||
>
|
border="{{ false }}"
|
||||||
</van-field>
|
/>
|
||||||
|
</van-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="错误提示">
|
||||||
|
<van-cell-group>
|
||||||
<van-field
|
<van-field
|
||||||
title="{{ config.base.disabled.title }}"
|
value="{{ username2 }}"
|
||||||
value="{{ config.base.disabled.value }}"
|
label="用户名"
|
||||||
disabled="{{ config.base.disabled.disabled }}"
|
placeholder="请输入用户名"
|
||||||
|
error
|
||||||
|
/>
|
||||||
|
<van-field
|
||||||
|
value="{{ phone }}"
|
||||||
|
label="手机号"
|
||||||
|
placeholder="请输入手机号"
|
||||||
|
error-message="手机号格式错误"
|
||||||
|
border="{{ false }}"
|
||||||
|
/>
|
||||||
|
</van-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="高度自适应">
|
||||||
|
<van-cell-group>
|
||||||
|
<van-field
|
||||||
|
value="{{ message }}"
|
||||||
|
label="留言"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="请输入留言"
|
||||||
|
rows="1"
|
||||||
|
autosize
|
||||||
|
border="{{ false }}"
|
||||||
|
/>
|
||||||
|
</van-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="插入按钮">
|
||||||
|
<van-cell-group>
|
||||||
|
<van-field
|
||||||
|
value="{{ sms }}"
|
||||||
|
center
|
||||||
|
clearable
|
||||||
|
label="短信验证码"
|
||||||
|
placeholder="请输入短信验证码"
|
||||||
|
use-button-slot
|
||||||
|
border="{{ false }}"
|
||||||
>
|
>
|
||||||
|
<van-button slot="button" size="small" type="primary" custom-class="button">发送验证码</van-button>
|
||||||
</van-field>
|
</van-field>
|
||||||
</van-cell-group>
|
</van-cell-group>
|
||||||
</van-panel>
|
</demo-block>
|
||||||
|
|
||||||
<van-button type="primary" bind:buttonclick="clearInput">清除输入</van-button>
|
|
||||||
|
|
||||||
<!-- 去除标题后的输入框样式 -->
|
|
||||||
<van-panel title="无标题输入框">
|
|
||||||
<van-field
|
|
||||||
placeholder="{{ config.notitle.placeholder }}"
|
|
||||||
value="{{ textareaValue }}"
|
|
||||||
>
|
|
||||||
</van-field>
|
|
||||||
</van-panel>
|
|
||||||
|
|
||||||
<van-button type="primary" bind:buttonclick="clearTextarea">清除输入</van-button>
|
|
||||||
|
|
||||||
<!-- 使用 Field 圆角样式 -->
|
|
||||||
<van-panel title="圆角输入框">
|
|
||||||
<van-field
|
|
||||||
title="{{ config.radius.totalPrice.title }}"
|
|
||||||
type="{{ config.radius.totalPrice.type }}"
|
|
||||||
placeholder="{{ config.radius.totalPrice.placeholder }}"
|
|
||||||
right="{{ config.radius.totalPrice.right }}"
|
|
||||||
mode="{{ config.radius.totalPrice.mode }}"
|
|
||||||
>
|
|
||||||
</van-field>
|
|
||||||
<van-field
|
|
||||||
class="van-field--radius"
|
|
||||||
title="{{ config.radius.excludePrice.title }}"
|
|
||||||
type="{{ config.radius.excludePrice.type }}"
|
|
||||||
placeholder="{{ config.radius.excludePrice.placeholder }}"
|
|
||||||
right="{{ config.radius.excludePrice.right }}"
|
|
||||||
mode="{{ config.radius.excludePrice.mode }}"
|
|
||||||
error="{{ config.radius.excludePrice.error }}"
|
|
||||||
>
|
|
||||||
</van-field>
|
|
||||||
<van-field
|
|
||||||
placeholder="{{ config.radius.notitle.placeholder }}"
|
|
||||||
mode="{{ config.radius.notitle.mode }}"
|
|
||||||
input-type="{{ config.radius.notitle.inputTitle }}"
|
|
||||||
>
|
|
||||||
</van-field>
|
|
||||||
</van-panel>
|
|
||||||
|
|
||||||
<van-panel title="Form 表单中的field应用">
|
|
||||||
<form bindsubmit="formSubmit" bindreset="formReset">
|
|
||||||
<van-field
|
|
||||||
name="{{ config.form.name.name }}"
|
|
||||||
placeholder="{{ config.form.name.placeholder }}"
|
|
||||||
>
|
|
||||||
</van-field>
|
|
||||||
<van-field
|
|
||||||
name="{{ config.form.tel.name }}"
|
|
||||||
placeholder="{{ config.form.tel.placeholder }}"
|
|
||||||
input-type="{{ config.form.tel.inputType }}"
|
|
||||||
>
|
|
||||||
</van-field>
|
|
||||||
<button type="primary" form-type="submit">提交表单</button>
|
|
||||||
</form>
|
|
||||||
</van-panel>
|
|
||||||
|
|||||||
@ -1,17 +1,7 @@
|
|||||||
.field__title--radius {
|
.button {
|
||||||
padding-bottom: 10px;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-field-example--bottom {
|
.icon {
|
||||||
width: 100%;
|
color: #38f;
|
||||||
height: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.picker-view-example {
|
|
||||||
height: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.picker-view-column-example {
|
|
||||||
line-height: 50px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -58,9 +58,9 @@
|
|||||||
|
|
||||||
| 名称 | 说明 |
|
| 名称 | 说明 |
|
||||||
|-----------|-----------|
|
|-----------|-----------|
|
||||||
| title | 自定义标题栏，如果设置了`title`或`price`属性，则不生效 |
|
| title | 自定义标题栏，如果设置了`title`或`price`属性则不生效 |
|
||||||
| desc | 自定义描述栏，如果设置了`desc`或`num`属性，则不生效 |
|
| desc | 自定义描述栏，如果设置了`desc`或`num`属性则不生效 |
|
||||||
| thumb | 自定义 thumb，如果设置了`thumb`属性，则不生效 |
|
| thumb | 自定义 thumb，如果设置了`thumb`属性则不生效 |
|
||||||
| footer | 自定义 footer |
|
| footer | 自定义 footer |
|
||||||
| tags | 自定义 tags |
|
| tags | 自定义 tags |
|
||||||
|
|
||||||
|
|||||||
@ -10,7 +10,6 @@
|
|||||||
background-color: $white;
|
background-color: $white;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
left: 15px;
|
left: 15px;
|
||||||
|
|||||||
@ -3,115 +3,171 @@
|
|||||||
### 使用指南
|
### 使用指南
|
||||||
在 index.json 中引入组件
|
在 index.json 中引入组件
|
||||||
```json
|
```json
|
||||||
{
|
"usingComponents": {
|
||||||
"usingComponents": {
|
|
||||||
"van-field": "path/to/vant-weapp/dist/field/index"
|
"van-field": "path/to/vant-weapp/dist/field/index"
|
||||||
}
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### 代码演示
|
### 代码演示
|
||||||
|
|
||||||
#### 基础用法
|
#### 基础用法
|
||||||
field 支持多种展示方式，在 `data` 中传入对应的设置即可。
|
|
||||||
```html
|
|
||||||
<van-field
|
|
||||||
title="{{ field.title }}"
|
|
||||||
placeholder="{{ field.placeholder }}"
|
|
||||||
focus="{{ field.focus }}"
|
|
||||||
value="{{ field.value }}"
|
|
||||||
bind:change="handleFieldChange"
|
|
||||||
>
|
|
||||||
</van-field>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
Page({
|
|
||||||
data: {
|
|
||||||
field: {
|
|
||||||
focus: true,
|
|
||||||
title: '收货人',
|
|
||||||
placeholder: '名字',
|
|
||||||
value: 'test'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Field 列表
|
|
||||||
```html
|
```html
|
||||||
<van-cell-group>
|
<van-cell-group>
|
||||||
<van-field title="姓名"></van-field>
|
<van-field
|
||||||
<van-field title="邮件"></van-field>
|
value="{{ value }}"
|
||||||
|
placeholder="请输入用户名"
|
||||||
|
border="{{ false }}"
|
||||||
|
bind:change="onChange"
|
||||||
|
/>
|
||||||
</van-cell-group>
|
</van-cell-group>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 监听事件
|
#### 自定义类型
|
||||||
|
根据`type`属性定义不同类型的输入框
|
||||||
field会触发一些事件，当你需要监听这些事件时，可以绑定对应的事件。
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-field
|
<van-cell-group>
|
||||||
title="{{ field.title }}"
|
<van-field
|
||||||
placeholder="{{ field.placeholder }}"
|
value="{{ username }}"
|
||||||
focus="{{ field.focus }}"
|
required
|
||||||
value="{{ field.value }}"
|
clearable
|
||||||
bind:change="handleFieldChange"
|
label="用户名"
|
||||||
bind:focus="handleFieldFocus"
|
icon="question"
|
||||||
bind:blur="handleFieldBlur"
|
placeholder="请输入用户名"
|
||||||
>
|
bind:tap-icon="onTapIcon"
|
||||||
</van-field>
|
/>
|
||||||
|
|
||||||
|
<van-field
|
||||||
|
value="{{ password }}"
|
||||||
|
type="password"
|
||||||
|
label="密码"
|
||||||
|
placeholder="请输入密码"
|
||||||
|
required
|
||||||
|
border="{{ false }}"
|
||||||
|
/>
|
||||||
|
</van-cell-group>
|
||||||
```
|
```
|
||||||
|
|
||||||
```js
|
#### 禁用输入框
|
||||||
Page(extend({}, {
|
|
||||||
data: {
|
|
||||||
field: {
|
|
||||||
focus: true,
|
|
||||||
title: '收货人',
|
|
||||||
placeholder: '名字',
|
|
||||||
value: 'test'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
```html
|
||||||
handleFieldChange(event) {
|
<van-cell-group>
|
||||||
console.log(event);
|
<van-field
|
||||||
},
|
value="输入框已禁用"
|
||||||
|
label="用户名"
|
||||||
|
left-icon="contact"
|
||||||
|
disabled
|
||||||
|
border="{{ false }}"
|
||||||
|
/>
|
||||||
|
</van-cell-group>
|
||||||
|
```
|
||||||
|
|
||||||
handleFieldFocus(event) {
|
#### 错误提示
|
||||||
console.log(event);
|
通过`error`或者`error-message`属性增加对应的错误提示
|
||||||
},
|
|
||||||
|
|
||||||
handleFieldBlur(event) {
|
```html
|
||||||
console.log(event);
|
<van-cell-group>
|
||||||
}
|
<van-field
|
||||||
}
|
value="{{ username }}"
|
||||||
}));
|
label="用户名"
|
||||||
|
placeholder="请输入用户名"
|
||||||
|
error
|
||||||
|
/>
|
||||||
|
<van-field
|
||||||
|
value="{{ phone }}"
|
||||||
|
label="手机号"
|
||||||
|
placeholder="请输入手机号"
|
||||||
|
error-message="手机号格式错误"
|
||||||
|
border="{{ false }}"
|
||||||
|
/>
|
||||||
|
</van-cell-group>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 高度自适应
|
||||||
|
对于 textarea，可以通过`autosize`属性设置高度自适应
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-cell-group>
|
||||||
|
<van-field
|
||||||
|
value="{{ message }}"
|
||||||
|
label="留言"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="请输入留言"
|
||||||
|
autosize
|
||||||
|
border="{{ false }}"
|
||||||
|
/>
|
||||||
|
</van-cell-group>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 插入按钮
|
||||||
|
通过 button slot 可以在输入框尾部插入按钮
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-cell-group>
|
||||||
|
<van-field
|
||||||
|
value="{{ sms }}"
|
||||||
|
center
|
||||||
|
clearable
|
||||||
|
label="短信验证码"
|
||||||
|
placeholder="请输入短信验证码"
|
||||||
|
border="{{ false }}"
|
||||||
|
use-button-slot
|
||||||
|
>
|
||||||
|
<van-button slot="button" size="small" type="primary">发送验证码</van-button>
|
||||||
|
</van-field>
|
||||||
|
</van-cell-group>
|
||||||
```
|
```
|
||||||
|
|
||||||
### API
|
### API
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| title | 输入框左侧标题，若传入为空，则不显示标题 | String | - | |
|
| label | 输入框左侧文本 | `String` | - |
|
||||||
| name | 输入框的名字，作为 form 表单提交时数据的 key | String | componentId 指定的值 | |
|
| value | 当前输入的值 | `String | Number` | - |
|
||||||
| value | 输入框的内容 | String | - | |
|
| type | 可设置为任意原生类型, 如 `number` `idcard` `textarea` `digit` | `String` | `text` |
|
||||||
| type | 输入框的类型，可选值为 input, textarea | String | input | |
|
| focus | 获取焦点 | `Boolean` | `false` |
|
||||||
| inputType | 输入框为 input 情况下，输入框的类型，例如：number, text, password | String | text | |
|
| border | 是否显示内边框 | `Boolean` | `true` |
|
||||||
| placeholder | 输入框为空时占位符 | String | | |
|
| disabled | 是否禁用输入框 | `Boolean` | `false` |
|
||||||
| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | Number | 140 | |
|
| readonly | 是否只读 | `Boolean` | `false` |
|
||||||
| focus | 自动聚焦，拉起键盘 | Boolean | false | |
|
| clearable | 是否启用清除控件 | `Boolean` | `false` |
|
||||||
| disabled | 输入框是否禁用 | Boolean | false | |
|
| required | 是否显示表单必填星号 | `Boolean` | `false` |
|
||||||
| mode | 输入框展示样式，可选值为 wrapped, normal | String | normal | |
|
| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | `Number` | `-1` |
|
||||||
| right | 输入框内容是否居右显示 | Boolean | false | |
|
| placeholder | 输入框为空时占位符 | `String` | - |
|
||||||
| error | 是否显示为输入框错误情况下的样式 | Boolean | false | |
|
| is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` |
|
||||||
| componentId | 用于区分输入框之间的唯一名称 | String | - | |
|
| error | 是否将输入内容标红 | `Boolean` | `false` |
|
||||||
|
| error-message | 底部错误提示文案，为空时不展示 | `String` | `''` |
|
||||||
|
| label-align | 文本对齐方式，可选值为 `center` `right` | `String` | `left` |
|
||||||
|
| input-align | 输入框内容对齐方式，可选值为 `center` `right` | `String` | `left` |
|
||||||
|
| autosize | 自适应内容高度，只对 textarea 有效 | `Boolean` | `false` |
|
||||||
|
| icon | 输入框尾部图标 (可选值见 Icon 组件) | `String` | - |
|
||||||
|
| left-icon | 输入框左侧图标 (可选值见 Icon 组件) | `String` | - |
|
||||||
|
| cursor-spacing | 输入框聚焦时底部与键盘的距离 | `Number` | `50` |
|
||||||
|
| use-button-slot | 是否使用 button slot | `Boolean` | `false` |
|
||||||
|
|
||||||
### Event
|
### Event
|
||||||
|
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
| 事件 | 说明 | 回调参数 |
|
||||||
|-----------|-----------|-----------|
|
|-----------|-----------|-----------|
|
||||||
| change | 当绑定值变化时触发的事件 | event对象 |
|
| inout | 输入内容时触发 | value: 当前输入值 |
|
||||||
| focus | 输入框focus | event对象 |
|
| change | 输入内容时触发 | value: 当前输入值 |
|
||||||
| blur | 输入框blur | event对象 |
|
| click-icon | 点击尾部图标时触发 | - |
|
||||||
|
| focus | 输入框聚焦时触发 | - |
|
||||||
|
| blur | 输入框失焦时触发 | - |
|
||||||
|
|
||||||
|
### Slot
|
||||||
|
|
||||||
|
| 名称 | 说明 |
|
||||||
|
|-----------|-----------|
|
||||||
|
| label | 自定义输入框标签，如果设置了`label`属性则不生效 |
|
||||||
|
| icon | 自定义输入框尾部图标，如果设置了`icon`属性则不生效 |
|
||||||
|
| button | 自定义输入框尾部按钮，需要设置`use-button-slot`属性 |
|
||||||
|
|
||||||
|
### 外部样式类
|
||||||
|
|
||||||
|
| 类名 | 说明 |
|
||||||
|
|-----------|-----------|
|
||||||
|
| custom-class | 根节点样式类 |
|
||||||
|
| input-class | 输入框样式类 |
|
||||||
|
| icon-class | 右侧图标样式类 |
|
||||||
|
| placeholder-class | 占位内容样式类 |
|
||||||
|
|||||||
@ -1,68 +1,117 @@
|
|||||||
Component({
|
Component({
|
||||||
behaviors: ['wx://form-field'],
|
behaviors: ['wx://form-field'],
|
||||||
|
|
||||||
externalClasses: ['field-class'],
|
externalClasses: [
|
||||||
|
'custom-class',
|
||||||
|
'input-class'
|
||||||
|
],
|
||||||
|
|
||||||
relations: {
|
options: {
|
||||||
'../cell-group/index': {
|
multipleSlots: true
|
||||||
type: 'parent'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
properties: {
|
properties: {
|
||||||
title: String,
|
icon: String,
|
||||||
type: {
|
label: String,
|
||||||
type: String,
|
|
||||||
value: 'input'
|
|
||||||
},
|
|
||||||
disabled: Boolean,
|
|
||||||
focus: Boolean,
|
|
||||||
inputType: {
|
|
||||||
type: String,
|
|
||||||
value: 'text'
|
|
||||||
},
|
|
||||||
placeholder: String,
|
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
value: 'normal'
|
|
||||||
},
|
|
||||||
right: Boolean,
|
|
||||||
error: Boolean,
|
error: Boolean,
|
||||||
|
focus: Boolean,
|
||||||
|
center: Boolean,
|
||||||
|
isLink: Boolean,
|
||||||
|
leftIcon: String,
|
||||||
|
disabled: Boolean,
|
||||||
|
autosize: Boolean,
|
||||||
|
readonly: Boolean,
|
||||||
|
required: Boolean,
|
||||||
|
iconClass: String,
|
||||||
|
clearable: Boolean,
|
||||||
|
labelAlign: String,
|
||||||
|
inputAlign: String,
|
||||||
|
errorMessage: String,
|
||||||
|
placeholder: String,
|
||||||
|
useButtonSlot: Boolean,
|
||||||
|
placeholderClass: String,
|
||||||
|
cursorSpacing: {
|
||||||
|
type: Number,
|
||||||
|
value: 50
|
||||||
|
},
|
||||||
maxlength: {
|
maxlength: {
|
||||||
type: Number,
|
type: Number,
|
||||||
value: 140
|
value: -1
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: null,
|
||||||
|
value: ''
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
value: 'text',
|
||||||
|
observer(currentValue) {
|
||||||
|
this.setData({ currentValue });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data: {
|
data: {
|
||||||
showBorder: true
|
focused: false,
|
||||||
|
showClear: false,
|
||||||
|
currentValue: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
attached() {
|
||||||
|
this.setData({
|
||||||
|
currentValue: this.data.value
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
handleFieldChange(event) {
|
onInput(event) {
|
||||||
const { detail = {} } = event;
|
const { value = '' } = event.detail || {};
|
||||||
const { value = '' } = detail;
|
this.triggerEvent('input', value);
|
||||||
this.setData({ value });
|
this.triggerEvent('change', value);
|
||||||
|
|
||||||
this.triggerEvent('change', event);
|
|
||||||
},
|
|
||||||
|
|
||||||
handleFieldFocus(event) {
|
|
||||||
this.triggerEvent('focus', event);
|
|
||||||
},
|
|
||||||
|
|
||||||
handleFieldBlur(event) {
|
|
||||||
this.triggerEvent('blur', event);
|
|
||||||
},
|
|
||||||
|
|
||||||
updateIsLastElement(isLastField) {
|
|
||||||
let showBorder = true;
|
|
||||||
if (isLastField && this.data.mode === 'normal') {
|
|
||||||
showBorder = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setData({
|
this.setData({
|
||||||
showBorder
|
currentValue: value,
|
||||||
|
showClear: this.getShowClear({ value })
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onFocus(event) {
|
||||||
|
this.triggerEvent('focus', event);
|
||||||
|
this.setData({
|
||||||
|
focused: true,
|
||||||
|
showClear: this.getShowClear({ focused: true })
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onBlur(event) {
|
||||||
|
this.focused = false;
|
||||||
|
this.triggerEvent('blur', event);
|
||||||
|
this.setData({
|
||||||
|
focused: false,
|
||||||
|
showClear: this.getShowClear({ focused: false })
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onTapIcon() {
|
||||||
|
this.triggerEvent('tap-icon');
|
||||||
|
},
|
||||||
|
|
||||||
|
getShowClear(options) {
|
||||||
|
const {
|
||||||
|
focused = this.data.focused,
|
||||||
|
value = this.data.currentValue
|
||||||
|
} = options;
|
||||||
|
|
||||||
|
return this.data.clearable && focused && value !== '' && !this.data.readonly;
|
||||||
|
},
|
||||||
|
|
||||||
|
onClear() {
|
||||||
|
this.setData({
|
||||||
|
currentValue: '',
|
||||||
|
showClear: this.getShowClear({ value: '' })
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"component": true,
|
"component": true,
|
||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"van-cell": "../cell/index"
|
"van-cell": "../cell/index",
|
||||||
|
"van-icon": "../icon/index"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,70 +1,88 @@
|
|||||||
@import "../common/_mixins";
|
@import '../helper/index.pcss';
|
||||||
|
|
||||||
.van-field {
|
.van-field {
|
||||||
|
&__body {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&--textarea {
|
||||||
|
min-height: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__control {
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
resize: none;
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
text-align: left;
|
||||||
color: #333;
|
box-sizing: border-box;
|
||||||
}
|
line-height: inherit;
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
.van-field::after {
|
&--disabled {
|
||||||
@mixin hairline;
|
opacity: 1;
|
||||||
border-bottom-width: 1px;
|
color: $gray-darker;
|
||||||
left: 15px;
|
background-color: transparent;
|
||||||
right: 0;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.van-field--no-border::after {
|
&--center {
|
||||||
border-bottom-width: 0;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-cell--field {
|
&--right {
|
||||||
padding: 7px 15px;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.van-field--wrapped {
|
&__clear,
|
||||||
margin: 10px 15px;
|
&__icon-container,
|
||||||
background-color: #fff;
|
&__button {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&::after {
|
&__clear,
|
||||||
left: 0;
|
&__icon-container {
|
||||||
border-width: 1px;
|
padding: 0 10px;
|
||||||
border-radius: 4px;
|
color: $gray-dark;
|
||||||
|
line-height: inherit;
|
||||||
|
margin-right: -10px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__error-message {
|
||||||
|
color: $red;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--error {
|
||||||
|
color: $red;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--label {
|
||||||
|
&-center {
|
||||||
|
.van-cell__title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-right {
|
||||||
|
.van-cell__title {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 圆角输入框，强制展示边框 */
|
|
||||||
.van-field--wrapped::after {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-field--error {
|
|
||||||
color: #f40;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 圆角输入框出现错误时，将边框也置红 */
|
|
||||||
.van-field--wrapped.van-field--error::after {
|
|
||||||
border-color: #f40;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-field__title {
|
|
||||||
color: #333;
|
|
||||||
min-width: 65px;
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-field__input {
|
|
||||||
flex: 1;
|
|
||||||
line-height: 1.6;
|
|
||||||
padding: 4px 0;
|
|
||||||
min-height: 22px;
|
|
||||||
height: auto;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-field__placeholder {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-field__input--right {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,39 +1,66 @@
|
|||||||
<van-cell
|
<van-cell
|
||||||
class="field-class van-field {{ error ? 'van-field--error' : '' }} {{ mode === 'wrapped' ? 'van-field--wrapped' : '' }} {{ !showBorder ? 'van-field--no-border' : '' }}"
|
icon="{{ leftIcon }}"
|
||||||
cell-class="van-cell--field"
|
title="{{ label }}"
|
||||||
|
center="{{ center }}"
|
||||||
|
border="{{ border }}"
|
||||||
|
is-link="{{ isLink }}"
|
||||||
|
required="{{ required }}"
|
||||||
|
title-width="90px"
|
||||||
|
custom-class="custom-class van-field {{ labelAlign ? 'van-field--label-' + labelAlign : '' }}"
|
||||||
>
|
>
|
||||||
<view
|
<slot name="label" slot="title" />
|
||||||
slot="icon"
|
<view class="van-field__body {{ type === 'textarea' ? 'van-field__body--textarea' : '' }}">
|
||||||
wx:if="{{ title }}"
|
|
||||||
class="van-cell__hd van-field__title">
|
|
||||||
{{ title }}
|
|
||||||
</view>
|
|
||||||
<textarea
|
<textarea
|
||||||
wx:if="{{ type === 'textarea' }}"
|
wx:if="{{ type === 'textarea' }}"
|
||||||
auto-height
|
class="input-class van-field__control van-field__textarea {{ inputAlign ? 'van-field--' + inputAlign : '' }} {{ error ? 'van-field--error' : '' }} {{ disabled ? 'van-field__control--disabled' : '' }}"
|
||||||
disabled="{{ disabled }}"
|
|
||||||
focus="{{ focus }}"
|
focus="{{ focus }}"
|
||||||
value="{{ value }}"
|
value="{{ currentValue }}"
|
||||||
placeholder="{{ placeholder }}"
|
disabled="{{ disabled }}"
|
||||||
|
readonly="{{ readonly }}"
|
||||||
maxlength="{{ maxlength }}"
|
maxlength="{{ maxlength }}"
|
||||||
class="van-field__input van-cell__bd {{ right ? 'van-field__input--right' : '' }}"
|
placeholder="{{ placeholder }}"
|
||||||
placeholder-class="van-field__placeholder"
|
auto-height="{{ autosize }}"
|
||||||
bindinput="handleFieldChange"
|
placeholder-class="{{ placeholderClass }} {{ error ? 'van-field--error' : '' }}"
|
||||||
bindfocus="handleFieldFocus"
|
cursor-spacing="{{ cursorSpacing }}"
|
||||||
bindblur="handleFieldBlur"
|
bindinput="onInput"
|
||||||
></textarea>
|
bind:focus="onFocus"
|
||||||
|
bind:blur="onBlur"
|
||||||
|
/>
|
||||||
<input
|
<input
|
||||||
wx:else
|
wx:else
|
||||||
type="{{ inputType || 'text' }}"
|
class="input-class van-field__control {{ inputAlign ? 'van-field--' + inputAlign : '' }} {{ error ? 'van-field--error' : '' }} {{ disabled ? 'van-field__control--disabled' : '' }}"
|
||||||
disabled="{{ disabled }}"
|
type="{{ type }}"
|
||||||
focus="{{ focus }}"
|
focus="{{ focus }}"
|
||||||
value="{{ value }}"
|
value="{{ currentValue }}"
|
||||||
placeholder="{{ placeholder }}"
|
disabled="{{ disabled }}"
|
||||||
|
readonly="{{ readonly }}"
|
||||||
maxlength="{{ maxlength }}"
|
maxlength="{{ maxlength }}"
|
||||||
class="van-field__input van-cell__bd {{ right ? 'van-field__input--right' : '' }}"
|
placeholder="{{ placeholder }}"
|
||||||
placeholder-class="van-field__placeholder"
|
placeholder-class="{{ placeholderClass }} {{ error ? 'van-field--error' : '' }}"
|
||||||
bindinput="handleFieldChange"
|
cursor-spacing="{{ cursorSpacing }}"
|
||||||
bindfocus="handleFieldFocus"
|
bindinput="onInput"
|
||||||
bindblur="handleFieldBlur"
|
bind:focus="onFocus"
|
||||||
|
bind:blur="onBlur"
|
||||||
/>
|
/>
|
||||||
|
<van-icon
|
||||||
|
wx:if="{{ showClear }}"
|
||||||
|
name="clear"
|
||||||
|
custom-class="van-field__clear"
|
||||||
|
bind:touchstart="onClear"
|
||||||
|
/>
|
||||||
|
<view class="van-field__icon-container" bind:tap="onTapIcon">
|
||||||
|
<van-icon
|
||||||
|
wx:if="{{ icon }}"
|
||||||
|
custom-class="van-field__icon {{ iconClass }}"
|
||||||
|
name="{{ icon }}"
|
||||||
|
/>
|
||||||
|
<slot wx:else name="icon" />
|
||||||
|
</view>
|
||||||
|
<view wx:if="{{ useButtonSlot }}" class="van-field__button">
|
||||||
|
<slot name="button" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view wx:if="{{ errorMessage }}" class="van-field__error-message">
|
||||||
|
{{ errorMessage }}
|
||||||
|
</view>
|
||||||
</van-cell>
|
</van-cell>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user