uniapp 自定义全局弹窗

自定义全局弹窗可在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的持续时间,单位mstype: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 = thisthis.$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.rhkb.cn/news/400823.html

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

相关文章

数学建模——启发式算法(蚁群算法)

算法原理 蚁群算法来自于蚂蚁寻找食物过程中发现路径的行为。蚂蚁并没有视觉却可以寻找到食物&#xff0c;这得益于蚂蚁分泌的信息素&#xff0c;蚂蚁之间相互独立&#xff0c;彼此之间通过信息素进行交流&#xff0c; 从而实现群体行为。 蚁群算法的基本原理就是蚂蚁觅食的过程…

R语言的算数运算

下面内容摘录自《R 语言与数据科学的终极指南》专栏文章的部分内容&#xff0c;每篇文章都在 5000 字以上&#xff0c;质量平均分高达 94 分&#xff0c;看全文请点击下面链接&#xff1a; 3章3节&#xff1a;R的赋值操作与算术运算_r 链式赋值-CSDN博客文章浏览阅读172次。掌…

Ajax-02.Axios

Axios入门 1.引入Axios的js文件 <script src"js/axios-0.18.0.js"></script> Axios 请求方式别名: axios.get(url[,config]) axios.delete(url[,config]) axios.post(url[,data[,config]]) axios.put(url[,data[,config]]) 发送GET/POST请求 axios.get…

Windows的cmd命令行使用Linux类命令

Windows的cmd使用Linux类命令 去我的个人博客观看&#xff0c;观感更佳哦&#xff0c;&#x1f619;&#x1f619; 前言 我在使用Vscode编写C/C代码的时候&#xff0c;经常会用到Shell(你可以理解为命令行)&#xff0c;但是我不得不说Windows下Dos命令极其难用且拉跨&#x1f…

灵活易用的树莓派相机和计算机,降低了3D冰川建模的成本!

利兹大学的研究人员正在监测秘鲁的凯尔卡亚冰帽&#xff0c;这是世界上仅有的几个热带冰帽之一。 在欧洲成功进行试验之后&#xff0c;利兹大学地理学院​​​​​​​的研究人员正在安第斯山脉和喜马拉雅山脉使用树莓派计算机和树莓派高品质相机&#xff0c;建立低成本、长期…

C# simd指令之MaskMove

MaskMove指令说明&#xff1a;该方法将掩码向量中的每个非零元素对应的源向量中的元素移动到内存地址指定的位置。如果掩码中的元素为零&#xff0c;则对应的内存位置不会被修改。 MaskMove指令接受三个参数&#xff08;source、mask、address&#xff09;&#xff1a; 源向量…

养生生活视频素材去哪里找?养生系列视频素材网站分享

如何寻找高质量的养生视频素材。无论您是刚入行的新手&#xff0c;还是拥有众多粉丝的资深创作者&#xff0c;优质的养生视频素材都是吸引观众的关键。接下来&#xff0c;我将介绍一些顶级平台&#xff0c;帮助您轻松获取各类养生视频素材。 蛙学网 首先推荐的平台是蛙学网。这…

鸿蒙开发APP应用UX体验标准

基础体验 应用导航 3.1.1.1 系统返回 页面布局 3.1.2.1 布局基础要求 3.1.2.2 挖孔区适配 人机交互 3.1.3.1 避免与系统手势冲突3.1.3.2 典型手势时长设计3.1.3.3 点击热区 视觉风格 3.1.4.1 色彩对比度3.1.4.2 字体大小 3.1.4.3 图标 3.1.4.3.1 应用图标3.1.4.3.2 界…

个体内比较不同自动化背景增强(BPE)评估方法在乳腺MRI中的效果:| 文献速递-基于深度学习的乳房、前列腺疾病诊断系统

Title 题目 Intraindividual Comparison of Different Methods for Automated BPE Assessment at Breast MRI: 个体内比较不同自动化背景增强&#xff08;BPE&#xff09;评估方法在乳腺MRI中的效果&#xff1a; Background 背景 The level of background parenchymal enh…

flutter 画转盘

import package:flutter/material.dart; import dart:math;const double spacingAngle 45.0; // 每两个文字之间的角度 // 自定义绘制器&#xff0c;ArcTextPainter 用于在圆弧上绘制文字 class ArcTextPainter extends CustomPainter {final double rotationAngle; // 动画旋…

elementplus 二次封装 select 自定义指令上拉加载更多 完美解决 多次接口调用 重新加载数据多次调用数据!!!

效果&#xff1a;&#xff08;名字都是测试数据 随便乱写的 若有冒犯 请联系&#xff09; select 二次封装 网上的这种自定义指令上拉加载更多的实例有很多&#xff0c;但是基本都是有缺陷和问题的。为了记录这个问题 我研究了一天&#xff0c;在今天终于搞定了 呜呜呜。 网上…

TSP-Detection:CMU 提出抛弃交叉注意力的 DETR 变体 | ICCV 2021

DETR基于Transformer将目标检测视为集合预测问题&#xff0c;实现了最先进的性能&#xff0c;但需要超长的训练时间才能收敛。论文研究了DETR优化困难的原因&#xff0c;揭示了收敛缓慢因素主要是匈牙利损失和Transformer交叉注意机制。为了克服这些问题&#xff0c;论文提出了…

微信小程序--26(全局配置-1)

一、全局配置文件 1.标志 app.json 2.配置项 pages 记录当前小程序所有页面的存放路径 window 全局配置小程序窗口配置 tabBar 设置小程序底部的tabBar效果 style 是否启用新版本的组将样式 3.window 导航栏区域 navigationBar …

11 Linux 设备驱动

11 Linux 设备驱动 1、Linux软件特点1.1 用户空间1.2 内核空间 2、Linux程序2.1 应用程序2.2 内核程序2.2.1 编程2.2.2 编译 2.3 内核命令行传参2.3.1 应用程序的命令行传参2.3.2 内核程序命令行传参 2.4 内核程序符号导出2.4.1 应用程序多文件之间的访问调用2.4.1 内核多文件之…

1Panel应用推荐:KubePi开源Kubernetes管理面板

1Panel&#xff08;github.com/1Panel-dev/1Panel&#xff09;是一款现代化、开源的Linux服务器运维管理面板&#xff0c;它致力于通过开源的方式&#xff0c;帮助用户简化建站与运维管理流程。为了方便广大用户快捷安装部署相关软件应用&#xff0c;1Panel特别开通应用商店&am…

H7-TOOL混合脱机烧录以及1拖4不同的通道烧录不同的程序操作说明(2024-08-07)

【应用场景】 原本TOOL的1拖4是用于同时烧录相同程序给目标板&#xff0c;但有时候一个板子上有多个不同的MCU&#xff0c; 客户希望仅通过一个TOOL就可以完成对板子上多个MCU的烧录&#xff0c;也就是1拖4不同的通道烧录不同的程序&#xff0c;此贴为此制作。 【实验目标】…

序列建模之循环和递归网络 - 循环神经网络篇

序言 在探索序列数据的深层规律时&#xff0c;循环神经网络&#xff08; RNN \text{RNN} RNN&#xff09;以其独特的设计思想成为了序列建模领域的中流砥柱。与传统的神经网络不同&#xff0c; RNN \text{RNN} RNN引入了循环结构&#xff0c;使得网络能够处理任意长度的序列数…

winform 大头针实现方法——把窗口钉在最上层

平时我们再使用成熟的软件的时候&#xff0c;会发现有个大头针的功能挺不错的。就是点一下大头针&#xff0c;窗口就会钉住&#xff0c;一直保持在最上面一层&#xff0c;这样可以一边设置参数&#xff0c;一边观察这个窗口里面的变化&#xff0c;比较方便。下面我就来简单实现…

移动APP测试有哪些注意事项?专业APP测试报告如何获取?

移动APP在其生命周期中有不同的阶段&#xff0c;从开始到投入目标市场再到被淘汰。移动APP的成功有多种因素&#xff0c;例如创建、部署、推广、粘性等。但是&#xff0c;创建出色APP的关键在于它的测试&#xff0c;软件测试负责为客户提供安全有效的产品&#xff0c;因此移动A…

大数据-83 Spark 集群 RDD编程简介 RDD特点 Spark编程模型介绍

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…