自定义弹窗，popup，可图片可定义

自定义弹窗，popup，可图片可定义 z-pop

超级好二改的popup，三种模式，纯图片，错误，正确

作者： 338***@qq.com 

 

插件ID：z-pop

插件包体积：3.3KB

更新日期：2024-03-07

版本：1.0.0

更新记录

 1.0.0（2024-03-07）

1.0.0

---

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
×	√	√	√	√	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序
√	√	√	√

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

z-pop文档

安装

通过uni_modules安装，在插件市场中点击右上角【使用HbuilderX导入插件】即可。

基本使用

复制代码<template>
    <view>
        <button @click="open">测试</button>
        <z-pop ref="maskSuccess" :desc="popConfig.desc" :title="popConfig.title" :state="popConfig.state"
            @submit="submit" @clickImage="clickImage" :maskBg="popConfig.image"></z-pop>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                popConfig: {
                    desc: "车架号上传成功",
                    title: "上传成功",
                    state: "success",
                    image: "https://cgj-1309034514.cos.ap-chengdu.myqcloud.com/admin/common/index_pop_cop.png"
                }
            }
        },
        methods: {
            open() {
                this.$refs.maskSuccess.open()
            },
            submit() {
                console.log("submit");
            },
            clickImage() {
                console.log("clickImage");
            }
        }
    }
</script>

props

参数	说明	类型	默认值	可选值
icon	顶部图标	String	-	-
state	弹窗状态	String	success	error
title	标题	String	-	-
desc	副标题	String	-	-
maskBg	背景图，使用后就是纯图片模式	String	-	-
btnStr	按钮上的文字	String	-	-

events

事件名	说明	回调参数
@submit	弹窗为非图片时点击按钮	-
@clickImage	纯图片模式点击弹窗	-

slots

名称	说明
mask	弹窗自定义
btn	按钮自定义