526互联

Vue3 element plus el-dialog (对话框)

发布时间 2023-09-26 17:35:49作者: 海乐学习

首先得是 Vue3项目 并已经引入 element plus

引入 element plus  方法：https://www.cnblogs.com/hailexuexi/p/17730724.html

效果图

 这个对话框代码 和 头部 菜单 都在 一个 HeaderComponent.vue 文件中 ，当然也可以在两个vue文件。

HeaderComponent.vue 关键代码

<template>
    <header class="flexC Huans fl-bet">
            <a href="javascript:;" class="HdLog"><img src="../assets/images/icon/logo_cn.png"></a>
            <ul class="HdNav Huans flex">
                <li>
                    <a href="javascript:;" class="HdNava flexC fl-cen" @click="openDialog()" ><i class="HdNavI HdNavI10"></i><p>配置</p></a>
                    <div class="HdNavC Huans">  
                        <a href="javascript:;" class="HdNavCa Huans">添加到更多</a>
                        <a href="javascript:;" class="HdNavCa Huans">后移</a>
                    </div>
                </li>
            </ul> 
        </header>

        <!-- 对话框 -->
        <el-dialog v-model="dialogVisible" title="配置参数" width="40%" :before-close="handleClose">
            <el-form :model="form">
                <el-form-item label="分机号" :label-width="formLabelWidth">
                    <el-input v-model="this.globalData.currentUserTel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="Ip地址" :label-width="formLabelWidth">
                    <el-input v-model="this.ip_address" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
                </span>
            </template>
        </el-dialog>


</template>
@click="openDialog()"  为弹出对话框方法
this.globalData.currentUserTel 为全局变量
this.ip_address 为页面级变量
<script>
// 在子组件中注入全局对象
import { ref,inject, watch } from 'vue';

export default {
    // 组件名称
    name: 'HeaderComponent',
    data() {
        return {
            dialogVisible: false,
            ip_address:"192.168.1.1"
        }
    },
    setup (props,{emit}) {
        // 注入全局对象
        const globalData = inject('globalData');
        watch(() => globalData.currentUserTel, (newValue) => {
            // 更新自己的状态
            globalData.currentUserTel=newValue;
            console.log("HeaderComponent watch "+newValue);    
        })
return {
            globalData 
        };
    },
    mounted() {
        //console.log("HeaderComponent "+ this.globalData.websockOpenPng);    
    },
    methods: {
        openDialog(){
            console.log("openDialog=====");
            this.dialogVisible = true;
        },
       
    }
 
}
</script>