VUE2.0组件

全局引入

1、安装 yarn add popup-vue2 或 npm install [email protected] --save

2、引入 import popupVue from 'popup-vue2'; import 'popup-vue2/lib/style/index.css'; Vue.use(popupVue);

3、使用

提示

    this.$zPopup({msg:'出错了'})

其它参数

this.$zPopup(
    {
        type: '',  // drawer 切换为抽屉
        direction: '', // type为'drawer'时，direction取值：从左往右开 rtl   从右往左开ltr  从上往下开 ttb  从下往上开 btt
        title:'提示', // 标题
        width: 400, // 固定宽  '60%'  600
        height: 200, // 固定高 
        top: '15vh', // 弹窗中的 margin-top 值
        msg:'<span>出错了</span><span style="color:red;">出错了</span>', // 消息正文内容
        html: true, // 是否将 msg 属性作为 HTML 片段处理
        hasHead: true, // 是否显示标题栏
        btn: true, // 是否显示按钮栏
        customClass: 'css-name', // 自定义类名
        closed: true, // 是否显示右上角关闭按钮
        showClose: true, // 是否显示取消按钮
        showOk: true, // 是否显示确定按钮
        okText: '确 定', // 确定按钮的文本内容
        closeText: '取 消', // 取消按钮的文本内容
        bgClosable: false, // 点击遮罩层是否可以关闭
        bgOk:(e)=>{ // 点击遮罩层回调子组件确定数据
            console.log('bgok',e)
        },
        zIndex: 2000, // 当第三方子组件层过低不显示时，可以手动调整
        beforeClose: (e) => { // 关闭前的回调，会暂停 弹窗 的关闭
            e()
        },
        okDisabled:true, // 为true时，确定按钮会禁用。 可以通过动态改变【确定】是否禁用
        ok:(e)=>{
            console.log('ok',e)
        },
        close:(e)=>{
            console.log('close',e)
        }
    }
);

自定义组件 第二参数为自定义组件

    this.$zPopup(
        {
            height:200,
            width:400,
            ok:(e)=>{
                console.log('ok',e)
            },
            close:(e)=>{
                console.log('close',e)
            },
            num: this.num
        },
        {
            props:['sub'],
            methods: {
                subOk() {
                    if(this.count > 20) {
                        console.log('数字不能大于20，请修改后再试')
                        return false
                    }
                    return this.count
                }
            },
            data() {
                return {
                    count: this.sub.num
                }
            },
            template: `<div class="z-slot"><div @click="count++">一个组件{{count}}</div></div>`
        }
    )

this.$zPopup(
    {
        width: '60%',
        height: 400,
        top: '15vh',
        num: this.num,
        bgClosable: true,
        beforeClose: async (done,e,type)=>{
            // 阻止关闭窗口
            this.$zPopup({
                type:'toast',
                msg:'正在异步处理数据中...'
            })

            let a = await new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    console.log('用子组件ok数据,可以用于异步验证',e,type)
                    resolve('ok')
                 },3000)
            })

            console.log('a',a)

            if(a === 'ok') {
                this.$zPopup({
                    msg:'当前数据已经存在，是否要选择？',
                    ok:()=>{ 
                        console.log('选择的数据',e)
                        done()
                    }})
            } else {
                // 关
                done()
            } 
        },
        okDisabled:true,
    },
    {
        props:['sub'],
        watch: {
            count:function(v){
                this.sub.okDisabled = v == 12 ? true : false 
            }
        },
        created: function () {
            this.sub.okDisabled = this.sub.num == 12 ? true : false 
        },
        methods: {
            subOk() {
                // if(this.count > 12) {
                //     return false
                // }
                return this.count
            }
        },
        data() {
            return {
                count: this.sub.num
            }
        },
        template: `<div class="z-slot"><div @click="count++">一个组件{{count}}</div></div>`
    }
);

抽屉模式 drawer

this.$zPopup(
    {
        type: 'drawer',
        direction: 'ltr', // rtl ltr  btt ttb
        bgClosable: true,
        width:'36%',  // 400  40%
        hasHead: true,
        btn: true,
        ok:(e)=>{
            console.log('ok',e)
            this.num = e
        },
        close:(e)=>{
            console.log('close',e)
        },
        num: this.num,
        beforeClose:(done)=>{ // 关闭前的回调
            this.$zPopup({msg:'确定删除吗',ok:()=>{ 
                done()
            }})
        }
    },
    {
        props:['sub'],
        methods: {
            subOk() {
                return this.count
            }
        },
        data() {
            return {
                count: this.sub.num
            }
        },
        template: `<div class="z-slot"><div @click="count++">一个组件{{count}}</div></div>`
    }
);

轻提示

    this.$zPopup({
        type:'toast',
        msg:'轻提示3秒关闭'
    })