diff --git a/app.json b/app.json index bd4d7311..e043f3c5 100644 --- a/app.json +++ b/app.json @@ -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 -} \ No newline at end of file +} diff --git a/app.wxss b/app.wxss index d191022d..ea3da517 100644 --- a/app.wxss +++ b/app.wxss @@ -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; } diff --git a/dist/field/index.js b/dist/field/index.js new file mode 100644 index 00000000..6ec9d18e --- /dev/null +++ b/dist/field/index.js @@ -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 回调函数'); + } + } +}; diff --git a/dist/field/index.wxml b/dist/field/index.wxml new file mode 100644 index 00000000..e1b84999 --- /dev/null +++ b/dist/field/index.wxml @@ -0,0 +1,21 @@ + diff --git a/dist/field/index.wxss b/dist/field/index.wxss new file mode 100644 index 00000000..5b6a5e03 --- /dev/null +++ b/dist/field/index.wxss @@ -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; +} diff --git a/dist/form/index.wxss b/dist/form/index.wxss deleted file mode 100644 index d3dac94f..00000000 --- a/dist/form/index.wxss +++ /dev/null @@ -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; -} diff --git a/dist/index.js b/dist/index.js index c44f2d8e..48cf5846 100644 --- a/dist/index.js +++ b/dist/index.js @@ -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'); diff --git a/dist/index.wxss b/dist/index.wxss index e797a010..c5b70894 100644 --- a/dist/index.wxss +++ b/dist/index.wxss @@ -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"; diff --git a/example/dashboard/config.js b/example/dashboard/config.js index 2aea424f..6374bf1f 100644 --- a/example/dashboard/config.js +++ b/example/dashboard/config.js @@ -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 { } ] } -} +}; diff --git a/example/form/index.js b/example/field/index.js similarity index 81% rename from example/form/index.js rename to example/field/index.js index 38226cf8..530c3de9 100644 --- a/example/form/index.js +++ b/example/field/index.js @@ -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); } })); diff --git a/example/field/index.wxml b/example/field/index.wxml new file mode 100644 index 00000000..ff8dba76 --- /dev/null +++ b/example/field/index.wxml @@ -0,0 +1,49 @@ + + + + Field + + 基础用法 + + + + + + + 无标题输入框 + + + + + 圆角输入框 + + + + + 自定义显示内容 + + + 选择区域 + + {{ area[areaIndex] }} + + + + + 验证码 + + + + + + + diff --git a/example/field/index.wxss b/example/field/index.wxss new file mode 100644 index 00000000..727c6893 --- /dev/null +++ b/example/field/index.wxss @@ -0,0 +1,3 @@ +.field__title--radius { + padding-bottom: 10px; +} diff --git a/example/form/index.wxml b/example/form/index.wxml deleted file mode 100644 index 7685e30d..00000000 --- a/example/form/index.wxml +++ /dev/null @@ -1,54 +0,0 @@ - - - FORM - - - - 收货人 - - - - 联系电话 - - - - 选择区域 - - - {{ area[areaIndex] }} - - - - - - - - - 验证码 - - - - - - - - -