Android 中的电容器相机预览上方未显示叠加层（Vue js + Ionic）

Question

我正在尝试使用 Vue 3 (JS) 和 Ionic 6 启动 capacitor-community/camera-preview 插件。我已遵循许多其他线程中建议的所有解决方案。没有什么能解决我的问题。 当我尝试 toBack: true 选项时，没有显示相机预览。当我将其设置为 false 时，仅显示相机预览。不显示叠加。该应用程序在 Web 浏览器中按预期工作。但是，当我尝试使用 Android 模拟器时，我遇到了这个问题。

这是我的 Vue 组件。

<template>
  <ion-page>
    <ion-content :fullscreen="true">
      <div id="content">
        <div class="my-overlay">
          <h2>Overlay Text</h2>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<script>
  import { IonContent, IonPage, } from "@ionic/vue";
  import { Plugins } from "@capacitor/core";
  export default {
    name: "CameraPreview",
    components: { IonPage, IonContent },
    data() {
      return {
        imageSrc: '',
      };
    },

    mounted() {
      this.startCamera();
    },
    methods: {
     async startCamera() {
        await Plugins.CameraPreview.start({
          parent: "content",
          position: "rear",
          className: "content-camera-preview",
          toBack: true
        });
      }
    },
  };
</script>

<style scoped lang="scss">
ion-content {
   --background: transparent !important;
}
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.my-overlay{
  color: red;
  z-index: 12;
  position: absolute;
  top:30%;
  left:4;
}
.content-camera-preview {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
}

</style>

package.json

{
  "name": "test-app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",
    "build": "vue-cli-service build --skip-plugins @vue/cli-plugin-eslint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@capacitor-community/camera-preview": "^1.2.1",
    "@capacitor/android": "^3.3.3",
    "@capacitor/app": "1.0.7",
    "@capacitor/camera": "^1.2.2",
    "@capacitor/core": "3.3.3",
    "@capacitor/filesystem": "^1.0.6",
    "@capacitor/haptics": "1.1.3",
    "@capacitor/keyboard": "1.2.0",
    "@capacitor/status-bar": "1.0.6",
    "@capacitor/storage": "^1.2.3",
    "@ionic/pwa-elements": "^3.0.2",
    "@ionic/vue": "^6.0.0",
    "@ionic/vue-router": "^6.0.0",
    "axios": "^0.24.0",
    "bulma": "^0.9.3",
    "core-js": "^3.6.5",
    "dom-to-image": "^2.6.0",
    "dom-to-image-more": "^2.8.0",
    "mitt": "^3.0.0",
    "vue": "^3.2.21",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@capacitor/cli": "3.3.3",
    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
    "@vue/cli-plugin-router": "~5.0.0-rc.1",
    "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
    "@vue/cli-service": "~5.0.0-rc.1",
    "@vue/test-utils": "^2.0.0-rc.16",
    "@vue/vue3-jest": "^27.0.0-alpha.3",
    "babel-jest": "^27.3.1",
    "cypress": "^8.7.0",
    "eslint": "^8.4.1",
    "eslint-plugin-vue": "^8.2.0",
    "jest": "^27.3.1",
    "node-sass": "^5.0.0",
    "sass": "^1.26.3",
    "sass-loader": "^10.0.5",
    "stylelint": "^14.1.0",
    "stylelint-config-standard": "^24.0.0",
    "stylelint-config-standard-scss": "^3.0.0",
    "ts-jest": "^27.0.7",
    "vue-cli-plugin-vuetify": "~2.4.3"
  },
  "description": "An Ionic project"
}

我已将以下样式添加到主 scss 文件中。

ion-content {
  --background: transparent !important;
}

AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

提前感谢所有尝试回答的人。

Answer 1

我通过找到覆盖的元素解决了这个问题。将 --background: transparent !important; 添加到 ion-content 并没有解决我的问题。最后，我在 App.vue 的主父 div 中插入了透明背景色，确实解决了这个问题。

App.vue

#app {
  background-color: transparent !important;
}

此外，将以下样式添加到全局 scss 文件是安全的。

body,
html {
  background-color: transparent !important;
}