mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-01 10:47:57 +08:00
style: checkbox support size prop both border or not (#3099)
* style: checkbox support size prop both border or not * feat: update * style: update
This commit is contained in:
kooriookami
GitHub
parent
0617cdf9f8
commit
5f87831710
@ -3,7 +3,7 @@
|
||||
:id="id"
|
||||
class="el-checkbox"
|
||||
:class="[
|
||||
border && checkboxSize ? 'el-checkbox--' + checkboxSize : '',
|
||||
checkboxSize ? 'el-checkbox--' + checkboxSize : '',
|
||||
{ 'is-disabled': isDisabled },
|
||||
{ 'is-bordered': border },
|
||||
{ 'is-checked': isChecked }
|
||||
|
||||
@ -6,13 +6,24 @@
|
||||
@import 'mixins/_button';
|
||||
@import 'mixins/utils';
|
||||
|
||||
$--checkbox-height: () !default;
|
||||
$--checkbox-height: map.merge(
|
||||
(
|
||||
'default': 40px,
|
||||
'medium': 36px,
|
||||
'small': 32px,
|
||||
'mini': 28px,
|
||||
),
|
||||
$--checkbox-height
|
||||
);
|
||||
|
||||
$--checkbox-bordered-padding: () !default;
|
||||
$--checkbox-bordered-padding: map.merge(
|
||||
(
|
||||
'default': 9px 20px 9px 10px,
|
||||
'medium': 7px 20px 7px 10px,
|
||||
'small': 5px 15px 5px 10px,
|
||||
'mini': 3px 15px 3px 10px,
|
||||
'default': 0 20px 0 10px,
|
||||
'medium': 0 20px 0 10px,
|
||||
'small': 0 15px 0 10px,
|
||||
'mini': 0 15px 0 10px,
|
||||
),
|
||||
$--checkbox-bordered-padding
|
||||
);
|
||||
@ -33,17 +44,6 @@ $--checkbox-bordered-input-width: map.merge(
|
||||
$--checkbox-bordered-input-width
|
||||
);
|
||||
|
||||
$--checkbox-bordered-height: () !default;
|
||||
$--checkbox-bordered-height: map.merge(
|
||||
(
|
||||
'default': 40px,
|
||||
'medium': 36px,
|
||||
'small': 32px,
|
||||
'mini': 28px,
|
||||
),
|
||||
$--checkbox-bordered-height
|
||||
);
|
||||
|
||||
@include b(checkbox) {
|
||||
@include set-component-css-var('checkbox', $--checkbox);
|
||||
}
|
||||
@ -59,13 +59,19 @@ $--checkbox-bordered-height: map.merge(
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
margin-right: 30px;
|
||||
height: map.get($--checkbox-height, 'default');
|
||||
|
||||
@each $size in (medium, small, mini) {
|
||||
&.#{$namespace}-checkbox--#{$size} {
|
||||
height: map.get($--checkbox-height, $size);
|
||||
}
|
||||
}
|
||||
|
||||
@include when(bordered) {
|
||||
padding: map.get($--checkbox-bordered-padding, 'default');
|
||||
border-radius: var(--el-border-radius-base);
|
||||
border: var(--el-border-base);
|
||||
box-sizing: border-box;
|
||||
height: map.get($--checkbox-bordered-height, 'default');
|
||||
|
||||
&.is-checked {
|
||||
border-color: var(--el-color-primary);
|
||||
@ -84,7 +90,6 @@ $--checkbox-bordered-height: map.merge(
|
||||
&.#{$namespace}-checkbox--#{$size} {
|
||||
padding: map.get($--checkbox-bordered-padding, $size);
|
||||
border-radius: map.get($--button-border-radius, $size);
|
||||
height: map.get($--checkbox-bordered-height, $size);
|
||||
|
||||
.#{$namespace}-checkbox__label {
|
||||
font-size: map.get($--button-font-size, $size);
|
||||
|
||||
@ -10,14 +10,35 @@ Checkbox can be used alone to switch between two states.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<!-- `checked` should be true or false -->
|
||||
<el-checkbox v-model="checked">Option</el-checkbox>
|
||||
<div>
|
||||
<el-checkbox v-model="checked1" label="Option 1"></el-checkbox>
|
||||
<el-checkbox v-model="checked2" label="Option 2"></el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox v-model="checked3" label="Option 1" size="medium"></el-checkbox>
|
||||
<el-checkbox v-model="checked4" label="Option 2" size="medium"></el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox v-model="checked5" label="Option 1" size="small"></el-checkbox>
|
||||
<el-checkbox v-model="checked6" label="Option 2" size="small"></el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox v-model="checked7" label="Option 1" size="mini"></el-checkbox>
|
||||
<el-checkbox v-model="checked8" label="Option 2" size="mini"></el-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
checked1: true,
|
||||
checked2: false,
|
||||
checked3: false,
|
||||
checked4: false,
|
||||
checked5: false,
|
||||
checked6: false,
|
||||
checked7: false,
|
||||
checked8: false,
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -29,9 +50,23 @@ Checkbox can be used alone to switch between two states.
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const checked = ref(true);
|
||||
const checked1 = ref(true);
|
||||
const checked2 = ref(false);
|
||||
const checked3 = ref(false);
|
||||
const checked4 = ref(false);
|
||||
const checked5 = ref(false);
|
||||
const checked6 = ref(false);
|
||||
const checked7 = ref(false);
|
||||
const checked8 = ref(false);
|
||||
return {
|
||||
checked,
|
||||
checked1,
|
||||
checked2,
|
||||
checked3,
|
||||
checked4,
|
||||
checked5,
|
||||
checked6,
|
||||
checked7,
|
||||
checked8,
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -137,7 +172,6 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
@ -402,7 +436,7 @@ export default defineComponent({
|
||||
| false-label | value of the Checkbox if it's not checked | string / number | — | — |
|
||||
| disabled | whether the Checkbox is disabled | boolean | — | false |
|
||||
| border | whether to add a border around Checkbox | boolean | — | false |
|
||||
| size | size of the Checkbox, only works when `border` is true | string | medium / small / mini | — |
|
||||
| size | size of the Checkbox | string | medium / small / mini | — |
|
||||
| name | native 'name' attribute | string | — | — |
|
||||
| checked | if the Checkbox is checked | boolean | — | false |
|
||||
| indeterminate | same as `indeterminate` in native checkbox | boolean | — | false |
|
||||
@ -416,7 +450,7 @@ export default defineComponent({
|
||||
| Attribute | Description | Type | Accepted Values | Default|
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| model-value / v-model | binding value | array | — | — |
|
||||
|size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini | — |
|
||||
|size | size of checkbox | string | medium / small / mini | — |
|
||||
| disabled | whether the nesting checkboxes are disabled | boolean | — | false |
|
||||
| min | minimum number of checkbox checked | number | — | — |
|
||||
| max | maximum number of checkbox checked | number | — | — |
|
||||
|
||||
@ -10,14 +10,35 @@ Checkbox puede ser usado para alternar entre dos estados.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<!-- `checked` debe ser true o false -->
|
||||
<el-checkbox v-model="checked">Opción</el-checkbox>
|
||||
<div>
|
||||
<el-checkbox v-model="checked1" label="Option 1"></el-checkbox>
|
||||
<el-checkbox v-model="checked2" label="Option 2"></el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox v-model="checked3" label="Option 1" size="medium"></el-checkbox>
|
||||
<el-checkbox v-model="checked4" label="Option 2" size="medium"></el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox v-model="checked5" label="Option 1" size="small"></el-checkbox>
|
||||
<el-checkbox v-model="checked6" label="Option 2" size="small"></el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox v-model="checked7" label="Option 1" size="mini"></el-checkbox>
|
||||
<el-checkbox v-model="checked8" label="Option 2" size="mini"></el-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
checked1: true,
|
||||
checked2: false,
|
||||
checked3: false,
|
||||
checked4: false,
|
||||
checked5: false,
|
||||
checked6: false,
|
||||
checked7: false,
|
||||
checked8: false,
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -29,9 +50,23 @@ Checkbox puede ser usado para alternar entre dos estados.
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const checked = ref(true);
|
||||
const checked1 = ref(true);
|
||||
const checked2 = ref(false);
|
||||
const checked3 = ref(false);
|
||||
const checked4 = ref(false);
|
||||
const checked5 = ref(false);
|
||||
const checked6 = ref(false);
|
||||
const checked7 = ref(false);
|
||||
const checked8 = ref(false);
|
||||
return {
|
||||
checked,
|
||||
checked1,
|
||||
checked2,
|
||||
checked3,
|
||||
checked4,
|
||||
checked5,
|
||||
checked6,
|
||||
checked7,
|
||||
checked8,
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -136,7 +171,6 @@ La propiedad `indeterminate` puede ser usada para generar el efecto de marcar to
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Marcar todos</el-checkbox>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
@ -401,7 +435,7 @@ export default defineComponent({
|
||||
| false-label | valor del Checkbox si no está marcado | string / number | — | — |
|
||||
| disabled | especifica si el Checkbox está deshabilitado | boolean | — | false |
|
||||
| border | especifica si agrega un borde alrededor del Checkbox | boolean | — | false |
|
||||
| size | tamaño del Checkbox, sólo funciona si `border` es true | string | medium / small / mini | — |
|
||||
| size | tamaño del Checkbox | string | medium / small / mini | — |
|
||||
| name | atributo `name` nativo | string | — | — |
|
||||
| checked | especifica si el Checkbox está marcado | boolean | — | false |
|
||||
| indeterminate | similar a `indeterminate` en el checkbox nativo | boolean | — | false |
|
||||
@ -415,7 +449,7 @@ export default defineComponent({
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por Defecto |
|
||||
| ---------- | ---------------------------------------- | ------- | --------------------- | ----------- |
|
||||
| model-value / v-model | valor enlazado | array | — | — |
|
||||
| size | tamaño de los checkboxes de tipo botón o los checkboxes con border | string | medium / small / mini | — |
|
||||
| size | size of checkbox | string | medium / small / mini | — |
|
||||
| disabled | especifica si los checkboxes anidados están deshabilitados | boolean | — | false |
|
||||
| min | cantidad mínima de checkboxes que deben ser marcados | number | — | — |
|
||||
| max | cantidad máxima de checkboxes que pueden ser marcados | number | — | — |
|
||||
|
||||
@ -10,14 +10,35 @@ Checkbox peut être utilisé seul pour switcher entre deux états.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<!-- `checked` should be true or false -->
|
||||
<el-checkbox v-model="checked">Option</el-checkbox>
|
||||
<div>
|
||||
<el-checkbox v-model="checked1" label="Option 1"></el-checkbox>
|
||||
<el-checkbox v-model="checked2" label="Option 2"></el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox v-model="checked3" label="Option 1" size="medium"></el-checkbox>
|
||||
<el-checkbox v-model="checked4" label="Option 2" size="medium"></el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox v-model="checked5" label="Option 1" size="small"></el-checkbox>
|
||||
<el-checkbox v-model="checked6" label="Option 2" size="small"></el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox v-model="checked7" label="Option 1" size="mini"></el-checkbox>
|
||||
<el-checkbox v-model="checked8" label="Option 2" size="mini"></el-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
checked1: true,
|
||||
checked2: false,
|
||||
checked3: false,
|
||||
checked4: false,
|
||||
checked5: false,
|
||||
checked6: false,
|
||||
checked7: false,
|
||||
checked8: false,
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -29,9 +50,23 @@ Checkbox peut être utilisé seul pour switcher entre deux états.
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const checked = ref(true);
|
||||
const checked1 = ref(true);
|
||||
const checked2 = ref(false);
|
||||
const checked3 = ref(false);
|
||||
const checked4 = ref(false);
|
||||
const checked5 = ref(false);
|
||||
const checked6 = ref(false);
|
||||
const checked7 = ref(false);
|
||||
const checked8 = ref(false);
|
||||
return {
|
||||
checked,
|
||||
checked1,
|
||||
checked2,
|
||||
checked3,
|
||||
checked4,
|
||||
checked5,
|
||||
checked6,
|
||||
checked7,
|
||||
checked8,
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -136,7 +171,6 @@ La propriété `indeterminate` permet de réaliser un effet "Sélectionner tout"
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Sélectionner tout</el-checkbox>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
@ -401,7 +435,7 @@ export default defineComponent({
|
||||
| false-label | Valeur de la checkbox si non cochée. | string / number | — | — |
|
||||
| disabled | Désactive la checkbox. | boolean | — | false |
|
||||
| border | Ajoute une bordure à la checkbox. | boolean | — | false |
|
||||
| size | taille de la checkbox, ne marche que si `border` est 'true' | string | medium / small / mini | — |
|
||||
| size | taille de la checkbox | string | medium / small / mini | — |
|
||||
| name | Attribut 'name' natif. | string | — | — |
|
||||
| checked | Si la checkbox est cochée. | boolean | — | false |
|
||||
| indeterminate | Identique à `indeterminate` dans les checkbox natives. | boolean | — | false |
|
||||
@ -415,7 +449,7 @@ export default defineComponent({
|
||||
| Attribut | Description | Type | Options | Défaut|
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| model-value / v-model | La valeur liée. | array | — | — |
|
||||
|size | Taille des checkbox-boutons ou des checkbox avec bordure. | string | medium / small / mini | — |
|
||||
|size | size of checkbox | string | medium / small / mini | — |
|
||||
| disabled | Si les checkbox imbriquées sont désactivées. | boolean | — | false |
|
||||
| min | Nombre minimum de checkbox cochées. | number | — | — |
|
||||
| max | Nombre maximum de checkbox cochées. | number | — | — |
|
||||
|
||||
@ -10,14 +10,35 @@ checkbox単独で使用して2つの状態を切り替えることができま
|
||||
|
||||
```html
|
||||
<template>
|
||||
<!-- `checked` should be true or false -->
|
||||
<el-checkbox v-model="checked">Option</el-checkbox>
|
||||
<div>
|
||||
<el-checkbox v-model="checked1" label="Option 1"></el-checkbox>
|
||||
<el-checkbox v-model="checked2" label="Option 2"></el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox v-model="checked3" label="Option 1" size="medium"></el-checkbox>
|
||||
<el-checkbox v-model="checked4" label="Option 2" size="medium"></el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox v-model="checked5" label="Option 1" size="small"></el-checkbox>
|
||||
<el-checkbox v-model="checked6" label="Option 2" size="small"></el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox v-model="checked7" label="Option 1" size="mini"></el-checkbox>
|
||||
<el-checkbox v-model="checked8" label="Option 2" size="mini"></el-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
checked1: true,
|
||||
checked2: false,
|
||||
checked3: false,
|
||||
checked4: false,
|
||||
checked5: false,
|
||||
checked6: false,
|
||||
checked7: false,
|
||||
checked8: false,
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -29,25 +50,23 @@ checkbox単独で使用して2つの状態を切り替えることができま
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const checked = ref(true);
|
||||
const checked1 = ref(true);
|
||||
const checked2 = ref(false);
|
||||
const checked3 = ref(false);
|
||||
const checked4 = ref(false);
|
||||
const checked5 = ref(false);
|
||||
const checked6 = ref(false);
|
||||
const checked7 = ref(false);
|
||||
const checked8 = ref(false);
|
||||
return {
|
||||
checked,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const checked = ref(true);
|
||||
return {
|
||||
checked,
|
||||
checked1,
|
||||
checked2,
|
||||
checked3,
|
||||
checked4,
|
||||
checked5,
|
||||
checked6,
|
||||
checked7,
|
||||
checked8,
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -152,7 +171,6 @@ checkboxを無効にした状態。
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
@ -417,7 +435,7 @@ export default defineComponent({
|
||||
| false-label | checkboxがチェックされていない場合のcheckboxの値 | string / number | — | — |
|
||||
| disabled | checkboxを無効にするかどうか | boolean | — | false |
|
||||
| border | checkboxの周りにボーダーを追加するかどうか | boolean | — | false |
|
||||
| size | checkboxのサイズ、`border` がtrueの場合にのみ動作します。 | string | medium / small / mini | — |
|
||||
| size | checkboxのサイズ | string | medium / small / mini | — |
|
||||
| name | ネイティブ 'name' 属性 | string | — | — |
|
||||
| checked | checkboxがチェックされているかどうか | boolean | — | false |
|
||||
| indeterminate | ネイティブcheckboxの `indeterminate` と同じ | boolean | — | false |
|
||||
@ -431,7 +449,7 @@ export default defineComponent({
|
||||
| Attribute | Description | Type | Options | Default|
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| model-value / v-model | バインディング値 | array | — | — |
|
||||
|size | checkboxのボタンや枠線の大きさ | string | medium / small / mini | — |
|
||||
|size | checkboxの大きさ | string | medium / small / mini | — |
|
||||
| disabled | ネスティングcheckboxを無効にするかどうか | boolean | — | false |
|
||||
| min | checkboxの最小チェック数 | number | — | — |
|
||||
| max | checkboxの最大チェック数 | number | — | — |
|
||||
|
||||
@ -9,14 +9,35 @@
|
||||
|
||||
```html
|
||||
<template>
|
||||
<!-- `checked` 为 true 或 false -->
|
||||
<el-checkbox v-model="checked">备选项</el-checkbox>
|
||||
<div>
|
||||
<el-checkbox v-model="checked1" label="备选项1"></el-checkbox>
|
||||
<el-checkbox v-model="checked2" label="备选项2"></el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox v-model="checked3" label="备选项1" size="medium"></el-checkbox>
|
||||
<el-checkbox v-model="checked4" label="备选项2" size="medium"></el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox v-model="checked5" label="备选项1" size="small"></el-checkbox>
|
||||
<el-checkbox v-model="checked6" label="备选项2" size="small"></el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox v-model="checked7" label="备选项1" size="mini"></el-checkbox>
|
||||
<el-checkbox v-model="checked8" label="备选项2" size="mini"></el-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
checked1: true,
|
||||
checked2: false,
|
||||
checked3: false,
|
||||
checked4: false,
|
||||
checked5: false,
|
||||
checked6: false,
|
||||
checked7: false,
|
||||
checked8: false,
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -28,9 +49,23 @@
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const checked = ref(true);
|
||||
const checked1 = ref(true);
|
||||
const checked2 = ref(false);
|
||||
const checked3 = ref(false);
|
||||
const checked4 = ref(false);
|
||||
const checked5 = ref(false);
|
||||
const checked6 = ref(false);
|
||||
const checked7 = ref(false);
|
||||
const checked8 = ref(false);
|
||||
return {
|
||||
checked,
|
||||
checked1,
|
||||
checked2,
|
||||
checked3,
|
||||
checked4,
|
||||
checked5,
|
||||
checked6,
|
||||
checked7,
|
||||
checked8,
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -135,7 +170,6 @@
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
@ -402,7 +436,7 @@
|
||||
| false-label | 没有选中时的值 | string / number | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| border | 是否显示边框 | boolean | — | false |
|
||||
| size | Checkbox 的尺寸，仅在 border 为真时有效 | string | medium / small / mini | — |
|
||||
| size | Checkbox 的尺寸 | string | medium / small / mini | — |
|
||||
| name | 原生 name 属性 | string | — | — |
|
||||
| checked | 当前是否勾选 | boolean | — | false |
|
||||
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | — | false |
|
||||
@ -416,7 +450,7 @@
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| model-value / v-model | 绑定值 | array | — | — |
|
||||
| size | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效 | string | medium / small / mini | — |
|
||||
| size | 多选框组尺寸 | string | medium / small / mini | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| min | 可被勾选的 checkbox 的最小数量 | number | — | — |
|
||||
| max | 可被勾选的 checkbox 的最大数量 | number | — | — |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user