uniapp中使用<cover-view>标签

文章背景:

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

解决办法:

  • 使用<cover-view>标签

踩坑:

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

部分代码:

javascript 复制代码
 <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>
javascript 复制代码
.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;
}
相关推荐
我在北京coding43 分钟前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机1 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人1 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
涔溪2 小时前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
翻滚吧键盘2 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。2 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~3 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中3 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我3 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html