当前位置：首页 > news >正文

uniapp中使用＜cover-view＞标签

news 来源：原创 2025/5/1 20:37:15

文章背景：

uniapp中遇到了原生组件(canvas)优先级过高覆盖vant组件

解决办法：

使用<cover-view>标签

踩坑：

我想实现的是一个vant组件库中动作面板的效果，能够从底部弹出框，让用户进行选择，我直接用了<cover-view>标签包裹<van-action-sheet>也是不能展示的
在微信开发者工具测试的样式没有因为被优先级覆盖的问题，只有真机上会出现这个问题
微信开发者工具适配的苹果手机，安卓机的情况下，不能用margin，只能用padding调整样式

部分代码：

 <cover-view v-if="isModalVisible" class="bottom-modal"><cover-view class="modal-mask" @click="handleCancel"></cover-view><cover-view class="modal-content"><cover-view class="button-group"><cover-view @click="handleSave">保存到相册</cover-view><cover-view @click="handleCancel">取消</cover-view></cover-view></cover-view></cover-view>


.bottom-modal {position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;background: rgba(0, 0, 0, 0.5); /* 背景遮罩 */z-index: 9999; /* 确保弹窗处于最上层 *//* border-radius: 20px; */
}.modal-mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.3); /* 半透明的背景 */z-index: 9998; /* 背景遮罩层级 */
}.modal-content {position: absolute;bottom: -15px;left: 0;width: 100%;background: #fff;z-index: 10000; /* 确保内容在弹窗上面 */border-radius: 20px;
}.button-group {padding: 15px 10px 30px 20px;
}.btn {flex: 1;height: 44px;line-height: 44px;text-align: center;border-radius: 8px;font-size: 16px;
}