vue 一个组件内多个弹窗_开发一个简单的 Vue 弹窗组件

一个弹窗组件通常包含两个部分，分别是遮罩层和内容层。

遮罩层是背景层，一般是半透明或不透明的黑色。

内容层是放我们要展示的内容的容器。

{ { title }}

取消

确认

现在弹窗组件的结构已经搭建出来了。

类 modal-bg: 遮罩层

类 modal-container: 内容层容器

类 modal-header: 内容层头部

类 modal-main: 内容层主体部分(用来展示内容)

类 modal-footer: 内容层脚部

属性 v-show: 控制弹窗的展示与关闭

属性 title: 标题

方法 hideModal: 点击取消的回调函数

方法 submit: 点击确认的回调函数

插槽 slot: 用来展示内容

定义完 HTML 结构，还得定义组件的 props 属性，用来接收父组件的传参，以方便在父组件通过属性来控制弹窗。

export default {

name: 'modal',

props: {

show: {

type: Boolean,

default: false

},

title: {

type: String,

default: ''

},

},

methods: {

hideModal() {

this.$emit('hideModal')

},

submit() {

this.$emit('submit')

},

}

}

从上述代码可知，组件只有两个 prop 属性，分别是 show(控制弹窗展示与关闭