起因

• H###s：#满，微信小程序有模态弹窗吗？
• #满：有啊，喏。wx.showModal（随手甩出一个链接）
  短暂的几十秒后…
• H###s：不对啊，我要的不是这种
• #满：那你要哪种？
• H###s：就是那种组件，可以自己在里面写wxml代码的。
• #满：组件？那没有
• H###s：那难顶哦，有这个需求
• 祺##：自己写一个呗，又不难

因为我一般使用 kbone - vue ，所以这里也拿 vue 做示例。另外，使用 typescript 语法，请使用 javascript 的童鞋自行理解～

最终效果

编写过程

1. 我们先创建一个空的 vue 组件，我这里命名为 Modal
   
   
2. 组件创建好了，随便写点东西，然后引入到页面，看看对不对吧
   组件：
   
   页面：
   
   实际效果：
   
3. OK，组件引入正确，但是这也只是一个组件，并不是模态弹窗。众所周知，模态弹窗，是一个弹出框，应该浮动到最上层，那就加一点 css 吧
   组件：
   
   实际效果：
   
4. emmmm，有点丑，不过意思是这个意思，接下来，让弹出框水平垂直居中，再给点宽度高度吧
   组件：
   
   实际效果：
   
5. 是不是有内味儿了？但毕竟是模态弹窗组件，显示什么内容应该由页面来决定，所以，slot 走起！
   组件：
   
   页面：
   
   实际效果：
   
6. OK，那既然是模态弹窗，那就代表可以关闭打开，其实我个人推荐的是在页面里面使用 v-if / v-show 来控制，让组件干净一点
   页面：
   
   实际效果：
   
   
7. OK，既然打开有了，接下来就是关闭了
   组件：
   
   页面：
   
8. 行了，关闭打开也有了，再搞点小东西
   组件：
   
   页面：
   
   实际效果：
   

完成

简单的模态框做完啦！怎么样？似8似很简单！
**考虑到会有一些组件的层级，并且设置 z-index 无效，组件的外部标签可修改为 cover-view **

结束

• H###s：真的诶！超简单的，感谢你的组件了（白嫖成功）！