uniapp遇到的一个苹果拍照线条被挡，安卓不会的情况

两个月菜鸟

于 2022-07-27 14:54:02 发布

阅读量150

点赞数

CC 4.0 BY-SA版权

文章标签： vue css

本文链接：https://blog.csdn.net/qq_45314219/article/details/126013636

本文介绍了一个Vue应用中如何通过设置`z-index`属性来解决元素覆盖问题。示例代码展示了在相机组件上覆盖一张图片，以便在拍照时显示奶油线效果。当`faceSrc`为空时，显示相机并用`cover-image`覆盖，同时提供了一个名为`takePhoto`的方法用于调用相机并处理拍照后的图像。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
cream层级比较高所以给cover-image加了z-index

<view class="creamBox">
        <view class="noless"></view>
        <view v-if="faceSrc != ''" class="viewImage">
          <image :src="faceSrc" mode="aspectFill"></image>
        </view>

        <view v-else class="paizhao">
          <camera
            :binderror="handleCameraError"
            :device-position="devicePosition"
            flash="off"
            class="xiangji"
          >
            <cover-image
              src="/pagesLogin/static/cream-line.png"
              style="width: 100%; height: 90%; margin-top: 20px; z-index: 998"
            ></cover-image>
          </camera>
        </view>
      </view>

 //自定义拍照
  takePhoto(e: any) {
    this.faceSrc = "";

    const ctx = uni.createCameraContext();

    ctx.takePhoto({
      quality: "high",
      success: (res) => {
        this.faceSrc = res.tempImagePath;
        this.uploadFace(this.faceSrc);
      },
    });
  }