uniapp弹出框_基于uni-app自定义模态对话框uniPop实例分享|仿微信/ios弹出框效果

如下图：H5/小程序/App端效果展示。(后面大图均是App端)

基于uni-app开发的自定义模态弹窗，弥补了原生弹窗居多限制，uniPop内置多种动画效果、可选择皮肤ios/android、并且可以自定义弹窗样式/自定义多按钮及事件/弹窗显示位置、自动关闭秒数、遮罩层透明度及点击遮罩是否关闭

组件调用方式

uniPop.vue支持以下两种引入方式：

在main.js里引入全局组件

import uniPop from './components/uniPop/uniPop.vue'

Vue.component('uni-pop', uniPop)

在页面引入组件

...

import uniPop from './components/uniPop/uniPop.vue'

export default {

data() {

return {

...

}

},

components:{

uniPop

},

...

}

通过以下方式调用即可 this.$refs.uniPop.show({...})

this.$refs.uniPop.show({

content: 'msg消息提示框(5s后窗口关闭)',

shade: true,

shadeClose: false,

time: 5,

anim: 'fadeIn',

})

uniPop自定义模板

/**

* @tpl uni-app自定义弹窗组件 - uniPop.vue

* @author andy by 2019-09-20

* @about Q：282310962 wx：xy190310

*/

{{opts.title}}

{{opts.content}}

{{item.text}}

配置参数如下

show(args) {

this.opts = Object.assign({}, this.defaultOptions, args, {isVisible: true})

// console.log(this.opts)

// 自动关闭

if(this.opts.time) {

this.timer = setTimeout(() => {

this.close()

}, this.opts.time * 1000)

}

},