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

单选和复选增加readonly状态

old
宇天 2019-09-05 20:40:01 +08:00
parent 438e248a13
commit 0df60c5597
2 changed files with 65 additions and 11 deletions

View File

@ -31,6 +31,10 @@
}
}
:host([readonly]) {
opacity: 0.8;
}
:host([disabled]) {
cursor: not-allowed;
opacity: 0.6;
@ -136,12 +140,15 @@
<script>
import '../icon/index'
import { bind, unbind } from '../utils'
export default class Checkbox {
props = {
label: '',
color: '',
value: [],
checked: false,
readonly: false,
disabled: false
}
__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() {
return this.props.disabled
}
@ -208,16 +234,18 @@ export default class Checkbox {
}
mounted() {
this.addEventListener(
'click',
ev => {
if (!this.disabled) {
this.checked = !this.checked
this.dispatchEvent(new CustomEvent('input'))
}
},
false
)
this._handlClick = bind(this, 'click', ev => {
ev.preventDefault()
if (!this.disabled && !this.readonly) {
this.checked = !this.checked
this.dispatchEvent(new CustomEvent('input'))
}
})
}
unmount() {
unbind(this, 'click', this._handlClick)
}
watch() {
@ -228,6 +256,7 @@ export default class Checkbox {
break
case 'checked':
case 'readonly':
case 'disabled':
this[name] = true
break

View File

@ -44,6 +44,10 @@
}
}
:host([readonly]) {
opacity: 0.8;
}
:host([disabled]) {
cursor: not-allowed;
opacity: 0.6;
@ -159,6 +163,7 @@ export default class Radio {
props = {
label: '',
checked: false,
readonly: false,
disabled: false
}
__init__() {
@ -184,6 +189,25 @@ export default class Radio {
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() {
return this.props.disabled
}
@ -205,7 +229,7 @@ export default class Radio {
mounted() {
this._handleClick = bind(this, 'click', ev => {
if (!this.disabled && !this.checked) {
if (!this.disabled && !this.readonly && !this.checked) {
this.checked = true
this.dispatchEvent(new CustomEvent('input'))
}
@ -223,6 +247,7 @@ export default class Radio {
break
case 'checked':
case 'readonly':
case 'disabled':
this[name] = true
break