修复radio/checkbox组件的状态属性
parent
f733b06dbf
commit
afd6d5715c
|
@ -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]
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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
|
||||||
|
|
Reference in New Issue