单选和复选增加readonly状态
parent
438e248a13
commit
0df60c5597
|
@ -31,6 +31,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host([readonly]) {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
:host([disabled]) {
|
:host([disabled]) {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
|
@ -136,12 +140,15 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import '../icon/index'
|
import '../icon/index'
|
||||||
|
import { bind, unbind } from '../utils'
|
||||||
|
|
||||||
export default class Checkbox {
|
export default class Checkbox {
|
||||||
props = {
|
props = {
|
||||||
label: '',
|
label: '',
|
||||||
color: '',
|
color: '',
|
||||||
value: [],
|
value: [],
|
||||||
checked: false,
|
checked: false,
|
||||||
|
readonly: false,
|
||||||
disabled: false
|
disabled: false
|
||||||
}
|
}
|
||||||
__init__() {
|
__init__() {
|
||||||
|
@ -188,6 +195,25 @@ export default class Checkbox {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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() {
|
get disabled() {
|
||||||
return this.props.disabled
|
return this.props.disabled
|
||||||
}
|
}
|
||||||
|
@ -208,16 +234,18 @@ export default class Checkbox {
|
||||||
}
|
}
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.addEventListener(
|
this._handlClick = bind(this, 'click', ev => {
|
||||||
'click',
|
ev.preventDefault()
|
||||||
ev => {
|
|
||||||
if (!this.disabled) {
|
if (!this.disabled && !this.readonly) {
|
||||||
this.checked = !this.checked
|
this.checked = !this.checked
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
this.dispatchEvent(new CustomEvent('input'))
|
||||||
}
|
}
|
||||||
},
|
})
|
||||||
false
|
}
|
||||||
)
|
|
||||||
|
unmount() {
|
||||||
|
unbind(this, 'click', this._handlClick)
|
||||||
}
|
}
|
||||||
|
|
||||||
watch() {
|
watch() {
|
||||||
|
@ -228,6 +256,7 @@ export default class Checkbox {
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'checked':
|
case 'checked':
|
||||||
|
case 'readonly':
|
||||||
case 'disabled':
|
case 'disabled':
|
||||||
this[name] = true
|
this[name] = true
|
||||||
break
|
break
|
||||||
|
|
|
@ -44,6 +44,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host([readonly]) {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
:host([disabled]) {
|
:host([disabled]) {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
|
@ -159,6 +163,7 @@ export default class Radio {
|
||||||
props = {
|
props = {
|
||||||
label: '',
|
label: '',
|
||||||
checked: false,
|
checked: false,
|
||||||
|
readonly: false,
|
||||||
disabled: false
|
disabled: false
|
||||||
}
|
}
|
||||||
__init__() {
|
__init__() {
|
||||||
|
@ -184,6 +189,25 @@ export default class Radio {
|
||||||
this.__SWITCH__.classList.toggle('checked', this.props.checked)
|
this.__SWITCH__.classList.toggle('checked', this.props.checked)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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() {
|
get disabled() {
|
||||||
return this.props.disabled
|
return this.props.disabled
|
||||||
}
|
}
|
||||||
|
@ -205,7 +229,7 @@ export default class Radio {
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this._handleClick = bind(this, 'click', ev => {
|
this._handleClick = bind(this, 'click', ev => {
|
||||||
if (!this.disabled && !this.checked) {
|
if (!this.disabled && !this.readonly && !this.checked) {
|
||||||
this.checked = true
|
this.checked = true
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
this.dispatchEvent(new CustomEvent('input'))
|
||||||
}
|
}
|
||||||
|
@ -223,6 +247,7 @@ export default class Radio {
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'checked':
|
case 'checked':
|
||||||
|
case 'readonly':
|
||||||
case 'disabled':
|
case 'disabled':
|
||||||
this[name] = true
|
this[name] = true
|
||||||
break
|
break
|
||||||
|
|
Reference in New Issue