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,遵循HTML规范

old
宇天 2020-07-08 19:42:54 +08:00
parent 634e979894
commit 5fe87cca8c
5 changed files with 47 additions and 14 deletions

View File

@ -198,11 +198,11 @@ export default class Checkbox {
}
}
get readonly() {
get readOnly() {
return this.props.readonly
}
set readonly(val) {
set readOnly(val) {
var type = typeof val
if (val === this.props.readonly) {
@ -240,7 +240,7 @@ export default class Checkbox {
this._handlClick = $.bind(this, 'click', ev => {
ev.preventDefault()
if (!this.disabled && !this.readonly) {
if (!this.disabled && !this.readOnly) {
this.checked = !this.checked
this.dispatchEvent(new CustomEvent('input'))
}

View File

@ -290,16 +290,17 @@ export default class Input {
this.__LIST__ = this.__OUTER__.children[4]
}
get readonly() {
get readOnly() {
return this.props.readonly
}
set readonly(val) {
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', '')
@ -417,7 +418,7 @@ export default class Input {
// 键盘事件
this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => {
if (this.disabled || this.readonly) {
if (this.disabled || this.readOnly) {
return
}
// up: 38, down: 40

View File

@ -193,11 +193,11 @@ export default class Number {
this.__INPUT__ = this.__OUTER__.children[1]
}
get readonly() {
get readOnly() {
return this.props.readonly
}
set readonly(val) {
set readOnly(val) {
var type = typeof val
if (val === this.props.readonly) {
@ -284,7 +284,7 @@ export default class Number {
mounted() {
// 键盘事件
this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => {
if (this.disabled || this.readonly) {
if (this.disabled || this.readOnly) {
return
}
@ -317,7 +317,7 @@ export default class Number {
})
this._handleAction = $.bind(this.__OUTER__, 'click', ev => {
if (this.disabled || this.readonly) {
if (this.disabled || this.readOnly) {
return
}
var target = ev.target

View File

@ -191,11 +191,11 @@ export default class Radio {
this.__SWITCH__.classList.toggle('checked', this.props.checked)
}
get readonly() {
get readOnly() {
return this.props.readonly
}
set readonly(val) {
set readOnly(val) {
var type = typeof val
if (val === this.props.readonly) {
@ -231,7 +231,7 @@ export default class Radio {
mounted() {
this._handleClick = $.bind(this, 'click', ev => {
if (!this.disabled && !this.readonly && !this.checked) {
if (!this.disabled && !this.readOnly && !this.checked) {
this.checked = true
this.dispatchEvent(new CustomEvent('input'))
}

View File

@ -167,6 +167,10 @@
cursor: not-allowed;
opacity: 0.6;
}
:host([readonly]) .label {
opacity: 0.8;
}
:host(:focus-within) {
@include focus1;
}
@ -178,6 +182,10 @@
:host([round]) {
border-radius: 21px;
.label input {
padding: 0 10px;
}
.prepend {
border-radius: 21px 0 0 21px;
}
@ -261,6 +269,7 @@ export default class Select {
value: '',
options: '',
mvidx: null, //下拉列表光标的索引ID
readonly: false,
disabled: false
}
@ -274,6 +283,25 @@ export default class Select {
this.__OPTG__ = this.__OUTER__.children[4]
}
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
}
@ -424,7 +452,7 @@ export default class Select {
// 键盘事件
this._handleKeydown = $.catch(this.__INPUT__, 'keydown', ev => {
if (this.disabled || this.readonly) {
if (this.disabled || this.readOnly) {
return
}
// up: 38, down: 40
@ -448,6 +476,10 @@ export default class Select {
this._activeFn = $.bind(this.__INPUT__, 'click', ev => {
var { options } = this.props
if (this.disabled || this.readOnly) {
return
}
initPos.call(this)
this.__OPTG__.classList.toggle('show')
})