mirror of https://github.com/ElemeFE/element
add api for radio and checkbox
Leopoldthecoder
parent
9763c816ea
commit
512543e35b
|
|
@ -8,6 +8,10 @@
|
|||
checked: true,
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
checked3: true,
|
||||
checked4: false,
|
||||
checked5: false,
|
||||
checked6: true,
|
||||
isValid: 'valid',
|
||||
checkAll: false,
|
||||
cities: cityOptions,
|
||||
|
|
@ -15,8 +19,11 @@
|
|||
checkedCities1: ['Shanghai', 'Beijing'],
|
||||
isIndeterminate: true,
|
||||
checkboxGroup1: ['Shanghai'],
|
||||
checkboxGroup2: ['Beijing'],
|
||||
checkboxGroup3: ['Guangzhou']
|
||||
checkboxGroup2: ['Shanghai'],
|
||||
checkboxGroup3: ['Shanghai'],
|
||||
checkboxGroup4: ['Shanghai'],
|
||||
checkboxGroup5: [],
|
||||
checkboxGroup6: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -190,21 +197,29 @@ The `min` and `max` properties can help you to limit the number of checked items
|
|||
|
||||
Checkbox with button styles.
|
||||
|
||||
:::demo You just need to change `<el-checkbox>` element into `<el-checkbox-button>` element. We also provide `size` attribute for these buttons: `large` and `small`.
|
||||
:::demo You just need to change `el-checkbox` element into `el-checkbox-button` element. We also provide `size` attribute.
|
||||
```html
|
||||
<template>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkboxGroup1">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkboxGroup2" size="small">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Shenzhen'" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
<div>
|
||||
<el-checkbox-group v-model="checkboxGroup1">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup2" size="medium">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup3" size="small">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Beijing'" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
||||
|
|
@ -213,8 +228,9 @@ Checkbox with button styles.
|
|||
data () {
|
||||
return {
|
||||
checkboxGroup1: ['Shanghai'],
|
||||
checkboxGroup2: ['Beijing'],
|
||||
checkboxGroup3: ['Guangzhou'],
|
||||
checkboxGroup2: ['Shanghai'],
|
||||
checkboxGroup3: ['Shanghai'],
|
||||
checkboxGroup4: ['Shanghai'],
|
||||
cities: cityOptions
|
||||
};
|
||||
}
|
||||
|
|
@ -223,15 +239,61 @@ Checkbox with button styles.
|
|||
```
|
||||
:::
|
||||
|
||||
### With borders
|
||||
|
||||
:::demo The `border` attribute adds a border to Checkboxes.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
|
||||
<el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>
|
||||
<el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup5" size="small">
|
||||
<el-checkbox label="Option1" border></el-checkbox>
|
||||
<el-checkbox label="Option2" border disabled></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
|
||||
<el-checkbox label="Option1" border></el-checkbox>
|
||||
<el-checkbox label="Option2" border></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checked3: true,
|
||||
checked4: false,
|
||||
checked5: false,
|
||||
checked6: true,
|
||||
checkboxGroup5: [],
|
||||
checkboxGroup6: []
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox Attributes
|
||||
| Attribute | Description | Type | Options | Default|
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | value of the checkbox when used inside a `checkbox-group` | string | — | — |
|
||||
| true-label | value of the checkbox if it's checked | string, number | — | — |
|
||||
| false-label | value of the checkbox if it's not checked | string, number | — | — |
|
||||
| label | value of the Checkbox when used inside a `checkbox-group` | string / number / boolean | — | — |
|
||||
| true-label | value of the Checkbox if it's checked | string / number | — | — |
|
||||
| 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 | — |
|
||||
| name | native 'name' attribute | string | — | — |
|
||||
| disabled | if the checkbox is disabled | boolean | — | false |
|
||||
| checked | if the checkbox is checked | boolean | — | false |
|
||||
| checked | if the Checkbox is checked | boolean | — | false |
|
||||
| indeterminate | same as `indeterminate` in native checkbox | boolean | — | false |
|
||||
|
||||
### Checkbox Events
|
||||
|
|
@ -242,13 +304,24 @@ Checkbox with button styles.
|
|||
### Checkbox-group Attributes
|
||||
| Attribute | Description | Type | Options | Default|
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
|size | the size of checkbox buttons | string | large/small | —
|
||||
|fill | border and background color when button is active | string | — | #20a0ff |
|
||||
|text-color | font color when button is active | string | — | #ffffff |
|
||||
|size | size of checkbox buttons or bordered checkboxes | string | large/small | — |
|
||||
| disabled | whether the nesting checkboxes are disabled | boolean | — | false |
|
||||
| min | minimum number of checkbox checked | number | — | — |
|
||||
| max | maximum number of checkbox checked | number | — | — |
|
||||
|text-color | font color when button is active | string | — | #ffffff |
|
||||
|fill | border and background color when button is active | string | — | #1989fa |
|
||||
|
||||
### Checkbox-group Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| change | triggers when the binding value changes | the updated value |
|
||||
|
||||
### Checkbox-button Attributes
|
||||
| Attribute | Description | Type | Options | Default|
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | value of the checkbox when used inside a `checkbox-group` | string / number / boolean | — | — |
|
||||
| true-label | value of the checkbox if it's checked | string / number | — | — |
|
||||
| false-label | value of the checkbox if it's not checked | string / number | — | — |
|
||||
| disabled | whether the checkbox is disabled | boolean | — | false |
|
||||
| name | native 'name' attribute | string | — | — |
|
||||
| checked | if the checkbox is checked | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -7,7 +7,12 @@
|
|||
radio2: 3,
|
||||
radio3: 'New York',
|
||||
radio4: 'New York',
|
||||
radio5: 'New York'
|
||||
radio5: 'New York',
|
||||
radio6: 'New York',
|
||||
radio7: '1',
|
||||
radio8: '1',
|
||||
radio9: '1',
|
||||
radio10: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -21,11 +26,11 @@ Single selection among multiple options.
|
|||
|
||||
Radio should not have too many options. Otherwise, use the Select component instead.
|
||||
|
||||
:::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String` or `Number`.
|
||||
:::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String`, `Number` or `Boolean`.
|
||||
```html
|
||||
<template>
|
||||
<el-radio class="radio" v-model="radio" label="1">optionA</el-radio>
|
||||
<el-radio class="radio" v-model="radio" label="2">optionB</el-radio>
|
||||
<el-radio v-model="radio" label="1">Option A</el-radio>
|
||||
<el-radio v-model="radio" label="2">Option B</el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -47,8 +52,8 @@ Radio should not have too many options. Otherwise, use the Select component inst
|
|||
:::demo You just need to add the `disabled` attribute.
|
||||
```html
|
||||
<template>
|
||||
<el-radio disabled v-model="radio1" label="disabled">optionA</el-radio>
|
||||
<el-radio disabled v-model="radio1" label="selected and disabled">optionB</el-radio>
|
||||
<el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
|
||||
<el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -67,13 +72,13 @@ Radio should not have too many options. Otherwise, use the Select component inst
|
|||
|
||||
Suitable for choosing from some mutually exclusive options.
|
||||
|
||||
:::demo Combine `<el-radio-group>` with `<el-radio>` to display a radio group. Bind a variable with `v-model` of `<el-radio-group>` element and set label value in `<el-radio>`. It also provides `change` event with the current value as its parameter.
|
||||
:::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
|
||||
|
||||
```html
|
||||
<el-radio-group v-model="radio2">
|
||||
<el-radio :label="3">optionA</el-radio>
|
||||
<el-radio :label="6">optionB</el-radio>
|
||||
<el-radio :label="9">optionC</el-radio>
|
||||
<el-radio :label="3">Option A</el-radio>
|
||||
<el-radio :label="6">Option B</el-radio>
|
||||
<el-radio :label="9">Option C</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<script>
|
||||
|
|
@ -92,28 +97,42 @@ Suitable for choosing from some mutually exclusive options.
|
|||
|
||||
Radio with button styles.
|
||||
|
||||
:::demo You just need to change `<el-radio>` element into `<el-radio-button>` element. We also provide `size` attribute for these buttons: `large` and `small`.
|
||||
:::demo You just need to change `el-radio` element into `el-radio-button` element. We also provide `size` attribute.
|
||||
```html
|
||||
<el-radio-group v-model="radio3">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
<el-radio-button label="Chicago"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-radio-group v-model="radio4">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington" :disabled="true"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
<el-radio-button label="Chicago"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-radio-group v-model="radio5" :disabled="true">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
<el-radio-button label="Chicago"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<template>
|
||||
<div>
|
||||
<el-radio-group v-model="radio3">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
<el-radio-button label="Chicago"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio4" size="medium">
|
||||
<el-radio-button label="New York" ></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
<el-radio-button label="Chicago"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio5" size="small">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington" disabled ></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
<el-radio-button label="Chicago"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio6" disabled size="mini">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
<el-radio-button label="Chicago"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
|
@ -121,7 +140,50 @@ Radio with button styles.
|
|||
return {
|
||||
radio3: 'New York',
|
||||
radio4: 'New York',
|
||||
radio5: 'New York'
|
||||
radio5: 'New York',
|
||||
radio6: 'New York'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### With borders
|
||||
|
||||
:::demo The `border` attribute adds a border to Radios.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-radio v-model="radio7" label="1" border>Option A</el-radio>
|
||||
<el-radio v-model="radio7" label="2" border>Option B</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
|
||||
<el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio9" size="small">
|
||||
<el-radio label="1" border>Option A</el-radio>
|
||||
<el-radio label="2" border disabled>Option B</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio10" size="mini" disabled>
|
||||
<el-radio label="1" border>Option A</el-radio>
|
||||
<el-radio label="2" border>Option B</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio7: '1',
|
||||
radio8: '1',
|
||||
radio9: '1',
|
||||
radio10: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -133,8 +195,10 @@ Radio with button styles.
|
|||
|
||||
Attribute | Description | Type | Accepted Values | Default
|
||||
---- | ---- | ---- | ---- | ----
|
||||
label | the value of radio | string/number/boolean | — | —
|
||||
disabled | whether radio is disabled | boolean | — | false
|
||||
label | the value of Radio | string / number / boolean | — | —
|
||||
disabled | whether Radio is disabled | boolean | — | false
|
||||
border | whether to add a border around Radio | boolean | — | false
|
||||
size | size of the Radio, only works when `border` is true | string | medium / small / mini | —
|
||||
name | native 'name' attribute | string | — | —
|
||||
|
||||
### Radio Events
|
||||
|
|
@ -147,9 +211,10 @@ name | native 'name' attribute | string | — | —
|
|||
|
||||
Attribute | Description | Type | Accepted Values | Default
|
||||
---- | ---- | ---- | ---- | ----
|
||||
size | the size of radio buttons | string | large/small | —
|
||||
fill | border and background color when button is active | string | — | #20a0ff |
|
||||
size | the size of radio buttons or bordered radios | string | medium / small / mini | —
|
||||
disabled | whether the nesting radios are disabled | boolean | — | false
|
||||
text-color | font color when button is active | string | — | #ffffff |
|
||||
fill | border and background color when button is active | string | — | #1989fa |
|
||||
|
||||
### Radio-group Events
|
||||
|
||||
|
|
@ -161,7 +226,6 @@ text-color | font color when button is active | string | — | #ffffff |
|
|||
|
||||
Attribute | Description | Type | Accepted Values | Default
|
||||
---- | ---- | ---- | ---- | ----
|
||||
label | the value of radio | string/number | — | —
|
||||
label | the value of radio | string / number | — | —
|
||||
disabled | whether radio is disabled | boolean | — | false
|
||||
|
||||
|
||||
name | native 'name' attribute | string | — | —
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@
|
|||
checked: true,
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
checked3: true,
|
||||
checked4: false,
|
||||
checked5: false,
|
||||
checked6: true,
|
||||
isValid: '可用',
|
||||
checkAll: false,
|
||||
cities: cityOptions,
|
||||
|
|
@ -15,8 +19,11 @@
|
|||
checkedCities1: ['上海', '北京'],
|
||||
isIndeterminate: true,
|
||||
checkboxGroup1: ['上海'],
|
||||
checkboxGroup2: ['北京'],
|
||||
checkboxGroup3: ['广州']
|
||||
checkboxGroup2: ['上海'],
|
||||
checkboxGroup3: ['上海'],
|
||||
checkboxGroup4: ['上海'],
|
||||
checkboxGroup5: [],
|
||||
checkboxGroup6: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -35,18 +42,6 @@
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-checkbox {
|
||||
.checkbox {
|
||||
margin-right: 5px;
|
||||
|
||||
& + .checkbox {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
## Checkbox 多选框
|
||||
一组备选项中进行多选
|
||||
|
||||
|
|
@ -201,21 +196,29 @@
|
|||
|
||||
按钮样式的多选组合。
|
||||
|
||||
:::demo 只需要把`el-checkbox`元素替换为`el-checkbox-button`元素即可。此外，Element 还提供了`size`属性，支持`large`和`small`两种。
|
||||
:::demo 只需要把`el-checkbox`元素替换为`el-checkbox-button`元素即可。此外，Element 还提供了`size`属性。
|
||||
```html
|
||||
<template>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkboxGroup1">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkboxGroup2" size="small">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '深圳'" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
<div>
|
||||
<el-checkbox-group v-model="checkboxGroup1">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup2" size="medium">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup3" size="small">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const cityOptions = ['上海', '北京', '广州', '深圳'];
|
||||
|
|
@ -223,25 +226,71 @@
|
|||
data () {
|
||||
return {
|
||||
checkboxGroup1: ['上海'],
|
||||
checkboxGroup2: ['北京'],
|
||||
checkboxGroup3: ['广州'],
|
||||
checkboxGroup2: ['上海'],
|
||||
checkboxGroup3: ['上海'],
|
||||
checkboxGroup4: ['上海'],
|
||||
cities: cityOptions
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带有边框
|
||||
|
||||
:::demo 设置`border`属性可以渲染为带有边框的多选框。
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-checkbox v-model="checked3" label="备选项1" border></el-checkbox>
|
||||
<el-checkbox v-model="checked4" label="备选项2" border></el-checkbox>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox v-model="checked5" label="备选项1" border size="medium"></el-checkbox>
|
||||
<el-checkbox v-model="checked6" label="备选项2" border size="medium"></el-checkbox>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup5" size="small">
|
||||
<el-checkbox label="备选项1" border></el-checkbox>
|
||||
<el-checkbox label="备选项2" border disabled></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
|
||||
<el-checkbox label="备选项1" border></el-checkbox>
|
||||
<el-checkbox label="备选项2" border></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checked3: true,
|
||||
checked4: false,
|
||||
checked5: false,
|
||||
checked6: true,
|
||||
checkboxGroup5: [],
|
||||
checkboxGroup6: []
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string | — | — |
|
||||
| true-label | 选中时的值 | string, number | — | — |
|
||||
| false-label | 没有选中时的值 | string, number | — | — |
|
||||
| label | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean | — | — |
|
||||
| true-label | 选中时的值 | string / number | — | — |
|
||||
| false-label | 没有选中时的值 | string / number | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| border | 是否显示边框 | boolean | — | false |
|
||||
| size | Checkbox 的尺寸，仅在 border 为真时有效 | string | medium / small / mini | — |
|
||||
| name | 原生 name 属性 | string | — | — |
|
||||
| disabled | 按钮禁用 | boolean | — | false |
|
||||
| checked | 当前是否勾选 | boolean | — | false |
|
||||
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | — | false |
|
||||
|
||||
|
|
@ -253,13 +302,24 @@
|
|||
### Checkbox-group Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| size | Checkbox 按钮组尺寸 | string | large, small | — |
|
||||
| fill | 按钮激活时的填充色和边框色 | string | — | #20a0ff |
|
||||
| text-color | 按钮激活时的文本颜色 | string | — | #ffffff |
|
||||
| size | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效 | string | medium / small / mini | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| min | 可被勾选的 checkbox 的最小数量 | number | — | — |
|
||||
| max | 可被勾选的 checkbox 的最大数量 | number | — | — |
|
||||
| text-color | 按钮形式的 Checkbox 激活时的文本颜色 | string | — | #ffffff |
|
||||
| fill | 按钮形式的 Checkbox 激活时的填充色和边框色 | string | — | #1989fa |
|
||||
|
||||
### Checkbox-group Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 当绑定值变化时触发的事件 | 更新后的值 |
|
||||
|
||||
### Checkbox-button Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean | — | — |
|
||||
| true-label | 选中时的值 | string / number | — | — |
|
||||
| false-label | 没有选中时的值 | string / number | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| name | 原生 name 属性 | string | — | — |
|
||||
| checked | 当前是否勾选 | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -7,7 +7,12 @@
|
|||
radio2: 3,
|
||||
radio3: '上海',
|
||||
radio4: '上海',
|
||||
radio5: '上海'
|
||||
radio5: '上海',
|
||||
radio6: '上海',
|
||||
radio7: '1',
|
||||
radio8: '1',
|
||||
radio9: '1',
|
||||
radio10: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -21,12 +26,12 @@
|
|||
|
||||
由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
|
||||
|
||||
:::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`或者`Number`。
|
||||
:::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`、`Number`或`Boolean`。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio class="radio" v-model="radio" label="1">备选项</el-radio>
|
||||
<el-radio class="radio" v-model="radio" label="2">备选项</el-radio>
|
||||
<el-radio v-model="radio" label="1">备选项</el-radio>
|
||||
<el-radio v-model="radio" label="2">备选项</el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -45,7 +50,7 @@
|
|||
|
||||
单选框不可用的状态。
|
||||
|
||||
:::demo 注意：请牢记，选中的条件是绑定的变量值等于`label`中的值。只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
|
||||
:::demo 只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
|
||||
```html
|
||||
<template>
|
||||
<el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>
|
||||
|
|
@ -95,29 +100,41 @@
|
|||
|
||||
按钮样式的单选组合。
|
||||
|
||||
:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
|
||||
:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性。
|
||||
```html
|
||||
<template>
|
||||
<el-radio-group v-model="radio3">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-radio-group v-model="radio4">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京" :disabled="true"></el-radio-button>
|
||||
<el-radio-button label="广州"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-radio-group v-model="radio5" :disabled="true">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<div>
|
||||
<el-radio-group v-model="radio3">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio4" size="medium">
|
||||
<el-radio-button label="上海" ></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio5" size="small">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京" disabled ></el-radio-button>
|
||||
<el-radio-button label="广州"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio6" disabled size="mini">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -126,7 +143,50 @@
|
|||
return {
|
||||
radio3: '上海',
|
||||
radio4: '上海',
|
||||
radio5: '上海'
|
||||
radio5: '上海',
|
||||
radio6: '上海'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带有边框
|
||||
|
||||
:::demo 设置`border`属性可以渲染为带有边框的单选框。
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-radio v-model="radio7" label="1" border>备选项1</el-radio>
|
||||
<el-radio v-model="radio7" label="2" border>备选项2</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio>
|
||||
<el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio9" size="small">
|
||||
<el-radio label="1" border>备选项1</el-radio>
|
||||
<el-radio label="2" border disabled>备选项2</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio10" size="mini" disabled>
|
||||
<el-radio label="1" border>备选项1</el-radio>
|
||||
<el-radio label="2" border>备选项2</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio7: '1',
|
||||
radio8: '1',
|
||||
radio9: '1',
|
||||
radio10: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -137,8 +197,10 @@
|
|||
### Radio Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | Radio 的 value | string,number,boolean | — | — |
|
||||
| label | Radio 的 value | string / number / boolean | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| border | 是否显示边框 | boolean | — | false |
|
||||
| size | Radio 的尺寸，仅在 border 为真时有效 | string | medium / small / mini | — |
|
||||
| name | 原生 name 属性 | string | — | — |
|
||||
|
||||
### Radio Events
|
||||
|
|
@ -149,9 +211,10 @@
|
|||
### Radio-group Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| size | Radio 按钮组尺寸 | string | large, small | — |
|
||||
| fill | 按钮激活时的填充色和边框色 | string | — | #20a0ff |
|
||||
| text-color | 按钮激活时的文本颜色 | string | — | #ffffff |
|
||||
| size | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效 | string | medium / small / mini | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| text-color | 按钮形式的 Radio 激活时的文本颜色 | string | — | #ffffff |
|
||||
| fill | 按钮形式的 Radio 激活时的填充色和边框色 | string | — | #1989fa |
|
||||
|
||||
### Radio-group Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
|
@ -161,5 +224,6 @@
|
|||
### Radio-button Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | Radio 的 value | string,number | — | — |
|
||||
| label | Radio 的 value | string / number | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| name | 原生 name 属性 | string | — | — |
|
||||
|
|
|
|||
|
|
@ -3,20 +3,20 @@
|
|||
class="el-checkbox-button"
|
||||
:class="[
|
||||
size ? 'el-checkbox-button--' + size : '',
|
||||
{ 'is-disabled': disabled },
|
||||
{ 'is-disabled': isDisabled },
|
||||
{ 'is-checked': isChecked },
|
||||
{ 'is-focus': focus },
|
||||
]"
|
||||
role="checkbox"
|
||||
:aria-checked="isChecked"
|
||||
:aria-disabled="disabled"
|
||||
:aria-disabled="isDisabled"
|
||||
>
|
||||
<input
|
||||
v-if="trueLabel || falseLabel"
|
||||
class="el-checkbox-button__original"
|
||||
type="checkbox"
|
||||
:name="name"
|
||||
:disabled="disabled"
|
||||
:disabled="isDisabled"
|
||||
:true-value="trueLabel"
|
||||
:false-value="falseLabel"
|
||||
v-model="model"
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
class="el-checkbox-button__original"
|
||||
type="checkbox"
|
||||
:name="name"
|
||||
:disabled="disabled"
|
||||
:disabled="isDisabled"
|
||||
:value="label"
|
||||
v-model="model"
|
||||
@change="handleChange"
|
||||
|
|
@ -135,6 +135,12 @@
|
|||
|
||||
size() {
|
||||
return this._checkboxGroup.size;
|
||||
},
|
||||
|
||||
isDisabled() {
|
||||
return this._checkboxGroup
|
||||
? this._checkboxGroup.disabled || this.disabled
|
||||
: this.disabled;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
props: {
|
||||
value: {},
|
||||
disabled: Boolean,
|
||||
min: Number,
|
||||
max: Number,
|
||||
size: String,
|
||||
|
|
|
|||
|
|
@ -1,14 +1,20 @@
|
|||
<template>
|
||||
<label
|
||||
class="el-checkbox"
|
||||
:class="[
|
||||
border && checkboxSize ? 'el-checkbox--' + checkboxSize : '',
|
||||
{ 'is-disabled': isDisabled },
|
||||
{ 'is-bordered': border },
|
||||
{ 'is-checked': isChecked }
|
||||
]"
|
||||
role="checkbox"
|
||||
:aria-checked="indeterminate ? 'mixed': isChecked"
|
||||
:aria-disabled="disabled"
|
||||
:aria-disabled="isDisabled"
|
||||
:id="id"
|
||||
>
|
||||
<span class="el-checkbox__input"
|
||||
:class="{
|
||||
'is-disabled': disabled,
|
||||
'is-disabled': isDisabled,
|
||||
'is-checked': isChecked,
|
||||
'is-indeterminate': indeterminate,
|
||||
'is-focus': focus
|
||||
|
|
@ -21,7 +27,7 @@
|
|||
class="el-checkbox__original"
|
||||
type="checkbox"
|
||||
:name="name"
|
||||
:disabled="disabled"
|
||||
:disabled="isDisabled"
|
||||
:true-value="trueLabel"
|
||||
:false-value="falseLabel"
|
||||
v-model="model"
|
||||
|
|
@ -32,7 +38,7 @@
|
|||
v-else
|
||||
class="el-checkbox__original"
|
||||
type="checkbox"
|
||||
:disabled="disabled"
|
||||
:disabled="isDisabled"
|
||||
:value="label"
|
||||
:name="name"
|
||||
v-model="model"
|
||||
|
|
@ -117,6 +123,18 @@
|
|||
|
||||
store() {
|
||||
return this._checkboxGroup ? this._checkboxGroup.value : this.value;
|
||||
},
|
||||
|
||||
isDisabled() {
|
||||
return this.isGroup
|
||||
? this._checkboxGroup.disabled || this.disabled
|
||||
: this.disabled;
|
||||
},
|
||||
|
||||
checkboxSize() {
|
||||
return this.isGroup
|
||||
? this._checkboxGroup.size || this.size
|
||||
: this.size;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -130,7 +148,9 @@
|
|||
trueLabel: [String, Number],
|
||||
falseLabel: [String, Number],
|
||||
id: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
|
||||
controls: String /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
|
||||
controls: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
|
||||
border: Boolean,
|
||||
size: String
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
<template>
|
||||
<label
|
||||
class="el-radio"
|
||||
:class="[
|
||||
border && radioSize ? 'el-radio--' + radioSize : '',
|
||||
{ 'is-disabled': isDisabled },
|
||||
{ 'is-bordered': border },
|
||||
{ 'is-checked': model === label }
|
||||
]"
|
||||
role="radio"
|
||||
:aria-checked="model === label"
|
||||
:aria-disabled="isDisabled"
|
||||
|
|
@ -48,7 +54,9 @@
|
|||
value: {},
|
||||
label: {},
|
||||
disabled: Boolean,
|
||||
name: String
|
||||
name: String,
|
||||
border: Boolean,
|
||||
size: String
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -81,7 +89,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
|
||||
radioSize() {
|
||||
return this.isGroup
|
||||
? this._radioGroup.size || this.size
|
||||
: this.size;
|
||||
},
|
||||
isDisabled() {
|
||||
return this.isGroup
|
||||
? this._radioGroup.disabled || this.disabled
|
||||
|
|
|
|||
|
|
@ -5,12 +5,75 @@
|
|||
|
||||
@include b(checkbox) {
|
||||
color: $--checkbox-color;
|
||||
font-weight: $--checkbox-font-weight;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
@include utils-user-select(none);
|
||||
|
||||
@include when(bordered) {
|
||||
padding: $--checkbox-bordered-padding;
|
||||
border-radius: $--border-radius-base;
|
||||
border: $--border-base;
|
||||
|
||||
&.is-checked {
|
||||
border-color: $--color-primary;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
border-color: $--border-color-lighter;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
& + .el-checkbox.is-bordered {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&.el-checkbox--medium {
|
||||
padding: $--checkbox-bordered-medium-padding;
|
||||
border-radius: $--button-medium-border-radius;
|
||||
.el-checkbox__label {
|
||||
font-size: $--button-medium-font-size;
|
||||
}
|
||||
.el-checkbox__inner {
|
||||
height: $--checkbox-bordered-medium-input-height;
|
||||
width: $--checkbox-bordered-medium-input-width;
|
||||
}
|
||||
}
|
||||
&.el-checkbox--small {
|
||||
padding: $--checkbox-bordered-small-padding;
|
||||
border-radius: $--button-small-border-radius;
|
||||
.el-checkbox__label {
|
||||
font-size: $--button-small-font-size;
|
||||
}
|
||||
.el-checkbox__inner {
|
||||
height: $--checkbox-bordered-small-input-height;
|
||||
width: $--checkbox-bordered-small-input-width;
|
||||
&::after {
|
||||
height: 6px;
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.el-checkbox--mini {
|
||||
padding: $--checkbox-bordered-mini-padding;
|
||||
border-radius: $--button-mini-border-radius;
|
||||
.el-checkbox__label {
|
||||
font-size: $--button-mini-font-size;
|
||||
}
|
||||
.el-checkbox__inner {
|
||||
height: $--checkbox-bordered-mini-input-height;
|
||||
width: $--checkbox-bordered-mini-input-width;
|
||||
&::after {
|
||||
height: 6px;
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(input) {
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
|
@ -55,7 +118,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
& + .el-checkbox__label {
|
||||
& + span.el-checkbox__label {
|
||||
color: $--disabled-color-base;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
@ -69,11 +132,14 @@
|
|||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
& + .el-checkbox__label {
|
||||
color: $--checkbox-checked-text-color;
|
||||
}
|
||||
}
|
||||
@include when(focus) { /*focus时 视觉上区分*/
|
||||
.el-checkbox__inner {
|
||||
border-color: $--checkbox-input-border-color-hover;
|
||||
box-shadow: 0 0 1px 0 $--checkbox-input-border-color-hover;
|
||||
}
|
||||
}
|
||||
@include when(indeterminate) {
|
||||
|
|
@ -85,11 +151,12 @@
|
|||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
border: 1px solid $--checkbox-checked-icon-color;
|
||||
margin-top: -1px;
|
||||
left: 3px;
|
||||
right: 3px;
|
||||
top: 50%;
|
||||
background-color: $--checkbox-checked-icon-color;
|
||||
height: 2px;
|
||||
transform: scale(0.5);
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
|
@ -118,15 +185,15 @@
|
|||
&::after {
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
border: 2px solid $--checkbox-checked-icon-color;
|
||||
border: 1px solid $--checkbox-checked-icon-color;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 8px;
|
||||
left: 5px;
|
||||
height: 7px;
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
transform: rotate(45deg) scaleY(0);
|
||||
width: 4px;
|
||||
width: 3px;
|
||||
transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
|
@ -144,11 +211,11 @@
|
|||
|
||||
@include e(label) {
|
||||
font-size: $--checkbox-font-size;
|
||||
padding-left: 5px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
& + .el-checkbox {
|
||||
margin-left: 15px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -159,6 +226,7 @@
|
|||
@include e(inner) {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
font-weight: $--checkbox-font-weight;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
|
@ -203,7 +271,7 @@
|
|||
color: $--checkbox-button-checked-color;
|
||||
background-color: $--checkbox-button-checked-fill;
|
||||
border-color: $--checkbox-button-checked-border-color;
|
||||
box-shadow: -1px 0 0 0 $--checkbox-button-checked-border-color;
|
||||
box-shadow: -1px 0 0 0 $--color-primary-light-4;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -229,7 +297,6 @@
|
|||
&.is-focus {
|
||||
& .el-checkbox-button__inner {
|
||||
border-color: $--checkbox-button-checked-border-color;
|
||||
box-shadow: 0 0 1px 0 $--checkbox-button-checked-border-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(color-hue-slider) {
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@ $--fill-base: $--color-white;
|
|||
$--font-size-base: 14px;
|
||||
$--font-color-base: #5a5e66;
|
||||
$--font-color-disabled-base: #bbb;
|
||||
$--font-weight-primary: 500;
|
||||
|
||||
/* Size
|
||||
-------------------------- */
|
||||
|
|
@ -89,9 +90,9 @@ $--index-popper: 2000;
|
|||
|
||||
/* Disable base
|
||||
-------------------------- */
|
||||
$--disabled-fill-base: $--color-primary-light-9;
|
||||
$--disabled-color-base: #bbb;
|
||||
$--disabled-border-base: $--color-text-placeholder;
|
||||
$--disabled-fill-base: $--border-color-extra-light;
|
||||
$--disabled-color-base: $--color-text-placeholder;
|
||||
$--disabled-border-base: $--border-color-lighter;
|
||||
|
||||
/* Icon
|
||||
-------------------------- */
|
||||
|
|
@ -100,10 +101,11 @@ $--icon-color: #666;
|
|||
/* Checkbox
|
||||
-------------------------- */
|
||||
$--checkbox-font-size: 14px;
|
||||
$--checkbox-font-weight: $--font-weight-primary;
|
||||
$--checkbox-color: $--color-text-regular;
|
||||
$--checkbox-input-height: 18px;
|
||||
$--checkbox-input-width: 18px;
|
||||
$--checkbox-input-border-radius: $--border-radius-base;
|
||||
$--checkbox-input-height: 14px;
|
||||
$--checkbox-input-width: 14px;
|
||||
$--checkbox-input-border-radius: $--border-radius-small;
|
||||
$--checkbox-input-fill: $--color-white;
|
||||
$--checkbox-input-border: $--border-base;
|
||||
$--checkbox-input-border-color: $--border-color-base;
|
||||
|
|
@ -111,18 +113,30 @@ $--checkbox-icon-color: $--color-white;
|
|||
|
||||
$--checkbox-disabled-input-border-color: $--disabled-border-base;
|
||||
$--checkbox-disabled-input-fill: $--disabled-fill-base;
|
||||
$--checkbox-disabled-icon-color: $--disabled-fill-base;
|
||||
$--checkbox-disabled-icon-color: $--color-text-placeholder;
|
||||
|
||||
$--checkbox-disabled-checked-input-fill: $--disabled-border-base;
|
||||
$--checkbox-disabled-checked-input-border-color: $--disabled-border-base;
|
||||
$--checkbox-disabled-checked-icon-color: $--color-white;
|
||||
$--checkbox-disabled-checked-input-fill: $--border-color-extra-light;
|
||||
$--checkbox-disabled-checked-input-border-color: $--border-color-base;
|
||||
$--checkbox-disabled-checked-icon-color: $--color-text-placeholder;
|
||||
|
||||
$--checkbox-checked-input-border-color: $--color-primary-light-2;
|
||||
$--checkbox-checked-text-color: $--color-primary;
|
||||
$--checkbox-checked-input-border-color: $--color-primary;
|
||||
$--checkbox-checked-input-fill: $--color-primary;
|
||||
$--checkbox-checked-icon-color: $--fill-base;
|
||||
|
||||
$--checkbox-input-border-color-hover: $--color-primary;
|
||||
|
||||
$--checkbox-bordered-padding: 10px 20px 10px 10px;
|
||||
$--checkbox-bordered-medium-padding: 8px 20px 8px 10px;
|
||||
$--checkbox-bordered-small-padding: 6px 20px 6px 10px;
|
||||
$--checkbox-bordered-mini-padding: 4px 20px 4px 10px;
|
||||
$--checkbox-bordered-medium-input-height: 14px;
|
||||
$--checkbox-bordered-medium-input-width: 14px;
|
||||
$--checkbox-bordered-small-input-height: 12px;
|
||||
$--checkbox-bordered-small-input-width: 12px;
|
||||
$--checkbox-bordered-mini-input-height: 12px;
|
||||
$--checkbox-bordered-mini-input-width: 12px;
|
||||
|
||||
$--checkbox-button-font-size: $--font-size-base;
|
||||
$--checkbox-button-checked-fill: $--color-primary;
|
||||
$--checkbox-button-checked-color: $--color-white;
|
||||
|
|
@ -133,9 +147,10 @@ $--checkbox-button-checked-border-color: $--color-primary;
|
|||
/* Radio
|
||||
-------------------------- */
|
||||
$--radio-font-size: 14px;
|
||||
$--radio-color: $--color-text-primary;
|
||||
$--radio-input-height: 18px;
|
||||
$--radio-input-width: 18px;
|
||||
$--radio-font-weight: $--font-weight-primary;
|
||||
$--radio-color: $--color-text-regular;
|
||||
$--radio-input-height: 14px;
|
||||
$--radio-input-width: 14px;
|
||||
$--radio-input-border-radius: $--border-radius-circle;
|
||||
$--radio-input-fill: $--color-white;
|
||||
$--radio-input-border: $--border-base;
|
||||
|
|
@ -146,20 +161,33 @@ $--radio-disabled-input-border-color: $--disabled-border-base;
|
|||
$--radio-disabled-input-fill: $--disabled-fill-base;
|
||||
$--radio-disabled-icon-color: $--disabled-fill-base;
|
||||
|
||||
$--radio-disabled-checked-input-fill: $--disabled-border-base;
|
||||
$--radio-disabled-checked-input-border-color: $--disabled-border-base;
|
||||
$--radio-disabled-checked-icon-color: $--color-white;
|
||||
$--radio-disabled-checked-input-fill: $--disabled-fill-base;
|
||||
$--radio-disabled-checked-icon-color: $--color-text-placeholder;
|
||||
|
||||
$--radio-checked-text-color: $--color-primary;
|
||||
$--radio-checked-input-border-color: $--color-primary;
|
||||
$--radio-checked-input-fill: $--color-white;
|
||||
$--radio-checked-icon-color: $--color-primary;
|
||||
|
||||
$--radio-input-border-color-hover: $--color-primary;
|
||||
|
||||
$--radio-bordered-padding: 10px 20px 10px 10px;
|
||||
$--radio-bordered-medium-padding: 8px 20px 8px 10px;
|
||||
$--radio-bordered-small-padding: 6px 20px 6px 10px;
|
||||
$--radio-bordered-mini-padding: 4px 20px 4px 10px;
|
||||
$--radio-bordered-medium-input-height: 14px;
|
||||
$--radio-bordered-medium-input-width: 14px;
|
||||
$--radio-bordered-small-input-height: 12px;
|
||||
$--radio-bordered-small-input-width: 12px;
|
||||
$--radio-bordered-mini-input-height: 12px;
|
||||
$--radio-bordered-mini-input-width: 12px;
|
||||
|
||||
$--radio-button-font-size: $--font-size-base;
|
||||
$--radio-button-checked-fill: $--color-primary;
|
||||
$--radio-button-checked-color: $--color-white;
|
||||
$--radio-button-checked-border-color: $--color-primary;
|
||||
$--radio-button-disabled-checked-fill: $--border-color-extra-light;
|
||||
|
||||
/* Select
|
||||
-------------------------- */
|
||||
|
|
@ -343,7 +371,7 @@ $--tab-vertical-header-count-fill: $--color-text-secondary;
|
|||
/* Button
|
||||
-------------------------- */
|
||||
$--button-font-size: 14px;
|
||||
$--button-font-weight: 500;
|
||||
$--button-font-weight: $--font-weight-primary;
|
||||
$--button-border-radius: $--border-radius-base;
|
||||
$--button-padding-vertical: 12px;
|
||||
$--button-padding-horizontal: 18px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "../common/var";
|
||||
@import "../mixins/mixins";
|
||||
|
||||
@include b(date-table) {
|
||||
font-size: 12px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import "../mixins/mixins";
|
||||
@import "../common/var";
|
||||
@import "../common/transition";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "mixins/mixins";
|
||||
@import "mixins/utils";
|
||||
@import "common/var";
|
||||
|
||||
@include b(form) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "mixins/mixins";
|
||||
@import "mixins/utils";
|
||||
@import "common/var";
|
||||
|
||||
@mixin menu-item {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
vertical-align: middle;
|
||||
background: $--button-default-fill;
|
||||
border: $--border-base;
|
||||
font-weight: $--button-font-weight;
|
||||
border-left: 0;
|
||||
color: $--button-default-color;
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -64,6 +65,9 @@
|
|||
border-color: $--button-disabled-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:checked + .el-radio-button__inner {
|
||||
background-color: $--radio-button-disabled-checked-fill;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -77,7 +81,10 @@
|
|||
&:focus {
|
||||
outline: none;
|
||||
.el-radio-button__inner { /*获得焦点时 样式提醒*/
|
||||
box-shadow: 0 0 1px 1px $--radio-button-checked-border-color !important;
|
||||
box-shadow: 0 0 1px 1px $--radio-button-checked-border-color;
|
||||
}
|
||||
&.is-disabled .el-radio-button__inner {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
|
|
|
|||
|
|
@ -3,11 +3,6 @@
|
|||
|
||||
@include b(radio-group) {
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
|
||||
& .el-radio {
|
||||
font-size: $--radio-font-size;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,21 +5,86 @@
|
|||
|
||||
@include b(radio) {
|
||||
color: $--radio-color;
|
||||
font-weight: $--radio-font-weight;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
@include utils-user-select(none);
|
||||
|
||||
@include when(bordered) {
|
||||
padding: $--radio-bordered-padding;
|
||||
border-radius: $--border-radius-base;
|
||||
border: $--border-base;
|
||||
|
||||
&.is-checked {
|
||||
border-color: $--color-primary;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
cursor: not-allowed;
|
||||
border-color: $--border-color-lighter;
|
||||
}
|
||||
|
||||
& + .el-radio.is-bordered {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(medium) {
|
||||
&.is-bordered {
|
||||
padding: $--radio-bordered-medium-padding;
|
||||
border-radius: $--button-medium-border-radius;
|
||||
.el-radio__label {
|
||||
font-size: $--button-medium-font-size;
|
||||
}
|
||||
.el-radio__inner {
|
||||
height: $--radio-bordered-medium-input-height;
|
||||
width: $--radio-bordered-medium-input-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(small) {
|
||||
&.is-bordered {
|
||||
padding: $--radio-bordered-small-padding;
|
||||
border-radius: $--button-small-border-radius;
|
||||
.el-radio__label {
|
||||
font-size: $--button-small-font-size;
|
||||
}
|
||||
.el-radio__inner {
|
||||
height: $--radio-bordered-small-input-height;
|
||||
width: $--radio-bordered-small-input-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(mini) {
|
||||
&.is-bordered {
|
||||
padding: $--radio-bordered-mini-padding;
|
||||
border-radius: $--button-mini-border-radius;
|
||||
.el-radio__label {
|
||||
font-size: $--button-mini-font-size;
|
||||
}
|
||||
.el-radio__inner {
|
||||
height: $--radio-bordered-mini-input-height;
|
||||
width: $--radio-bordered-mini-input-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus { /*获得焦点时 样式提醒*/
|
||||
outline: none;
|
||||
.el-radio__inner {
|
||||
box-shadow: 0 0 1px 1px $--radio-input-border-color-hover;
|
||||
border-color: $--color-primary;
|
||||
}
|
||||
|
||||
.is-disabled .el-radio__inner {
|
||||
border-color: $--border-color-base;
|
||||
}
|
||||
}
|
||||
|
||||
& + .el-radio {
|
||||
margin-left: 15px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
@include e(input) {
|
||||
|
|
@ -56,8 +121,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
& + .el-radio__label {
|
||||
color: $--disabled-color-base;
|
||||
& + span.el-radio__label {
|
||||
color: $--color-text-placeholder;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
|
@ -71,6 +136,10 @@
|
|||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
& + .el-radio__label {
|
||||
color: $--radio-checked-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(focus) {
|
||||
|
|
@ -83,7 +152,7 @@
|
|||
border: $--radio-input-border;
|
||||
border-radius: $--radio-input-border-radius;
|
||||
width: $--radio-input-width;
|
||||
height: $--radio-input-width;
|
||||
height: $--radio-input-height;
|
||||
background-color: $--radio-input-fill;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
|
@ -95,8 +164,8 @@
|
|||
}
|
||||
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: $--radio-input-border-radius;
|
||||
background-color: $--color-white;
|
||||
content: "";
|
||||
|
|
@ -122,6 +191,6 @@
|
|||
|
||||
@include e(label) {
|
||||
font-size: $--radio-font-size;
|
||||
padding-left: 5px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ describe('Radio', () => {
|
|||
}
|
||||
}, true);
|
||||
let radio2 = vm.$refs.radio2;
|
||||
expect(vm.$el.querySelectorAll('.is-disabled').length).to.be.equal(3);
|
||||
expect(vm.$el.querySelectorAll('label.is-disabled').length).to.be.equal(3);
|
||||
expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.exist;
|
||||
radio2.$el.click();
|
||||
vm.$nextTick(_ => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue