对uniapp弹窗封装

1.新建文件wyb-popup在里面创建wyb-popup.vue和iconfont.css

<template><view v-if="isShow"><view@tap.stop.prevent@touchmove.stop.preventclass="wyb-popup-box":style="{transitionDuration: duration + 'ms',opacity: contentOpacity || (type === 'center' ? 0 : 1),transform: contentTransform || autoTransform,zIndex: zIndex,borderTopRightRadius: type === 'center' || type === 'bottom' || type === 'left' ? radius + 'px' : 0,borderTopLeftRadius: type === 'center' || type === 'bottom' || type === 'right' ? radius + 'px' : 0,borderBottomRightRadius: type === 'center' || type === 'top' || type === 'left' ? radius + 'px' : 0,borderBottomLeftRadius: type === 'center' || type === 'top' || type === 'right' ? radius + 'px' : 0,width: autoWidth,height: autoHeight,minWidth: width + 'rpx',minHeight: height + 'rpx',top: sizeChange && type === 'center' ? winReTop : autoTop,bottom: autoBottom,left: autoLeft,right: autoRight,backgroundColor: bgColor}"><view class="wyb-popup-header" v-if="showHeader"><image class="wyb-popup-custom-header" v-if="showHeader" :src="showHeaderImage" /></view><view class="line"></view><view class="wyb-popup-close" v-if="showCloseIcon"><image class="wyb-popup-custom-close" v-if="showCloseIcon && closeIcon" :src="closeIcon" @tap="hide" style="width: 58upx;height: 58upx;" /><view v-if="showCloseIcon && !closeIcon" class="iconfont icon-close" @tap="hide" /></view><scroll-viewclass="wyb-popup-container":style="{width: autoWidth,height: autoHeight}":enable-flex="true":scroll-y="scrollY":scroll-x="scrollX"><view class="wyb-popup-slot"><slot></slot></view></scroll-view></view><viewclass="wyb-popup-mask"@tap.stop="close"@touchmove.stop.prevent:style="{opacity: maskOpacity,transitionDuration: duration + 'ms',backgroundColor: 'rgba(0, 0, 0, ' + maskAlpha + ')',zIndex: zIndex - 1}"/></view>
</template><script>
export default {data() {return {w: uni.getSystemInfoSync().screenWidth,h: uni.getSystemInfoSync().screenHeight,isShow: false,winReBottom: '',winReTop: '',sizeChange: false,contentOpacity: null,contentTransform: null,maskOpacity: 0};},computed: {autoCenterTop() {let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;let windowHeight = uni.getSystemInfoSync().windowHeight;let popupHeight = this.rpxToPx(this.height);let navHeight = 44;let result = `${(windowHeight - popupHeight) / 2 - this.negativeTop}px`;return result;},autoTransform() {let result = '';switch (this.type) {case 'center':if (this.centerAnim === 'zoom-lessen') {result = `scale(${this.zoomLessenMulti})`;} else if (this.centerAnim === 'slide-up') {result = `translateY(${100 * this.slideMulti}%)`;} else if (this.centerAnim === 'slide-down') {result = `translateY(${-100 * this.slideMulti}%)`;} else if (this.centerAnim === 'fade') {result = 'auto';}break;case 'bottom':result = 'translateY(100%)';break;case 'top':result = 'translateY(-100%)';break;case 'left':result = 'translateX(-100%)';break;case 'right':result = 'translateX(100%)';break;}return result;},autoWidth() {if (this.type === 'center') {return `${this.width}rpx`;} else {if (this.mode === 'size-fixed') {if (this.type === 'top' || this.type === 'bottom') {return '100%';} else {return `${this.width}rpx`;}} else {if (this.type === 'top' || this.type === 'bottom') {return '100%';} else {return 'auto';}}}},autoHeight() {if (this.type === 'center') {return `${this.height}rpx`;} else {if (this.mode === 'size-fixed') {if (this.type === 'left' || this.type === 'right') {return '100%';} else {return `${this.height}rpx`;}} else {if (this.type === 'left' || this.type === 'right') {return '100%';} else {return 'auto';}}}},autoTop() {if (this.type === 'center') {return this.autoCenterTop;} else if (this.type === 'bottom') {return 'auto';} else {return 0;}},autoBottom() {if (this.type === 'center' || this.type === 'top') {return 'auto';} else {return 0;}},autoLeft() {if (this.type === 'center') {return `${(this.w - this.rpxToPx(this.width)) / 2}px`;} else if (this.type === 'right') {return 'auto';} else {return 0;}},autoRight() {if (this.type === 'center' || this.type === 'left') {return 'auto';} else {return 0;}}},props: {type: {type: String,default: 'bottom'},mode: {type: String,default: 'size-auto'},height: {type: [String, Number],default: 500},width: {type: [String, Number],default: 500},radius: {type: [String, Number],default: 0},zIndex: {type: [String, Number],default: 10076},maskClickClose: {type: Boolean,default: true},maskAlpha: {type: Number,default: 0.8},duration: {type: Number,default: 400},showCloseIcon: {type: Boolean,default: false},showHeader: {type: Boolean,default: false},scrollY: {type: Boolean,default: false},scrollX: {type: Boolean,default: false},closeIconPos: {type: String,default: 'top-right'},closeIcon: {type: String,default: '../../static/popup/close-rule.png'},closeIconSize: {type: [String, Number],default: '20'},vertOffset: {type: [String, Number],default: '22'},horiOffset: {type: [String, Number],default: '22'},centerAnim: {type: String,default: 'zoom-lessen'},bgColor: {type: String,default: '#ffffff'},zoomLessenMulti: {type: Number,default: 1.15},slideMulti: {type: Number,default: 1},negativeTop: {type: Number,default: 0},showHeaderImage: {type: String,default: ''}},mounted() {// #ifdef H5let winHeight = uni.getSystemInfoSync().windowHeight;uni.onWindowResize(res => {this.sizeChange = true;if (this.type === 'bottom') {this.winReBottom = winHeight - res.size.windowHeight + 'px';} else if (this.type === 'center') {this.winReTop = (res.size.windowHeight - this.rpxToPx(this.height)) / 2 - this.negativeTop + 'px';}});// #endif},methods: {close() {this.maskClickClose && this.hide();},show() {this.isShow = true;// #ifndef H5this.$nextTick(() => {this.maskIn();this.contentIn();this.wait(this.duration + 1).then(() => {this.$emit('show', {pageScroll: false,overflow: 'hidden'});});});// #endif// #ifdef H5this.wait(10).then(() => {this.maskIn();this.contentIn();this.wait(this.duration + 1).then(() => {this.$emit('show', {pageScroll: false,overflow: 'hidden'});});});// #endif},hide() {this.contentOut();this.maskOut();this.wait(this.duration + 1).then(() => {this.isShow = false;this.$emit('hide', {pageScroll: true,overflow: 'scroll'});});},contentIn() {switch (this.type) {case 'center':if (this.centerAnim === 'zoom-lessen') {this.contentOpacity = 1;this.contentTransform = 'scale(1)';} else if (this.centerAnim === 'slide-up' || this.centerAnim === 'slide-down') {this.contentOpacity = 1;this.contentTransform = 'translateY(0)';} else if (this.centerAnim === 'fade') {this.contentOpacity = 1;}break;case 'bottom':case 'top':this.contentTransform = 'translateY(0)';break;case 'left':case 'right':this.contentTransform = 'translateX(0)';break;}},contentOut() {this.contentOpacity = null;this.contentTransform = null;},maskIn() {this.maskOpacity = 1;},maskOut() {this.maskOpacity = 0;},rpxToPx(rpx) {return (rpx / 750) * this.w;},wait(time) {return new Promise(resolve => {setTimeout(() => {resolve();}, time);});}}
};
</script><style>
@import './iconfont.css';
.wyb-popup-header {position: absolute;height: 110rpx;width: 100%;/* background-color: red; */z-index: 20000;top: -80rpx;text-align: center;
}
.wyb-popup-header .wyb-popup-custom-header {width: 287rpx;height: 100%;
}
.line {width: 2upx;height: 0upx;background-color: #8e8987;position: absolute;bottom: -80upx;left: 250upx;
}.wyb-popup-box {width: 500upx;height: auto;position: fixed;transition-timing-function: ease-out;transition-property: opacity, transform;
}.wyb-popup-container {position: relative;box-sizing: border-box;
}.wyb-popup-slot {width: 100%;height: 100%;
}.wyb-popup-mask {position: fixed;top: 0;left: 0;bottom: 0;right: 0;transition-timing-function: ease;transition-property: opacity, transform;
}.wyb-popup-close {position: absolute;font-size: 40rpx;color: #808080;z-index: 20000;bottom: -80upx !important;left: 47% !important;
}.wyb-popup-custom-close {left: 0;top: 0;position: absolute;
}
</style>

3.iconfont.css代码在这里插入代码片@font-face {font-family: “iconfont”;
src: url(‘data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKUAAsAAAAABlAAAAJJAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApcdgE2AiQDCAsGAAQgBYRtBy8bmwXIrjBu4UkbIjvjLimCmu1EP9KHAd4jgmi/3+zde18toRbpnkUTzRKRUkgQE6RA9xL+tMuG6RYp8bFsgmbcecAB9mDhH67tDS3pQsIsmSbPL7chM1RKsFr5mNDBoUDPJItlaZG8fvhi/tciWcbRfJ7L6U2gA1l9oBz3orEmTRpAvTigAPfCKLISSiNtGLvAJdwn0DCHgMfN/kgLK1jLAvE0p7YWzoUVCparCZWavYV4U6qllxTNa/j5+JeKMEmZWQ1njw1PK39hF+TnFG59QoSADpfI2AEUxFVt+oQpGIc10pYlYF+1wRfTfZfYq12wv86qboEZqLgnpau61VyC21L06V8d9cuJmT795hWPJp8ayHj0wrZNx+/+1Nzdf8MBtu9H2p+tgB5tn/W1PEZvgeD5Xf/if61ZgE9foa3Qz0ttd57gtyh79hS62nKmQlXWDiczp2tqaGAK+we+sZbxPeRDzXiEt2o2RVazQhbsDkpNu6io2UPDNn24aagxRVHHlgkQehaSjg9kPYcs2IvSxENFL0w03ASd2bQW82is0d6iB+YE2ZWCOO5tNKodIN0xe51Vh/wE15t5DGQsUcy1UOB6jg19T1NjSyCsJQcFHkPGJJS1XKC7jaXtVpV4nNS9KGYl16KOrCHbFvIA4wRkLkkg/uitaOn9A4jaYWzrlq6a/ARa25hPDiRG9CBbBtGr616e6faolGGLAMGaxAEFZiGGkUCpn7WAXFsxaURSKeH2oNDXEFvfxL/uGDRY1hT2lKy8Y3KDmgYA’) format(‘woff2’)
}

.iconfont {
font-family: “iconfont” !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-close:before {
content: “\e622”;
}

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

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

相关文章

iceberg学习笔记（2）—— 与Hive集成

iceberg学习笔记（2）—— 与Hive集成

前置知识&#xff1a; 1.了解hadoop基础知识&#xff0c;并能够搭建hadoop集群 2.了解hive基础知识 3.Iceberg学习笔记&#xff08;1&#xff09;—— 基础知识-CSDN博客 可以参考&#xff1a; Hadoop基础入门&#xff08;1&#xff09;&#xff1a;框架概述及集群环境搭建_TH…
阅读更多...
【Go学习之 go mod】gomod小白入门，在github上发布自己的项目（项目初始化、项目发布、项目版本升级等）

【Go学习之 go mod】gomod小白入门，在github上发布自己的项目（项目初始化、项目发布、项目版本升级等）

参考 Go语言基础之包 | 李文周的博客Go mod的使用、发布、升级 | weiGo Module如何发布v2及以上版本1.2.7. go mod命令 — 新溪-gordon V1.7.9 文档golang go 包管理工具 go mod的详细介绍-腾讯云开发者社区-腾讯云Go Mod 常见错误的原因 | walker的博客 项目案例 oceanweav…
阅读更多...
AI实践与学习2_提示词工程（PE）学习与实践

AI实践与学习2_提示词工程（PE）学习与实践

前言 想要GPT模型回答的更好&#xff0c;更好的应用在业务场景中&#xff0c;需要考虑Prompt的写法规则、模型参数、渲染方式&#xff08;流式响应&#xff09;等 下面主要结合开源文档梳理一些写Prompt的一些技巧。 https://learningprompt.wiki/zh-Hans/docs/chatgpt-lear…
阅读更多...
网络机顶盒什么牌子好？内行盘点最新网络机顶盒排行榜

网络机顶盒什么牌子好？内行盘点最新网络机顶盒排行榜

网络机顶盒是我们使用率最高的数码产品&#xff0c;因工作关系经常会有朋友问我网络机顶盒什么牌子好&#xff0c;怎么挑选网络机顶盒&#xff1f;今天要介绍的是目前业内最新发布的网络机顶盒排行榜&#xff0c;不懂行的朋友们可以以此作为参考。 第一名&#xff1a;泰捷WEBOX…
阅读更多...
CocoaPods podfile 文件配置

CocoaPods podfile 文件配置

记录一下关于 CocoaPods podfile 文件配置 指定源(Source) 默认情况下&#xff0c;在全局级别指定的源将按照依赖项匹配指定的顺序进行搜索。 对于特定的依赖&#xff0c;可以单独指定依赖源: pod PonyDebugger, :source > https://github.com/CocoaPods/Specs.git使用字库…
阅读更多...
【Java并发编程九】同步控制

【Java并发编程九】同步控制

ReentrantLock(重入锁) ReentrantLock的基本使用 ReentrantLock可以自己决定加锁的位置和解锁的位置。 package myTest;import java.util.ArrayList; import java.util.concurrent.locks.ReentrantLock;public class myTest implements Runnable{// 重入锁public static Reen…
阅读更多...
CISP模拟试题（三）

CISP模拟试题（三）

免责声明 文章仅做经验分享用途，利用本文章所提供的信息而造成的任何直接或者间接的后果及损失，均由使用者本人负责，作者不为此承担任何责任，一旦造成后果请自行承担！！！ 1. 人们对信息安全的认识从信息技术安全发展到信息安全保障,主要是由于: A.为了更好地完成组…
阅读更多...
毕业设计ASP.NET 2368酒店信息管理系统【程序源码+文档+调试运行】

毕业设计ASP.NET 2368酒店信息管理系统【程序源码+文档+调试运行】

一、摘要 本文旨在设计并实现一个功能全面、易于使用的酒店信息管理系统。系统将管理员、客户和前台客服三种用户的需求纳入考虑&#xff0c;并针对每种用户设计了相应的功能模块。系统功能包括用户管理、客户管理、客房管理、商品管理、客房预订管理、入住管理和系统管理。此…
阅读更多...
【JS】Chapter13-构造函数数据常用函数

【JS】Chapter13-构造函数数据常用函数

站在巨人的肩膀上 黑马程序员前端JavaScript入门到精通全套视频教程&#xff0c;javascript核心进阶ES6语法、API、js高级等基础知识和实战教程 &#xff08;十三&#xff09;构造函数&数据常用函数 1. 深入对象 1.1 创建对象三种方式 利用对象字面量创建对象const o {…
阅读更多...
Android跨进程通信，IPC，RPC，Binder系统，C语言应用层调用

Android跨进程通信，IPC，RPC，Binder系统，C语言应用层调用

文章目录 Android跨进程通信&#xff0c;IPC&#xff0c;RPC&#xff0c;Binder系统&#xff0c;C语言应用层调用&#xff08;&#xff09;1.概念2.流程3.bctest.c3.1 注册服务&#xff0c;打开binder驱动3.2 获取服务 4.binder_call Android跨进程通信&#xff0c;IPC&#xf…
阅读更多...
Linux 下集成开发环境 – PyCharm介绍

Linux 下集成开发环境 – PyCharm介绍

介绍 在这篇指南中&#xff0c;我将向你介绍一个集成开发环境 - PyCharm&#xff0c; 你可以在它上面使用 Python 编程语言开发专业应用。 Python 是一门优秀的编程语言&#xff0c;因为它真正实现了跨平台&#xff0c;用它开发的应用程序在 Windows、Linux 以及 Mac 系统上均…
阅读更多...
Redis-核心数据结构

Redis-核心数据结构

五种数据结构 String结构 String结构应用场景 Hash结构 Hash结构应用场景 List结构 List结构应用场景 Set结构 Set结构应用场景 ZSet有序结构 ZSet有序结构应用场景
阅读更多...
【苏州元德维康生物医药-注册】

【苏州元德维康生物医药-注册】

阅读更多...
智能井盖传感器功能有哪些？

智能井盖传感器功能有哪些？

智能井盖传感器是一种集成了多种先进技术的传感器设备&#xff0c;旨在强化城市的公共安全&#xff0c;确保城市基础设施的稳定运作。这种传感器具有多种功能&#xff0c;例如实时监测井盖状态、监测井下气体等是否超出阈值。借助智能井盖传感器&#xff0c;政府和城市管理部门…
阅读更多...
sapjco3.dll has version “721.619“, but required is at least version “721.913“

sapjco3.dll has version “721.619“, but required is at least version “721.913“

context with path [] threw exception [org.glassfish.jersey.server.ContainerException: java.lang.ExceptionInInitializerError: Native library sapjco3 is too old. Found library C:\Windows\System32\sapjco3.dll has version “721.619”, but required is at least …
阅读更多...
ThinkPHP 系列漏洞

ThinkPHP 系列漏洞

目录 2、thinkphp5 sql注入2 3、thinkphp5 sql注入3 4、 thinkphp5 SQL注入4 5、 thinkphp5 sql注入5 6、 thinkphp5 sql注入6 7、thinkphp5 文件包含漏洞 8、ThinkPHP5 RCE 1 9、ThinkPHP5 RCE 2 10、ThinkPHP5 rce3 11、ThinkPHP 5.0.X 反序列化漏洞 12、ThinkPHP…
阅读更多...
Python---函数的嵌套（一个函数里面又调用了另外一个函数）

Python---函数的嵌套（一个函数里面又调用了另外一个函数）

函数嵌套调用------就是一个函数里面又调用了另外一个函数。 基本语法&#xff1a; # 定义 函数B def funcB():print(这是funcB函数的函数体部分...)# 定义 函数A def funcA():print(- * 80) # 这一行为了更好区分print(这是funcA函数的函数体部分...)# 假设我们在调用funcA…
阅读更多...
论文速览 Arxiv 2023 | DMV3D: 单阶段3D生成方法

论文速览 Arxiv 2023 | DMV3D: 单阶段3D生成方法

注1:本文系“最新论文速览”系列之一,致力于简洁清晰地介绍、解读最新的顶会/顶刊论文 论文速览 Arxiv 2023 | DMV3D: DENOISING MULTI-VIEW DIFFUSION USING 3D LARGE RECONSTRUCTION MODEL 使用3D大重建模型来去噪多视图扩散 论文原文：https://arxiv.org/pdf/2311.09217.pdf…
阅读更多...
一文了解ChatGPT Plus如何完成论文写作和AI绘图

一文了解ChatGPT Plus如何完成论文写作和AI绘图

2023年我们进入了AI2.0时代。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车&#xff0c;就有可能被淘汰在这个数字化时代&#xff0c;如何能高效地处理文本、文献查阅、PPT…
阅读更多...
AIGC ChatGPT 4 将数据接口文件使用Python进行入库Mysql

AIGC ChatGPT 4 将数据接口文件使用Python进行入库Mysql

数据分析，数据处理的过程，往往将采集到的数据，或者从生产库过来的接口文件，我们都需要进行入库操作。 如下图数据： 将这样的数据接口文件，进行入库，插入到Mysql数据库中。 用Python代码来完成。 ChatGPT4来完成代码输入。 ChatGPT4完整内容如下： 这个任务可以使用`…
阅读更多...
最新文章

Copyright @ 2022~2023