vue中的模态对话框组件实现过程
98 浏览量
2020-08-27
15:11:25
上传
评论
收藏 73KB PDF 举报
vue中的模态对话框组件实现过程中的模态对话框组件实现过程
主要介绍了vue中的模态对话框组件实现过程,通过template定义组件，并添加相应的对话框样式，需要的朋友可以参考下
写在前面写在前面
对话框是很常用的组件 ， 在很多地方都会用到，一般我们可以使用自带的alert来弹出对话框，但是假如是设计出的图该怎么办呢 ，所以我们需要自己写一个对话框，并且如果有很
多地方都用到，那我们很有必要写成一个通用的组件形式，在需要的地方之间引用。
现在我们来动手实现一个对话框组件 ，按照之前的习惯，我们先看下实现的效果图
1.首先，通过首先，通过template定义一个组件定义一个组件
<template id="dialog">
<div class="dialog">
<div class="dialog_mask"></div>
<div class="dialog_container">
<div class="dialog_content">
<div class="dialog_content_top">提示内容</div>
<div 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>
</div>
</div>
</div>
</div>
</template>
并添加相应的对话框样式
/*对话框style*/
.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;
}
2.使用使用Vue.component注册一个全局注册一个全局Vue组件，我们将这个组件叫做组件，我们将这个组件叫做v-dialog，然后通过，然后通过template指定这个组件指定这个组件
Vue.component('v-dialog', {
template: '#dialog',
资源评论
