修复radio/checkbox组件的状态属性
parent
f733b06dbf
commit
afd6d5715c
|
@ -47,6 +47,44 @@ export default class CheckboxGroup {
|
|||
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() {
|
||||
this._pickedFn = $.bind(this, 'child-picked', ev => {
|
||||
var tmp = [...this.props.value]
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
color: var(--color-dark-1);
|
||||
border-radius: 6px;
|
||||
border-radius: 3px;
|
||||
cursor: text;
|
||||
transition: box-shadow 0.15s linear;
|
||||
}
|
||||
|
@ -27,7 +27,7 @@
|
|||
margin: 0 auto;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
border: 2px solid var(--color-grey-2);
|
||||
border: 1px solid var(--color-grey-2);
|
||||
border-radius: inherit;
|
||||
background: var(--bg-color, #fff);
|
||||
color: inherit;
|
||||
|
@ -37,18 +37,18 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 32px;
|
||||
width: 34px;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-right: 2px solid var(--color-grey-a);
|
||||
border-radius: 3px 0 0 3px;
|
||||
border-right: 1px solid var(--color-grey-a);
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
border-left: 2px solid var(--color-grey-a);
|
||||
border-radius: 0 3px 3px 0;
|
||||
border-left: 1px solid var(--color-grey-a);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
|
@ -158,7 +158,7 @@
|
|||
}
|
||||
//
|
||||
: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) {
|
||||
box-shadow: 0 0 0 2px var(--color-teal-a);
|
||||
|
|
|
@ -47,6 +47,44 @@ export default class RadioGroup {
|
|||
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() {
|
||||
this._pickedFn = $.bind(this, 'child-picked', ev => {
|
||||
this.value = ev.detail
|
||||
|
|
Reference in New Issue