// 引入自定义弹框组件
import uaPopup from \'./components/ua-popup/index.vue\'
Vue.component(\'ua-popup\', uaPopup)

<!-- msg提示（自定义背景） -->
<ua-popup
    v-model="showMsgBg"
    anim="footer"
    content="hello uniapp"
    shade="false"
    time="2"
    :custom-style="{\'backgroundColor\': \'rgba(0,0,0,.6)\', \'color\': \'#fff\'}"
/>

<!-- 询问框 -->
<ua-popup v-model="showConfirm" shadeClose="false" title="标题" xclose z-index="2001"
    content="<div style=\'color:#ff557f;padding:20px 40px;\'>一切都将一去杳然，任何人都无法将其捕获。</div>"
    :btns="[
        {text: \'取消\', click: hideConfirm},
        {text: \'确定\', style: \'color:#00aa00;\', click: handleInfo},
    ]"
/>

<script>
export default {
    methods: {
        // 函数式嵌套调用
        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: \'<div style="color:#aa007f">预测未来的最好办法是自己亲手创造未来</div>\',
                        customStyle: {\'width\': \'200px\'},
                        btns: [
                            {
                                text: \'close\', click() {
                                    $ua.close()
                                }
                            },
                            {
                                text: \'Get一下\',
                                style: \'color:#00aa00;\',
                                click() {
                                    $toast.open({
                                        type: \'toast\',
                                        icon: \'loading\',
                                        content: \'请稍后...\',
                                        opacity: .2,
                                        time: 2,
                                    })
                                }
                            }
                        ]
                    })
                }
            })
        },
    }
}
</script>

<ua-popup v-model="showMsg" anim="fadeIn" content="上善若水,水利万物而不争" shadeClose="false" time="3" />

<!-- 底部对话框 -->
<ua-popup v-model="showFooter" anim="footer" type="footer" :shadeClose="false"
    content="真正觉悟的一刻，是放下追寻外在世界的财富，而开始追寻内心世界的真正财富。"
    :btns="[
        {text: \'Get到了\', style: \'color:#00e0a1;\', click: handleInfo},
        {text: \'收藏\', style: \'color:#ee0a24;\'},
        {text: \'取消\', style: \'color:#a9a9a9;\', click: hideFooter},
    ]"
/>

<!-- ActionSheet底部弹出式菜单 -->
<ua-popup v-model="showActionPicker" anim="footer" type="actionsheetPicker" round title="标题"
    :btns="[
        {text: \'取消\'},
        {text: \'确定\', style: \'color:#00aa00;\', click: handleInfo},
    ]"
>
    <!-- 自定义内容 -->
    <ul class="list" style="padding:50px;">
        <li>只要不失去方向，就不会失去自我</li>
        <li>别问别人为什么，多问自己凭什么</li>
        <li>不要等待机会，而要创造机会</li>
    </ul>
</ua-popup>

<ua-popup v-model="showToast" type="toast" icon="loading" time="2" content="加载中..." />
<!-- <ua-popup v-model="showToast" type="toast" icon="success" shade="false" time="2" content="成功提示" /> -->
<!-- <ua-popup v-model="showToast" type="toast" icon="fail" shade="false" time="2" content="失败提示" /> -->
<!-- <ua-popup v-model="showToast" type="toast" icon="warn" shade="false" time="2" content="警告提示" /> -->
<!-- <ua-popup v-model="showToast" type="toast" icon="info" shade="false" time="2" content="普通提示" /> -->

<!-- 长按弹窗1 -->
<ua-popup v-model="showContextMenu1" type="contextmenu" :follow="follow1" opacity=".35"
    :btns="[
        {text: \'置顶聊天\', click: handleContextPopup},
        {text: \'标记为未读\', style: \'color:#00aa00;\'},
        {text: \'少一点预设的期盼，那份对人的关怀会更自在\', style: \'color:#ff007f;\'},
        {text: \'心有多大,舞台就有多大\', style: \'color:#09f;\'},
        {text: \'关闭\', style: \'color:#aaaa7f;\', click: hideContextMenu1},
    ]"
>
</ua-popup>

<!-- 长按弹窗2 -->
<ua-popup v-model="showContextMenu2" type="contextmenu" :follow="follow2" opacity="0"
    :btns="[
        {text: \'置顶联系人\', click: handleContextPopup},
        {text: \'设置备注信息\'},
        {text: \'星标好友\'},
        {text: \'删除\', click: hideContextMenu1},
    ]"
>
</ua-popup>

// 长按菜单操作
handleContextMenu1(e) {
    this.showContextMenu1 = true;
    this.follow1 = [e.touches[0].clientX, e.touches[0].clientY]
},