From 7fc417600372053514da197a7fd30509de525ad5 Mon Sep 17 00:00:00 2001 From: Yao Date: Tue, 9 Jan 2018 11:44:19 +0800 Subject: [PATCH] =?UTF-8?q?[improvement]=20=E6=96=B0=E5=A2=9E=20Select=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=20form=20=E4=B8=AD=20submi?= =?UTF-8?q?t=20=E4=BD=BF=E7=94=A8=20(#104)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * support select form submit * 增加使用示例 && 增加提示 --- example/pages/dashboard/config.js | 2 +- example/pages/select/index.js | 10 ++++- example/pages/select/index.wxml | 20 +++++++++ packages/index.js | 5 ++- packages/select/README.md | 67 ++++++++++++++++++++++++++++++- packages/select/index.wxml | 7 +++- packages/toptips/README.md | 8 ++-- 7 files changed, 109 insertions(+), 10 deletions(-) diff --git a/example/pages/dashboard/config.js b/example/pages/dashboard/config.js index 42029869..10377da9 100644 --- a/example/pages/dashboard/config.js +++ b/example/pages/dashboard/config.js @@ -81,7 +81,7 @@ export default { name: 'Toast 轻提示', path: '/pages/toast/index' }, { - name: 'Toptips 顶部提示', + name: 'TopTips 顶部提示', path: '/pages/toptips/index' } ] diff --git a/example/pages/select/index.js b/example/pages/select/index.js index 5e05484f..13b06e7d 100644 --- a/example/pages/select/index.js +++ b/example/pages/select/index.js @@ -1,6 +1,6 @@ var Zan = require('../../dist/index'); -Page(Object.assign({}, Zan.CheckLabel, { +Page(Object.assign({}, Zan.Select, Zan.TopTips, { data: { items: [ @@ -18,7 +18,8 @@ Page(Object.assign({}, Zan.CheckLabel, { checked: { base: -1, - color: -1 + color: -1, + form: -1 }, activeColor: '#4b0' @@ -28,5 +29,10 @@ Page(Object.assign({}, Zan.CheckLabel, { this.setData({ [`checked.${componentId}`]: value }); + }, + + formSubmit(event) { + console.log('[zan:field:submit]', event.detail.value); + this.showZanTopTips(`选中的值为${event.detail.value.formtest}`); } })); diff --git a/example/pages/select/index.wxml b/example/pages/select/index.wxml index 7e796abe..91f72bf6 100644 --- a/example/pages/select/index.wxml +++ b/example/pages/select/index.wxml @@ -1,4 +1,5 @@ + @@ -17,4 +18,23 @@ + + Form 表单中的select应用 +
+ + + + + + + + + +
+ + diff --git a/packages/index.js b/packages/index.js index 24195ba4..1e36bd32 100644 --- a/packages/index.js +++ b/packages/index.js @@ -1,13 +1,16 @@ exports.Actionsheet = require('./actionsheet/index'); -exports.CheckLabel = require('./select/index'); exports.Dialog = require('./dialog/index'); exports.Field = require('./field/index'); exports.NoticeBar = require('./noticebar/index'); +exports.Select = require('./select/index'); exports.Stepper = require('./stepper/index'); exports.Switch = require('./switch/index'); exports.Tab = require('./tab/index'); exports.Toast = require('./toast/index'); exports.TopTips = require('./toptips/index'); +// 兼容老版本，在下次大版本发布时会被移除 +exports.CheckLabel = require('./select/index'); + const { extend } = require('./common/helper'); exports.extend = extend; diff --git a/packages/select/README.md b/packages/select/README.md index ff967610..494e66ec 100644 --- a/packages/select/README.md +++ b/packages/select/README.md @@ -1,3 +1,68 @@ ## 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, { + // ... +})); +``` + +### 代码演示 +#### 基础功能 +`Select` 组件通过传入的 items 对象控制显示，用 checkedValue 确认显示的高亮项目 +```html + +``` + +当 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.wxml b/packages/select/index.wxml index 5437bcfa..d53e3561 100644 --- a/packages/select/index.wxml +++ b/packages/select/index.wxml @@ -1,5 +1,10 @@