uniapp自定义弹框ua-popup组件【增强版】
组件介绍
UA-Popup 一款基于 uniapp 开发的轻量级多端自定义弹框组件。支持超过20+参数配置、组件式+函数式两种调用方式。完美运行到h5+App端+小程序及Nvue原生组件页面。
文章图片
如上图：兼容h5+小程序+App端，运行效果一致。
导入组件
在main.js中全局引入组件。
import UAPopup from './components/ua-popup/index.vue'
Vue.component('ua-popup', UAPopup)当然，也支持
easycom 模式。可以省略上面这一步导入。支持组件式写法和函数调用两种方式。
- 组件式调用
文章图片
- 函数式调用
// 函数式嵌套调用
handleInfo() {
let $ua = this.$refs.uapopup
let $toast = this.$refs.uatoast
$ua.open({
content: '人生漫漫，且行且珍惜',
customStyle: {'background-color': 'rgba(170, 0, 127, 0.6)', 'color': '#fff'},
time: 3,
onClose() {
$ua.open({
type: 'android',
content: '预测未来的最好办法是自己亲手创造未来',
customStyle: {'width': '200px'},
zIndex: 202120,
btns: [
{
text: 'close', click() {
$ua.close()
}
},
{
text: 'Get一下',
style: 'color:#00aa00;
',
click() {
$toast.open({
type: 'toast',
icon: 'loading',
content: '请稍后...',
opacity: .2,
time: 2,
zIndex: 202125,
})
}
}
]
})
}
})
},
handleBtnClick() {
this.$refs.uapopup.open({
content: '正在操作中，请稍后...',
shadeClose: false,
anim: 'footer',
customStyle: {'background-color': 'rgba(0, 170, 0, 0.6)', 'color': '#fff', 'border-radius': '6px'},
opacity: .1,
time: 2,
onClose: () => {
this.$refs.uatoast.open({
type: 'toast', icon: 'success', content: '操作成功', time: 2,
})
}
});
},
文章图片
- 底部面板弹框
文章图片
文章图片
- 只要不失去方向，就不会失去自我
- 别问别人为什么，多问自己凭什么
- 不要等待机会，而要创造机会
- Toast轻提示框
文章图片
文章图片
- 仿微信长按弹框效果
文章图片
文章图片
开发实现
- 自定义参数配置
props: {
value: { type: Boolean, default: false },
title: String,
content: String,
type: String,
customStyle: { type: Object, default: null },
icon: String,
shade: { type: [Boolean, String], default: true },
shadeClose: { type: [Boolean, String], default: true },
opacity: { type: [Number, String], default: '' },
round: Boolean,
xclose: Boolean,
xposition: { type: String, default: 'right' },
xcolor: { type: String, default: '#333' },
anim: { type: String, default: 'scaleIn' },
position: String,
follow: { type: Array, default: null },
time: { type: [Number, String], default: 0 },
zIndex: { type: [Number, String], default: '202107' },
btns: {
type: Array, default: null
},
// 打开弹框回调
onOpen: { type: Function, default: null },
// 关闭弹框回调
onClose: { type: Function, default: null },
},- 弹框模板
在nvue页面运行效果。依然可以覆盖在video原生组件之上。
大家可以根据项目需要，自己定制一些扩展功能。实现多样化弹框场景。
ok，使用uniapp自定义弹框组件就介绍到这里。希望各位喜欢哈~~?
uniapp自定义导航条+底部tabbar组件
【uniapp自定义弹框ua-popup组件【增强版】】
推荐阅读
- SpringBoot调用公共模块的自定义注解失效的解决
- python自定义封装带颜色的logging模块
- 列出所有自定义的function和view
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- 自定义MyAdapter
- Android自定义view实现圆环进度条效果
- Flutter自定义view|Flutter自定义view —— 闯关进度条
- js保留自定义小数点
- django|django 自定义.save()方法
- 如何在Kubernetes|如何在Kubernetes 里添加自定义的 API 对象（一）