blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

[breaking change] Field & Form: 新增 Field 组件 (#37)

Browse Source 
* add input

* remove file

* 更名为 field 组件 && 增加圆角主题

* 调整 field title 宽度

* 增加 input 回调逻辑

* remove form
This commit is contained in:
Yao 2017-10-26 16:03:02 +08:00 committed by GitHub
parent 96f24ae043
commit b05249d96a
13 changed files with 149 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app.json
View File

@ -7,7 +7,7 @@
"example/card/index",
"example/cell/index",
"example/dialog/index",
"example/form/index",
"example/field/index",
"example/helper/index",
"example/icon/index",
"example/label/index",
@ -31,4 +31,4 @@
"backgroundColor": "#f9f9f9"
},
"debug": true
}
}

3
app.wxss
View File

@ -5,6 +5,7 @@
overflow: hidden;
min-height: 100vh;
box-sizing: border-box;
padding: 15px 0;
}
.container::before {
position: fixed;
@ -21,6 +22,6 @@
line-height: 25px;
color: #666;
padding: 15px 0;
margin: 20px 15px;
margin: 10px 15px;
border-bottom: 1rpx solid #e5e5e5;
}

14
dist/field/index.js vendored Normal file
View File

@ -0,0 +1,14 @@
module.exports = {
_handleZanFieldChange(event) {
const { componentId } = event.currentTarget.dataset;
event.componentId = componentId;
console.info('[zan:field:change]', event);
if (this.handleZanFieldChange) {
this.handleZanFieldChange(event);
} else {
console.warn('页面缺少 handleZanFieldChange 回调函数');
}
}
};

21
dist/field/index.wxml vendored Normal file
View File

@ -0,0 +1,21 @@
<template name="zan-field">
<view class="zan-cell zan-field {{ error ? 'zan-field--error' : '' }} {{ mode === 'wrapped' ? 'zan-field--wrapped' : '' }}">
<view
wx:if="{{ title }}"
class="zan-cell__hd zan-field__title">{{ title }}</view>
<textarea
wx:if="{{ type === 'textarea' }}"
auto-height
placeholder="{{ placeholder }}"
class="zan-field__input zan-cell__bd {{ right ? 'zan-field__input--right' : '' }}"
bindinput="_handleZanFieldChange"
data-component-id="{{ componentId }}"></textarea>
<input
wx:else
type="{{ inputType || 'text' }}"
placeholder="{{ placeholder }}"
class="zan-field__input zan-cell__bd {{ right ? 'zan-field__input--right' : '' }}"
bindinput="_handleZanFieldChange"
data-component-id="{{ componentId }}"/>
</view>
</template>

39
dist/field/index.wxss vendored Normal file
View File

@ -0,0 +1,39 @@
@import '../cell/index.wxss';
.zan-field--wrapped {
margin: 0 15px;
border: 1rpx solid #e5e5e5;
border-radius: 8rpx;
background-color: #fff;
}
.zan-field--wrapped::after {
border: 0rpx;
}
.zan-field--wrapped + .zan-field--wrapped {
margin-top: 10px;
}
.zan-field--error {
/* 圆角输入框时，将边框也置红 */
border-color: #f40;
color: #f40;
}
.zan-field__title {
color: #333;
min-width: 62px;
padding-right: 10px;
}
.zan-field__input {
line-height: 30px;
height: 30px;
min-height: 30px;
flex: 1;
}
.zan-field__input--right {
text-align: right;
}

38
dist/form/index.wxss vendored
View File

@ -1,38 +0,0 @@
.zan-form {
background-color: #fff;
border-top: 1rpx solid #e5e5e5;
border-bottom: 1rpx solid #e5e5e5;
}
.zan-form__item {
line-height: 26px;
}
.zan-form__title {
float: left;
width: 80px;
font-size: 14px;
}
.zan-form__title--top {
align-self: flex-start;
}
.zan-form__input, .zan-form__textarea {
min-height: 26px;
}
.zan-form__input input {
min-height: 26px;
}
.zan-form__textarea {
display: -webkit-flex;
display: flex;
align-items: center;
}
.zan-form__textarea textarea {
width: auto;
flex: 1;
}

1
dist/index.js vendored
View File

@ -1,4 +1,5 @@
exports.CheckLabel = require('./select/index');
exports.Field = require('./field/index');
exports.NoticeBar = require('./noticebar/index');
exports.Quantity = require('./quantity/index');
exports.Switch = require('./switch/index');

2
dist/index.wxss vendored
View File

@ -5,7 +5,7 @@
@import "cell/index.wxss";
@import "color/index.wxss";
@import "dialog/index.wxss";
@import "form/index.wxss";
@import "field/index.wxss";
@import "helper/index.wxss";
@import "icon/index.wxss";
@import "label/index.wxss";

14
example/dashboard/config.js
View File

@ -17,9 +17,6 @@ export default {
}, {
name: 'Cell 单元格',
path: '/example/cell/index'
}, {
name: 'Form 表单',
path: '/example/form/index'
}, {
name: 'Helper 基础样式',
path: '/example/helper/index'
@ -62,6 +59,15 @@ export default {
}
]
},
form: {
title: '表单',
content: [
{
name: 'Field 输入框',
path: '/example/field/index'
}
]
},
action: {
title: '操作反馈',
content: [
@ -74,4 +80,4 @@ export default {
}
]
}
}
};

15
example/form/index.js → example/field/index.js
View File

@ -1,21 +1,20 @@
var Zan = require('../../dist/index');
Page(Object.assign({}, Zan.CheckLabel, {
Page(Object.assign({}, Zan.Field, {
data: {
area: ['省份', '北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾省', '香港特别行政区', '澳门特别行政区'],
areaIndex: 0
},
onLoad() {
},
onShow() {
},
onAreaChange(e) {
this.setData({
areaIndex: e.detail.value
});
},
handleZanFieldChange(e) {
const { componentId, detail } = e;
console.log('[zan:field:change]', componentId, detail);
}
}));

49
example/field/index.wxml Normal file
View File

@ -0,0 +1,49 @@
<import src="/dist/field/index.wxml" />
<view class="container">
<view class="doc-title">Field</view>
<view class="zan-panel-title">基础用法</view>
<view class="zan-panel">
<template is="zan-field" data="{{ title: '收货人', type: 'input', placeholder: '名字' }}"></template>
<template is="zan-field" data="{{ title: '联系电话', type: 'input', inputType: 'number', placeholder: '请输入手机号', error: true }}"></template>
<template is="zan-field" data="{{ title: '详细地址', type: 'textarea', placeholder: '请输入详细地址' }}"></template>
</view>
<view class="zan-panel-title">无标题输入框</view>
<view class="zan-panel">
<template is="zan-field" data="{{ type: 'input', placeholder: '请输入收货人姓名' }}"></template>
</view>
<view class="zan-panel-title field__title--radius">圆角输入框</view>
<template is="zan-field" data="{{ mode: 'wrapped', title: '消费总额', type: 'input', inputType: 'number', placeholder: '询问收银员后输入', right: true }}"></template>
<template is="zan-field" data="{{ mode: 'wrapped', title: '不参与优惠金额', type: 'input', inputType: 'number', placeholder: '询问收银员后输入', error: true, right: true }}"></template>
<template is="zan-field" data="{{ mode: 'wrapped', type: 'input', inputType: 'number', placeholder: '请输入消费金额' }}"></template>
<view class="zan-panel-title">自定义显示内容</view>
<view class="zan-panel">
<view class="zan-cell">
<view class="zan-cell__hd zan-field__title">选择区域</view>
<picker
mode="selector"
class="zan-field__input zan-cell__bd"
range="{{ area }}"
value="{{ areaIndex }}"
bindchange="onAreaChange"
>
{{ area[areaIndex] }}
</picker>
</view>
<view class="zan-cell">
<view class="zan-cell__hd zan-field__title">验证码</view>
<input
type="text"
placeholder="请输入短信验证码"
class="zan-field__input zan-cell__bd"/>
<view class="zan-cell__ft">
<button class="zan-btn zan-btn--mini zan-btn--primary">获取验证码</button>
</view>
</view>
</view>
</view>

3
example/field/index.wxss Normal file
View File

@ -0,0 +1,3 @@
.field__title--radius {
padding-bottom: 10px;
}

54
example/form/index.wxml
View File

@ -1,54 +0,0 @@
<view class="container">
<view class="doc-title">FORM</view>
<view class="zan-form">
<view class="zan-cell zan-form__item">
<text class="zan-form__title">收货人</text>
<input
class="zan-form__input zan-cell__bd"
placeholder="名字"
/>
</view>
<view class="zan-cell zan-form__item">
<text class="zan-form__title">联系电话</text>
<input
class="zan-form__input zan-cell__bd"
type="number"
maxlength="20"
placeholder="手机或固定电话"
/>
</view>
<view class="zan-cell zan-form__item zan-cell--last-child">
<text class="zan-form__title">选择区域</text>
<view class="zan-form__input zan-cell__bd">
<picker
mode="selector"
range="{{ area }}"
value="{{ areaIndex }}"
bindchange="onAreaChange"
>
{{ area[areaIndex] }}
</picker>
</view>
</view>
</view>
<view class="zan-form" style="margin-top: 20px">
<view class="zan-cell zan-form__item">
<view class="zan-cell__bd">
<text class="zan-form__title">验证码</text>
<input
class="zan-form__input"
type="text"
maxlength="7"
placeholder="请输入短信验证码"
/>
</view>
<view class="zan-cell__ft">
<button class="zan-btn zan-btn--mini zan-btn--primary sms-btn">获取验证码</button>
</view>
</view>
</view>
</view>