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

View File

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

View File

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

View File

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

View File

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