MintUI中的mt-popup中嵌套mt-popup

常用的vue移动端组件库:官网

需求场景:弹窗上还有一层弹窗(如弹窗上的日期组件),使用MintUI中的mt-popup来实现

惯性思维,会这样写:

<mt-popup>
    <mt-popup></mt-popup>
</mt-popup>

这个是错误的,这样导致层级错误

正确写法:

<mt-popup></mt-popup>
<mt-popup></mt-popup>

还需要修改toast的堆叠层级,会被覆盖,在app.vue中修改

.mint-toast {
    z-index: 2043 !important;
}

 

<template> <list-view id="listview" style="flex: 1;background: #fff;" :refresher-enabled="false" :refresher-default-style="refresherStyle" :refresher-triggered="refresherTriggered" @scrolltolower="onScrollTolower" @scroll="scrollEvent" @touchstart="outsideTouchEvent" > <!-- 朋友圈背景图 --> <list-item class="top"> <image class="bg-image" src="/static/1.png" mode="aspectFill"></image> <view class="user-info uni-row" ref="user-info"> <text class="username">微信朋友圈</text> <image class="user-avatar" src="https://img0.baidu.com/it/u=1415523915,841919565&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1713286800&t=a9e21a0e5650a672fa2cbd3b133ed7e0" mode="widthFix"></image> </view> </list-item> <!-- 视频朋友圈内容 --> <list-item class="item uni-row"> <image class="avatar" src="/static/1.png" mode="scaleToFill"></image> <view class="content uni-row uni-column"> <text class="name">UNIAPP X</text> <text class="text">{{ text }}</text> <!-- 图片 / 视频 --> <view class="video"> <video :controls="false" class="video" poster="/static/1.png" src="https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4"></video> </view> <!-- 时间/点赞/评论按钮 --> <comment-line></comment-line> <!-- 点赞/评论信息列表 --> <comment></comment> </view> </list-item> <!-- 图文朋友圈内容 --> <list-item class="item uni-row" v-for="index in item_count"> <image class="avatar" src="/static/1.png" mode="scaleToFill"></image> <view class="content uni-row uni-column"> <text class="name">UNIAPP X {{ index }}</text> <text class="text">{{ text }}</text> <!-- 图片 / 视频 --> <view class="images uni-row"> <uni-moments-image :imageList="imageList"></uni-moments-image> </view> <!-- 定位 --> <text class="address mt-5">上海市 · 静安寺</text> <!-- 时间/点赞/评论按钮 --> <comment-line></comment-line> <!-- 点赞/评论信息列表 --> <comment></comment> </view> </list-item> </list-view> <!-- 自定义导航栏 --> <moments-header ref="header" :scrollTop="scrollTop"></moments-header> <!-- 点赞/评论 --> <comment-popup ref="commentPopup"></comment-popup> <!-- 评论输入框 --> <comment-input ref="commentInput"></comment-input> </template> <script> import MomentsHeader from './components/momentsHeader.uvue'; import CommentPopup from './components/comment-popup.uvue'; import CommentLine from './components/comment-line.uvue'; import CommentInput from './components/comment-input.uvue'; import Comment from './components/comment.uvue'; import uniMomentsImage from '../../components/uni-moments-image/uni-moments-image.uvue'; export default { components: { CommentLine, Comment, MomentsHeader, CommentInput, CommentPopup, uniMomentsImage }, data() { return { item_count: 20, listViewElement: null as UniListViewElement | null, refresherTriggered: false, refresherStyle: "none", text: `uni-app x,是下一代 uni-app,是一个跨平台应用开发引擎。uts是一门类ts的、跨平台的、新语言。uts在iOS端编译为swift、在Android端编译为kotlin、在Web端编译为js。`, imageList: [ "https://img1.baidu.com/it/u=1965663592,580944689&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1713286800&t=5c73d7f8aaa2a6f5114e659dd64e769d", "https://img0.baidu.com/it/u=3838093562,4126749835&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1713286800&t=a2cd3d4ac8c0f2024a348772577a9d0f", "https://img0.baidu.com/it/u=256816879,771155532&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1713286800&t=d5230b0cfdae75de3c452d973d302106", "https://img1.baidu.com/it/u=1965663592,580944689&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1713286800&t=5c73d7f8aaa2a6f5114e659dd64e769d", "https://img0.baidu.com/it/u=3838093562,4126749835&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1713286800&t=a2cd3d4ac8c0f2024a348772577a9d0f", "https://img0.baidu.com/it/u=256816879,771155532&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1713286800&t=d5230b0cfdae75de3c452d973d302106", ], scrollTop: 0, keyboardHeight: 200, // ios 默认键盘高度,这里占位 } }, onReady() { this.listViewElement = uni.getElementById<UniListViewElement>('listview'); // 监听点击评论事件 uni.$on('commentScrollEvent', (y: number) => this.listViewScrollByY(y - this.keyboardHeight + 40)); // 监听一次键盘高度回调 uni.$once('keyboardHeightEvent', (keyboardHeight: number) => { this.keyboardHeight = keyboardHeight; }); }, methods: { // 目标元素以外的touch事件 outsideTouchEvent() { // https://doc.dcloud.net.cn/uni-app-x/component/#methods (this.$refs['commentPopup'] as ComponentPublicInstance).$callMethod('hideCommentPopup'); // 隐藏点赞/评论 (this.$refs['commentInput'] as ComponentPublicInstance).$callMethod('hideKeyboard'); // 隐藏评论框与键盘 }, onScrollTolower(_ : ScrollToLowerEvent) { setTimeout(() => { this.item_count += 20 }, 300) }, scrollEvent(e : UniScrollEvent) { this.scrollTop = e.detail.scrollTop; }, listViewScrollByY(y : number) { this.listViewElement?.scrollBy(0, y) } } } </script> <style lang="scss" scoped> @import './index.scss'; </style> 这是nvue 好像 帮我改为vue2
07-18
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值