更新记录

1.0.0（2022-12-06） 下载此版本

源代码 易更改 自定义 多功能

平台兼容性

zy-popup 弹出层

zy-popup 弹出层参数属性

zy-popup 弹出层事件

zy-popup 使用方式

<template>
    <view class="container">
        <zyCellList :cellList="cellList" @clickHandler="clickHandler"></zyCellList>
        <zyPopup ref="popup0" title="标题" type="dialog" leftBtn="置 空" rightBtn="提 交" @cancel="cancel" @confirm="confirm">
            我是居中弹出
        </zyPopup>
        <zyPopup ref="popup1" mode="top">
            <button @click="close" size="mini">关闭</button>
        </zyPopup>
        <zyPopup ref="popup2" mode="left">
            <button @click="close" size="mini">关闭</button>
        </zyPopup>
        <zyPopup ref="popup3" mode="right">
            <button @click="close" size="mini">关闭</button>
        </zyPopup>
        <zyPopup ref="popup4" mode="bottom" closeable>
            <button @click="close" size="mini">关闭</button>
        </zyPopup>
        <zyPopup ref="popup5" mode="bottom" :closeOnClickOverlay="false">
            <button @click="close" size="mini">关闭</button>
        </zyPopup>
    </view>
</template>
<script>
    import zyCellList from '@/components/zy-cell/index.vue'
    import zyPopup from '@/components/zy-popup/index.vue'
    export default {
        components: {
            zyCellList,
            zyPopup,
        },
        data() {
            return {
                cellList: [{
                    iconfont: 'iconfont icon-juzhong',
                    text: "居中弹出"
                }, {
                    iconfont: 'iconfont icon-31huidaodingbu',
                    text: "顶部弹出"
                }, {
                    iconfont: 'iconfont icon-zuoce',
                    text: "左侧弹出"
                }, {
                    iconfont: 'iconfont icon-youce',
                    text: "右侧弹出"
                }, {
                    iconfont: 'iconfont icon-dibu',
                    text: "底部弹出"
                }, {
                    iconfont: 'iconfont icon-jinzhi',
                    text: "点击遮罩层不关闭"
                }]
            }
        },
        methods: {
            //打开弹出层
            clickHandler(e) {
                if (e.index == 0) {
                    this.$refs.popup0.open()
                } else if (e.index == 1) {
                    this.$refs.popup1.open()
                }
                if (e.index == 2) {
                    this.$refs.popup2.open()
                }
                if (e.index == 3) {
                    this.$refs.popup3.open()
                }
                if (e.index == 4) {
                    this.$refs.popup4.open()
                }
                if (e.index == 5) {
                    this.$refs.popup5.open()
                }
            },
            //关闭弹出层
            close() {
                this.$refs.popup1.close()
                this.$refs.popup2.close()
                this.$refs.popup3.close()
                this.$refs.popup4.close()
                this.$refs.popup5.close()
            },
            //取消事件
            cancel() {
                console.log("我是置空")
            },
            //提交事件
            confirm() {
                console.log("我是提交")
            },
        }
    }
</script>

<style lang="scss" scoped>
</style>

父组件申明：ref=popup
打开弹出层：this.$refs.popup.open()
关闭弹出层：this.$refs.popup.close()

//示例中的zy-cellList组件可在主页查看下载使用

如使用过程中有任何问题，或者您有一些好的建议，欢迎联系QQ：2360273432