bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

优化button, link, passwd组件

master
yutent 2023-03-17 18:29:47 +08:00
parent 6c6e437d3d
commit 3ed3f41e2d
3 changed files with 33 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/form/button.js
View File

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

13
src/form/link.js
View File

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

33
src/form/passwd.js
View File

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