diff --git a/src/components/li/li.css.ts b/src/components/li/li.css.ts index 7ea2745..094160f 100644 --- a/src/components/li/li.css.ts +++ b/src/components/li/li.css.ts @@ -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 { diff --git a/src/components/li/li.ts b/src/components/li/li.ts index 9533d03..f7d2f04 100644 --- a/src/components/li/li.ts +++ b/src/components/li/li.ts @@ -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` { - 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: diff --git a/src/test/panels/li/li.ts b/src/test/panels/li/li.ts index c7d3485..928972a 100644 --- a/src/test/panels/li/li.ts +++ b/src/test/panels/li/li.ts @@ -218,6 +218,15 @@ export class PanelLi extends LitElement {

+ +
+ +