用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.首先是弹出框的设计，大部分的内容都是可替代的，所以我们用插槽来实现。

子组件：

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

父组件：

在父组件中就直接找到相同名字的插槽，模板内的内容会直接渲染到子组件内的slot中

3.2.title内容这些可以直接在父组件写,width,top这几个属性就直接父组件用props传递到子组件，通过设置style也很简单就搞定了。

3.3.弹出框的关闭思路：设置一个Boolean类型的变量visible控制dialog的显示与隐藏

在父组件中设置Boolean类型的dialogVisible为false 绑定在visible传给子组件,
点击按钮后改变dialogVisible为true，这样传给子组件的visible也为true，dialog显示

父组件：

子组件： @click事件函数：

methods: {
          
   
    handleClose() {
          
   
    //发送给父组件，改变visible的值，然后父组件又通过props传过来，控制dialog显示与隐藏
      this.$emit("update:visible", false);
    },
  },

这有个.sync和.self知识要补充：

.sync:

所以只要我们在子组件发送update:visible再带一个false参数就可以实现双向绑定了。

.self:

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

也就是函数仅激活自身，不会传递到子组件，刚刚演示的gif中，点击dialog区域外的部分会隐藏掉，
点击dialog内部的区域就不会触发，这就是它作用

3.4.dailog过渡动画的实现

vue官网提供了很多可以实现动画的样例，大家可以去自行尝试，这里选取了CSS过渡动画来实现
这里注意的点：
类名 
对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，
则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，
那么 v-enter 会替换为 my-transition-enter。

思路：在开始时位置偏移5%，最后的位置时是在原本的位置，这之间再设置动画，代码如下：

.vb-transistion-enter-active {
          
   
  animation: vb-transistion-in 0.3s;
}
//dialog消失的动画是弹出的反向即可
.vb-transistion-leave-active {
          
   
  animation: vb-transistion-in 0.3s reverse;
}
//在开始时向Y轴移动-5%，完成时在原本所在的位置。
@keyframes vb-transistion-in {
          
   
  0% {
          
   
    transform: translateY(-5%);
  }

  100% {
          
   
    transform: translateY(0);
  }
}

但是这样先移动5%，底部会有明显的空白

解决方案： 在css中先多预留高度，这样移动5%的时候就不会有明显的空白了。

height: 110%;

4.总结：这是指dialog的最基本的功能，还有很多的其他的参数还没开发，可以期待后面的进展，所有的源代码可以在gitee上下载到，欢迎大佬clone，star交流

5.项目地址：https://gitee.com/httpxiaobocom/vue-component-ui.git