From 9ac8f130f4cf3817e40f6e75ccec1376f8d8c0ca Mon Sep 17 00:00:00 2001 From: Yao Date: Wed, 25 Oct 2017 11:51:14 +0800 Subject: [PATCH] [breaking change] Select: move check_label to select (#36) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * move check label to new component * select 整理 * 整理文档 && 支持 componentId * delete project config json * 内部命名修改 * remove form/check_label --- app.json | 13 ++++--- dist/form/check_label.wxml | 23 ----------- dist/form/check_label.wxss | 6 --- dist/index.js | 2 +- dist/index.wxss | 2 +- dist/{form/check_label.js => select/index.js} | 14 +++---- dist/select/index.wxml | 38 +++++++++++++++++++ dist/select/index.wxss | 3 ++ example/dashboard/config.js | 5 ++- example/form/index.js | 27 ++----------- example/form/index.wxml | 7 ---- example/select/index.js | 32 ++++++++++++++++ example/select/index.wxml | 20 ++++++++++ 13 files changed, 117 insertions(+), 75 deletions(-) delete mode 100644 dist/form/check_label.wxml delete mode 100644 dist/form/check_label.wxss rename dist/{form/check_label.js => select/index.js} (52%) create mode 100644 dist/select/index.wxml create mode 100644 dist/select/index.wxss create mode 100644 example/select/index.js create mode 100644 example/select/index.wxml diff --git a/app.json b/app.json index 0adeb411..bd4d7311 100644 --- a/app.json +++ b/app.json @@ -1,5 +1,5 @@ { - "pages":[ + "pages": [ "example/dashboard/index", "example/btn/index", "example/badge/index", @@ -20,14 +20,15 @@ "example/switch/index", "example/tab/index", "example/toptips/index", - "example/toast/index" + "example/toast/index", + "example/select/index" ], - "window":{ + "window": { "navigationBarBackgroundColor": "#FAFAFA", "navigationBarTitleText": "ZanUI", - "navigationBarTextStyle":"black", - "backgroundTextStyle":"dark", + "navigationBarTextStyle": "black", + "backgroundTextStyle": "dark", "backgroundColor": "#f9f9f9" }, "debug": true -} +} \ No newline at end of file diff --git a/dist/form/check_label.wxml b/dist/form/check_label.wxml deleted file mode 100644 index 5e122ee7..00000000 --- a/dist/form/check_label.wxml +++ /dev/null @@ -1,23 +0,0 @@ - diff --git a/dist/form/check_label.wxss b/dist/form/check_label.wxss deleted file mode 100644 index f9864c06..00000000 --- a/dist/form/check_label.wxss +++ /dev/null @@ -1,6 +0,0 @@ -.zan-check-label__list .zan-check-label__radio{ - display: none; -} -.zan-check-label__selected{ - color: #ff4444; -} diff --git a/dist/index.js b/dist/index.js index ed4bed90..c44f2d8e 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,4 +1,4 @@ -exports.CheckLabel = require('./form/check_label'); +exports.CheckLabel = require('./select/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 2f2e404c..e797a010 100644 --- a/dist/index.wxss +++ b/dist/index.wxss @@ -6,7 +6,6 @@ @import "color/index.wxss"; @import "dialog/index.wxss"; @import "form/index.wxss"; -@import "form/check_label.wxss"; @import "helper/index.wxss"; @import "icon/index.wxss"; @import "label/index.wxss"; @@ -15,6 +14,7 @@ @import "panel/index.wxss"; @import "popup/index.wxss"; @import "quantity/index.wxss"; +@import "select/index.wxss"; @import "steps/index.wxss"; @import "switch/index.wxss"; @import "tab/index.wxss"; diff --git a/dist/form/check_label.js b/dist/select/index.js similarity index 52% rename from dist/form/check_label.js rename to dist/select/index.js index afbfb86b..aef70111 100644 --- a/dist/form/check_label.js +++ b/dist/select/index.js @@ -8,19 +8,19 @@ function handle(e) { function callback(componentId, value) { var e = { componentId, value }; - console.info('[zan:CheckLabel:select]', e); + console.info('[zan:Select:change]', e); - if (this.handleZanCheckLabelSelect) { - this.handleZanCheckLabelSelect(e); + if (this.handleZanSelectChange) { + this.handleZanSelectChange(e); } else { - console.warn('页面缺少 handleZanCheckLabelSelect 回调函数'); + console.warn('页面缺少 handleZanSelectChange 回调函数'); } } -var CheckLabel = { - _handleZanCheckLabelSelect(e) { +var Select = { + _handleZanSelectChange(e) { handle.call(this, e); }, }; -module.exports = CheckLabel; +module.exports = Select; diff --git a/dist/select/index.wxml b/dist/select/index.wxml new file mode 100644 index 00000000..5437bcfa --- /dev/null +++ b/dist/select/index.wxml @@ -0,0 +1,38 @@ + + + +function getColor(color) { + color = color || '#ff4444' + return color; +} + +module.exports = { + getColor: getColor, + getItemStyle: function(item, checkedValue, activeColor) { + var padding = item.padding * 10; + var style = 'padding-left: ' + padding + 'px;'; + + // 如果为选中状态，则高亮 + if (item.value === checkedValue) { + style += 'color: ' + getColor(activeColor); + } + + return style; + } +}; + diff --git a/dist/select/index.wxss b/dist/select/index.wxss new file mode 100644 index 00000000..0695dae7 --- /dev/null +++ b/dist/select/index.wxss @@ -0,0 +1,3 @@ +.zan-select__list .zan-select__radio{ + display: none; +} diff --git a/example/dashboard/config.js b/example/dashboard/config.js index dacf69fb..2aea424f 100644 --- a/example/dashboard/config.js +++ b/example/dashboard/config.js @@ -44,6 +44,9 @@ export default { }, { name: 'Quantity 计数器', path: '/example/quantity/index' + }, { + name: 'Select 选择', + path: '/example/select/index' }, { name: 'Steps 步骤条', path: '/example/steps/index' @@ -71,4 +74,4 @@ export default { } ] } -} \ No newline at end of file +} diff --git a/example/form/index.js b/example/form/index.js index ce659eb6..38226cf8 100644 --- a/example/form/index.js +++ b/example/form/index.js @@ -3,38 +3,19 @@ var Zan = require('../../dist/index'); Page(Object.assign({}, Zan.CheckLabel, { data: { area: ['省份', '北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾省', '香港特别行政区', '澳门特别行政区'], - areaIndex: 0, - items: [ - { - padding: 0, - value: '1', - name: '选项一', - }, - { - padding: 0, - value: '2', - name: '选项二', - }, - ], - checkedValue: -1, + areaIndex: 0 }, - onLoad: function () { + onLoad() { }, - onShow: function () { + onShow() { }, - onAreaChange: function (e) { + onAreaChange(e) { this.setData({ areaIndex: e.detail.value }); - }, - - handleZanCheckLabelSelect: function (e) { - this.setData({ - checkedValue: e.value - }); } })); diff --git a/example/form/index.wxml b/example/form/index.wxml index f3fc4723..7685e30d 100644 --- a/example/form/index.wxml +++ b/example/form/index.wxml @@ -1,5 +1,3 @@ - - FORM @@ -53,9 +51,4 @@ - - -