From 5ec544a1ff6ec4ea40f3f3f1e5bd9cd5024f5760 Mon Sep 17 00:00:00 2001 From: oConner <1457623475@qq.com> Date: Sat, 21 Apr 2018 09:10:51 +0800 Subject: [PATCH] =?UTF-8?q?[refactor]=20Select:=20=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=8D=87=E7=BA=A7=E4=B8=BA=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=20(#188)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * done js * done * remove name and === --- example/pages/select/index.json | 6 ++- example/pages/select/index.wxml | 46 ++++++---------- packages/select/README.md | 95 +++++++++++++++------------------ packages/select/index.js | 48 +++++++++-------- packages/select/index.json | 7 +++ packages/select/index.wxml | 39 +++++++------- packages/switch/README.md | 8 ++- 7 files changed, 116 insertions(+), 133 deletions(-) create mode 100644 packages/select/index.json diff --git a/example/pages/select/index.json b/example/pages/select/index.json index 5c8fa767..87a16f34 100644 --- a/example/pages/select/index.json +++ b/example/pages/select/index.json @@ -1,3 +1,7 @@ { - "navigationBarTitleText": "Select 选择" + "navigationBarTitleText": "Select 选择", + "usingComponents": { + "zan-panel": "/packages/panel/index", + "zan-select": "/packages/select/index" + } } diff --git a/example/pages/select/index.wxml b/example/pages/select/index.wxml index 91f72bf6..0061af5a 100644 --- a/example/pages/select/index.wxml +++ b/example/pages/select/index.wxml @@ -1,40 +1,24 @@ - SELECT - 基础用法 - - - - - + + + - 自定义高亮颜色 - - - - - - - Form 表单中的select应用 -
- - - - - - - - - -
- + + + diff --git a/packages/select/README.md b/packages/select/README.md index 494e66ec..f6627d5b 100644 --- a/packages/select/README.md +++ b/packages/select/README.md @@ -1,68 +1,59 @@ ## Select 选择 ### 使用指南 -在 app.wxss 中引入组件库所有样式 -```css -@import "path/to/zanui-weapp/dist/index.wxss"; -``` - -在需要使用的页面里引入组件库模板和脚本 -```html - - - -``` -```js -const { extend, Select } = require('path/to/zanui-weapp/dist/index'); - -// 在 Page 中混入 Select 里面声明的方法 -Page(extend({}, Select, { - // ... -})); +在 index.json 中引入组件 +```json +{ + "usingComponents": { + "zan-select": "/packages/select/index" + } +} ``` ### 代码演示 -#### 基础功能 -`Select` 组件通过传入的 items 对象控制显示，用 checkedValue 确认显示的高亮项目 ```html - + +``` +```js +Page({ + data: { + items: [ + { + // 当前选项离左侧的距离 + padding: 0, + // 当前选项的值，在被选中时，会在 handleZanSelectChange 中获取到 + value: '1', + // 选项文案 + name: '选项一', + }, + { + padding: 0, + value: '2', + name: '选项二', + }, + ], + checkedValue: '选项一', + activeColor: '#ff4443' + }, + + methods: { + handleFieldChange(event, data) { + console.log(event, data); + } + } +}); ``` -当 Select 被点击时，可以在页面中注册 handleZanTabChange 方法来监听 -```js -Page(extend({}, Select, { - handleZanSelectChange({ componentId, value }) { - // componentId 即为在模板中传入的 componentId - // 用于在一个页面上使用多个 Select 时，进行区分 - // value 表示被选中项的 value - } -})); -``` + #### 具体参数 | 参数 | 说明 | 类型 | 默认值 | 必须 | |-----------|-----------|-----------|-------------|-------------| | items | select 显示各个项的配置 | Array | - | | | checkedValue | 高亮的 item 的 value 值 | String | - | | -| name | Select 的名字，作为 form 表单提交时数据的 key | String | - | | | activeColor | Select 高亮颜色 | String | #ff4444 | | -| componentId | 用于区分页面多个 Select 组件 | String | - | | - -items 参数格式 -```js -[ - { - // 当前选项离左侧的距离 - padding: 0, - // 当前选项的值，在被选中时，会在 handleZanSelectChange 中获取到 - value: '1', - // 选项文案 - name: '选项一', - }, - { - padding: 0, - value: '2', - name: '选项二', - }, -] -``` diff --git a/packages/select/index.js b/packages/select/index.js index 971122dc..5b789b2f 100644 --- a/packages/select/index.js +++ b/packages/select/index.js @@ -1,25 +1,27 @@ -const { extractComponentId } = require('../common/helper'); +Component({ + properties: { + items: { + type: Array, + value: [] + }, + name: { + type: String, + value: '' + }, + checkedValue: { + type: String, + value: '' + }, + activeColor: { + type: String, + value: '#ff4444' + } + }, -function handle(e) { - const componentId = extractComponentId(e); - const value = e.detail.value; - - callback.call(this, componentId, value); -} - -function callback(componentId, value) { - const e = { componentId, value }; - console.info('[zan:Select:change]', e); - - if (this.handleZanSelectChange) { - this.handleZanSelectChange(e); - } else { - console.warn('页面缺少 handleZanSelectChange 回调函数'); + methods: { + _handleZanSelectChange(e) { + const value = e.detail.value; + this.triggerEvent('change', event, { value }); + } } -} - -module.exports = { - _handleZanSelectChange(e) { - handle.call(this, e); - } -}; +}); diff --git a/packages/select/index.json b/packages/select/index.json new file mode 100644 index 00000000..9bab8188 --- /dev/null +++ b/packages/select/index.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "zan-icon": "../icon/index", + "zan-cell": "../cell/index" + } +} diff --git a/packages/select/index.wxml b/packages/select/index.wxml index d53e3561..37deeff1 100644 --- a/packages/select/index.wxml +++ b/packages/select/index.wxml @@ -1,24 +1,21 @@ - + + + + function getColor(color) { diff --git a/packages/switch/README.md b/packages/switch/README.md index 80ef8073..e0550fdc 100644 --- a/packages/switch/README.md +++ b/packages/switch/README.md @@ -24,11 +24,9 @@ ```js Page({ data: { - field: { - disabled: false, - checked: false, - loading: false - } + disabled: false, + checked: false, + loading: false }, methods: {