From 876c75a388fdb00a2d25e854a3b80153023874c3 Mon Sep 17 00:00:00 2001 From: Yao Date: Mon, 4 Jun 2018 21:52:32 +0800 Subject: [PATCH] =?UTF-8?q?[improvement]=20Field:=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=9C=A8=E5=88=97=E8=A1=A8=E4=B8=AD=E8=BE=93=E5=85=A5=E6=A1=86?= =?UTF-8?q?=E8=A1=A8=E7=8E=B0=20(#296)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 优化 field 实现 * field 使用cell来架构 * field 列表 --- example/pages/field/index.json | 1 + example/pages/field/index.wxml | 56 ++++++++++++++++++---------------- packages/cell-group/index.js | 46 ++++++++++++++++++---------- packages/cell/index.js | 2 +- packages/field/README.md | 8 +++++ packages/field/index.js | 25 ++++++++++++++- packages/field/index.json | 5 ++- packages/field/index.pcss | 22 +++++++++++-- packages/field/index.wxml | 8 +++-- 9 files changed, 122 insertions(+), 51 deletions(-) diff --git a/example/pages/field/index.json b/example/pages/field/index.json index 01e279b5..c1a2561f 100644 --- a/example/pages/field/index.json +++ b/example/pages/field/index.json @@ -3,6 +3,7 @@ "usingComponents": { "zan-button": "../../dist/btn/index", "zan-button-group": "../../dist/btn-group/index", + "zan-cell-group": "../../dist/cell-group/index", "zan-field": "../../dist/field/index", "zan-panel": "../../dist/panel/index", "doc-page": "../../components/doc-page/index" diff --git a/example/pages/field/index.wxml b/example/pages/field/index.wxml index 21faf5d0..918c2c57 100644 --- a/example/pages/field/index.wxml +++ b/example/pages/field/index.wxml @@ -1,33 +1,35 @@ - - - - - - - - + + + + + + + + + + diff --git a/packages/cell-group/index.js b/packages/cell-group/index.js index 071d780b..ea805902 100644 --- a/packages/cell-group/index.js +++ b/packages/cell-group/index.js @@ -1,44 +1,58 @@ +const CELL_PATH = '../cell/index'; +const FIELD_PATH = '../field/index' + Component({ relations: { - '../cell/index': { + [CELL_PATH]: { type: 'child', linked() { - this._updateIsLastCell(); + this._updateIsLastElement(CELL_PATH); }, linkChanged() { - this._updateIsLastCell(); + this._updateIsLastElement(CELL_PATH); }, unlinked() { - this._updateIsLastCell(); + this._updateIsLastElement(CELL_PATH); + } + }, + [FIELD_PATH]: { + type: 'child', + linked() { + this._updateIsLastElement(FIELD_PATH); + }, + linkChanged() { + this._updateIsLastElement(FIELD_PATH); + }, + unlinked() { + this._updateIsLastElement(FIELD_PATH); } } }, data: { - cellUpdateTimeout: 0 + elementUpdateTimeout: 0 }, methods: { - _updateIsLastCell() { + _updateIsLastElement(childPath) { // 用 setTimeout 减少计算次数 - if (this.data.cellUpdateTimeout > 0) { + if (this.data.elementUpdateTimeout > 0) { return; } - const cellUpdateTimeout = setTimeout(() => { - this.setData({ cellUpdateTimeout: 0 }); - let cells = this.getRelationNodes('../cell/index'); + const elementUpdateTimeout = setTimeout(() => { + this.setData({ elementUpdateTimeout: 0 }); + let elements = this.getRelationNodes(childPath); + if (elements.length > 0) { + let lastIndex = elements.length - 1; - if (cells.length > 0) { - let lastIndex = cells.length - 1; - - cells.forEach((cell, index) => { - cell.updateIsLastCell(index === lastIndex); + elements.forEach((cell, index) => { + cell.updateIsLastElement(index === lastIndex); }); } }); - this.setData({ cellUpdateTimeout }); + this.setData({ elementUpdateTimeout }); } } }); diff --git a/packages/cell/index.js b/packages/cell/index.js index 3010bcda..9bf05606 100644 --- a/packages/cell/index.js +++ b/packages/cell/index.js @@ -70,7 +70,7 @@ Component({ }, // 用于被 cell-group 更新，标志是否是最后一个 cell - updateIsLastCell(isLastCell) { + updateIsLastElement(isLastCell) { this.setData({ isLastCell }); } } diff --git a/packages/field/README.md b/packages/field/README.md index 3aaca6e7..d9596b64 100644 --- a/packages/field/README.md +++ b/packages/field/README.md @@ -38,6 +38,14 @@ Page({ }); ``` +#### Field 列表 +```html + + + + +``` + #### 监听事件 field会触发一些事件，当你需要监听这些事件时，可以绑定对应的事件。 diff --git a/packages/field/index.js b/packages/field/index.js index da909fe5..05df865c 100644 --- a/packages/field/index.js +++ b/packages/field/index.js @@ -1,6 +1,14 @@ Component({ behaviors: ['wx://form-field'], + externalClasses: ['field-class'], + + relations: { + '../cell-group/index': { + type: 'parent' + } + }, + properties: { title: String, type: { @@ -8,12 +16,12 @@ Component({ value: 'input' }, disabled: Boolean, + focus: Boolean, inputType: { type: String, value: 'text' }, placeholder: String, - focus: Boolean, mode: { type: String, value: 'normal' @@ -26,6 +34,10 @@ Component({ } }, + data: { + showBorder: true + }, + methods: { handleFieldChange(event) { const { detail = {} } = event; @@ -41,6 +53,17 @@ Component({ handleFieldBlur(event) { this.triggerEvent('blur', event); + }, + + updateIsLastElement(isLastField) { + let showBorder = true; + if (isLastField && this.data.mode === 'normal') { + showBorder = false; + } + + this.setData({ + showBorder + }); } } }); diff --git a/packages/field/index.json b/packages/field/index.json index 32640e0d..da538052 100644 --- a/packages/field/index.json +++ b/packages/field/index.json @@ -1,3 +1,6 @@ { - "component": true + "component": true, + "usingComponents": { + "zan-cell": "../cell/index" + } } \ No newline at end of file diff --git a/packages/field/index.pcss b/packages/field/index.pcss index 0925a68f..73436f4e 100644 --- a/packages/field/index.pcss +++ b/packages/field/index.pcss @@ -1,10 +1,26 @@ -@import '../cell/index'; +@import "../common/_mixins"; .zan-field { - padding: 7px 15px; + display: block; + position: relative; color: #333; } +.zan-field::after { + @mixin hairline; + border-bottom-width: 1px; + left: 15px; + right: 0; +} + +.zan-field--no-border::after { + border-bottom-width: 0; +} + +.zan-cell--field { + padding: 7px 15px; +} + .zan-field--wrapped { margin: 10px 15px; background-color: #fff; @@ -17,7 +33,7 @@ } /* 圆角输入框，强制展示边框 */ -.zan-field.zan-field--wrapped::after { +.zan-field--wrapped::after { display: block; } diff --git a/packages/field/index.wxml b/packages/field/index.wxml index c82854ab..558e7b3c 100644 --- a/packages/field/index.wxml +++ b/packages/field/index.wxml @@ -1,5 +1,9 @@ - + {{ title }} @@ -32,4 +36,4 @@ bindfocus="handleFieldFocus" bindblur="handleFieldBlur" /> - +