vue3 弹窗 轻提示 抽屉三合一

type 为空，普通弹窗； type 为'drawer'时 抽屉，direction 取值：从左往右开 rtl 从右往左开ltr 从上往下开 ttb 从下往上开 btt type 为'toast'，轻提示 全局引入

1、安装 yarn add vue3-popup 或 npm install vue3-popup --save

2、引入 const app = createApp(App) import vuepop from 'vue3-popup'; import 'vue3-popup/lib/style.css'; app.use(vuepop)

3、使用

提示

    import { getCurrentInstance, ref, h } from "vue";
    const { proxy } = getCurrentInstance();
    proxy.$vuepop({msg:'弹窗'})

    或

    import { vuepop, vuemsg } from 'vue3-popup';
    vuepop({msg:'弹窗'})


    vuemsg('一个msg提示,group默认true相同内容提示一次')

    vuemsg({msg:'提示内容',time:100, group: false, color:'#67c23a',bg:'#f0f9eb',icon:'ok'})

其它参数

proxy.vuepop(
    {
        
        type: '',  // drawer 切换为抽屉 toast切换轻提示
        direction: '', // type为'drawer'时，direction取值：默认为从左往右开rtl  从右往左开ltr  从上往下开ttb  从下往上开btt
        duration: 3000, // type为'toast'时 生效 关闭时间

        title:'提示', // 标题
        msg:'<span>HTML</span><span style="color:red;">出错了</span>', // 消息正文内容
        html: true, // 是否将 msg 属性作为 HTML 片段处理
        okText: '确 定', // 确定按钮的文本内容
        closeText: '取 消', // 取消按钮的文本内容

        drag: true, // 是否拖拽
        headMax: true, // 是否全屏


        width: 400, // 固定宽 '60%'  600
        height: 200, // 固定高，不传为自适应高
        zIndex: 2000, // 当第三方子组件层过低不显示时，可以手动调整
        top: '15vh', // 弹窗中的 margin-top 值
        
        showHead: true, // 是否显示标题栏
        showFooter: true, // 是否显示按钮栏
        customClass: 'css-name', // 自定义类名
        headClose: true, // 是否显示右上角关闭按钮
        showClose: true, // 是否显示取消按钮
        showOk: true, // 是否显示确定按钮
        okDisabled: true, // 为true时，确定按钮会禁用。 可以通过动态改变【确定】是否禁用
        bgClose: false, // 点击遮罩层是否可以关闭

        beforeClose: (done,type) => { // 关闭前的回调，会暂停 弹窗 的关闭  type：x,close,ok
          done()
        },
        
        ok:(e)=>{
            console.log('ok',e)
        },
        close:(e)=>{
            console.log('close',e)
        }
    }
);

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

    // 自定义弹窗组件
    import child from "@/components/child.vue";

    import { vuepop } from 'vue3-popup';

    const ee = ref(11);
    const disabled = ref(false)

    const upEe = (e) => {
        ee.value = e // 子组件结果
        disabled.value = e == 12 
    }
    vuepop({
        okDisabled: disabled, // 子组件为12时禁用确定
        beforeClose: async (done,type) => {
            // 阻止关闭窗口
            if (type !== "ok") return done();
            
            vuepop({type: "toast",msg: "正在异步处理 " +  ee.value + " ,请稍等..."});

            let a = await new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("可以用于异步验证", ee.value);
                    resolve("ok");
                }, 3000);
            });

            if (a === "ok") {
                proxy.$zPopup({msg: "当前" + ee.value + "已经存在，是否要处理？",ok: () => {done();},});
            } else {
                done(); // 关
            }
        }
    },
    h(child, { ee: ee, ["onUpdate:ee"]: (e) => upEe(e)}))