upd: checkbox 文档 ，内容优化

src/packages/checkbox/demo.vue

@@ -76,7 +76,7 @@ export default createDemo({
   setup(props, context) {
     const data = reactive({
       checkbox1: false,
-      checkbox2: true,
+      checkbox2: false,
       checkbox3: true,
       checkbox4: true,
       checkbox5: true,
@@ -155,19 +155,10 @@ export default createDemo({
       margin-bottom: 10px;
     }
   }
-  .my-checkbox .nut-checkbox {
+  .my-checkbox::v-deep .nut-checkbox {
     input:checked {
-      width: 14px;
-      height: 10px;
-      background: rgba(255, 255, 255, 1)
-        linear-gradient(
-          90deg,
-          rgba(250, 32, 12, 1) 0%,
-          rgba(250, 32, 12, 0.65) 100%
-        )
-        rgba(250, 32, 12, 1);
-      background-image: none;
-      background-size: 50% 50%;
+      background-image: url('https://img13.360buyimg.com/imagetools/jfs/t1/154120/1/10623/372/5fe013e6E4694fbf9/fd38d389b3a3b9c6.png');
+      background-size: 100%;
       border: none;
     }
   }

src/packages/checkbox/doc.md

@@ -1,64 +1,161 @@
-# Checkbox 组件
+# Checkbox 复选按钮
 
-### 介绍
+## 基本用法
 
-基于 xxxxxxx
+```html
+<nut-checkbox v-model="checkbox1">
+  选项
+</nut-checkbox>
+```
 
-### 安装
+```javascript
+data() {
+    return {
+      	checkbox1: false,
+    };
+}
+```
+## 禁用状态
 
-``` javascript
-import { createApp } from 'vue';
-import { Temp } from '@nutui/nutui';
+非选中时的禁用状态
 
-const app = createApp();
-app.use(Temp);
+```html
+<nut-checkbox v-model="checkbox1" disabled>
+  未选时禁用状态
+</nut-checkbox>
+```
 
+```javascript
+data() {
+    return {
+      	checkbox1: false,
+    };
+}
 ```
 
-## 代码演示
+选中时的禁用状态
 
-### 基础用法1
+```html
+<nut-checkbox v-model="checkbox1" disabled>
+  已选时禁用状态
+</nut-checkbox>
+```
 
-`Icon` 的 `name` 属性支持传入图标名称或图片链接。
+```javascript
+data() {
+    return {
+      	checkbox1: true,
+    };
+},
+```
+
+## 自定义尺寸
+
+内置 **small**，**base**，**large** 三种规格供使用。
 
 ```html
-<nut-temp name="wifi"></nut-temp>
-<nut-temp name="mail"></nut-temp>
+<nut-checkbox v-model="checkbox1" size="small">
+  小号
+</nut-checkbox>
+
+<nut-checkbox v-model="checkbox2" size="base" >
+  默认
+</nut-checkbox>
+
+<nut-checkbox v-model="checkbox3" size="large">
+  大号
+</nut-checkbox>
+```
+
+```javascript
+data() {
+    return {
+      	checkbox1: true,
+      	checkbox2: true,
+      	checkbox3: true,
+    };
+}
+
 ```
 
-### 基础用法2
+## 禁用动效
 
-`Icon` 的 `name` 属性支持传入图标名称或图片链接。
+animation属性值为false时，禁用自带动效
 
 ```html
-<nut-temp name="wifi"></nut-temp>
-<nut-temp name="mail"></nut-temp>
+<nut-checkbox v-model="checkbox1" :animation="false">
+  没有动效
+</nut-checkbox>
 ```
 
-### 基础用法3
+```javascript
+data() {
+    return {
+      	checkbox1: false,
+    };
+}
+```
+
+## 事件
+
+值发生变化时，将触发change事件
+
+```html
+<nut-checkbox v-model="checkbox1" @change="checkboxChange">
+  change事件
+</nut-checkbox>
+```
+
+```javascript
+methods: {
+	checkboxChange(checked) {
+        alert('change事件触发' + checked);
+	}  
+}
+```
 
-`Icon` 的 `name` 属性支持传入图标名称或图片链接。
+设置label属性，获取选项状态和选项label值的方法：
 
 ```html
-<nut-temp name="wifi"></nut-temp>
-<nut-temp name="mail"></nut-temp>
+<nut-checkbox v-model="checkbox1" :label="'选项值'" @change="getChange">
+  备选项
+</nut-checkbox>
+```
+
+```javascript
+methods: {
+    getChange(checked,val){
+        console.log('选中状态：' + checked +'，选中选项：' + val) 
+    }
+    
+}
 ```
 
+**注意**：当设置了label属性时，第二个参数label才有值，否则默认为空。(label设置后替换插值内容)
+
+
+## 新增自定义class
+```html
+<nut-checkbox v-model="checkbox1" class="my-checkbox">
+  自定义了Class:"my-checkbox"
+</nut-checkbox>
+```
 
-## API
+## Prop
 
-### Props
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| name | checkbox的name属性 | String | -
+| v-model | 必填项，当前选中项的选中状态,同步value | Boolean | false
+| label | 当前选中项的label值，（可不设，设置后label有值，替换插值内容） | String | -
+| checked | checkbox的checked属性 | Boolean | false
+| size | 尺寸，可选值small/base/large | String | base
+| disabled | 是否禁用 | Boolean | false
+| animation | 是否需要动效 | Boolean | true
 
-| 参数         | 说明                             | 类型   | 默认值           |
-|--------------|----------------------------------|--------|------------------|
-| name         | 图标名称或图片链接               | String | -                |
-| color        | 图标颜色                         | String | -                |
-| size         | 图标大小，如 `20px` `2em` `2rem` | String | -                |
-| class-prefix | 类名前缀，用于使用自定义图标     | String | `nutui-iconfont` |
-| tag          | HTML 标签                        | String | `i`              |
 
-### Events
+## Event
 
-| 事件名 | 说明           | 回调参数     |
-|--------|----------------|--------------|
-| click  | 点击图标时触发 | event: Event |
+| 字段 | 说明 | 回调参数 
+|----- | ----- | ----- 
+| change | 值变化时触发 | 当前选中项状态（checked），当前选中项值（label）【设置label后有值、默认为空】,event

src/packages/checkbox/index.scss

@@ -40,7 +40,7 @@
       background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/155506/4/9365/704/5fd3103cE779ad491/1939699720df7770.png');
       // border-color: $disable-color;
       &:checked {
-        // background-color: $disable-color;
+        background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/151947/10/10769/2246/5fe04ceeEd31c1a06/2bb48d747c49f9dd.png');
       }
     }
   }

src/packages/checkbox/index.vue

@@ -84,13 +84,6 @@ export default create({
       isChecked.value = looseEqual(props.modelValue, props.trueValue);
     });
 
-    watch(
-      () => props.modelValue,
-      (val, oldVal) => {
-        // console.log(`watch：具有响应性，oldVal= ${oldVal} ，val= ${val}`);
-      }
-    );
-
     const { size, label, name, disabled, submittedValue, animation } = reactive(
       props
     );