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 @@
-
+