uni-app自定义Modal弹窗|alert对话框|Toast提示
uniApp自定义模态弹窗模板uniPop,实现了uniapp仿微信、android、ios弹窗效果,msg信息框/confirm确认框
uniPop内置多种动画效果、可供选择类型ios/android、可以自定义弹窗样式/自定义多按钮及事件/弹窗显示位置、自动关闭秒数、遮罩层透明度及点击遮罩是否关闭
如下图:H5/小程序/App三端效果兼容性一致。(后续大图均展示App端)
引入方式
uniPop.vue弹窗组件两种引入方式:
1、在main.js里引入全局组件import uniPop from './components/uniPop/uniPop.vue'
Vue.component('uni-pop', uniPop)
2、在页面引入组件
<template> <view class="container"> ... <!-- 弹窗模板 --> <uni-pop ref="uniPop"></uni-pop> </view> </template> <script> import uniPop from './components/uniPop/uniPop.vue' export default { data() { return { ... } }, components:{ uniPop }, ... } </script>
调用方式
this.$refs.uniPop.show({ content: 'msg消息提示框(5s后窗口关闭)', shade: true, shadeClose: false, time: 5, anim: 'fadeIn', })
this.$refs.uniPop.show({ skin: 'toast', content: 'loading', icon: 'loading', //success | info | error | loading shade: false, time: 3 })
/** * @tpl uni-app自定义弹窗组件 - uniPop.vue * @author andy by 2019-09-20 */ <template> <view v-if="opts.isVisible" class="uniPop" :class="opts.isCloseCls"> <view class="unipop__ui_panel"> <view v-if="opts.shade" class="unipop__ui_mask" @tap="shadeTaped"></view> <view class="unipop__ui_main"> <view class="unipop__ui_child" :style="opts.style"> <!-- 标题 --> <view v-if="opts.title" class="unipop__ui_tit">{{opts.title}}</view> <!-- 内容 --> <view v-if="opts.content" class="unipop__ui_cnt" :style="opts.contentStyle"> {{opts.content}} </view> <view v-if="opts.btns" class="unipop__ui_btns"> <text v-for="(item,index) in opts.btns" :key="index" class="btn" :style="item.style" @tap="btnTaped(item)">{{item.text}}</text> </view> </view> <!-- xclose --> <view v-if="opts.xclose" class="unipop__xclose" @tap="close"></view> </view> </view> </view> </template>
data() { return { defaultOptions: { isVisible: false, //是否显示弹窗 title: '', //标题 content: '', //内容 contentStyle: '', //内容样式 style: null, //自定义弹窗样式 skin: '', //弹窗风格 icon: '', //弹窗图标 xclose: false, //自定义关闭按钮 shade: true, //遮罩层 shadeClose: true, //点击遮罩关闭 opacity: '', //遮罩透明度 time: 0, //自动关闭秒数 end: null, //销毁弹窗回调函数 anim: 'scaleIn', //弹窗动画 scaleIn(默认) | fadeIn | shake | top | right | bottom | left position: '', //弹窗位置 top | right | bottom | left btns: null, //弹窗按钮 }, opts: {}, timer: null } },
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
漫谈设备唯一ID
一、前言 设备ID,简单来说就是一串符号(或者数字),映射现实中硬件设备。如果这些符号和设备是一一对应的,可称之为“唯一设备ID(Unique Device Identifier)” 不幸的是,对于Android平台而言,没有稳定的API可以让开发者获取到这样的设备ID。开发者通常会遇到这样的困境:随着项目的演进, 越来越多的地方需要用到设备ID;然而随着Android版本的升级,获取设备ID却越来越难了。加上Android平台碎片化的问题,获取设备ID之路,可以说是步履维艰。 二、设备ID的作用 关于设备ID的作用,大概可以分为下面几点: 统计需求统计需求是设备ID最常见的用途,包括DAU, MAU的统计,行为统计,广告激活的统计等。 业务需求设备ID通常也用于业务中。 比如结合行为统计做用户画像,以为用户提供个性化的服务,大家感受比较明显的就是新闻类和电商类的APP了。这类操作,有利有弊,仁者见仁智者见智。又如,定向推送,不一定是广告推送,错误修复,内测推送等也会用到设备ID。还有是一些和特定业务结合的用途,比如构造分布式ID等。 风控需求设备ID还可用于防刷单,反作弊等。 当然,...
- 下一篇
springboot页面加载时找不到静态资源下的文件,js与css以及图片,拦截器
最近在使用springboot时,前几天正常访问的页面,突然间访问不到js、css、图片等静态资源。经过排查发现是由于我发现程序中提示webmvcconfigureradapter已过期,所以改成了WebMvcConfigurationSupport 而WebMvcConfigurationSupport在 springboot的web自动配置类WebMvcAutoConfiguration 上有条件注解,这个注解的意思是在项目类路径中缺少WebMvcConfigurationSupport类型的bean时改自动配置类才会生效 @ConditionalOnMissingBean(WebMvcConfigurationSupport.class) 所以当我们使用拦截器并继承WebMvcConfigurationSupport这个类的时候需要重写addInterceptors这个方法 所以拦截器的配置应该如下 代码1: package com.example.syscloud.Interceptor; import org.springframework.context.annotatio...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2全家桶,快速入门学习开发网站教程
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS8编译安装MySQL8.0.19
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- MySQL8.0.19开启GTID主从同步CentOS8