From fd2ad7db4ddee0399ef94e1ec5b028fabc3d071f Mon Sep 17 00:00:00 2001 From: lvxiangcong Date: Tue, 22 Nov 2022 15:24:22 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96prompt=E5=BC=B9=E7=AA=97?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E8=8E=B7=E5=8F=96=E8=BE=93=E5=85=A5?= =?UTF-8?q?=E6=A1=86=E4=B8=AD=E7=9A=84=E5=86=85=E5=AE=B9=E8=BF=9B=E8=A1=8C?= =?UTF-8?q?=E4=BC=A0=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/dialog/alert-dialog.ts | 20 +++++++++----------- src/components/dialog/base-dialog.css.ts | 1 + src/components/dialog/base-dialog.ts | 2 -- src/components/dialog/confirm-dialog.ts | 1 - src/components/dialog/prompt-dialog.css.ts | 6 ++++-- src/components/dialog/prompt-dialog.ts | 21 ++++++++++++--------- src/test/panels/dialog/dialog.ts | 17 +++++++++++++++++ 7 files changed, 43 insertions(+), 25 deletions(-) diff --git a/src/components/dialog/alert-dialog.ts b/src/components/dialog/alert-dialog.ts index 1a78bb4..5123dfb 100644 --- a/src/components/dialog/alert-dialog.ts +++ b/src/components/dialog/alert-dialog.ts @@ -17,7 +17,6 @@ interface AlertDialogOptions { text?: string /* alert的正文 */ checkBoxText?: string confirm?: string - dataTo?: Object onconfirm?: () => void } @@ -28,7 +27,6 @@ export class StarAlertDialog extends StarBaseDialog { this.title = obj.title || this.title this.text = obj.text || '' this.checkBoxText = obj.checkBoxText || '' - this.dataTo = obj.dataTo || {} this.confirm = obj.confirm || '确定' this.onconfirm = obj.onconfirm || (() => {}) } @@ -84,17 +82,17 @@ export class StarAlertDialog extends StarBaseDialog { type="text" label=${this.confirm} variant="primary" - @click=${this.handleConfirm} + @click=${this.transmitAlter} > ` } - // transmitAlter() { - // if (this.checkBoxText) { - // let checkedInput = this.alterInput.checked - // // @ts-ignore - // this.dataTo.checked = checkedInput - // } - // this.handleConfirm() - // } + transmitAlter(e: Event) { + if (this.checkBoxText) { + let checkedInput = this.alterInput.checked + // @ts-ignore + Object.assign(e, {data: {checked: checkedInput || ''}}) + } + this.handleConfirm(e) + } } diff --git a/src/components/dialog/base-dialog.css.ts b/src/components/dialog/base-dialog.css.ts index 8f9cbdd..1f10d17 100644 --- a/src/components/dialog/base-dialog.css.ts +++ b/src/components/dialog/base-dialog.css.ts @@ -14,6 +14,7 @@ export default css` display: flex; justify-content: center; align-items: center; + z-index: 1000000; } .star-base-dialog { width: var(--auto-620px); diff --git a/src/components/dialog/base-dialog.ts b/src/components/dialog/base-dialog.ts index 7617df5..5f4af91 100644 --- a/src/components/dialog/base-dialog.ts +++ b/src/components/dialog/base-dialog.ts @@ -25,8 +25,6 @@ export default class StarBaseDialog extends StarBaseElement { confirm!: string - dataTo!: Object - onconfirm!: (e: Event) => void oncancel!: (e: Event) => void diff --git a/src/components/dialog/confirm-dialog.ts b/src/components/dialog/confirm-dialog.ts index 03de01f..ca69d9a 100644 --- a/src/components/dialog/confirm-dialog.ts +++ b/src/components/dialog/confirm-dialog.ts @@ -14,7 +14,6 @@ interface ConfirmDialogOptions { title?: string subtitle?: string image?: string - dataTo?: Object checkBoxText?: string cancel?: string confirm?: string diff --git a/src/components/dialog/prompt-dialog.css.ts b/src/components/dialog/prompt-dialog.css.ts index df5c26e..81b7451 100644 --- a/src/components/dialog/prompt-dialog.css.ts +++ b/src/components/dialog/prompt-dialog.css.ts @@ -2,7 +2,7 @@ import {css} from 'lit' export default css` header { - padding: var(--auto-46px) var(--auto-74px) var(--auto-36px); + padding: var(--auto-46px) var(--auto-74px) var(--auto-20px); } main { @@ -23,6 +23,7 @@ export default css` margin: 0; padding: 0; border: 0; + width: inherit; outline: none; max-height: none; height: inherit; @@ -56,11 +57,12 @@ export default css` display: flex; align-items: center; justify-content: center; + width: 100%; font-size: var(--auto-26px); color: var(--dialog-content); line-height: var(--auto-40px); max-height: var(--auto-524px); - margin: var(--auto-20px) var(--auto-74px) 0; + margin: 0 var(--auto-74px) var(--auto-20px); overflow: auto; } ` diff --git a/src/components/dialog/prompt-dialog.ts b/src/components/dialog/prompt-dialog.ts index d65ed46..b64327f 100644 --- a/src/components/dialog/prompt-dialog.ts +++ b/src/components/dialog/prompt-dialog.ts @@ -15,7 +15,6 @@ interface PromptDialogOptions { title?: string subtitle?: string value?: string - dataTo?: Object cancel?: string confirm?: string oncancel?: () => void @@ -31,7 +30,6 @@ export class StarPromptDialog extends StarBaseDialog { this.value = obj.value || '' this.cancel = obj.cancel || '取消' this.confirm = obj.confirm || '确定' - this.dataTo = obj.dataTo || {} this.oncancel = obj.oncancel || (() => {}) this.onconfirm = obj.onconfirm || (() => {}) } @@ -58,7 +56,12 @@ export class StarPromptDialog extends StarBaseDialog { ` : nothing}
- + ` @@ -96,9 +99,9 @@ export class StarPromptDialog extends StarBaseDialog { this.promptInput.focus() this.promptInput.setSelectionRange(0, this.value.length) } - // transmitPrompt() { - // let promptInput = this.promptInput.value.trim() //获取输入的内容 - // this.dataTo = Object.assign(this.dataTo, {promptInput: promptInput || ''}) - // this.handleConfirm() - // } + transmitPrompt(e: Event) { + let promptInput = this.promptInput.value.trim() //获取输入的内容 + Object.assign(e, {data: {promptInput: promptInput || ''}}) + this.handleConfirm(e) + } } diff --git a/src/test/panels/dialog/dialog.ts b/src/test/panels/dialog/dialog.ts index db84bb8..d84b8f0 100644 --- a/src/test/panels/dialog/dialog.ts +++ b/src/test/panels/dialog/dialog.ts @@ -144,6 +144,13 @@ export class PanelDialog extends LitElement { label="输入弹窗-自定义子标题" @click=${this.showPromptCustomSubtitle} > +
` @@ -303,6 +310,16 @@ export class PanelDialog extends LitElement { }) this.shadowRoot?.appendChild(starPromptDialog) } + showPromptModifyNativeName() { + const starPromptDialog = new StarPromptDialog({ + title: '本机名称', + subtitle: '使用蓝牙时，对方看到的你的设备名称', + value: 'Starkkylin Pad', + oncancel: () => console.log('取消'), + onconfirm: () => console.log('确定'), + }) + this.shadowRoot?.appendChild(starPromptDialog) + } public static override get styles() { return css``