From 2458a0f18f939aa90ea819dd62c13f6e2c4eb143 Mon Sep 17 00:00:00 2001 From: yutent Date: Mon, 20 Mar 2023 19:29:55 +0800 Subject: [PATCH 1/2] update --- src/form/passwd.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/form/passwd.js b/src/form/passwd.js index b396a37..334e070 100644 --- a/src/form/passwd.js +++ b/src/form/passwd.js @@ -97,7 +97,7 @@ class Passwd extends Component { } /* ----- */ .icon { - --size: 18px; + --size: 16px; margin: 0 8px 0 4px; color: var(--color-grey-2); cursor: pointer; @@ -223,6 +223,7 @@ class Passwd extends Component { ] mounted() { + console.log(this.$refs) if (this.autofocus) { this.$refs.input.setAttribute('autofocus', '') // 需要focus()才能聚焦成功 @@ -257,7 +258,7 @@ class Passwd extends Component { ` From c297a9877382b683cd20f407c47c176f9e7c0433 Mon Sep 17 00:00:00 2001 From: yutent Date: Tue, 21 Mar 2023 10:33:18 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E5=AE=8C=E6=88=90passwd=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/form/passwd.js | 73 ++++++++++++++-------------------------------- 1 file changed, 22 insertions(+), 51 deletions(-) diff --git a/src/form/passwd.js b/src/form/passwd.js index 334e070..4156317 100644 --- a/src/form/passwd.js +++ b/src/form/passwd.js @@ -32,6 +32,7 @@ class Passwd extends Component { :host { overflow: hidden; display: inline-flex; + min-width: 108px; user-select: none; -moz-user-select: none; color: var(--color-dark-1); @@ -45,10 +46,11 @@ class Passwd extends Component { display: flex; justify-content: center; align-items: center; + height: 32px; font-size: 14px; border: 1px solid var(--color-grey-2); border-radius: inherit; - background: var(--bg-color, #fff); + background: var(--input-bg-color, #fff); color: inherit; cursor: inherit; @@ -75,27 +77,6 @@ class Passwd extends Component { `, css` .label { - .prepend { - justify-content: center; - align-items: center; - width: auto; - height: 34px; - padding: 0 10px; - line-height: 1; - white-space: nowrap; - } - .prepend { - border-right: 1px solid var(--color-grey-a); - border-radius: 6px 0 0 6px; - } - - &[prepend] .prepend { - display: flex; - } - &[prepend] input { - min-width: 64px; - } - /* ----- */ .icon { --size: 16px; margin: 0 8px 0 4px; @@ -140,20 +121,21 @@ class Passwd extends Component { min-width: map.get($v, 'w'); .label { height: map.get($v, 'h'); - - input { - padding: 0 6px 0 10px; - } } - .prepend, - .append { - height: map.get($v, 'h'); + + @if $s == 'xxl' { + .icon { + --size: 18px; + } } @if $s == 'xxxl' { + .label input { + padding: 0 6px 0 10px; + } .icon { - --size: 24px; - margin: 0 16px 0 4px; + --size: 22px; + margin: 0 12px 0 4px; } } } @@ -181,15 +163,18 @@ class Passwd extends Component { :host([type='#{$t}']) .label { border-color: var(--color-#{$c}-2); - .prepend, - .append { - border-color: var(--color-#{$c}-a); - } } } `, css` + :host([disabled]), + :host([readonly]) { + cursor: default; + .icon { + cursor: default; + } + } :host([disabled]) { cursor: not-allowed; @@ -199,31 +184,17 @@ class Passwd extends Component { opacity: 0.6; } } - :host([readonly]) { - cursor: default; - } :host([no-border]), :host(:focus-within[no-border]) { .label { border: 0; - - &[prepend] input { - padding-left: 2px; - } - &[append] input { - padding-right: 2px; - } - } - .prepend { - border: 0; } } ` ] mounted() { - console.log(this.$refs) if (this.autofocus) { this.$refs.input.setAttribute('autofocus', '') // 需要focus()才能聚焦成功 @@ -232,7 +203,7 @@ class Passwd extends Component { } iconClick(ev) { - if (this.readonly || this.disabled) { + if (this.readOnly || this.disabled) { return } this._type = this._type === 'password' ? '' : 'password' @@ -250,7 +221,7 @@ class Passwd extends Component { spellcheck="false" ref="input" @input=${this.handleInput} - :readonly=${this.readOnly} + :readOnly=${this.readOnly} :disabled=${this.disabled} :type=${this._type} :value=${this.value}