使用Vue3撸一个d窗组件

这里text，confirmBtnText，cancelBtnText三个变量由父组件传入。

text ：d窗的文本信息；

confirmBtnText ：确认按钮的文本信息；

cancelBtnText ：取消按钮的文本信息；

这里主要是定义confirm的过渡动画。

定义个props用来接收父组件传来的值。

定义data里面的变量visible来控制d窗的出现和消失。

定义几个事件来完成这个组件。

confirm () ：点击确认按钮，隐藏组件，并向父组件派发confirm事件；

cancel () ：点击取消按钮，隐藏组件，并向父组件派发cancel事件；

hide () ：隐藏组件；

show () ：显示组件；

使用 emits 将这两个事件派发出去。

引用组件，拿到组件的ref，并定义一个confirm事件，来控制点击确定后面要干的事情。text，confirmBtnText控制组件显示的文本信息。

在使用组件的按钮处定义@click事件，来唤起组件让其显示。

业务逻辑这里使用setup函数组合API来编写。

先用ref拿到组件的dom

前言：

VUEd窗动画建议不要参考官网封装好的的transition，本来很简单的一个需要，越看越晕。

先上源码，看不懂再往下看：

开发流程：

1.先写好一个不带动画的d窗组件，share_cover为遮罩DIV，share_content为内容DIV

2.（核心）

d窗动画，我们要给内容DIV的CSS加个animation属性。这里我们给animation设置了三个值：动画CSS名，时间，动画播放次数

3.动画CSS名，按照组件功能命名就行，动画效果在@keyframes里面配置

keyframes后面跟动画名，0%表示动画开始的DIV样式，会覆盖掉animation所在DIV的属性。

可以把0%当作vi-if=false时来理解，动画刚开始时候DIV的样式。

比如我们这里0%的时候bottom设置为-5.5rem,那么share_content里面的bottom会开始会被替换成-5.5rem.

5.同理，如果我们想把动画由从上到下换成从中间一个点展开，也是改keyframes

更多动画效果可以参考 这个 ，直接预览看里面的样式文件，拉倒keyframes那一块即可

---