vue+elementui自定义Dialog组件之登录弹框话框实现(实现不同vue组件关联)

elementui提供一个可实现弹框的组件el-dialog,一般会将弹框写在一个vue文件，通过el-dialog套用类似于这种

<el-button round @click="dialogFormVisible = true">登录</el-button>
<el-dialog title="登录" :visible.sync="dialogFormVisible" center>
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
<el-form-item label="账号" prop="num">
<el-input v-model.number="ruleForm2.num"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false; resetForm('ruleForm2')">取 消</el-button>
<el-button type="primary" @click="submitForm('ruleForm2')">登 录</el-button>
</div>
</el-dialog>

一般不会造成问题，但是写在同一个vue界面，代码比较臃肿，下面演示一下写在不同的vue文件实现调用

首先在navShow.vue的页面写入如下代码

<el-button round @click="submitForm()">登录</el-button>
<!--仔细阅读Dialog的各个属性参数，会影响到布局排版，例如遇到了一个大坑就是没有设置:append-to-body='true'，导致遮罩遮盖整个页面，:lock-scroll="false"没有设置的话，点击前后会感觉到头部导航栏的移动，体验性很不好！！还有设置dialog的宽度width="40%"前面不用加冒号：-->
<el-dialog title="登陆" :visible.sync="dialogTableVisible" center :append-to-body='true' :lock-scroll="false" width="30%">
<login-name></login-name>
</el-dialog>
<script>
import LoginName  from '../main/Login.vue';
export default {
components: {LoginName},
name: "navShow",
data() {
return {
dialogTableVisible: false
}
}
methods:{
submitForm(){
this.dialogTableVisible=true;//默认页面不显示为false,点击按钮将这个属性变成true
}
}
}
</script>

注意：很多人在写完这个，迫不及待地去点击登陆按钮时报错：

那么这个<login-name>这个组件是怎那么来的呢

其实他就是：components: {LoginName},里的LoginName,vue会将其自动转换成为驼峰命名法变成一个组件，在webstorm输入<符号，组件信息会有提醒的。当然个人建议在弹出的vue文件里的name，也要和这个相同

下面介绍一下所弹出的vue页面，这个其实和正常的vue文件一样

<template>
<section>
<el-container>
<el-form label-width="120px" :model="User" :rules="Rules" ref="User" >
<el-row>
<el-col>
<el-form-item label="账号" prop="name">
<el-input v-model.number="User.name"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="User.pass" auto-complete="new-password"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="记住密码" prop="delivery">
<el-switch v-model="User.delivery"></el-switch>
</el-form-item>
</el-col>
</el-row>
<span class="pwwd">
<a href="">忘记密码？</a>
<a href="">还没账号,注册一个</a>
</span>
</el-form>
</el-container>
<div slot="footer" class="dialog-footer">
<el-button >取 消</el-button>
<el-button type="primary" @click="submitForm()">登 录</el-button>
</div>
</section>
</template>
export default {
name: 'LoginName',//这个LoginName最好和引入的vue的LoginName相同
}