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相同
}

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注