zxing-扫描仪调整为带角度的全高

Question

我需要我的扫描仪是全高的。因为它还将用于其他设备，如平板电脑、笔记本电脑或网页中的手机。

我的代码如下所示：

<zxing-scanner
  *ngIf="!showHelp"
  [previewFitMode]="'fill'"
  [enable]="true"
  [formats]="['QR_CODE', 'EAN_13', 'CODE_128', 'DATA_MATRIX']"
  [torch]="isFlashlightOn"
  (scanSuccess)="onScanSuccess($event)"
  (torchCompatible)="onTorchCompatible($event)"
  (camerasFound)="camerasFoundHandler($event)"
  (camerasNotFound)="camerasNotFoundHandler()"
>
</zxing-scanner>

链接库：https://github.com/zxing-js/ngx-scanner

它看起来是这样的：

​

但它应该是全高的。

谢谢

Answer 1

这是一个可行的解决方案：

my-component.component.html

<zxing-scanner previewFitMode="cover"></zxing-scanner>

my-component.component.scss

::ng-deep {

  zxing-scanner {
    /* Root component needs to have height: 100% */
    height: 100%;
    /* Optional : you probably want full-width as well for landscape orientation or tablets */
    width: 100%;

  }

  video {
    /* !important because component already sets height property */
    height: 100% !important;
  }
}