feat(checker): support disabled

* feat(checker): new component checker * test(checker): init checker test * refactor(demo): add checker * docs(checker): init checker docs * refactor(checker): remove console * test(checker): fix radio test * fix(checker): radio & checkbox type active condition * fix(checker): radio condition error * refactor(example): checker router component path err * test(checker): fix test * add checker disabled * add checker disabled document * 修改checker文档 * 修改缩进 * 修改test
GZhiDao1010 · May 7, 2019 · 5ca6538 · 5ca6538
1 parent 24d0ca0
commit 5ca6538
Show file tree

Hide file tree

Showing 7 changed files with 2,535 additions and 2,413 deletions.
diff --git a/document/components/docs/en-US/checker.md b/document/components/docs/en-US/checker.md
@@ -152,6 +152,43 @@ Checker is more flexible selection component, you can alse customize the layout.
   ```
 
 
+- disabled state <sup>1.12.19</sup>
+
+  use `disabled`  to set disabled state
+
+
+  ```html
+  <cube-checker
+    v-model="checkerList"
+    :options="options"/>
+  ```
+  ```js
+  export default {
+    data() {
+      return {
+        checkerList: [2],
+        option: [
+          {
+            value: 1,
+            text: 'first',
+            disabled: true
+          },
+          {
+            value: 2,
+            text: 'second',
+            disabled: true
+          },
+          {
+            value: 3,
+            text: 'third'
+          }
+        ]
+      }
+    }
+  }
+  ```
+
+
 ### Props configuration
 
 | Attribute | Description | Type | Accepted Values | Default |
@@ -167,6 +204,7 @@ Checker is more flexible selection component, you can alse customize the layout.
 | - | - | - |
 | value | the value of checker item | String/Number |
 | text | the text of checker item | String |
+| disabled<sup>1.12.19</sup> | disabled state of checker item | Boolean |
 
 ### CubeCheckerItem Props configuration
 

diff --git a/document/components/docs/zh-CN/checker.md b/document/components/docs/zh-CN/checker.md
@@ -152,6 +152,42 @@ Checker 是更加灵活的选择组件，可以自定义需要的布局样式。
   }
   ```
 
+- 不可点击状态<sup>1.12.19</sup>
+
+  `disabled` 设置禁用状态。
+
+
+  ```html
+  <cube-checker
+    v-model="checkerList"
+    :options="options"/>
+  ```
+  ```js
+  export default {
+    data() {
+      return {
+        checkerList: [2],
+        option: [
+          {
+            value: 1,
+            text: 'first',
+            disabled: true
+          },
+          {
+            value: 2,
+            text: 'second',
+            disabled: true
+          },
+          {
+            value: 3,
+            text: 'third'
+          }
+        ]
+      }
+    }
+  }
+  ```
+
 
 
 ### Props 配置
@@ -169,6 +205,7 @@ Checker 是更加灵活的选择组件，可以自定义需要的布局样式。
 | - | - | - |
 | value | 选项的值 | String/Number |
 | text | 选项的文本 | String |
+| disabled<sup>1.12.19</sup> | 选项是否被禁用 | Boolean |
 
 ### CubeCheckerItem Props 配置
 

diff --git a/example/pages/checker.vue b/example/pages/checker.vue
@@ -48,6 +48,14 @@
       <p>checker value : {{defaultCheckerList}}  (min: 1 max: 2)</p>
       <br><br>
 
+      <p>set disabled</p>
+      <br>
+      <cube-checker
+        v-model="disabledCheckerList"
+        :options="disabledCheckerOptions"/>
+      <br>
+      <p>checker value : {{disabledCheckerList}}</p>
+      <br><br>
 
     </template>
   </cube-page>
@@ -89,7 +97,24 @@
             text: 'green'
           }
         ],
-        defaultCheckerList: [3]
+        defaultCheckerList: [3],
+        disabledCheckerOptions: [
+          {
+            value: 1,
+            text: 'first',
+            disabled: true
+          },
+          {
+            value: 2,
+            text: 'second',
+            disabled: true
+          },
+          {
+            value: 3,
+            text: 'third'
+          }
+        ],
+        disabledCheckerList: [2]
       }
     },
     components: {