文章背景：

• 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;
}