vue将输入框置灰_2018.01.29.使用vue组件modal制作登陆弹窗，并实现背景灰蒙透明效果...

分别创建两个组件，用于登录和注册的弹窗。Modal、Modal1

html代码：

请输入账号密码

确认

关闭

可根据需要调整位置

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

}

},

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