uniapp 自定义全局弹窗

news2024/9/21 3:19:40

自定义全局弹窗可在js和.vue文件中调用,unipop样式不满足,需自定义样式。

效果图

目录结构

index.vue

<template>
    <view class="uni-popup" v-if="isShow">
		<view class="uni-popup__mask uni-center ani uni-custom">
		</view>
       <view class="uni-popup__wrapper center uni-center ani uni-custom">
			<view class="uni-popup__wrapper-box">
				<view class="box">
					<div class="title">温馨提示</div>
					<div class="con">
						抱歉,由于当前用户访问量激增,部分功能加载较慢,请您耐心等待。</br></br>
						如有疑问,请致电咨询重庆市生态环境部门服务热线: 023-88888888。感谢您的理解与支持!
					</div>
					<div class="btn">
						<view @click="close">取消</view>
					</div>
				</view>
			</view>
       </view>
    </view>
</template>

<script>
    export default {
		data(){
			return {
				isShow:false
			}
		},
        props: {
            title: { //显示的文本
              type: String,
              default: '消息'
            },
            type: { 
            // 主题类型,不填默认为
            // default-灰黑色 ,error-红色 代表错误 ,primary-蓝色 uView的主色调
            // success-绿色 代表成功 ,
            // warning-黄色 代表警告 ,info-灰色 比default浅一点
              type: String,
              default: 'success'
            },
            duration:{ //toast的持续时间,单位ms
                type:Number,
                default: 2000
            },
            position:{ //toast出现的位置
                type: String,
                default:"center"
            },
            back:{ // toast结束后,是否返回上一页,优先级低于url参数
                type:Boolean,
                default:false
            },
            icon:{ // 是否显示显示type对应的图标,为false不显示图标
                type:Boolean,
                default:true
            },
            callback:Function ,//回调函数
            url:String// 弹窗时间结束后跳转到指定页面
        },
        created() {
            let that = this
            this.$nextTick(() => {
				  this.show()
               /* this.$refs.uToast.show({
                    title: that.title,
                    type: that.type,
                    duration: that.duration,
                    back:that.back,
                    position:that.position,
                    icon:that.icon,
                    url:that.url,
                    callback:that.callback
                }) */
                // x秒后删除dom节点
                /* setTimeout(() => {            if(document.body){
            that.$destroy();
                    document.body.removeChild(that.$el);
            }
                    
                }, that.duration); */
            })
        },
		methods:{
			show() {
				this.isShow = true
			},
			close() {
				this.isShow = false
				// window.close()
			}
		},
    }
</script>

<style lang="scss" scoped>
	.box {
		width: 500upx;
		height: 662upx;
		background-image: url('../../static/companyImg/popup.png');
		background-size: 100% 100%;
		background-position: center;
		.title {
			display: flex;
			justify-content: center;
			padding: 50upx 0 100upx 0;
			color: #fff;
			font-size: 36upx;
		}
		.con {
			height: 340upx;
			font-size: 28upx;
			padding: 0 40upx ;
			color: #686b73;
			border-bottom: 1px solid #e8e9ec;
		}
		.btn {
			position: absolute;
			bottom: 40upx;
			width: 100%;
			display: flex;
			justify-content: center;
			font-size: 36upx;
			color: #3ca1f2;
			cursor: pointer;
		
	
		}
		
	}
	.uni-popup {
		position: fixed;
		/*  #ifdef  H5  */
		top: 0px;
		// top: 50px;
		/*  #endif  */
		/*  #ifndef  H5  */
		top: 0px;
		/*  #endif  */
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99999;
		overflow: hidden;

		&__mask {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 998;
			background: rgba(0, 0, 0, 0.4);
			opacity: 0;

			&.ani {
				transition: all 0.3s;
			}

			&.uni-top,
			&.uni-bottom,
			&.uni-center {
				opacity: 1;
			}
		}

		&__wrapper {
			position: absolute;
			z-index: 999;
			box-sizing: border-box;

			&.ani {
				transition: all 0.3s;
			}

			&.top {
				top: 0;
				left: 0;
				width: 100%;
				transform: translateY(-100%);
			}

			&.bottom {
				bottom: 0;
				left: 0;
				width: 100%;
				transform: translateY(100%);
			}

			&.center {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				transform: scale(1.2);
				opacity: 0;
			}

			&-box {
				position: relative;
				box-sizing: border-box;
			}

			&.uni-custom {
				& .uni-popup__wrapper-box {
					// padding: 30upx;
					background: #fff;
					border-radius: 16px;
				}

				&.center {
					& .uni-popup__wrapper-box {
						position: relative;
						// max-width: 80%;
						margin: 0upx 30upx;
						// width: 100%;
						box-sizing: border-box;
						max-height: 80%;
						overflow-y: visible;
					}
				}

				&.top,
				&.bottom {
					& .uni-popup__wrapper-box {
						width: 100%;
						max-height: 500px;
						overflow-y: scroll;
					}
				}
			}

			&.uni-top,
			&.uni-bottom {
				transform: translateY(0);
			}

			&.uni-center {
				transform: scale(1);
				opacity: 1;
			}
		}
	}
</style>

index.js

import fullNameVue from './index.vue'

const FullToast = {};

FullToast.install = function (Vue, option) {
  const FullNameInstance = Vue.extend(fullNameVue);
  let name;
  const initInstance = () => {
    name = new FullNameInstance();
    let nameSpan = name.$mount().$el;
    document.body.appendChild(nameSpan);
  }
  Vue.prototype.$uToast = {
    showToast(option){
      initInstance();
      if(typeof option === 'string'){
        name.firstName = option;
      }else if(typeof option === 'object'){
        Object.assign(name, option);
      }
      return initInstance;
    }
  };
}

export default FullToast;

main.js中注册

import uToast from './components/uToast/index'
Vue.use(uToast);

在js和vue文件中调用自定义弹窗

// js中调用
import Vue from 'vue'
const vm = new Vue()
vm.$uToast.showToast()

// vue文件中调用
this.$uToast.showToast()

 

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

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

相关文章

10款企业网络准入控制系统排行榜|网络准入控制系统推荐

在当今数字化时代&#xff0c;企业网络的安全性对于维护业务连续性和保护敏感数据至关重要。网络准入控制系统&#xff08;NAC&#xff09;作为企业安全架构的核心组成部分&#xff0c;负责管理和控制所有试图接入企业网络的设备。我们列出了2024年企业网络准入控制系统的排行榜…

别急着买新手机:OPPO Reno13系列配置全解析,性价比爆表

在智能手机市场&#xff0c;OPPO Reno系列凭借其高性价比和出色的影像实力&#xff0c;一直是消费者关注的焦点。 随着科技的不断进步&#xff0c;OPPO也在不断推陈出新&#xff0c;满足用户对高性能手机的需求。最近&#xff0c;OPPO Reno13系列的曝光&#xff0c;预示着OPPO…

【高性能高易用】物联网AI开发套件----Qualcomm® RB3 Gen 2 开发套件

Qualcomm RB3 Gen 2 开发套件 专为高性能计算、高易用性而设计的物联网开发套件 Qualcomm RB3 Gen 2 开发套件拥有先进的功能和强大的性能&#xff0c;包括强大的AI运算&#xff0c;12 TOPS 算力和计算机图形处理能力&#xff0c;可轻松创造涵盖机器人、企业、工业和自动化等…

谷歌账号登录的时候提示被停用,原因是什么,账号还有救吗?该如何处理?

今日早上&#xff0c;有个久违的朋友找到我说&#xff0c;要恢复账号。 他的情况是这样的&#xff1a;7月21日的时候&#xff0c;他发现自己的谷歌账号登录的时候提示活动异常先&#xff0c;需要输入手机号码验证才能恢复账号。但是输入了自己和亲友们的多个手机号码都无法验证…

Astro + Cloudflare Pages 快速搭建个人博客

目录 1 选择 Astro 模板2 使用代码3 修改代码4 上传 Github5 部署 Cloudflare Pages6 后续修改 最近我搭建完了我的个人网站&#xff0c;很多人问是怎么做的&#xff0c;今天就来写一篇教程吧。 全部干货&#xff0c;看完绝对能成功搭建自己的网站&#xff01;&#xff08;还不…

8月12号笔记

工作组 工作组对计算机进行分层&#xff0c;通过创建不同的工作组&#xff0c;不同的计算机可以按照功能或部门归属到不同的组内&#xff0c;整个组织的网络就会变得具有层次性。在默认情况下&#xff0c;局域网内的计算机都是采用工作组方式进行资源管理的&#xff0c;即处在…

S71200 - 编程 - 笔记

1 DEMO 1.1气阀控制 1.2 红绿灯 基于PLC红绿灯控制_哔哩哔哩_bilibili 2 介绍变量DB&#xff0c;M&#xff0c;I&#xff0c;Q的使用 在PLC编程中&#xff0c;通常会使用多种类型的变量来实现逻辑控制、数据存储和输入输出操作。以下是常见的PLC变量类型及其用途&#xff…

C++笔记3•类和对象2•

1.类的6个默认成员函数 概念: 默认成员函数是用户没有显式实现,编译器会生成的成员函数称为默认成员函数。其中包括 构造函数、析构函数、拷贝构造、赋值重载、普通对象取地址重载、const对象取地址重载。也就是说类在空的情况下,空类中也不是什么也没有,会包含这六个默认成…

Linux shell脚本实战案例

文章目录 1. 基础案例&#xff1a;显示系统信息2. 文件备份案例3. 自动安装软件案例4. 批量重命名文件案例5. 监控磁盘空间案例6. 定时任务案例&#xff1a;定期清理日志文件7. 错误处理和日志记录案例&#xff1a;安全地运行命令8. 备份数据库案例&#xff1a;定期备份MySQL数…

Waterfox vG6.0.8 官方版下载及安装步骤(一款响应速度非常快的浏览器)

前言 Waterfox 水狐浏览器&#xff0c;从字面上我们可以轻松的了解该款浏览器的一些特点。Waterfox是通过Mozilla官方认证的纯64位版火狐浏览器&#xff0c;而Waterfox 10采用Firefox 10官方源码编译而成&#xff0c;改进了大内存和64位计算的细节&#xff0c;在64位Windows系…

haproxy整理

haproxy 1.1 haproxy简介 HAProxy是法国开发者 威利塔罗(Willy Tarreau) 在2000年使用C语言开发的一个开源软件 是一款具备高并发(万级以上)、高性能的TCP和HTTP负载均衡器&#xff0c;支持基于cookie的持久性&#xff0c;自动故障切换&#xff0c;支持正则表达式及web状态统…

Linux10 三剑客 正则表达式

三剑客 grep 擅长过滤&#xff0c;按行过滤 首先要把多个虚拟机的网络改成一种形式 爆破攻击&#xff1a;‌爆破攻击是一种尝试通过穷举法&#xff08;即尝试所有可能的组合&#xff09;来破解密码或身份验证的方法。这种攻击通常用于尝试登录到系统、网络或应用程序&#…

《系统架构设计师教程(第2版)》第14章-云原生架构设计理论与实践-04-云原生架构案例分析(二)云原生技术助力某汽车公司数字化转型实践

文章目录 1. 背景和挑战2. 基于云原生架构的解决方案3. 应用效益 1. 背景和挑战 汽车行业正迅速步入数字化时代。车企服务的对象发生变化&#xff0c;从购车市场转为覆盖后车市场的全周期&#xff0c;通过互联网渠道直面客户&#xff0c;服务客户急速增多。为适配客户快速变化…

【面试题】N皇后

N皇后 仅供学习 一、问题描述 n 皇后问题是一个经典的组合问题&#xff0c;可以通过回溯算法来解决。 二、python代码 def solve_n_queens(n):def can_place(row, col):# 检查这一行之前是否有列可以放置皇后for i in range(row):if board[i] col or abs(board[i] - col) …

【myz_tools】python库:算法与文档生成

写在前面 本来最开始只是单纯的想整理一下常用到的各类算法&#xff0c;还有一些辅助类的函数&#xff0c;方便时间短的情况下快速开发。后来发现整理成库更方便些&#xff0c;索性做成库&#xff0c;通过pip install 直接可以安装使用 关于库 平时见到的各类算法大多数还是…

抽象语法树AST

什么是AST 在计算机科学中&#xff0c;抽象语法树&#xff08;Abstract Syntax Tree&#xff0c;AST&#xff09;&#xff0c;或简称语法树&#xff08;Syntax tree&#xff09;&#xff0c;是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构&#xff0c…

【Linux】系列入门摘抄笔记-7-用户和用户组管理

用户分类 在Linux操作系统项用户的类型一般分为超级管理员(root)、系统用户和普通用户三类: (1)超级管理员:即root用户,在整个Linux操作系统中权限最高,权限最高也意味着风险最高,若操作失误就可能使整个系统崩溃。 (2)系统用户:默认不登录操作系统,用于运行和维…

大模型常见面试题解析【附答案版】

1、在Transformer模型中&#xff0c;为什么scaled dot-product attention在计算QK内积之后要除以根号d&#xff1f; 简单来说&#xff0c;就是需要压缩softmax输入值&#xff0c;以免输入值过大&#xff0c;进入了softmax的饱和区&#xff0c;导致梯度值太小而难以训练。如果不…

哈希以及闭散列和开散列

哈希 一、哈希1、概念2、哈希冲突 二、哈希函数1、设计原则2、常见的哈希函数&#xff08;1&#xff09;直接定址法&#xff08;2&#xff09;除留余数法&#xff08;3&#xff09;平方取中法&#xff08;4&#xff09;折叠法&#xff08;5&#xff09;随机数法&#xff08;6&a…

期权快到期卖不出去了怎么办 ?

期权在最后交易日如果平仓卖不出去&#xff0c;说明没有市场参与者愿意以你的报价买入该期权。这种情况通常出现在期权价值极低&#xff0c;接近于0&#xff0c;或者期权已经深度虚值&#xff0c;即行权价远离当前市场价格而且剩余时间已非常有限&#xff0c;使得该期权的内在价…