mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +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({
|
||||
data: {
|
||||
config,
|
||||
value: 'test',
|
||||
textareaValue: 'test textarea',
|
||||
area: ['省份', '北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾省', '香港特别行政区', '澳门特别行政区'],
|
||||
areaIndex: 0,
|
||||
// picker-view 示例配置
|
||||
pickerViewConfig: {
|
||||
show: false,
|
||||
value: [0, 0],
|
||||
year: [2016, 2017, 2018],
|
||||
sex: ['男', '女']
|
||||
}
|
||||
sms: '',
|
||||
value: '',
|
||||
password: '',
|
||||
username: '',
|
||||
username2: '',
|
||||
message: '',
|
||||
phone: '1365577'
|
||||
},
|
||||
|
||||
onAreaChange(e) {
|
||||
this.setData({
|
||||
areaIndex: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
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
|
||||
onTapIcon() {
|
||||
wx.showToast({
|
||||
icon: 'none',
|
||||
title: '点击图标'
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
{
|
||||
"navigationBarTitleText": "Field 输入框",
|
||||
"usingComponents": {
|
||||
"van-button": "../../dist/button/index",
|
||||
"van-cell-group": "../../dist/cell-group/index",
|
||||
"demo-block": "../../components/demo-block/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 基础用法 -->
|
||||
<van-panel title="基础用法">
|
||||
<demo-block title="基础用法">
|
||||
<van-cell-group>
|
||||
<van-field value="{{ value }}" placeholder="请输入用户名" border="{{ false }}" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义类型">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
title="{{ config.base.name.title }}"
|
||||
placeholder="{{ config.base.name.placeholder }}"
|
||||
focus="{{ config.base.name.focus }}"
|
||||
value="{{ value }}"
|
||||
>
|
||||
</van-field>
|
||||
value="{{ username }}"
|
||||
label="用户名"
|
||||
placeholder="请输入用户名"
|
||||
clearable
|
||||
icon="question"
|
||||
icon-class="icon"
|
||||
required
|
||||
bind:tap-icon="onTapIcon"
|
||||
/>
|
||||
<van-field
|
||||
title="{{ config.base.tel.title }}"
|
||||
placeholder="{{ config.base.tel.placeholder }}"
|
||||
error="{{ config.base.tel.error }}"
|
||||
input-type="{{ config.base.tel.inputType }}"
|
||||
>
|
||||
</van-field>
|
||||
value="{{ password }}"
|
||||
type="password"
|
||||
label="密码"
|
||||
placeholder="请输入密码"
|
||||
required
|
||||
border="{{ false }}"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="禁用输入框">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
title="{{ config.base.address.title }}"
|
||||
type="{{ config.base.address.type }}"
|
||||
placeholder="{{ config.base.address.placeholder }}"
|
||||
maxlength="50"
|
||||
>
|
||||
</van-field>
|
||||
value="输入框已禁用"
|
||||
label="用户名"
|
||||
left-icon="contact"
|
||||
disabled
|
||||
border="{{ false }}"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="错误提示">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
title="{{ config.base.disabled.title }}"
|
||||
value="{{ config.base.disabled.value }}"
|
||||
disabled="{{ config.base.disabled.disabled }}"
|
||||
value="{{ username2 }}"
|
||||
label="用户名"
|
||||
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-cell-group>
|
||||
</van-panel>
|
||||
|
||||
<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>
|
||||
</demo-block>
|
||||
|
||||
@ -1,17 +1,7 @@
|
||||
.field__title--radius {
|
||||
padding-bottom: 10px;
|
||||
.button {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.popup-field-example--bottom {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.picker-view-example {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.picker-view-column-example {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
.icon {
|
||||
color: #38f;
|
||||
}
|
||||
|
||||
@ -58,9 +58,9 @@
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| title | 自定义标题栏，如果设置了`title`或`price`属性，则不生效 |
|
||||
| desc | 自定义描述栏，如果设置了`desc`或`num`属性，则不生效 |
|
||||
| thumb | 自定义 thumb，如果设置了`thumb`属性，则不生效 |
|
||||
| title | 自定义标题栏，如果设置了`title`或`price`属性则不生效 |
|
||||
| desc | 自定义描述栏，如果设置了`desc`或`num`属性则不生效 |
|
||||
| thumb | 自定义 thumb，如果设置了`thumb`属性则不生效 |
|
||||
| footer | 自定义 footer |
|
||||
| tags | 自定义 tags |
|
||||
|
||||
|
||||
@ -10,7 +10,6 @@
|
||||
background-color: $white;
|
||||
color: $text-color;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
left: 15px;
|
||||
|
||||
@ -3,115 +3,171 @@
|
||||
### 使用指南
|
||||
在 index.json 中引入组件
|
||||
```json
|
||||
{
|
||||
"usingComponents": {
|
||||
"van-field": "path/to/vant-weapp/dist/field/index"
|
||||
}
|
||||
"usingComponents": {
|
||||
"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
|
||||
<van-cell-group>
|
||||
<van-field title="姓名"></van-field>
|
||||
<van-field title="邮件"></van-field>
|
||||
<van-field
|
||||
value="{{ value }}"
|
||||
placeholder="请输入用户名"
|
||||
border="{{ false }}"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### 监听事件
|
||||
|
||||
field会触发一些事件，当你需要监听这些事件时，可以绑定对应的事件。
|
||||
#### 自定义类型
|
||||
根据`type`属性定义不同类型的输入框
|
||||
|
||||
```html
|
||||
<van-field
|
||||
title="{{ field.title }}"
|
||||
placeholder="{{ field.placeholder }}"
|
||||
focus="{{ field.focus }}"
|
||||
value="{{ field.value }}"
|
||||
bind:change="handleFieldChange"
|
||||
bind:focus="handleFieldFocus"
|
||||
bind:blur="handleFieldBlur"
|
||||
>
|
||||
</van-field>
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
value="{{ username }}"
|
||||
required
|
||||
clearable
|
||||
label="用户名"
|
||||
icon="question"
|
||||
placeholder="请输入用户名"
|
||||
bind:tap-icon="onTapIcon"
|
||||
/>
|
||||
|
||||
<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: {
|
||||
handleFieldChange(event) {
|
||||
console.log(event);
|
||||
},
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
value="输入框已禁用"
|
||||
label="用户名"
|
||||
left-icon="contact"
|
||||
disabled
|
||||
border="{{ false }}"
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
handleFieldFocus(event) {
|
||||
console.log(event);
|
||||
},
|
||||
#### 错误提示
|
||||
通过`error`或者`error-message`属性增加对应的错误提示
|
||||
|
||||
handleFieldBlur(event) {
|
||||
console.log(event);
|
||||
}
|
||||
}
|
||||
}));
|
||||
```html
|
||||
<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
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 输入框左侧标题，若传入为空，则不显示标题 | String | - | |
|
||||
| name | 输入框的名字，作为 form 表单提交时数据的 key | String | componentId 指定的值 | |
|
||||
| value | 输入框的内容 | String | - | |
|
||||
| type | 输入框的类型，可选值为 input, textarea | String | input | |
|
||||
| inputType | 输入框为 input 情况下，输入框的类型，例如：number, text, password | String | text | |
|
||||
| placeholder | 输入框为空时占位符 | String | | |
|
||||
| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | Number | 140 | |
|
||||
| focus | 自动聚焦，拉起键盘 | Boolean | false | |
|
||||
| disabled | 输入框是否禁用 | Boolean | false | |
|
||||
| mode | 输入框展示样式，可选值为 wrapped, normal | String | normal | |
|
||||
| right | 输入框内容是否居右显示 | Boolean | false | |
|
||||
| error | 是否显示为输入框错误情况下的样式 | Boolean | false | |
|
||||
| componentId | 用于区分输入框之间的唯一名称 | String | - | |
|
||||
| label | 输入框左侧文本 | `String` | - |
|
||||
| value | 当前输入的值 | `String | Number` | - |
|
||||
| type | 可设置为任意原生类型, 如 `number` `idcard` `textarea` `digit` | `String` | `text` |
|
||||
| focus | 获取焦点 | `Boolean` | `false` |
|
||||
| border | 是否显示内边框 | `Boolean` | `true` |
|
||||
| disabled | 是否禁用输入框 | `Boolean` | `false` |
|
||||
| readonly | 是否只读 | `Boolean` | `false` |
|
||||
| clearable | 是否启用清除控件 | `Boolean` | `false` |
|
||||
| required | 是否显示表单必填星号 | `Boolean` | `false` |
|
||||
| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | `Number` | `-1` |
|
||||
| placeholder | 输入框为空时占位符 | `String` | - |
|
||||
| is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` |
|
||||
| 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
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | event对象 |
|
||||
| focus | 输入框focus | event对象 |
|
||||
| blur | 输入框blur | event对象 |
|
||||
| inout | 输入内容时触发 | value: 当前输入值 |
|
||||
| change | 输入内容时触发 | value: 当前输入值 |
|
||||
| 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({
|
||||
behaviors: ['wx://form-field'],
|
||||
|
||||
externalClasses: ['field-class'],
|
||||
externalClasses: [
|
||||
'custom-class',
|
||||
'input-class'
|
||||
],
|
||||
|
||||
relations: {
|
||||
'../cell-group/index': {
|
||||
type: 'parent'
|
||||
}
|
||||
options: {
|
||||
multipleSlots: true
|
||||
},
|
||||
|
||||
properties: {
|
||||
title: String,
|
||||
type: {
|
||||
type: String,
|
||||
value: 'input'
|
||||
},
|
||||
disabled: Boolean,
|
||||
focus: Boolean,
|
||||
inputType: {
|
||||
type: String,
|
||||
value: 'text'
|
||||
},
|
||||
placeholder: String,
|
||||
mode: {
|
||||
type: String,
|
||||
value: 'normal'
|
||||
},
|
||||
right: Boolean,
|
||||
icon: String,
|
||||
label: String,
|
||||
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: {
|
||||
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: {
|
||||
showBorder: true
|
||||
focused: false,
|
||||
showClear: false,
|
||||
currentValue: ''
|
||||
},
|
||||
|
||||
attached() {
|
||||
this.setData({
|
||||
currentValue: this.data.value
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleFieldChange(event) {
|
||||
const { detail = {} } = event;
|
||||
const { value = '' } = detail;
|
||||
this.setData({ 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;
|
||||
}
|
||||
|
||||
onInput(event) {
|
||||
const { value = '' } = event.detail || {};
|
||||
this.triggerEvent('input', value);
|
||||
this.triggerEvent('change', value);
|
||||
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,
|
||||
"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 {
|
||||
display: block;
|
||||
position: relative;
|
||||
color: #333;
|
||||
}
|
||||
&__body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.van-field::after {
|
||||
@mixin hairline;
|
||||
border-bottom-width: 1px;
|
||||
left: 15px;
|
||||
right: 0;
|
||||
}
|
||||
&--textarea {
|
||||
min-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-field--no-border::after {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
&__control {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
resize: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
line-height: inherit;
|
||||
background-color: transparent;
|
||||
|
||||
.van-cell--field {
|
||||
padding: 7px 15px;
|
||||
}
|
||||
&--disabled {
|
||||
opacity: 1;
|
||||
color: $gray-darker;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.van-field--wrapped {
|
||||
margin: 10px 15px;
|
||||
background-color: #fff;
|
||||
&--center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 0;
|
||||
border-width: 1px;
|
||||
border-radius: 4px;
|
||||
&--right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&__clear,
|
||||
&__icon-container,
|
||||
&__button {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__clear,
|
||||
&__icon-container {
|
||||
padding: 0 10px;
|
||||
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
|
||||
class="field-class van-field {{ error ? 'van-field--error' : '' }} {{ mode === 'wrapped' ? 'van-field--wrapped' : '' }} {{ !showBorder ? 'van-field--no-border' : '' }}"
|
||||
cell-class="van-cell--field"
|
||||
icon="{{ leftIcon }}"
|
||||
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="icon"
|
||||
wx:if="{{ title }}"
|
||||
class="van-cell__hd van-field__title">
|
||||
{{ title }}
|
||||
<slot name="label" slot="title" />
|
||||
<view class="van-field__body {{ type === 'textarea' ? 'van-field__body--textarea' : '' }}">
|
||||
<textarea
|
||||
wx:if="{{ type === 'textarea' }}"
|
||||
class="input-class van-field__control van-field__textarea {{ inputAlign ? 'van-field--' + inputAlign : '' }} {{ error ? 'van-field--error' : '' }} {{ disabled ? 'van-field__control--disabled' : '' }}"
|
||||
focus="{{ focus }}"
|
||||
value="{{ currentValue }}"
|
||||
disabled="{{ disabled }}"
|
||||
readonly="{{ readonly }}"
|
||||
maxlength="{{ maxlength }}"
|
||||
placeholder="{{ placeholder }}"
|
||||
auto-height="{{ autosize }}"
|
||||
placeholder-class="{{ placeholderClass }} {{ error ? 'van-field--error' : '' }}"
|
||||
cursor-spacing="{{ cursorSpacing }}"
|
||||
bindinput="onInput"
|
||||
bind:focus="onFocus"
|
||||
bind:blur="onBlur"
|
||||
/>
|
||||
<input
|
||||
wx:else
|
||||
class="input-class van-field__control {{ inputAlign ? 'van-field--' + inputAlign : '' }} {{ error ? 'van-field--error' : '' }} {{ disabled ? 'van-field__control--disabled' : '' }}"
|
||||
type="{{ type }}"
|
||||
focus="{{ focus }}"
|
||||
value="{{ currentValue }}"
|
||||
disabled="{{ disabled }}"
|
||||
readonly="{{ readonly }}"
|
||||
maxlength="{{ maxlength }}"
|
||||
placeholder="{{ placeholder }}"
|
||||
placeholder-class="{{ placeholderClass }} {{ error ? 'van-field--error' : '' }}"
|
||||
cursor-spacing="{{ cursorSpacing }}"
|
||||
bindinput="onInput"
|
||||
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>
|
||||
<textarea
|
||||
wx:if="{{ type === 'textarea' }}"
|
||||
auto-height
|
||||
disabled="{{ disabled }}"
|
||||
focus="{{ focus }}"
|
||||
value="{{ value }}"
|
||||
placeholder="{{ placeholder }}"
|
||||
maxlength="{{ maxlength }}"
|
||||
class="van-field__input van-cell__bd {{ right ? 'van-field__input--right' : '' }}"
|
||||
placeholder-class="van-field__placeholder"
|
||||
bindinput="handleFieldChange"
|
||||
bindfocus="handleFieldFocus"
|
||||
bindblur="handleFieldBlur"
|
||||
></textarea>
|
||||
<input
|
||||
wx:else
|
||||
type="{{ inputType || 'text' }}"
|
||||
disabled="{{ disabled }}"
|
||||
focus="{{ focus }}"
|
||||
value="{{ value }}"
|
||||
placeholder="{{ placeholder }}"
|
||||
maxlength="{{ maxlength }}"
|
||||
class="van-field__input van-cell__bd {{ right ? 'van-field__input--right' : '' }}"
|
||||
placeholder-class="van-field__placeholder"
|
||||
bindinput="handleFieldChange"
|
||||
bindfocus="handleFieldFocus"
|
||||
bindblur="handleFieldBlur"
|
||||
/>
|
||||
</van-cell>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user