Bladeren bron

Add examples of min/max props to checkbox group in documentation

Mathieu DARTIGUES 8 jaren geleden
bovenliggende
commit
87f9c5f580
2 gewijzigde bestanden met toevoegingen van 68 en 0 verwijderingen
  1. 35 0
      examples/docs/en-US/checkbox.md
  2. 33 0
      examples/docs/zh-CN/checkbox.md

+ 35 - 0
examples/docs/en-US/checkbox.md

@@ -12,6 +12,7 @@
         checkAll: false,
         cities: cityOptions,
         checkedCities: ['Shanghai', 'Beijing'],
+        checkedCities1: ['Shanghai', 'Beijing'],
         isIndeterminate: true
       };
     },
@@ -153,6 +154,40 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
 ```
 :::
 
+
+### Minimum / Maximum items checked
+
+The `minimum` and `maximum` properties can help you to limit the number of checked items.
+
+:::demo
+
+```html
+<template>
+  <el-checkbox-group 
+    v-model="checkedCities1"
+    minimum="1"
+    maximum="2">
+    <el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
+  </el-checkbox-group>
+</template>
+<script>
+  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
+  let handlerLimitExceeded = (event) => {
+    currentEvent = event;
+    console.log(event);
+  }
+  export default {
+    data() {
+      return {
+        checkedCities1: ['Shanghai', 'Beijing'],
+        cities: cityOptions
+      };
+    }
+  };
+</script>
+```
+:::
+
 ### Checkbox Attributes
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |

+ 33 - 0
examples/docs/zh-CN/checkbox.md

@@ -12,6 +12,7 @@
         checkAll: false,
         cities: cityOptions,
         checkedCities: ['上海', '北京'],
+        checkedCities1: ['上海', '北京'],
         isIndeterminate: true
       };
     },
@@ -163,6 +164,38 @@
 ```
 :::
 
+### Minimum / Maximum items checked (to be translated)
+
+The `minimum` and `maximum` properties can help you to limit the number of checked items.
+
+:::demo
+
+```html
+<template>
+  <el-checkbox-group 
+    v-model="checkedCities1"
+    minimum="1"
+    maximum="2">
+    <el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
+  </el-checkbox-group>
+</template>
+<script>
+  const cityOptions = ['上海', '北京', '广州', '深圳'];
+  let handlerLimitExceeded = (event) => {
+    currentEvent = event;
+    console.log(event);
+  }
+  export default {
+    data() {
+      return {
+        checkedCities1: ['上海', '北京'],
+        cities: cityOptions
+      };
+    }
+  };
+</script>
+```
+:::
 ### Checkbox Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |