uniapp微信小程序底部弹窗自定义组件

基础弹窗效果组件

<template><view><viewclass="tui-actionsheet-class tui-actionsheet":class="[show ? 'tui-actionsheet-show' : '']"><view class="regional-selection">底部弹窗</view></view><!-- 遮罩层 --><viewclass="tui-actionsheet-mask":class="[show ? 'tui-mask-show' : '']"@tap="handleClickMask"></view></view>
</template><script>
import { reactive, toRefs, onBeforeMount, onMounted } from "vue";
export default {name: "tuiActionsheet",props: {//点击遮罩 是否可关闭maskClosable: {type: Boolean,default: true,},//显示操作菜单show: {type: Boolean,default: false,},},setup(props, ctx) {const data = reactive({});onBeforeMount(() => {});onMounted(() => {});// 点击遮罩层const handleClickMask = () => {if (!props.maskClosable) return;handleClickCancel();};// 点击取消const handleClickCancel = () => {ctx.emit("chooseCancel");};return {handleClickMask,handleClickCancel,...toRefs(data),};},
};
</script><style scoped lang="less">
.tui-actionsheet {width: 100%;position: fixed;left: 0;right: 0;bottom: 0;z-index: 9999;visibility: hidden;transform: translate3d(0, 100%, 0);transform-origin: center;transition: all 0.3s ease-in-out;// background: #eaeaec;min-height: 100rpx;
}.tui-actionsheet-show {transform: translate3d(0, 0, 0);visibility: visible;
}
.regional-selection {text-align: center;height: 400rpx;background: #fff;
}
.tui-actionsheet-mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.6);z-index: 9996;transition: all 0.3s ease-in-out;opacity: 0;visibility: hidden;
}.tui-mask-show {opacity: 1;visibility: visible;
}
</style>

在页面使用

父组件showSelection控制底部弹窗显示隐藏

maskClosable控制是否点击遮罩层关闭

chooseCancel弹窗触发关闭事件

 <!-- 底部弹窗 --><regional-selection:show="showSelection":maskClosable="true"@chooseCancel="chooseCancel"></regional-selection>
 const chooseCancel = () => {data.showSelection = false;};

效果预览

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/29392.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pytorch深度学习-----现有网络模型的使用及修改(VGG16模型)

系列文章目录 PyTorch深度学习——Anaconda和PyTorch安装 Pytorch深度学习-----数据模块Dataset类 Pytorch深度学习------TensorBoard的使用 Pytorch深度学习------Torchvision中Transforms的使用&#xff08;ToTensor&#xff0c;Normalize&#xff0c;Resize &#xff0c;Co…

PostgreSql 日期时间输出风格及顺序

一、概述 PostgreSQL 中日期时间的输出格式及顺序均由 datestyle 参数控制&#xff0c;两者可以被独立设置或者一起设置。默认值是 ISO,MDY。 二、输出格式 PostgreSQL 中时间/日期类型的输出格式可以设成四种风格之一&#xff1a;ISO 8601、SQL&#xff08;Ingres&#xff09…

有哪些简单的AI绘画软件?

随着人工智能技术的不断发展&#xff0c;越来越多的人工智能绘画软件出现了。人工智能绘画软件利用人工智能技术&#xff0c;通过计算机自动生成或辅助生成艺术作品。人工智能绘画软件通常集成了深度学习、计算机视觉和自然语言处理技术&#xff0c;可以模拟人类的创作过程&…

二、MySql库的操作

文章目录 一、库的操作&#xff08;一&#xff09;创建数据库&#xff08;二&#xff09;创建数据库案例&#xff08;三&#xff09;字符集和校验规则1、 查看系统默认字符集以及校验规则2、查看数据库支持的字符集3、查看数据库支持的字符集校验规则4、校验规则对数据库的影响…

区块链实验室(15) - 编译FISCO BCOS的过程监测

首次编译开源项目&#xff0c;一般需要下载很多依赖包&#xff0c;尤其是从github、sourceforge等下载依赖包时&#xff0c;速度很慢&#xff0c;编译进度似乎没有一点反应&#xff0c;似乎陷入死循环&#xff0c;似乎陷入一个没有结果的等待。本文提供一种监测方法&#xff0c…

Ubuntu常用压缩指令总结

一、tar tar是Linux系统中最常用的压缩工具之一&#xff0c;它的一个优点是它可以保留文件的权限和所有权信息。tar可以创建.tar文件&#xff08;通常称为"tarball"&#xff09;&#xff0c;或者与gzip或bzip2等工具结合使用来创建.tar.gz或.tar.bz2文件。gzip工具的…

线程和进程的区别

线程&#xff08;Thread&#xff09;和进程&#xff08;Process&#xff09;是操作系统中的两个基本概念&#xff0c;用于实现并发和多任务处理。它们之间的主要区别包括以下几个方面&#xff1a; 基本单位&#xff1a; 进程&#xff1a;进程是程序的一个执行实例&#xff0c;拥…

MySQL语法2

DQL语句介绍 DQL是数据查询语言&#xff0c;用来查询数据库中表的记录 DQL-基本查询语句 SELECT 字段列表 FROM 表名列表 WHERE 条件列表 GROUP BY 分组字段列表 HAVIMG 分组后条件列表 ORDER BY 排列字段列表 LIMIT 分页参数 讲解过程&#xff1a;基本查询、条件查询…

2023-08-09 LeetCode每日一题(整数的各位积和之差)

2023-08-09每日一题 一、题目编号 1281. 整数的各位积和之差二、题目链接 点击跳转到题目位置 三、题目描述 给你一个整数 n&#xff0c;请你帮忙计算并返回该整数「各位数字之积」与「各位数字之和」的差。 示例1&#xff1a; 示例2&#xff1a; 提示&#xff1a; 1 …

uniapp scroll-view 隐藏滚动条

/*清除滚动条 - 适配安卓*/::-webkit-scrollbar {width: 0;height: 0;color: transparent;}/*清除滚动条 - 适配IOS*/::-webkit-scrollbar {display: none;}

各种查找算法的效率分析

各种查找算法的效率 顺序查找 一般顺序表&#xff08;没有顺序&#xff0c;随机排列&#xff09; 成功时平均查找长度&#xff1a; 1 . . . n n n 1 2 \frac{1...n}{n}\frac{n1}{2} n1...n​2n1​失败时平均查找长度&#xff1a; n n n 有序顺序表&#xff08;按照递增或递…

【office】world设置标题

这里写目录标题 一、整理样式库二、设置标题编号三、设置标题其它信息1.设置 标题 1a.设置字体b.设置边框c.设置段落 2.设置 标题 2a.设置字体b.设置边框 3.设置 标题 3a.设置字体b.设置边框 4.设置 标题 4a.设置字体 5.设置 标题 5a.设置字体 一、整理样式库 1.选择“开始” …

Java数据类型,一文带你彻底拿捏~

——Java中运算符是一种特殊的符号&#xff0c;用来进行数据的运算、赋值和比较等 思维导图 一.算术运算符 1.什么是算术运算符 ——算术运算符是用于数据类型值之间&#xff0c;使用2个或以上的数据进行运算 2.算术运算符概括 算术运算符 解释示例&#xff0c;-正号&…

TypeScript 泛型的概念和基本使用

什么是TypeScript 泛型&#xff1f; 在定义函数&#xff0c;接口&#xff0c;类的时候不能预先确定使用的数据类型&#xff0c;而是在调用使用这些函数&#xff0c;接口&#xff0c;类的时候才能确定的数据类型&#xff1b; 1&#xff0c;单个泛型的参数 例如通过使用any这种…

自动化干货!一文搞懂Salesforce Flow/流中的Pause元素

通过自动化&#xff0c;帮助团队提升效率&#xff0c;将员工从那些重复、枯燥、耗时的工作中解放出来&#xff0c;转而从事更具创造性、更有价值的工作&#xff0c;是很多企业数字化转型朴素而又迫切的需求&#xff0c;也是世界No.1 CRM——Salesforce的一大领先优势。 Flow B…

【element-ui】 el-table 表格动态合并相同数据单元格最全教程,可指定列+自定义合并条件,附完整代码

el-table合并单元格 1.固定合并 官方挺提供的合并具体某行列的方法:el-table合并行或列通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。 该函数可以返回一个包含…

Docker实战-如何去访问Docker仓库?

导语   仓库在之前的分享中我们介绍过,它主要的作用就是用来存放镜像文件,又可以分为是公共的仓库和私有仓库。有点类似于Maven的中央仓库和公司内部私服。 下面我们就来介绍一下在Docker中如何去访问各种仓库。 Docker Hub 公共镜像仓库 Docker Hub 是Docker官方提供的最…

【Qt高级】QThread与QTimer组合使用引出的信号槽执行在哪个线程的思考【2023.08.06】

源码见 testQThread_QTimer… Qt 版本5.6.3 视频讲解&#xff1a;https://www.bilibili.com/video/BV15P411C79i/ 链接: 视频讲解 简介 想法很单纯&#xff0c;就是主线程启动一个子线程&#xff0c;子线程里启动一个定时器&#xff0c;定时执行一些任务&#xff0c;然鹅实际开…

Yolov5缺陷检测/目标检测 Jetson nx部署Triton server

使用AI目标检测进行缺陷检测时&#xff0c;部署到Jetson上即小巧算力还高&#xff0c;将训练好的模型转为tensorRT再部署到Jetson 上供http或GRPC调用。1 Jetson nx 刷机 找个ubuntu 系统NVIDIA官网下载安装Jetson 的sdkmanager一步步刷机即可。 本文刷的是JetPack 5.1, 其中包…

Oracle日志相关操作

1.归档日志设置 # 切换账号 $ su - oracle# 登录oracle的sys账户 $ sqlplus / as sysdbasql> archive log list; #查看是不是归档方式 SQL> archive log list; Database log mode Archive Mode Automatic archival Enabled Archive destin…