[improvement] Doc: 修复文档展示 (#198)

* 修复select样式问题

* 增加部分文档说明

* readme 更新

* Update README.md

README.md

@@ -44,114 +44,58 @@ npm run dev
 详细使用文档，请参考 [快速上手](https://www.youzanyun.com/zanui/weapp)
 
 ### 组件分类介绍
-根据功能的不同，可以将组件大致的分为4类：
+根据功能的不同，可以将组件大致的分为2类：
 
-#### 1. 简单组件
+#### 1. 正常引用
 
-如按钮组件，只要按照wxml结构写就好了
+如按钮组件，只需要在页面中引入按钮自定义组件即可
-
+```json
-~~~html
+{
+    "usingComponents": {
+        "zan-button": "/path/to/zanui-weapp/dist/btn/index"
+    }
+}
+```
+```html
 <!-- example/btn/index.html -->
 
-<view class="zan-btn">按钮</view>
+<zan-button>按钮</zan-button>
-~~~
+```
 
 ![](https://img.yzcdn.cn/public_files/2017/02/08/1b1e39ed3dc6b63519a68ba1e2650cfc.png)
 
-#### 2. 复杂组件
 
-如加载更多组件，需要先引入定义好的模版，然后给模版传递数据
+#### 2. API类组件
 
-~~~html
+如 Toast 组件，需要先在页面上引入自定义组件。之后在逻辑运行时，直接调用方法即可展示
-<!-- example/loadmore/index.html -->
+```json
+{
+    "usingComponents": {
+        "zan-toast": "/path/to/zanui-weapp/dist/toast/index"
+    }
+}
+```
+```html
+<zan-toast id="zan-toast-test"></zan-toast>
+```
 
-<!-- 引入组件模版 -->
+将对应的 Toast 的函数引入页面，就可以直接调用来展示 Toast 了
-<import src="path/to/zanui-weapp/dist/loadmore/index.wxml" />
 
-<!-- 加载中 -->
+```js
-<template is="zan-loadmore" data="{{loading: true}}" />
+// example/toast/index.js
 
-<!-- 一条数据都没有 -->
+const Toast = require('/path/to/zanui-weapp/dist/toast/toast');
-<template is="zan-loadmore" data="{{nodata: true}}" />
 
-<!-- 没有更多数据了 -->
+Page({
-<template is="zan-loadmore" data="{{nomore: true}}" />
+  showToast() {
-~~~
+    Toast({
-
+        selector: '#zan-toast-test',
-![](https://img.yzcdn.cn/public_files/2017/02/08/b96fdc7971577b32915604c5b2c1a3bb.png)
+        message: 'toast内容'
-
-#### 3. 带事件回调的组件
-
-如数量选择组件，需要先引入模版，然后给模版传递数据
-
-~~~html
-<!-- example/stepper/index.html -->
-
-<import src="path/to/zanui-weapp/dist/stepper/index.wxml" />
-
-<template is="zan-stepper" data="{{ ...stepper, componentId: 'customId' }}" />
-~~~
-
-然后通过`Zan.Stepper`把相关回调注入到页面中
-
-~~~js
-// example/stepper/index.js
-
-var Zan = require('path/to/zanui-weapp/dist/index');
-
-Page(Object.assign({}, Zan.Stepper, {
-  data: {
-    stepper: {
-      stepper: 10,
-      min: 1,
-      max: 20
-    },
-  },
-
-  handleZanStepperChange(e) {
-    // 如果页面有多个Stepper组件，则通过唯一componentId进行索引
-    var compoenntId = e.componentId;
-    var stepper = e.stepper;
-
-    this.setData({
-      'stepper.stepper': stepper
     });
   }
-}));
+});
-~~~
 
-![](https://img.yzcdn.cn/public_files/2017/02/08/b791dfef150b01a7ce1e9aa9e60e0038.png)
+```
-
-#### 4. API类组件
-
-如Toast组件，需要先引入模版，并在页面上使用。
-
-> 注意`zanToast`这个数据也是通过`Zan.Toast`注入到页面的
-
-~~~html
-<!-- example/toast/index.html -->
-
-<import src="path/to/zanui-weapp/dist/toast/index.wxml" />
-
-<view bindtap="showToast">显示toast</view>
-
-<template is="zan-toast" data="{{ zanToast }}"></template>
-~~~
-
-将API注入到页面后，就可以通过`this`来直接调用相应的API了
-
-~~~js
-<!-- example/toast/index.js -->
-
-var Zan = require('path/to/zanui-weapp/dist/index');
-
-Page(Object.assign({}, Zan.Toast, {
-  showToast() {
-    this.showZanToast('toast的内容');
-  }
-}));
-
-~~~
 
 ![](https://img.yzcdn.cn/public_files/2017/02/08/ada80798c88df08060ce96964384e88e.png)
 

example/pages/select/index.js

@@ -25,14 +25,12 @@ Page(Object.assign({}, Zan.Select, Zan.TopTips, {
     activeColor: '#4b0'
   },
 
-  handleZanSelectChange({ componentId, value }) {
+  handleSelectChange({ currentTarget = {}, detail = {} }) {
+    const { value = '' } = detail;
+    const { dataset = {} } = currentTarget;
+    const type = dataset.type;
     this.setData({
-      [`checked.${componentId}`]: value
+      [`checked.${type}`]: value
     });
-  },
-
-  formSubmit(event) {
-    console.log('[zan:field:submit]', event.detail.value);
-    this.showZanTopTips(`选中的值为${event.detail.value.formtest}`);
   }
 }));

example/pages/select/index.json

@@ -1,7 +1,8 @@
 {
   "navigationBarTitleText": "Select 选择",
   "usingComponents": {
-    "zan-panel": "/packages/panel/index",
+    "doc-page": "../../components/doc-page/index",
-    "zan-select": "/packages/select/index"
+    "zan-panel": "../../dist/panel/index",
+    "zan-select": "../../dist/select/index"
   }
 }

example/pages/select/index.wxml

@@ -1,24 +1,20 @@
-<import src="/dist/toptips/index.wxml" />
+<doc-page title="SELECT" without-padding>
-
-<view class="container">
-
-  <view class="doc-title zan-hairline--bottom">SELECT</view>
-
   <zan-panel title='基本用法'>
     <zan-select
       items="{{ items }}"
+      data-type="base"
       checkedValue="{{ checked.base }}"
-      bind:change="handleFieldChange"
+      bind:change="handleSelectChange"
     />
   </zan-panel>
 
   <zan-panel title='自定义高亮颜色'>
     <zan-select
       items="{{ items }}"
-      checkedValue="{{ checked.base }}"
+      data-type="color"
+      checkedValue="{{ checked.color }}"
       activeColor="{{ activeColor }}"
-      bind:change="handleFieldChange"
+      bind:change="handleSelectChange"
     />
   </zan-panel>
-
+</doc-page>
-<template is="zan-toptips" data="{{ zanTopTips }}"></template>

packages/select/README.md

@@ -16,7 +16,7 @@
   items="{{ items }}"
   checkedValue="{{ checkedValue }}"
   activeColor="{{ activeColor }}"
-  bind:change="handleFieldChange"
+  bind:change="handleSelectChange"
 />
 ```
 ```js
@@ -24,15 +24,11 @@ Page({
   data: {
     items: [
       {
-        // 当前选项离左侧的距离
-        padding: 0,
-        // 当前选项的值，在被选中时，会在 handleZanSelectChange 中获取到
         value: '1',
         // 选项文案
         name: '选项一',
       },
       {
-        padding: 0,
         value: '2',
         name: '选项二',
       },
@@ -42,8 +38,8 @@ Page({
   },
 
   methods: {
-    handleFieldChange(event, data) {
+    handleSelectChange({ detail }) {
-      console.log(event, data);
+      console.log(detail);
     }
   }
 });
@@ -57,3 +53,21 @@ Page({
 | items | select 显示各个项的配置 | Array | - | |
 | checkedValue | 高亮的 item 的 value 值 | String | - | |
 | activeColor | Select 高亮颜色 | String | #ff4444 | |
+
+items 具体格式如下
+```js
+{
+  items: [
+    {
+      // 选项选中时，代表的选中值。会以此作为唯一值，判断是否选中
+      value: '1',
+      // 选项的文字描述
+      name: '选项一',
+    },
+    {
+      value: '2',
+      name: '选项二',
+    },
+  ]
+}
+```

packages/select/index.js

@@ -19,9 +19,9 @@ Component({
   },
 
   methods: {
-    _handleZanSelectChange(e) {
+    handleSelectChange(e) {
       const value = e.detail.value;
-      this.triggerEvent('change', event, { value });
+      this.triggerEvent('change', { value });
     }
   }
 });

packages/select/index.pcss

@@ -1,3 +1,8 @@
 .zan-select__list .zan-select__radio{
-  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
 }

packages/select/index.wxml

@@ -1,6 +1,6 @@
 <radio-group
   class="zan-select__list"
-  bindchange="_handleZanSelectChange"
+  bindchange="handleSelectChange"
 >
   <label wx:for="{{ items }}" wx:key="value">
     <zan-cell>
@@ -9,7 +9,7 @@
       <zan-icon
         wx:if="{{ item.value === checkedValue }}"
         slot="footer"
-        type="success_no_circle"
+        type="success"
         style="color: {{ parse.getColor(activeColor) }};font-size: 14px;"
       />
     </zan-cell>