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

修复radio/checkbox组件的状态属性

old
宇天 2021-04-13 13:41:30 +08:00
parent f733b06dbf
commit afd6d5715c
3 changed files with 84 additions and 8 deletions

View File

@ -47,6 +47,44 @@ export default class CheckboxGroup {
this._updateChildrenStat() this._updateChildrenStat()
} }
get readOnly() {
return this.props.readonly
}
set readOnly(val) {
var type = typeof val
if (val === this.props.readonly) {
return
}
if ((type === 'boolean' && val) || type !== 'boolean') {
this.props.readonly = true
this.setAttribute('readonly', '')
} else {
this.props.readonly = false
this.removeAttribute('readonly')
}
}
get disabled() {
return this.props.disabled
}
set disabled(val) {
var type = typeof val
if (val === this.props.disabled) {
return
}
if ((type === 'boolean' && val) || type !== 'boolean') {
this.props.disabled = true
this.setAttribute('disabled', '')
} else {
this.props.disabled = false
this.removeAttribute('disabled')
}
}
mounted() { mounted() {
this._pickedFn = $.bind(this, 'child-picked', ev => { this._pickedFn = $.bind(this, 'child-picked', ev => {
var tmp = [...this.props.value] var tmp = [...this.props.value]

View File

@ -15,7 +15,7 @@
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
color: var(--color-dark-1); color: var(--color-dark-1);
border-radius: 6px; border-radius: 3px;
cursor: text; cursor: text;
transition: box-shadow 0.15s linear; transition: box-shadow 0.15s linear;
} }
@ -27,7 +27,7 @@
margin: 0 auto; margin: 0 auto;
line-height: 1; line-height: 1;
font-size: 14px; font-size: 14px;
border: 2px solid var(--color-grey-2); border: 1px solid var(--color-grey-2);
border-radius: inherit; border-radius: inherit;
background: var(--bg-color, #fff); background: var(--bg-color, #fff);
color: inherit; color: inherit;
@ -37,18 +37,18 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 32px; width: 34px;
height: 100%; height: 100%;
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
&:first-child { &:first-child {
border-radius: 4px 0 0 4px; border-radius: 3px 0 0 3px;
border-right: 2px solid var(--color-grey-a); border-right: 1px solid var(--color-grey-a);
} }
&:last-child { &:last-child {
border-radius: 0 4px 4px 0; border-radius: 0 3px 3px 0;
border-left: 2px solid var(--color-grey-a); border-left: 1px solid var(--color-grey-a);
} }
&.disabled { &.disabled {
@ -158,7 +158,7 @@
} }
// //
:host(:focus-within) { :host(:focus-within) {
box-shadow: 0 0 0 2px var(--color-grey-a); box-shadow: 0 0 0 2px var(--color-plain-a);
} }
:host([type='primary']:focus-within) { :host([type='primary']:focus-within) {
box-shadow: 0 0 0 2px var(--color-teal-a); box-shadow: 0 0 0 2px var(--color-teal-a);

View File

@ -47,6 +47,44 @@ export default class RadioGroup {
this._updateChildrenStat() this._updateChildrenStat()
} }
get readOnly() {
return this.props.readonly
}
set readOnly(val) {
var type = typeof val
if (val === this.props.readonly) {
return
}
if ((type === 'boolean' && val) || type !== 'boolean') {
this.props.readonly = true
this.setAttribute('readonly', '')
} else {
this.props.readonly = false
this.removeAttribute('readonly')
}
}
get disabled() {
return this.props.disabled
}
set disabled(val) {
var type = typeof val
if (val === this.props.disabled) {
return
}
if ((type === 'boolean' && val) || type !== 'boolean') {
this.props.disabled = true
this.setAttribute('disabled', '')
} else {
this.props.disabled = false
this.removeAttribute('disabled')
}
}
mounted() { mounted() {
this._pickedFn = $.bind(this, 'child-picked', ev => { this._pickedFn = $.bind(this, 'child-picked', ev => {
this.value = ev.detail this.value = ev.detail