BUG:#151438 修复li type="input"时的占位字符串故障

This commit is contained in:
wangchangqi 2022-12-30 15:00:28 +08:00
parent 4eb6007799
commit f65d8bf533
3 changed files with 19 additions and 13 deletions

View File

@ -126,7 +126,6 @@ export default css`
color: var(--li-square);
}
div#square span {
/* margin: var(--auto-_2px) var(--auto-5px) 0px var(--auto-6px); */
margin-left: var(--auto-6px);
line-height: 0px;
}
@ -145,7 +144,7 @@ export default css`
text-align: right;
white-space: nowrap;
font-size: var(--auto-26px);
line-height: var(--auto-26px);
line-height: var(--auto-34px);
color: var(--li-value-default);
}
:host([variant='primary']) span#value {

View File

@ -79,6 +79,11 @@ export class StarLi extends StarBaseElement {
@property({type: String}) iconcolor!: string
/**
* type="input"input标签控制那样
*/
@property({type: String}) placeholder!: string
/* deprecated */ @property({type: String}) default = ''
/* deprecated */ @property({type: Number}) bubble = 0
@ -296,17 +301,10 @@ export class StarLi extends StarBaseElement {
case LiType.INPUT:
return html`
<input
placeholder=${this.value}
@focus=${(evt: Event) => {
const target = evt.target as HTMLInputElement
this.setAttribute('active', '')
this.value = target.value = target.placeholder
}}
@blur=${(evt: Event) => {
const target = evt.target as HTMLInputElement
this.removeAttribute('active')
this.value = target.placeholder = target.value
}}
placeholder=${ifDefined(this.placeholder)}
value=${ifDefined(this.value)}
@focus=${() => this.setAttribute('active', '')}
@blur=${() => this.removeAttribute('active')}
/>
`
case LiType.EMBED_SLIDER:

View File

@ -218,6 +218,15 @@ export class PanelLi extends LitElement {
<hr />
<star-li type="input" label="主机名" value="proxy.example.com"></star-li>
<hr />
<star-li
type="input"
label="主机名"
value="proxy.example.com"
placeholder="请输入主机名"
></star-li>
<hr />
<star-li type="input" label="主机名" placeholder="请输入主机名"></star-li>
<hr />
<star-li type="button" label="添加其他网络"></star-li>
<hr />
<star-li type="button" variant="primary" label="添加其他网络"></star-li>