完成passwd组件

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 {
+          @if $s == 'xxl' {
-            height: map.get($v, 'h');
+            .icon {
+              --size: 18px;
+            }
           }
 
           @if $s == 'xxxl' {
+            .label input {
+              padding: 0 6px 0 10px;
+            }
             .icon {
-              --size: 24px;
+              --size: 22px;
-              margin: 0 16px 0 4px;
+              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}