文章背景:
- 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;
}