这次给大家带来vue中模态对话框组件实现步骤详解,vue中模态对话框组件实现的注意事项有哪些,下面就是实战案例,一起来看一下。
写在前面
对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们很有必要写成一个通用的组件形式,在需要的地方之间引用。
现在我们来动手实现一个对话框组件 ,按照之前的习惯,我们先看下实现的效果图
1.首先,通过template定义一个组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <template id= "dialog" >
<p class = "dialog" >
<p class = "dialog_mask" ></p>
<p class = "dialog_container" >
<p class = "dialog_content" >
<p class = "dialog_content_top" >提示内容</p>
<p class = "dialog_btn" >
<a href= "javascript:;" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" class = "btn" @click= "close" >确定</a>
<a href= "javascript:;" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" class = "btn" @click= "close" >取消</a>
<a href= "javascript:;" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" class = "btn" @click= "login" >去登录</a>
</p>
</p>
</p>
</p>
</template>
|
Salin selepas log masuk
并添加相应的对话框样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | .dialog{
}
.dialog_mask{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.dialog_container{
background: #fff;
width: 300px;
height: 120px;
position: relative;
border-radius: 10px;
margin: 0 auto;
}
.dialog_content{
text-align: center;
padding-top: 30px;
}
.dialog_btn{
margin-top: 20px;
}
.dialog_btn a{
background: yellow;
padding: 2px 30px;
border-radius: 5px;
color: #fff;
text-decoration: none;
width: 50px;
display: inline-block;
}
.dialog_btn a:nth-child(2){
margin-left: 20px;
}
|
Salin selepas log masuk
2.使用Vue.component注册一个全局Vue组件,我们将这个组件叫做v-dialog,然后通过template指定这个组件
1 2 3 4 5 6 7 8 9 10 11 | Vue.component( 'v-dialog' , {
template: '#dialog' ,
data: function (){
return {
}
},
methods:{
},
created: function (){
}
})
|
Salin selepas log masuk
3.最后,在我们需要的地方通过v-dialog标签来引用这个组件
<v-dialog></v-dialog>
创建一个vue组件步骤大致就是这样,但是,父组件和子组件该怎么进行通信呢?
这里主要使用props传递数据到子组件
修改如下上面的代码,添加props属性
1 2 3 4 5 6 7 8 9 10 11 12 | Vue.component( 'v-dialog' , {
template: '#dialog' ,
props:[ 'dialogShow' , 'msg' ],
data: function (){
return {
}
},
methods:{
},
created: function (){
}
})
|
Salin selepas log masuk
可以看到我们是通过字符串数组来定义prop的,除此之外我们还可以用对象的形式来定义prop,用来为组件的 prop 指定验证规则,如果类型错误,在vue中会有警告,其中 type的值可以是这些:String Number Boolean Function Object Array Symbol
1 2 3 4 5 6 7 | props: {
name: String,
showDialog: {
type: Boolean,
default : false
}
}
|
Salin selepas log masuk
在组件模板中通过 v-if="showDialog"
判断是否显示或隐藏对话框,通过 v-text="msg"
绑定对话框提示内容,
v-if="type==1"用于判断对话框类型 ,显示相应的按钮,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <template id= "dialog" >
<p class = "dialog" v- if = "showDialog" >
<p class = "dialog_mask" ></p>
<p class = "dialog_container" >
<p class = "dialog_content" >
<p class = "dialog_content_top" v-text= "msg" >提示内容</p>
<p class = "dialog_btn" >
<a v- if = "type==1" href= "javascript:;" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" class = "btn" @click= "close" >确定</a>
<a v- if = "type==2" href= "javascript:;" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" class = "btn" @click= "close" >取消</a>
<a v- if = "type==2" href= "javascript:;" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" class = "btn" @click= "login" >去登录</a>
</p>
</p>
</p>
</p>
</template>
|
Salin selepas log masuk
在引用组件的地方添加 :show-dialog="showDialog" :msg="msg" :type="type"
这几个属性,将其值传递给对话框组件
1 | <v-dialog :show-dialog= "showDialog" :msg= "msg" :type= "type" ></v-dialog>
|
Salin selepas log masuk
需要注意的是showDialog在组件中需要写成show-dialog这种形式,不然会获取不到数据
我们在data中定义这些属性
1 2 3 4 5 | data: {
msg: '' ,
showDialog:false,
type:1,
},
|
Salin selepas log masuk
然后,我们在按钮点击提交的时候触发弹出对话框事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | submit: function (){
if (!this.isLogin){
this.msg = "请先去登录再领取金额" ;
this.showDialog = !this.showDialog;
this.type = 2;
return ;
}
if (this.amount){
if (this.amount<1 || this.amount>1000){
this.msg = "输入金额不能低于1元大于1000" ;
this.showDialog = !this.showDialog;
this.type = 1;
} else {
this.msg = "领取成功,请在账户中心查看" ;
this.showDialog = !this.showDialog;
this.type = 1;
}
} else {
this.msg = "领取金额不能为空" ;
this.showDialog = !this.showDialog;
this.type = 1;
}
}
|
Salin selepas log masuk
这样,我们就能弹出对话框组件了,通过msg设置不同的提示消息
那么,我们该怎么关闭这个对话框呢 ,这里就涉及到子组件需要向父组件传递信息了
主要通过$emit来触发父类事件,如:this.$emit('close-dialog');
然后在父类通过v-on来监听子类触发的事件,v-on:close-dialog="closeDialog"
,也可简写写成@close-dialog="closeDialog"
代码如下:
在v-dialog标签中添加@close-dialog="closeDialog"监听子组件触发的事件
1 | <v-dialog :show-dialog= "showDialog" :msg= "msg" :type= "type" @close-dialog= "closeDialog" ></v-dialog>
|
Salin selepas log masuk
然后定义closeDialog函数修改showDialog 的状态
1 2 3 | closeDialog: function (){
this.showDialog = false;
}
|
Salin selepas log masuk
这样同样也需要注意的是监听函数closeDialog需要写成close-dialog形式
ok,以上我们就实现了一个对话框组件
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
ES6实现全屏滚动插件步骤详解
nodejs日志模块winston使用方法总结
Atas ialah kandungan terperinci vue中模态对话框组件实现步骤详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!