No.27 vue-element-admin 学习使用（二十二）Mixin 小组件，水波纹，悬浮动效，抽屉这是我参与8

这是我参与8月更文挑战的第27天，活动详情查看：8月更文挑战

继续学习Mixin小组件，

就是在点击按钮的时候，就会出现一个水波纹的动态效果

代码用起来也很简单，给普通的el-button加上v-waves就可以了，在原有按钮上加这个功能的话，改起来也很方便。

这里需要注意的是，水波纹效果并不是一个组件，而是一个指令

import waves from '@/directive/waves/index.js' // 水波纹指令

从waves.js中引入waves，并且注册指令Vue.directive('waves', waves)，然后vue.use一下

waves.js中，实现了水波纹的效果，通过一系列的计算实现的，说真的我也没细看，太难了

悬浮的时候，会像进度条一样，左右动一下，用到了Mallki组件

使用的时候传一个text参数，作为显示的内容就行

组件内主要也都是css，用css控制光标的向右移动，并且文字上下消失，显示

作者把它命名为Share，原本是一个方块，在点击后，会向下展开一些内容，来展示抽屉内更多的内容，再点击一下，收起这些内容，还是比较方便的功能的。

实现上，用了DropdownMenu组件，传articleList作为抽屉内容，title作为顶部的开启抽屉按钮，点击则展开或收起

组件内，首先是span作为顶部的开启按钮，点击事件是clickTitle，更改isActive的状态，来更改整个大div的active样式。然后用v-for遍历item，生成抽屉的内容。

抽屉自下而上的收起动作，也是css实现的。