diff --git a/src/form/checkbox.wc b/src/form/checkbox.wc index 80a7a4e..32e58d2 100644 --- a/src/form/checkbox.wc +++ b/src/form/checkbox.wc @@ -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')) } diff --git a/src/form/input.wc b/src/form/input.wc index 5a15384..bd2f91f 100644 --- a/src/form/input.wc +++ b/src/form/input.wc @@ -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 diff --git a/src/form/number.wc b/src/form/number.wc index 744509b..ca9babb 100644 --- a/src/form/number.wc +++ b/src/form/number.wc @@ -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 diff --git a/src/form/radio.wc b/src/form/radio.wc index eddd324..08748ef 100644 --- a/src/form/radio.wc +++ b/src/form/radio.wc @@ -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')) } diff --git a/src/form/select.wc b/src/form/select.wc index 88a8c66..864fc59 100644 --- a/src/form/select.wc +++ b/src/form/select.wc @@ -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') })