Question

我在我的应用程序中使用primeNg动态对话框

show() {
    const ref = this.dialogService.open(CarsListDemo, {
        header: 'Choose a Car',
        width: '70%'
    });
}

有指向primeng文档的链接： https://www.primefaces.org/primeng/#/dynamicdialog

我需要对话框可调整大小和可拖动。任何想法如何做到这一点？

我是新手，对任何建议或指导将不胜感激！

Answer 1

以防万一，就像我一样，我找到了使PrimeNg动态对话框拖动的方法，我使用了jQuery UI。

npm install jquery --save
npm install jquery jquery-ui-dist --save

在angular.json中添加：

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/jquery-ui-dist/jquery-ui.js",

              ]

CSS：

.customDialog.ui-dialog {

    & .ui-dialog-titlebar {

        cursor: move !important;

    }

DynamicDialogDemo组件为对话框组件使用样式类

export class DynamicDialogDemo {

    constructor(public dialogService: DialogService, public messageService: MessageService) {}

    show() {
        const ref = this.dialogService.open(CarsListDemo, {
            header: 'Choose a Car',
            styleClass:"customDialog"
            }
        });

        ref.onClose.subscribe((car: Car) =>{
            if (car) {
                this.messageService.add({severity:'info', summary: 'Car Selected', detail:'Vin:' + car.vin});
            }
        });
    }

}

魔术从这里开始

declare var $: any;
export class CarsListDemo implements OnInit {

    cars: Car[];

    constructor(private carService: CarService, public ref: DynamicDialogRef, public config: DynamicDialogConfig) { }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars = cars);

       $(document).ready(function(){
        let dilogAria: any = $('.ui-dynamicdialog');
        dilogAria.draggable({
            handle: '.ui-dialog-titlebar',
            cursor: "move",
            cursorAt: { top: -250, left: 0 }
        });

      });
    }

    selectCar(car: Car) {
        this.ref.close(car);
    }

}

我设置光标的原因，是当对话框开始拖动时，鼠标光标跳了……我可能需要一种更好的方法来设置光标。

PrimeNg动态对话框可调整大小并拖动

1 个答案: