[new feature] Checkbox: 新增 checkbox 组件 (youzan#341)

jerryni · pangxie1991 · commit 19773e2da44c · 2018-07-09T21:37:17.000+08:00
* [new feature] Checkbox: init demo * [new component]: Checkbox refactor * [new component] Checkbox fix youzan#231 * fix: youzan#231
diff --git a/doc.config.js b/doc.config.js
@@ -54,6 +54,7 @@ module.exports = {
         base: 'form',
         label: '表单',
         include: {
+          checkbox: require('./packages/checkbox/README.md'),
           field: require('./packages/field/README.md'),
           search: require('./packages/search/README.md'),
           select: require('./packages/select/README.md'),
diff --git a/example/app.json b/example/app.json
@@ -3,6 +3,7 @@
     "pages/dashboard/index",
     "pages/actionsheet/index",
     "pages/btn/index",
+    "pages/checkbox/index",
     "pages/badge/index",
     "pages/capsule/index",
     "pages/card/index",
diff --git a/example/pages/checkbox/index.js b/example/pages/checkbox/index.js
@@ -0,0 +1,17 @@
+var Zan = require('../../dist/index');
+
+Page({
+
+  data: {
+    items: [
+      {value: 'a'},
+      {value: 'b', checked: true},
+      {value: 'c'},
+    ]
+  },
+
+  handleCheckboxChange: function(e) {
+    console.log('checkbox发生change事件，携带value值为：', e.detail)
+    console.log('items:', this.data.items)
+  }
+});
diff --git a/example/pages/checkbox/index.json b/example/pages/checkbox/index.json
@@ -0,0 +1,10 @@
+{
+  "navigationBarTitleText": "Checkbox 选择",
+  "usingComponents": {
+    "zan-checkbox-group": "../../dist/checkbox-group/index",
+    "zan-checkbox": "../../dist/checkbox/index",
+    "zan-panel": "../../dist/panel/index",
+    "zan-cell": "../../dist/cell/index",
+    "doc-page": "../../components/doc-page/index"
+  }
+}
diff --git a/example/pages/checkbox/index.wxml b/example/pages/checkbox/index.wxml
@@ -0,0 +1,43 @@
+<doc-page title="checkbox" without-padding>
+  <zan-panel title='基本用法'>
+    <zan-checkbox
+      checkbox-class="checkbox-demo"
+      bindchange="handleCheckboxChange"
+    >复选框</zan-checkbox>
+  </zan-panel>
+
+  <zan-panel title='禁用状态'>
+    <zan-checkbox
+      checkbox-class="checkbox-demo"
+      disabled
+      checked="{{ true }}"
+    >复选框</zan-checkbox>
+  </zan-panel>
+
+  <zan-panel title='禁用内容部分点击事件'>
+    <zan-checkbox
+      checkbox-class="checkbox-demo"
+      label-disabled
+    >复选框</zan-checkbox>
+  </zan-panel>
+
+  <zan-panel title='Checkbox组'>
+    <zan-checkbox-group>
+      <zan-checkbox
+        wx:for="{{ items }}"
+        wx:for-item="item"
+        wx:for-index="index"
+        wx:key="{{ value }}"
+        checked="{{ item.checked }}"
+        data-index="{{ index }}"
+        bindchange="handleCheckboxChange"
+      >复选框 {{ item.value }}</zan-checkbox>
+    </zan-checkbox-group>
+  </zan-panel>
+
+  <zan-panel title='列表模式'>
+    <zan-checkbox type="list">复选框 a</zan-checkbox>
+    <zan-checkbox type="list">复选框 b</zan-checkbox>
+    <zan-checkbox type="list">复选框 c</zan-checkbox>
+  </zan-panel>
+</doc-page>
diff --git a/example/pages/checkbox/index.wxss b/example/pages/checkbox/index.wxss
@@ -0,0 +1,4 @@
+.checkbox-demo {
+  display: block;
+  margin: 15px 0;
+}
diff --git a/example/pages/dashboard/config.js b/example/pages/dashboard/config.js
@@ -17,6 +17,9 @@ export default {
       }, {
         name: 'Cell 单元格',
         path: '/pages/cell/index'
+      }, {
+        name: 'Checkbox 复选框',
+        path: '/pages/checkbox/index'
       }, {
         name: 'Helper 基础样式',
         path: '/pages/helper/index'
diff --git a/packages/checkbox-group/index.js b/packages/checkbox-group/index.js
@@ -0,0 +1,26 @@
+const CHECKBOX_PATH = '../checkbox/index';
+
+Component({
+  relations: {
+    [CHECKBOX_PATH]: {
+      type: 'child',
+      linked() {
+        this.updateChildren(CHECKBOX_PATH);
+      }
+    }
+  },
+
+  data: {
+   elementUpdateTimeout: 0
+  },
+
+  methods: {
+    updateChildren(childPath) { // 把checkbox标记为在group中，设置不同样式
+      let elements = this.getRelationNodes(childPath);
+
+      elements.forEach((checkbox, index) => {
+        checkbox.updateData({ isInGroup: true});
+      });
+    }
+  }
+});
diff --git a/packages/checkbox-group/index.json b/packages/checkbox-group/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
diff --git a/packages/checkbox-group/index.pcss b/packages/checkbox-group/index.pcss
@@ -0,0 +1,7 @@
+.checkbox-group {
+  padding-bottom: 10px;
+  background-color: #fff;
+}
+.checkbox-group .zan-checkbox {
+  margin-top: 10px;
+}
diff --git a/packages/checkbox-group/index.wxml b/packages/checkbox-group/index.wxml
@@ -0,0 +1,3 @@
+<view class="checkbox-group">
+  <slot></slot>
+</view>
diff --git a/packages/checkbox/README.md b/packages/checkbox/README.md
@@ -0,0 +1,100 @@
+## Checkbox 复选框
+
+### 使用指南
+在 index.json 中引入组件
+```json
+{
+  "usingComponents": {
+    "zan-checkbox": "/packages/checkbox/index"
+  }
+}
+```
+
+### 代码演示
+
+#### 基础用法
+
+```html
+<zan-checkbox
+  checkbox-class="checkbox-demo"
+  bindchange="handleCheckboxChange"
+>复选框</zan-checkbox>
+```
+
+#### 基础用法
+
+```html
+<zan-checkbox
+  checkbox-class="checkbox-demo"
+  bindchange="handleCheckboxChange"
+>复选框</zan-checkbox>
+```
+
+#### 禁用状态
+
+```html
+<zan-checkbox
+  checkbox-class="checkbox-demo"
+  disabled
+  checked="{{ true }}"
+>复选框</zan-checkbox>
+```
+
+#### 禁用内容部分点击事件
+
+```html
+<zan-checkbox
+  checkbox-class="checkbox-demo"
+  label-disabled
+>复选框</zan-checkbox>
+```
+
+#### Checkbox组
+
+```html
+<zan-checkbox-group>
+  <zan-checkbox
+    wx:for="{{ items }}"
+    wx:for-item="item"
+    wx:for-index="index"
+    wx:key="{{ value }}"
+    checked="{{ item.checked }}"
+    data-index="{{ index }}"
+    bindchange="handleCheckboxChange"
+  >复选框 {{ item.name }}</zan-checkbox>
+</zan-checkbox-group>
+```
+
+```js
+Page({
+  data: {
+    items: [
+      {value: 'a'},
+      {value: 'b', checked: true},
+      {value: 'c'},
+    ]
+  }
+});
+```
+
+#### 列表模式
+
+```html
+<zan-checkbox type="list">复选框 a</zan-checkbox>
+<zan-checkbox type="list">复选框 b</zan-checkbox>
+<zan-checkbox type="list">复选框 c</zan-checkbox>
+```
+
+### 参数
+| 参数       | 说明      | 类型       | 默认值       | 必须      |
+|-----------|-----------|-----------|-------------|-------------|
+| checked | 是否选中 | Boolean| false | |
+| disabled | 是否可用 | Boolean| false | |
+| labelDisabled | 文字区域是否可选 | Boolean | false | |
+| type | 显示类型 | String | - | |
+
+### 事件
+
+| 事件名称       | 说明      | 回调参数       |
+| ---- | --- | ---|
+| change | 数值改变时修改 | checked值|
diff --git a/packages/checkbox/index.js b/packages/checkbox/index.js
@@ -0,0 +1,42 @@
+const CHECKBOX_GROUP_PATH = '../checkbox-group/index';
+
+Component({
+  externalClasses: ['checkbox-class'],
+  relations: {
+    [CHECKBOX_GROUP_PATH]: {
+      type: 'parent'
+    }
+  },
+
+  properties: {
+    checked: Boolean,
+    disabled: Boolean,
+    isInGroup: Boolean,
+    labelDisabled: Boolean,
+    type: String
+  },
+
+  data() {
+    return {
+      isInGroup: false,
+      isInCell: false
+    }
+  },
+
+  methods: {
+    handleClick() {
+      if (this.data.disabled) {
+        return;
+      }
+
+      const checked = !this.data.checked;
+
+      this.triggerEvent('change', checked)
+      this.setData({ checked })
+    },
+
+    updateData(data) {
+      this.setData(data);
+    }
+  }
+});
diff --git a/packages/checkbox/index.json b/packages/checkbox/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "zan-icon": "../icon/index"
+  }
+}
diff --git a/packages/checkbox/index.pcss b/packages/checkbox/index.pcss
@@ -0,0 +1,39 @@
+.zan-checkbox {
+    display: inline-block;
+    padding: 0 10px;
+    font-size: 14px;
+
+    &__item {
+        display: block;
+        margin-top: 10px;
+    }
+
+    &__list-item {
+        display: block;
+        padding: 10px 10px 10px 0;
+        margin-left: 10px;
+        border-bottom: 1px solid #e5e5e5;
+        .zan-checkbox__icon {
+            float: right;
+        }
+    }
+
+    &__icon {
+        display: inline-flex;
+        align-items: center;
+        color: #aaa;
+
+        &.zan-checkbox--checked {
+            color: #06bf04;
+        }
+
+        &.zan-checkbox--disabled {
+            color: #e5e5e5;
+        }
+    }
+
+    &__label {
+        display: inline-block;
+        margin-left: 10px;
+    }
+}
diff --git a/packages/checkbox/index.wxml b/packages/checkbox/index.wxml
@@ -0,0 +1,25 @@
+<view
+  class="zan-checkbox checkbox-class {{ isInGroup ? 'zan-checkbox__item' : ''}} {{ type === 'list' ? 'zan-checkbox__list-item' : ''}}"
+  bindtap="{{ labelDisabled ? '' : 'handleClick' }}"
+  data-id="test"
+  >
+  <zan-icon
+    type="{{ checked ? 'checked' : 'check'}}"
+    class="zan-checkbox__icon {{ 'zan-checkbox--' + shape }} {{ disabled ? 'zan-checkbox--disabled' : '' }} {{ checked ? 'zan-checkbox--checked' : '' }}"
+    bindtap="{{ labelDisabled ? 'handleClick': '' }}"
+  ></zan-icon>
+  <text class="zan-checkbox__label">
+    <slot></slot>
+  </text>
+</view>
+
+<wxs module="parse">
+function getColor(color) {
+  color = color || '#ff4444'
+  return color;
+}
+
+module.exports = {
+  getColor: getColor
+};
+</wxs>
