diff --git a/src/form/button.wc b/src/form/button.wc index 374311f..0525989 100644 --- a/src/form/button.wc +++ b/src/form/button.wc @@ -115,6 +115,7 @@ } :host([circle]) { min-width: 36px; + width: 36px; border-radius: 50%; button { padding: 0; diff --git a/src/form/input.wc b/src/form/input.wc index 48bee49..4481b97 100644 --- a/src/form/input.wc +++ b/src/form/input.wc @@ -339,6 +339,7 @@ export default class Input { } state = { + list: [], // 补全列表 mvidx: null //下拉列表光标的索引ID } @@ -406,7 +407,7 @@ export default class Input { // 移动光标选择下拉选项 _moveSelect(ev) { - var { list } = this.props + var { list } = this.state if (list && list.length) { ev.preventDefault() var step = ev.keyCode === 38 ? -1 : 1 @@ -436,7 +437,7 @@ export default class Input { // 触发列表选择 _fetchSelect(idx, ev) { - var item = this.props.list[idx] + var item = this.state.list[idx] this.value = item.value this.dispatchEvent( new CustomEvent('select', { @@ -471,7 +472,8 @@ export default class Input { // 键盘事件 this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => { - let { passwd } = this.props + let { passwd, minlength } = this.props + let val = this.value let now = Date.now() if (this.disabled || this.readOnly) { @@ -497,6 +499,13 @@ export default class Input { return } + // 长度不够,拦截submit + if (minlength && minlength > 0) { + if (val.length < minlength) { + return + } + } + this.stamp = now this.dispatchEvent(new CustomEvent('submit', { detail: this.value })) } @@ -524,7 +533,7 @@ export default class Input { detail: { value: this.value, send: list => { - this.props.list = list + this.state.list = list this._parseSuggestion() } } @@ -534,7 +543,7 @@ export default class Input { // 渲染建议列表 this._parseSuggestion = $.bind(this.__INPUT__, 'click', ev => { - var { list } = this.props + var { list } = this.state let { x, y, width, height } = this.getBoundingClientRect() if (list && list.length) { var html = list @@ -566,6 +575,7 @@ export default class Input { unmount() { $.unbind(this.__INPUT__, 'keydown', this._handleSubmit) $.unbind(this.__INPUT__, 'input', this._handleChange) + $.unbind(this.__INPUT__, 'click', this._parseSuggestion) $.unbind(this.__LIST__, 'click', this._handleSelect) $.clearOutside(this._inactiveFn) } diff --git a/src/form/number.wc b/src/form/number.wc index 42f8459..b86409a 100644 --- a/src/form/number.wc +++ b/src/form/number.wc @@ -27,7 +27,7 @@ margin: 0 auto; line-height: 1; font-size: 14px; - border: 2px solid var(--color-plain-2); + border: 2px solid var(--color-grey-2); border-radius: inherit; background: var(--bg-color, #fff); color: inherit; @@ -44,11 +44,11 @@ &:first-child { border-radius: 4px 0 0 4px; - border-right: 2px solid var(--color-plain-1); + border-right: 2px solid var(--color-grey-a); } &:last-child { border-radius: 0 4px 4px 0; - border-left: 2px solid var(--color-plain-1); + border-left: 2px solid var(--color-grey-a); } &.disabled { @@ -158,14 +158,11 @@ } // :host(:focus-within) { - box-shadow: 0 0 0 2px var(--color-plain-a); + box-shadow: 0 0 0 2px var(--color-grey-a); } :host([type='primary']:focus-within) { box-shadow: 0 0 0 2px var(--color-teal-a); } -:host([type='default']:focus-within) { - box-shadow: 0 0 0 2px var(--color-grey-a); -} :host([type='info']:focus-within) { box-shadow: 0 0 0 2px var(--color-blue-a); } @@ -178,21 +175,12 @@ :host([type='warning']:focus-within) { box-shadow: 0 0 0 2px var(--color-orange-a); } -:host([type='inverse']:focus-within) { - box-shadow: 0 0 0 2px var(--color-dark-a); -} :host([type='primary']) .label { border-color: var(--color-teal-2); span { border-color: var(--color-teal-a); } } -:host([type='default']) .label { - border-color: var(--color-grey-2); - span { - border-color: var(--color-grey-a); - } -} :host([type='info']) .label { border-color: var(--color-blue-2); span { @@ -217,17 +205,9 @@ border-color: var(--color-orange-a); } } -:host([type='inverse']) .label { - border-color: var(--color-dark-2); - span { - border-color: var(--color-dark-a); - } -}