uniapp自定义弹窗组件|Modal模态框|Loading加载框

uni-app自定义Modal模态弹窗模板uniPop，uniapp仿微信、android、ios弹窗效果

uniPop内置多种动画效果、可供选择类型ios/android、可以自定义弹窗样式/自定义多按钮及事件/弹窗显示位置、自动关闭秒数、遮罩层透明度及点击遮罩是否关闭

如上图：H5/小程序/App三端效果兼容性一致。(后续大图均展示App端)

引入方式

uniPop.vue弹窗组件两种引入方式：

1、在main.js里引入全局组件
import uniPop from './components/uniPop/uniPop.vue'
Vue.component('uni-pop', uniPop)

2、在页面引入组件

下面展示几种弹窗类型及调用方式
msg信息框效果

this.$refs.uniPop.show({    content: 'msg消息提示框（5s后窗口关闭）',    shade: true,    shadeClose: false,    time: 5,    anim: 'fadeIn',})

ios底部对话框效果

let uniPop = this.$refs.uniPopuniPop.show({    skin: 'footer',    content: '查看TA的主页 
 282310962@qq.com',    shadeClose: false,    anim: 'bottom',        btns: [        {            text: '关注',            style: 'color: #41a863',            onTap() {                console.log('您点击了关注！');            }        },        {text: '加入黑名单'},        {            text: '删除',            // style: {color: '#e63d23'},            style: 'color: #ff4350',            onTap() {                console.log('您点击了删除！');                                //删除回调提示                uniPop.show({                    anim: 'fadeIn',                    content: '您点击了删除功能',                    shade: true,                    time: 3                });            }        },        {            text: '取消',            style: 'color: #999',            onTap() {                console.log('您点击了取消！');                uniPop.close();            }        }    ]})

Toast弱提示效果（支持success/info/error/loading四种图标）

this.$refs.uniPop.show({    skin: 'toast',    content: 'loading',    icon: 'loading', //success | info | error | loading    shade: false,    time: 3})

uniPop自定义组件模板template

/**  * @tpl        uni-app自定义弹窗组件 - uniPop.vue  * @author     andy by 2019-09-20  * @about      Q：282310962  wx：xy190310  */

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    }},

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)    }},

以上就是uniApp自定义组件弹窗介绍，希望能喜欢~~

◆ 附上uniapp自定义顶部导航栏及底部tabBar组件
uniapp自定义导航栏：https://blog.csdn.net/yanxiny...
uniapp自定义tabbar：https://blog.csdn.net/yanxiny...

引入方式

更多相关文章

随机推荐