vue elementUI如何使用Dialog 对话框

18天前   阅读:135   分类:前端    标签: 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>


【腾讯云】11.11 云上盛惠,云产品限时抢购,1核2G云服务器首年88元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/505.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

上一篇:没有更多了文章

下一篇: TP5搜索分页

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×