用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.首先是弹出框的设计,大部分的内容都是可替代的,所以我们用插槽来实现。
子组件:
主要分为三部分来填充,用了具名插槽,非常直观就看明白了
父组件: