How to hide the the app view when using a QR reader plugin?



  • I’m using the cordova-plugin-qrscanner (https://github.com/bitpay/cordova-plugin-qrscanner) in my Quasar application.

    When a button is clicked, the following code is executed:

    QRScanner.show();
    QRScanner.scan(this.displayContents);
    

    As the plugin description says about the show() method:

    Configures the native webview to have a transparent background, then sets the background of the <body> and <html> DOM elements to transparent, allowing the webview to re-render with the transparent background.
    

    The problem is, while I get transparent background, all my list items and q-toolbar are still visible above the camera preview.

    I want only the camera preview and a FAB that closes the preview to be visible. How do I achieve this?



  • @Technical

    You could hide every component that causes problems with a v-if or v-show.

    You could navigate to a new page without all these components you don’t want to see.

    Did you see this one:
    https://github.com/patrickmonteiro/quasar-qrcode-reader


Log in to reply