vue elementUI如何使用Dialog 对话框

2020-11-12 阅读：4155 类型：前端分类：Vue 标签： Vue

什么是Dialog 对话框？

在保留当前页面状态的情况下，告知用户并承载相关操作。Dialog 弹出一个对话框，适合需要定制性更大的场景。

使用：需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。

例子：

<el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
        <!-- 添加用户对话框 -->
        <el-dialog title="添加用户" :visible.sync="addDialogVisible"  width="50%" @close="addDialogClosed">
            <!-- 内容主体区域 -->
            <el-form label-width="100px">
                <el-form-item label="账号" >
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="addForm.password" type="password"></el-input>
                </el-form-item>
            </el-form>
            <!-- 底部区域 -->
            <span slot="footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser">确 定</el-button>
            </span>
        </el-dialog>

Js代码

<script>
export default {
data(){
return{
                 // 控制添加用户对话框的显示和隐藏
       addDialogVisible: false,
}
},
methods: {
                 // 监听添加用户对话框关闭时间
        addDialogClosed(){
            this.$refs.addFormRef.resetFields()
        },
        // 点击按钮添加新用户
        addUser(){
            //    发起添加用户网络请求
            // 隐藏添加用户对话框
            this.addDialogVisible = false
        }
}
}
<script>