feat: add checkbox disable api

云水 · 云水 · commit c6c61dd5546e · 2021-05-03T14:37:44.000+08:00
diff --git a/doc/markdown/nCheckbox/zh-CN/index.md b/doc/markdown/nCheckbox/zh-CN/index.md
@@ -6,6 +6,8 @@
 在一组可选项中进行多项选择时；单独使用可以表示两种状态之间的切换，和 switch 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。
 
 ## 代码演示
+### 基本使用
+最简单的checkbox
 :::demo
 ```html
 <template>
@@ -15,6 +17,18 @@
 ```
 :::
 
+### 不可用
+checkbox 不可用。
+:::demo
+```html
+<template>
+  <n-checkbox :disabled="true" :checked="true">Checkbox</n-checkbox>
+  <n-checkbox :disabled="true" :checked="false">Checkbox</n-checkbox>
+</template>
+
+```
+:::
+
 ## API
 
 | 参数 | 说明 | 类型 | 默认值 |
diff --git a/packages/n-checkbox/index.scss b/packages/n-checkbox/index.scss
@@ -4,9 +4,11 @@
   margin: 0;
   padding: 0;
   height: 20px;
+  line-height: unset;
   .slot-text{
-    margin: 0 10px;
+    margin: 0 10px 0 25px;
     display: inline-block;
+    line-height: unset;
     font-family: PingFangSC-Regular;
     color: #575757;
   }
@@ -20,9 +22,13 @@
     height: 16px;
     border-radius: 3px;
     border: 1px solid #34c3ff;
-    position: relative;
+    position: absolute;
     cursor: pointer;
   }
+  .n-checkbox-disble{
+    cursor: not-allowed;
+    border: 1px solid rgba(118, 118, 118, 0.3);
+  }
   label::before {
       line-height: 20px;
       display: inline-block;
@@ -41,8 +47,16 @@
   input:checked+label {
       background: #34c3ff;
   }
+  input:checked+label.n-checkbox-disble{
+    background: rgba(245, 245, 245,1);
+  }
   input:checked+label::before{
       opacity: 1;
       transform: all 0.5s;
   }
+  input:checked+label.n-checkbox-disble::before{
+    border: 2px solid rgba(185, 185, 185,1);
+    border-top: none;
+      border-right: none;
+  }
 }
diff --git a/packages/n-checkbox/index.tsx b/packages/n-checkbox/index.tsx
@@ -1,34 +1,39 @@
-import { defineComponent, App, HTMLAttributes, SetupContext } from 'vue';
+import { defineComponent, App,PropType,HTMLAttributes, SetupContext } from 'vue';
 import './index.scss';
 import { guid } from '../../src/utils/util';
 
-const initDefaultProps = {
-  checked: false,
-  defaultChecked: false
+const CheckboxProps = {
+  checked: {
+    type: Boolean as PropType<false>,
+    default: false
+  },
+  defaultChecked: {
+    type: Boolean as PropType<false>,
+    default: false
+  },
+  disabled: {
+    type: Boolean as PropType<false>,
+    default: false
+  }
 };
-export interface CheckboxProps extends HTMLAttributes {
-  checked?: boolean;
-  defaultChecked?: boolean;
-}
 
 const nCheckbox = defineComponent({
   name: 'NCheckbox',
-  setup (_:CheckboxProps, { slots, attrs }: SetupContext) {
-    const props = attrs as CheckboxProps;
+  props: CheckboxProps,
+  setup (props, { slots }: SetupContext) {
 
-    const { checked, defaultChecked } = { ...initDefaultProps, ...props };
 
     const id = guid();
     const checkeval = () => {
-      if (checked) {
-        return checked;
+      if (props.checked) {
+        return props.checked;
       }
-      return defaultChecked;
+      return false;
     };
     return () => (
       <div class="n-checkbox">
-        <input id={id} type="checkbox" checked={checkeval()}/>
-        <label for={id} />
+        <input id={id} class={[props.disabled ? 'n-checkbox-disble': '']} disabled={props.disabled} type="checkbox" checked={checkeval()}/>
+        <label for={id} class={[props.disabled ? 'n-checkbox-disble': '']}/>
         <div class="slot-text">
           {slots.default && slots.default()}
         </div>
