摘要：楷體百度智能小程序自定義彈窗組件百度小程序?qū)υ捒蛑悄苄〕绦驈棿敖缑婺０遄罱俣纫餐瞥隽俗约旱闹悄苄〕绦?，如是就趕緊去試了下，官方提供的還不是狠完整。

百度智能小程序自定義彈窗組件wcPop|百度小程序model對(duì)話框|智能小程序彈窗界面模板

最近百度也推出了自己的智能小程序，如是就趕緊去試了下，官方提供的api還不是狠完整。而且官方提供的彈窗組件也不能滿足一些復(fù)雜展示場(chǎng)景，所以就自己動(dòng)手封裝了個(gè)智能小程序彈窗wcPop自定義模板插件。

百度智能小程序wcPop支持多種動(dòng)畫展示形式，超精簡(jiǎn)調(diào)用api，可自定義多按鈕事件，隨意自定義彈窗模板內(nèi)容。

智能小程序彈窗demo展示：

插件調(diào)用api超簡(jiǎn)潔，易于上手，只需在需要調(diào)用的頁面引入tpl.js即可：

/**
 * @title     百度小程序自定義彈窗demo
 * @Create    andy
 * @Timer    2018/11/29 23:50:45 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)
 * @bolg    https://www.cnblogs.com/xiaoyan2017   Q：282310962  wx：xy190310
 */

// 引入插件js
import {wcPop} from ../../utils/component/wcPop/tpl.js;

Page({
    data: {},
    onLoad: function () {
        // 頁面加載
    },


    /**
     * --------- 百度小程序彈窗演示函數(shù).Start ---------
     */
    //msg提示
    btnTap01: function(e) {
        wcPop({
        anim: fadeIn,
        content: msg提示框測(cè)試（5s后窗口關(guān)閉）,
        shade: true,
        shadeClose: false,
        time: 5
        });
    },

    //msg提示(黑色背景)
    btnTap02: function(e) {
        wcPop({
        content: msg提示框測(cè)試（2s后窗口關(guān)閉）,
        shade: false,
        style: background: rgba(17,17,17,.7); color: #fff;,
        time: 2
        });
    },

    //信息框
    btnTap03: function(e) {
        var index = wcPop({
        content: 信息框 （這里演示信息框功能效果，這里演示信息框功能效果，這里演示信息框功能效果）,

        shadeClose: true,
        anim: rollIn,
        xclose: true,

        btns: [
            {
            text: 知道了,
            style: color: #999,
            onTap() {
                wcPop.close(index);
                console.log("知道了");
            }
            }
        ]
        });
    },

    //詢問框
    btnTap04: function(e) {
        wcPop({
        title: 溫馨提示~~~,
        content: 警告，非法操作非法操作非法操作非法操作非法操作非法操作非法操作！??！,
        shadeClose: false,
        anim: shake,

        btns: [
            {
            text: 取消,
            onTap() {
                console.log(您點(diǎn)擊了取消！);
                wcPop.close();
            }
            },
            {
            text: 確定,
            style: color:#3388ff;,
            onTap() {
                console.log(您點(diǎn)擊了確定！);
            }
            }
        ]
        });
    },

    //自定義多按鈕
    btnTap05: function(e) {
        wcPop({
        title: ^-^悠然的時(shí)光,
        content: 漫長時(shí)光里流露出無限溫柔で，要努力做好這一切，時(shí)刻準(zhǔn)備向前，多年后必會(huì)感謝曾經(jīng)努力的自己,
        style: border-top:5px solid #3388ff;max-width:90%, //自定義彈窗樣式
        anim: fadeInUp,
        opacity: .85,

        btns: [
            {
            text: 發(fā)消息,
            style: color:#179b16;,
            onTap() {
                console.log(您點(diǎn)擊了發(fā)消息！);
            }
            },
            {
            text: 評(píng)論他,
            style: color:#3388ff;,
            onTap() {
                console.log(您點(diǎn)擊了發(fā)送該名片！);
            }
            },
            {
            text: 贊一下,
            onTap() {
                console.log(您點(diǎn)擊了贊一下！);
                wcPop.close();
            }
            }
        ]
        });
    },

    //底部對(duì)話框
    btnTap06: function(e) {
        wcPop({
        skin: footer,
        content: 確定刪除該條數(shù)據(jù)嗎？刪除后可在7天之內(nèi)恢復(fù)數(shù)據(jù)，超過7天后數(shù)據(jù)就無法恢復(fù)啦！,
        anim: footer,
        shadeClose: false,

        btns: [
            {
            text: 恢復(fù),
            style: color:#3388ff;,
            onTap() {
                console.log(您點(diǎn)擊了恢復(fù)！);

            }
            },
            {
            text: 刪除,
            style: color:#e63d23;,
            onTap() {
                console.log(您點(diǎn)擊了刪除！);

                //刪除回調(diào)提示
                wcPop({
                anim: fadeIn,
                content: 您點(diǎn)擊了刪除功能,
                shade: true,
                time: 3
                });
            }
            },
            {
            text: 取消,
            onTap() {
                console.log(您點(diǎn)擊了取消！);
                wcPop.close();
            }
            }
        ]
        });
    },

});