buildadmin监听弹窗开关

最新推荐文章于 2023-12-16 21:05:44 发布

‌

最新推荐文章于 2023-12-16 21:05:44 发布

阅读量347

点赞数

分类专栏： builadmin 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_39337264/article/details/128529805

版权

builadmin 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该代码段展示了如何在Vue组件中利用watch监听baTable组件的弹窗打开（新增与编辑）和关闭事件。通过注入baTable并监听其form.operate属性，来判断当前是新增(add)、编辑(edit)还是关闭状态。

摘要由CSDN通过智能技术生成

子组件利用watch监听弹窗的打开与关闭；

主要数据都在baTable的原型上；

<template>
    <!-- 对话框表单 -->
    <el-dialog class="ba-operate-dialog" :close-on-click-modal="false"
        :model-value="['add', 'edit'].includes(baTable.form.operate!)" 
        @close="baTable.toggleForm" width="38%">
        
    </el-dialog>
</template>

<script setup lang="ts">
    import {
        reactive,
        ref,
        inject,
        onMounted,
        watch
    } from 'vue'
    import type baTableClass from '/@/utils/baTable'
    const baTable = inject('baTable') as baTableClass

    const items = reactive({
        form: {},
    })

    onMounted(() => {})

    watch(baTable.form, () => {
        if(baTable.form.operate != "" && baTable.form.operate == 'add') {
            // 弹窗打开 -- 新增
        }
        if(baTable.form.operate != "" && baTable.form.operate == 'edit') {
            // 弹窗打开 -- 编辑
        }
        if(baTable.form.operate == "") {
            // 弹窗关闭
        }
    })
</script>