优化button, link, passwd组件

src/form/button.js

@@ -4,7 +4,7 @@
  * @date 2023/03/06 15:17:25
  */
 
-import { css, html, Component, $, nextTick } from '@bd/core'
+import { css, html, Component, nextTick } from '@bd/core'
 import '../icon/index.js'
 
 class Button extends Component {
@@ -244,10 +244,9 @@ class Button extends Component {
 
   mounted() {
     if (this.autofocus) {
-      let $btn = $('button', this.root)
-      $btn.setAttribute('autofocus', '')
+      this.$refs.btn.setAttribute('autofocus', '')
       // 需要focus()才能聚焦成功
-      nextTick(_ => $btn.focus())
+      nextTick(_ => this.$refs.btn.focus())
     }
   }
 
@@ -257,9 +256,9 @@ class Button extends Component {
 
   render() {
     return html`
-      <button disabled=${this.disabled}>
+      <button ref="btn" disabled=${this.disabled}>
         <wc-icon class="icon" is=${this.icon}></wc-icon>
-        <slot />
+        <slot></slot>
       </button>
     `
   }

src/form/link.js

@@ -4,7 +4,7 @@
  * @date 2023/03/16 17:40:50
  */
 
-import { css, html, Component, bind, unbind, $, nextTick } from '@bd/core'
+import { css, html, Component, bind, unbind, nextTick } from '@bd/core'
 class Link extends Component {
   static props = {
     type: 'primary',
@@ -106,17 +106,16 @@ class Link extends Component {
   ]
 
   mounted() {
-    let $a = $('.link', this.root)
     this.stamp = 0
 
     if (this.autofocus) {
-      $a.setAttribute('autofocus', '')
+      this.$refs.a.setAttribute('autofocus', '')
       // 需要focus()才能聚焦成功
-      nextTick(_ => $a.focus())
+      nextTick(_ => this.$refs.a.focus())
     }
 
     this._clickFn = bind(
-      $a,
+      this.$refs.a,
       'click',
       ev => {
         let { disabled, lazy } = this
@@ -141,12 +140,12 @@ class Link extends Component {
   }
 
   unmounted() {
-    unbind($('.link', this.root), 'click', this._clickFn)
+    unbind(this.$refs.a, 'click', this._clickFn)
   }
 
   render() {
     return html`
-      <a tabindex="0" class="link" href=${this.to || 'javascript:;'}>
+      <a tabindex="0" ref="a" class="link" href=${this.to || 'javascript:;'}>
         <slot />
       </a>
     `

src/form/passwd.js

@@ -3,7 +3,7 @@
  * @author yutent<yutent.io@gmail.com>
  * @date 2023/03/16 18:05:43
  */
-import { css, html, Component, $, bind, unbind, nextTick } from '@bd/core'
+import { css, html, Component, bind, unbind, nextTick } from '@bd/core'
 import '../icon/index.js'
 
 class Passwd extends Component {
@@ -223,33 +223,40 @@ class Passwd extends Component {
   ]
 
   mounted() {
-    let $input = $('input', this.root)
-    let $icon = $('.icon', this.root)
-
     if (this.autofocus) {
-      $input.setAttribute('autofocus', '')
+      this.$refs.input.setAttribute('autofocus', '')
       // 需要focus()才能聚焦成功
-      nextTick(_ => $input.focus())
+      nextTick(_ => this.$refs.input.focus())
+    }
   }
 
-    bind($icon, 'click', ev => {
+  iconClick(ev) {
+    if (this.readonly || this.disabled) {
+      return
+    }
     this._type = this._type === 'password' ? '' : 'password'
-    })
+  }
 
-    bind($input, 'input', ev => {
-      ev.stopPropagation()
+  handleInput(ev) {
     this.value = ev.target.value
-      this.$emit('input', { data: this.value })
-    })
   }
 
   render() {
     return html`
       <div class="label">
         <slot class="prepend" name="prepend"></slot>
-        <input spellcheck="false" :type=${this._type} :value=${this.value} />
+        <input
+          spellcheck="false"
+          ref="input"
+          @input=${this.handleInput}
+          :readonly=${this.readOnly}
+          :disabled=${this.disabled}
+          :type=${this._type}
+          :value=${this.value}
+        />
         <wc-icon
           class="icon"
+          @click=${this.iconClick}
           :is=${this._type === 'password' ? 'eye-off' : 'eye'}
         ></wc-icon>
       </div>