添加CheckBox的文档

Author: zepang

docs/.vuepress/components/checkbox-group-demo.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <lai-checkbox-group v-model="model" @on-change="changeCheckbox">
+      <lai-checkbox :label="1">复选框1</lai-checkbox>
+      <lai-checkbox :label="2">复选框2</lai-checkbox>
+      <lai-checkbox :label="3">复选框3</lai-checkbox>
+      <lai-checkbox :label="4">复选框4</lai-checkbox>
+    </lai-checkbox-group>
+    <p>{{model}}</p>
+  </div>
+</template>
+
+<script>
+import LaiCheckbox from "./checkbox";
+import LaiCheckboxGroup from "./checkboxGroup";
+export default {
+  data() {
+    return {
+      model: [1, 2, 3, 4],
+      checkbox: true
+    };
+  },
+  components: { LaiCheckbox, LaiCheckboxGroup },
+  methods: {
+    changeCheckbox(value) {
+      console.log(value);
+    }
+  }
+};
+</script>
+

docs/.vuepress/components/checkbox/index.vue

@@ -88,7 +88,7 @@ export default {
   font-size: 14px;
   &.lai-checkbox__checked {
     .lai-checkbox__icon {
-      background-color: #535ef5;
+      background-color: #097cff;
     }
   }
   &.lai-checkbox_disabled {

docs/.vuepress/components/checkboxGroup/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+<script>
+import { findChildren } from '../../utils'
+export default {
+  name: 'lai-checkbox-group',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  mounted () {
+    this.updateChildrenModel()
+  },
+  methods: {
+    updateChildrenModel () {
+      let children = findChildren(this, 'lai-checkbox')
+      for (let child of children) {
+        child.model = this.value
+        child.isChecked = (this.value.indexOf(child.label) !== -1)
+      }
+    },
+    updateModel (data) {
+      this.$emit('input', data)
+      this.$emit('on-change', data)
+    }
+  },
+  watch: {
+    value (val) {
+      this.updateChildrenModel()
+    }
+  }
+}
+</script>
+

docs/.vuepress/config.js

@@ -6,7 +6,7 @@ module.exports = {
   serviceWorker: false,
   themeConfig: {
     nav: [
-      // { text: 'Home', link: '/' },
+      { text: 'Home', link: '/' },
       { text: 'documents', link: '/posts/' },
       { text: 'github', link: 'https://google.com' },
     ],
@@ -30,12 +30,13 @@ module.exports = {
         ]
       },
       {
-        title: '组件',
+        title: '组件案例',
         collapsable: false,
         children: [
           '/posts/components/button',
           '/posts/components/message',
-          '/posts/components/modal'
+          '/posts/components/modal',
+          '/posts/components/checkbox'
         ]
       }
     ]

docs/.vuepress/directives/click-outside.js

@@ -0,0 +1,30 @@
+let nodeList = []
+
+document.addEventListener('click', e => {
+  nodeList.forEach(node => {
+    if (!node.el.contains(e.target)) {
+      node.callback()
+    }
+  })
+})
+
+export default {
+  inserted (el, binding, vnode) {
+    if (typeof binding.value !== 'function') {
+      throw new TypeError('v-clickOutside 的值必须是一个函数')
+    }
+    let node = {
+      el: el,
+      uid: vnode.context._uid,
+      callback: binding.value
+    }
+    nodeList.push(node)
+  },
+  unbind (el, binding, vnode) {
+    for (let i =0; i < nodeList.length; i++) {
+      if (nodeList[i].uid = vnode.context._uid) {
+        nodeList.splice(i, 1)
+      }
+    }
+  }
+}

docs/.vuepress/directives/index.js

@@ -0,0 +1,7 @@
+import loading from './loading.js'
+import clickOutside from './click-outside'
+
+export default {
+  loading,
+  clickOutside
+}

docs/.vuepress/directives/loading.js

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import LoadingComponent from '../components/loading'
+const Loading = Vue.extend(LoadingComponent)
+
+export default {
+  inserted (el, binding, vnode, oldVnode) {
+    console.log(el)
+    const child = document.createElement('div')
+    const loadingText = el.getAttribute('loading-text')
+    if (binding.arg === 'fullPage') {
+      document.body.appendChild(child)
+    } else {
+      el.appendChild(child)
+    }
+    const loading = new Loading({
+      el: child,
+      data () {
+        return {
+          isShow: binding.value,
+          loadingText: loadingText
+        }
+      }
+    })
+    console.dir(loading)
+    el.loading = loading
+  },
+  update (el, binding, vnode, oldVnode) {
+    // 更新loading组件的值
+    el.loading.isShow = binding.value
+  }
+}

docs/README.md

@@ -1,16 +1,16 @@
 ---
 home: true
-heroImage: /hero.png
-heroText: Hero 标题
-tagline: Hero 副标题
-actionText: 快速上手 →
-actionLink: /zh/guide/
-# features:
-# - title: 简洁至上
-#   details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
-# - title: Vue驱动
-#   details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
-# - title: 高性能
-#   details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
-# footer: MIT Licensed | Copyright © 2018-present Evan You
+heroImage: https://vuepress.vuejs.org/hero.png
+heroText: Vue的组件学习和开发
+tagline: Components Learning With Vue 
+actionText: 快速开始 →
+actionLink: /posts/
+  # features:
+  #   - title: 描述
+  #     details: 从零开始一个Vue组件的开发
+  #   - title: Vue
+  #     details: Vue ^2.5.17
+  #   - title: 文档
+  #     details: VuePress ^0.14.10
+# footer: '@https://github.com/zepang/lai-ui'
 ---

docs/posts/components/checkbox.md

@@ -0,0 +1,81 @@
+# Checkbox 复选框
+
+##### 示例
+
+<box>
+  <checkbox-demo></checkbox-demo> 
+</box>
+
+##### 代码
+
+```vue
+<template>
+  <div>
+    <lai-checkbox v-model="value">复选框</lai-checkbox>
+    ...
+  </div>
+</template>
+<script>
+...
+export default {
+  data () {
+    return {
+      value: false
+    }
+  },
+  ...
+}
+</script>
+
+```
+
+##### 复选框组
+
+<box>
+  <checkbox-group-demo></checkbox-group-demo>
+</box>
+
+##### 代码
+
+```vue
+<template>
+  <div>
+    <lai-checkbox-group v-model="model" @on-change="changeCheckbox">
+      <lai-checkbox :label="1">复选框1</lai-checkbox>
+      <lai-checkbox :label="2">复选框2</lai-checkbox>
+      <lai-checkbox :label="3">复选框3</lai-checkbox>
+      <lai-checkbox :label="4">复选框4</lai-checkbox>
+    </lai-checkbox-group>
+    ...
+  </div>
+</template>
+
+<script>
+...
+export default {
+  data() {
+    return {
+      model: [1, 2, 3, 4],
+      checkbox: true
+    };
+  },
+  ...
+  methods: {
+    changeCheckbox(value) {
+      console.log(value);
+    }
+  }
+};
+</script>
+```
+
+##### API
+<box>
+<mk>
+| 属性     | 说明                                                 | 类型    | 默认值 |
+| -------- | ---------------------------------------------------- | ------- | ------ |
+| value    | 只在单独使用时有效。可以使用 v-model 双向绑定数据 | boolean  | false |
+| label     | 与 `checkbox-group`组合使用有效             | String 或 Number 或 Boolean  | -     |
+| disabled | 设置为禁用状态                                   | Boolean | false  |
+</mk>
+</box>