基于Vue3写一个uniapp的弹窗

devtools/2025/2/15 21:52:27/
弹窗组件<!-- components/CustomDialog.vue -->
<template><view v-if="visible" class="dialog-overlay" @touchmove.stop.prevent="moveHandle"><view class="dialog-container"><view class="dialog-header"><view class="title"><image src="/static/info.png"></image>{{ title }}</view><view @click="closeDialog" class="close-btn" v-show="isShowCloseIcon">×</view></view><view class="dialog-content"><slot> </slot></view><view v-if="isShowFooter"><slot name="footer"><view class="dialog-footer"><view @click="onCancel" class="btn cancel-btn">{{ cancelText }}</view><view @click="onConfirm" class="btn confirm-btn">{{ confirmText }}</view></view></slot></view></view></view>
</template><script setup>
import { ref } from 'vue'const props = defineProps({title: {type: String,default: '提示'},cancelText: {type: String,default: '取消'},confirmText: {type: String,default: '确定'},isShowFooter: {type: Boolean,default: true},isShowCloseIcon: {type: Boolean,default: false},modelValue: {type: Boolean,default: false}
})const visible = ref(props.modelValue)const emit = defineEmits(['update:modelValue', 'cancel', 'confirm'])const closeDialog = () => {emit('update:modelValue', false)visible.value = false
}const onCancel = () => {emit('cancel', false)closeDialog()
}const onConfirm = () => {emit('confirm')closeDialog()
}
const moveHandle = () => {}
watch(() => props.modelValue,(newVal) => {visible.value = newValconsole.log('props.modelValue', props.modelValue)emits('update:modelValue', newVal)}
)
</script><style scoped lang="scss">
page {height: 100%;overflow-y: hidden;
}
.dialog-overlay {z-index: 100;position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;overflow: hidden;
}.dialog-container {background-color: #fff;border-radius: 16rpx;display: flex;flex-direction: column;width: 608rpx;
}.dialog-header {padding: 32rpx;display: flex;justify-content: space-between;
}.close-btn {background: none;border: none;font-size: 24px;
}
.title {font-size: 32rpx;font-weight: 600;color: #002344;image {width: 30rpx;height: 30rpx;margin-right: 9rpx;}
}
.dialog-content {margin: 0 32rpx 32rpx 32rpx;background: #f7f6ff;font-size: 28rpx;min-height: 88rpx;border-radius: 20rpx;padding: 20rpx;font-size: 30rpx;/* margin: 32rpx 0; */
}.dialog-footer {display: flex;justify-content: center;padding: 32rpx 0;
}
.btn {flex: 1;display: flex;align-items: center;justify-content: center;color: #576b95;font-size: 30rpx;
}
.cancel-btn {border-right: 2rpx solid #e5e5e5;
}.inBounce_success_wrap,
.rand_dialog_wrap {display: flex;flex-direction: column;
}
</style>//
使用<SamplingWarningDialog title="抽样" v-if="showRandomDialog" v-model="showRandomDialog"><view class="rand_dialog_wrap"><view class="rand_dialog_content">本次抽样:货物次序 {{ curData.randomItemSequence }}</view></view><template #footer><view class="rand_dialog_ok_txt" @tap="showRandomDialog = false">我知道了</view></template></SamplingWarningDialog></view>

注意:自定义弹窗在长列表情况下会出现弹窗遮罩滚动内容依然可以滚动的情况。这时候只需要通过meta-page来控制即可

  <page-meta :page-style="`overflow:${showMeta ? 'hidden' : 'visible'};`"></page-meta><view class="home">xxxxx<SamplingWarningDialog title="抽样" v-if="showRandomDialog" v-model="showRandomDialog"><view class="rand_dialog_wrap"><view class="rand_dialog_content">本次抽样:货物次序 {{ curData.randomItemSequence }}</view></view><template #footer><view class="rand_dialog_ok_txt" @tap="showRandomDialog = false">我知道了</view></template></SamplingWarningDialog></view><script lang="ts" setup>//弹窗相关处理
const showMeta = ref(false) //控制meta-page,防止弹窗遮罩列表滚动
const showInbounceSuccessDialog = ref(false) //确认入库弹窗
const showRandomDialog = ref(false) //本次抽样:货物次序弹窗
const curData = ref({}) //对话框的数据//弹窗:手动入库时存在两种形态
const openDialog = (data) => {console.log('openDialog1', data)curData.value = data.datashowMeta.value = trueif (data.type === 'noGoodsWarn') {showInbounceSuccessDialog.value = true} else {showRandomDialog.value = true}
}
const closeDialog = () => {//设置meta-page的display,放开滚动showMeta.value = false
}</script>


http://www.ppmy.cn/devtools/140692.html

相关文章

C++设计模式之外观模式

动机 下图中左边方案的问题在于组件的客户和组件中各种复杂的子系统有了过多的耦合&#xff0c;随着外部客户程序和各子系统的演化&#xff0c;这种过多的耦合面临很多变化的挑战。 如何简化外部客户程序和系统间的交互接口&#xff1f;如何将外部客户程序的演化和内部子系统…

【opencv入门教程】7.读取图像

文章选自&#xff1a; 一、imread说明 CV_EXPORTS_W Mat imread( const String& filename, int flags IMREAD_COLOR ); 功能&#xff1a;读取图像参数&#xff1a;param filename 导入图像路径.param flags 图像类型标识位enum ImreadModes {IMREAD_UNCHANGED …

Vue Web开发(二)

1. 项目搭建 1.1. 首页架子搭建 使用Element ui中的Container布局容器&#xff0c;选择倒数第二个样式&#xff0c;将代码复制到Home.vue。 1.1.1.下载less &#xff08;1&#xff09;下载less样式 npm i less   &#xff08;2&#xff09;下载less编辑解析器 npm i less…

12.03 深度学习-池化+卷积扩展+感受野

# ## 3.池化层 # 池化层 (Pooling) 降低维度, 缩减模型大小&#xff0c;提高计算速度. 即: 主要对卷积层学习到的特征图进行下采样&#xff08;SubSampling&#xff09;处理。 # 1. 最大池化 max pooling # 最大池化是从每个局部区域中选择最大值作为池化后的值&#xf…

RabbitMQ核心概念及工作流程 + AMQP

文章目录 一. RabbitMQ核心概念1. Producer, Consumer, Broker2. Connection和Channel3. Virtual host4. Queue5. Exchange 二. RabbitMQ的工作流程三. AMQP四. web界面操作对用户操作对虚拟机操作 一. RabbitMQ核心概念 RabbitMQ是⼀个消息中间件, 也是⼀个⽣产者消费者模型.…

海选女主角

Description 光头强虽然很喜欢教书&#xff0c;但是迫于生活压力&#xff0c;不得不想办法在业余时间挣点外快以养家糊口。 “做什么比较挣钱呢&#xff1f;筛沙子没力气&#xff0c;看大门又不够帅...”光头强老师很是无奈。 “冯小刚比你还难看&#xff0c;现在多有钱呀&a…

uniapp微信小程序任意图片铺满, 超出下滑

uniapp微信小程序任意图片铺满, 超出下滑 直接上代码 <template><scroll-view scroll-y"true" class"rule-box"><img :src"img" mode"widthFix" class"rule-img"></scroll-view> </template&g…

第十六届蓝桥杯模拟赛(第一期)-Python

本次模拟赛我认为涉及到的知识点&#xff1a; 分解质因数 Python的datetime库 位运算 简单dp 1、填空题 【问题描述】 如果一个数 p 是个质数&#xff0c;同时又是整数 a 的约数&#xff0c;则 p 称为 a 的一个质因数。 请问 2024 有多少个质因数。 【答案提交】 这是一道结…