This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

完成checkbox组件的调整;优化radio组件

old
宇天 2021-03-01 11:20:22 +08:00
parent 013faae5c7
commit dc95fc5a66
3 changed files with 17 additions and 90 deletions

View File

@ -10,6 +10,7 @@
display: inline-flex; display: inline-flex;
line-height: 1; line-height: 1;
font-size: 14px; font-size: 14px;
cursor: pointer;
label { label {
display: flex; display: flex;
@ -23,120 +24,48 @@
user-select: none; user-select: none;
white-space: nowrap; white-space: nowrap;
cursor: inherit; cursor: inherit;
color: var(--color-grey-3); color: var(--color-dark-1);
} }
.dot { .dot {
--size: 18px; --size: 20px;
padding: 2px; padding: 2px;
margin-right: 3px; margin-right: 4px;
} }
} }
:host([readonly]) { :host([readonly]) {
cursor: default;
opacity: 0.8; opacity: 0.8;
} }
:host([disabled]) { :host([disabled]) {
cursor: not-allowed; cursor: not-allowed;
opacity: 0.6; opacity: 0.6;
}
:host([size='large']) {
font-size: 16px;
label { label {
height: 42px; color: var(--color-grey-2);
}
.dot {
--size: 22px;
}
}
:host([size='medium']) {
label {
height: 38px;
}
.dot {
--size: 20px;
}
}
:host([size='mini']) {
font-size: 12px;
label {
height: 20px;
}
.dot {
--size: 14px;
} }
} }
:host([type='danger']) label.checked { :host([type='danger']) label {
color: var(--color-red-1); color: var(--color-red-1);
.dot {
border-color: var(--color-red-1);
}
.dot::after {
background: var(--color-red-1);
}
} }
:host([type='info']) label.checked { :host([type='info']) label {
color: var(--color-blue-1); color: var(--color-blue-1);
.dot {
border-color: var(--color-blue-1);
}
.dot::after {
background: var(--color-blue-1);
}
} }
:host([type='success']) label.checked { :host([type='success']) label {
color: var(--color-green-1); color: var(--color-green-1);
.dot {
border-color: var(--color-green-1);
}
.dot::after {
background: var(--color-green-1);
}
} }
:host([type='primary']) label.checked { :host([type='primary']) label {
color: var(--color-teal-1); color: var(--color-teal-1);
.dot {
border-color: var(--color-teal-1);
}
.dot::after {
background: var(--color-teal-1);
}
} }
:host([type='warning']) label.checked { :host([type='warning']) label {
color: var(--color-orange-1); color: var(--color-orange-1);
.dot {
border-color: var(--color-orange-1);
}
.dot::after {
background: var(--color-orange-1);
}
}
:host([type='inverse']) label.checked {
color: var(--color-dark-1);
.dot {
border-color: var(--color-dark-1);
}
.dot::after {
background: var(--color-dark-1);
}
}
:host([color='purple']) label.checked {
color: var(--color-purple-1);
.dot {
border-color: var(--color-purple-1);
}
.dot::after {
background: var(--color-purple-1);
}
} }
</style> </style>

View File

@ -38,7 +38,6 @@ export default class CheckboxGroup {
} }
set value(val) { set value(val) {
console.log(this, val, this.props.value, val === this.props.value)
if (val === this.props.value) { if (val === this.props.value) {
return return
} }
@ -71,7 +70,6 @@ export default class CheckboxGroup {
watch() { watch() {
switch (name) { switch (name) {
case 'value': case 'value':
console.log(val)
if (val) { if (val) {
this.value = val.split(/,\s*?/) this.value = val.split(/,\s*?/)
} }

View File

@ -17,7 +17,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-width: 32px; min-width: 32px;
padding: 0 5px; padding: 0 6px;
line-height: 1; line-height: 1;
-moz-user-select: none; -moz-user-select: none;
user-select: none; user-select: none;
@ -34,9 +34,9 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 14px; width: 16px;
height: 14px; height: 16px;
margin-right: 3px; margin-right: 4px;
border: 2px solid var(--color-dark-1); border: 2px solid var(--color-dark-1);
border-radius: 50%; border-radius: 50%;
background: #fff; background: #fff;
@ -44,8 +44,8 @@
&::after { &::after {
display: block; display: block;
visibility: hidden; visibility: hidden;
width: 4px; width: 6px;
height: 4px; height: 6px;
border-radius: 50%; border-radius: 50%;
background: var(--color-dark-1); background: var(--color-dark-1);
content: ''; content: '';