时间戳

首页 > 解决方案 > 如何在逻辑层设置 PrimeNG ConfirmDialog 小部件宽度？

angular - 如何在逻辑层设置 PrimeNG ConfirmDialog 小部件宽度？

问题描述

我正在使用 "primeng": "^11.2.0" 和以下工作 ConfirmDialog 代码

  this.confirm.confirm({
      header: 'Announcement',
      message: this.userCompany.announcement.promptMsg,
      acceptLabel: this.userCompany.announcement.labelOK? this.userCompany.announcement.labelOK:'OK',
      rejectLabel: this.userCompany.announcement.labelDoNotShowAgain? this.userCompany.announcement.labelDoNotShowAgain:'Do not show again',
      accept: () => {
        console.log('accepted')
      },
      reject: () => {
        console.log('rejected')
      }
    });

这里是移动布局的结果。它似乎不是“响应式”且对移动设备不友好。 在此处输入图像描述

当我参考官方文档时，似乎“样式”属性可用。我将代码更改为包含“样式”属性（如下所示），它提示错误

   this.confirm.confirm({
      header: 'Announcement',
      message: this.userCompany.announcement.promptMsg,
      style: {width: '50vw'},
      acceptLabel: this.userCompany.announcement.labelOK ? this.userCompany.announcement.labelOK : 'OK',
      rejectLabel: this.userCompany.announcement.labelDoNotShowAgain ? this.userCompany.announcement.labelDoNotShowAgain : 'Do not show again',
      accept: () => {
        console.log('accepted')
      },
      reject: () => {
        console.log('rejected')
      }
    });

错误

error TS2345: Argument of type '{ header: string; message: any; style: { width: string; }; acceptLabel: any; rejectLabel: any; accept: () => void; reject: () => void; }' is not assignable to parameter of type 'Confirmation'.
  Object literal may only specify known properties, and 'style' does not exist in type 'Confirmation'.
    
    117       style: {width: '50vw'},

那么我怎样才能让confirmDialog 框在移动视图中看起来更好（调整逻辑中的样式，而不是模板文件）。

感谢您的帮助。

标签： angulartypescriptprimeng

解决方案

没错，confirm() 方法不支持 style 属性。源代码显示了同样的事情。文档可能不正确。我们只需要在模板中使用样式属性。

<p-confirmDialog [style]="{width: '50vw'}" ></p-confirmDialog>

ConfirmDialog的源代码显示了要支持的样式属性。

如果你还想在组件类中做，最多也可以这样做。

组件.ts

styleValue={width: '50vw'};

组件.html

<p-confirmDialog [style]="styleValue" ></p-confirmDialog>

区分“关闭”和“拒绝”的逻辑（如评论中所述）

组件.html

<p-confirmDialog #cd>
    <p-footer>
        <button type="button" pButton icon="pi pi-times" label="No" (click)="no()"></button>
        <button type="button" pButton icon="pi pi-check" label="Yes" (click)="yes()"></button>
    </p-footer>
</p-confirmDialog>

组件.ts

no() {
  // Handle logic for no, then close
  cd.reject();
}
yes() {
  // Handle logic for yes, then close
  cd.accept();
}

推荐阅读