修复readonly,遵循HTML规范
parent
634e979894
commit
5fe87cca8c
|
@ -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'))
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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'))
|
||||
}
|
||||
|
|
|
@ -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')
|
||||
})
|
||||
|
|
Reference in New Issue