2018.01.29.使用vue组件modal制作登陆弹窗，并实现背景灰蒙透明效果

2018.01.29.使用vue组件modal制作登陆弹窗，并实现背景灰蒙透明效果

作者: chenhaoting 
时间: 2018-01-29 
分类: 科研项目日志 
评论
分别创建两个组件，用于登录和注册的弹窗。Modal、Modal1
html代码：
<div class="modal-backdrop" >

<div class="modal">
<div class="modal-header">
<slot name="header">
<h2>请输入账号密码</h2>
</slot>
</div>
<input id="modal_name" class="form-control" placeholder="用户名"/>
<input id="modal_pass" class="form-control" type="password" placeholder="密码"/>
<div class="modal-body">
<slot name="body">
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
<button type="button" class="btn btn-primary">确认</button>
<button type="button" class="btn" @click="close">关闭</button>
</slot>
</div>
</div>
</div>

可根据需要调整位置
js代码要加一条
methods: {

close: function () {
this.$emit('close');
}
}

用来传值给导航条组件。
样式可以去找开源的，建议浅色调，比较好看清晰。
注册的弹窗类似，不再贴代码。
导航条组件html代码只要多加四个标签，原理简单不做说明，不贴代码了，尽量简短。
js代码需要添加
components: {

modal,modal1

},
data () {

return {
isModalVisible: false,
isModalVisible1: false
}

},
methods: {

showModal: function () {
this.isModalVisible = true
},
closeModal: function () {
this.isModalVisible = false
},
showModal1: function () {
this.isModalVisible1 = true
},
closeModal1: function () {
this.isModalVisible1 = false
}

},
分别用来控制两个弹窗的开关值