本文内容参考链接:https://www.cnblogs.com/padding1015/p/7878741.html
弹出框使用ElementUI中表单对话框的样式,实现点击用户注册后,header组件获取main组件中dialogFormVisible的值来控制main组件中表单对话框的弹出。
如果直接将表单对话框放在header组件,表单因为header长宽太小变形了,于是,就将对话框放在父组件中。父组件home主要包含<Header/><Main/><Footer/>这三部分,对话框放在Main中。
下面开始讲述如何实现:
因为父组件要有值才能传到子组件,因此:
第一步:先在父组件中定义一个变量,通过true和false控制表单对话框是否显示。
第二步:在父组件中给子组件Header绑定子组件需要操作的变量
父组件给子组件绑定值之后,子组件要接收父组件中传来的值,因此:
第三步: 在header子组件定义props:['需要接收父组件的变量名']
第四步:子组件接收到值之后,尝试使用看是否接收成功,在子组件中使用 {{this.dialogFormVisible}}测试是否接收成功,页面显示内容表示接收成功。
子组件修改变量后,要传变量的值回父组件,这里使用$emit函数传值。
第五步:在子组件的页面使用v-on:click=""绑定点击用户注册的事件函数reqister,然后在methods中编写register函数。
$emit的作用是让registerBoxStatus这个自定义事件发射,这里注意,"自定义事件名" 一定要用引号括起来,不然会报错is not defined
子组件发射自定义事件成功后,要父组件中要进行相应。
第六步:使用v-on:发射的事件名称="父组件接收变量后需要需要进行的函数操作($event)",自定义事件和他的对接人(同名事件)交接,同名事件执行早在这里准备好的另一个父组件里边的函数register,并且把自定义事件从子组件中带来的参数转交接,给了这个函数register的$event(固定名字,不能改)参数。
然后在父组件中编写接收子组件发射的自定义事件之后进行操作的register函数。
最后测试成功,打开对话框后,左上角的值变为true。
最后附上实现代码:
Home.vue的代码如下:
<template>
<div>
<Header v-bind:dialogFormVisible = "dialogFormVisible" v-on:registerBoxStatus="register($event)"/>
<!--注册对话框-->
<div>
<el-dialog title="测试" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="XXX" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="XXX" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="XXX">
<el-option label="XXX" value="shanghai"></el-option>
<el-option label="XXX" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<style>
.txt{
text-indent: 2em;
font-size: 12px;
line-height: 20px;
color: grey;
text-align: left;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 5; /** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/
}
.item{
float: left;
height: 160px;
width: 350px;
overflow: hidden;
}
.InnerItem2{
margin: 0;
width: 500px;
text-align: center;
overflow: hidden;
}
.border{
color: deepskyblue;
box-shadow:1px 1px 5px #333;
-webkit-box-shadow:1px 1px 5px #333;
-moz-box-shadow:1px 1px 5px #333;
}
.BookItem{
margin: 0;
width: 1000px;
margin: 0 auto;
}
.InnerItem2 span{
font-weight: 400;
margin: 0 10px;
}
.InnerItem2 .name{
float: left;
color: deepskyblue;
}
.InnerItem2 a{
text-decoration: none;
}
.lastChapter{
color: deepskyblue;
}
.type{
float: left;
color: coral;
}
.InnerItem2 .author{
float: right;
color: #B3B3B3;
}
.InnerItem2 hr{
border: 1px solid #88C6E5;
overflow: hidden;
margin: 0 5px;
}
.item2{
float: left;
height: 400px;
width: 500px;
overflow: hidden;
padding: 0;
}
.item2 .txt{
-webkit-line-clamp: 4; /** 显示的行数 **/
}
.item2 .h2txt{
font-size: 14px;
font-weight: bold;
padding-left: 5px;
line-height: 20px;
height: 20px;
overflow: hidden;
margin-right: 2px;
color: deepskyblue;
box-shadow:1px 1px 5px #333;
-webkit-box-shadow:1px 1px 5px #333;
-moz-box-shadow:1px 1px 5px #333;
}
.item2 .image{
height: 130px;
width: 96px;
}
.item2 .image img{
float: left;
height: 120px;
width: 96px;
}
.item .image img{
float: left;
height: 150px;
width: 120px;
}
.img-shadow{
background:#000;
box-shadow:1px 1px 5px #333;
-webkit-box-shadow:1px 1px 5px #333;
-moz-box-shadow:1px 1px 5px #333;
}
.image{
float: left;
height: 150px;
width: 120px;
margin: 0 10px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
/*line-height: 200px;*/
}
.el-container{
margin: 0;
padding: 0;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: left;
padding: 0;
margin: 0;
/*min-height: 10px;*/
}
.dt-txt span{
color: #B3B3B3;
float: right;
font-weight: 400;
}
.dt-txt a{
/*float: left;*/
/*font-weight: 400;*/
text-decoration: none;
color: deepskyblue;
}
.heat-books{
width: 1100px;
height: 300px;
margin: auto;
}
.books-type{
margin: 0 auto;
width: 1500px;
height: 320px;
}
.hr-link{
border: 1px solid #88C6E5;
overflow: hidden;
margin: 5px auto;
}
</style>
<script>
import Header from '../views/Header.vue';
export default {
name: 'home',
props:{
},
data(){
return{
//表单变量
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px',
}
},
components: {
Header
},
created(){
},
beforeMount(){
},
mounted(){
},
methods:{
register(msg){
this.dialogFormVisible = msg;
},
}
}
</script>
Header.vue的代码如下:
<template>
<div>
{{this.dialogFormVisible}}
<div class="grid-content bg-purple" type="flex">
<span v-on:click="register" class="pointer">用户注册</span>
</div>
</div>
</template>
<script>
export default {
name: 'Header',
props:['dialogFormVisible'],
inject:['reload'],
data(){
return{
}
},
components: {},
mounted(){
},
methods:{
register(){
this.$emit("registerBoxStatus",!this.dialogFormVisible)
}
}
}
</script>
<style lang="postcss" scoped>
.pointer{
cursor: pointer;
}
*{
margin:0;
padding:0;
}
.el-header a{
text-decoration: none;
margin: 20px;
color: gray;
}
.bg-purple {
background: #d3dce6;
}
.grid-content {
border-radius: 4px;
min-height: 20px;
padding: 10px 0px;
overflow: hidden;
}
</style>