用Vue仿element-ui从0到1封装可复用的组件-dialog

用Vue仿element-ui从0到1封装可复用的组件-dialog

1.需要的前置知识

vue基础语法,组件通讯(sync,provide,inject)，slot，v-model，computed和watch 过渡动画

1.1准备工作，引入全局

import vbDialog from "@/components/Dialog";
Vue.component(vbDialog.name, vbDialog);

父组件：App.vue
子组件：Dialog.vue

2.实现目标

	点击click按钮，出现弹出框，并且有一定的过度动画，而且弹出框的上部分的Tips，内容部分，
和下面的button部分都是可替换的，不是写死的。只有点击弹框外的部分和弹框内相关的按钮才会关闭。

参数部分：

3.实现思路：

3.1.首先是弹出框的设计，大部分的内容都是可替代的，所以我们用插槽来实现。

子组件：

主要分为三部分来填充，用了具名插槽，非常直观就看明白了

父组件：