Vue + TypeScript + ElementUI 自定义实现下拉动画效果

刚刚完成的项目中有很多默认不显示，点击下拉出现的功能

一般来讲这种功能纯CSS就可以实现，但是前提要知道高度。那如果内容的高度未知怎么办呢？

ElementUI 有个Collapse 折叠面板的组件 http://element-cn.eleme.io/#/zh-CN/component/collapse

那我可不可以只用下拉的那个效果呢，嗯哼？

我们来看看源码

在node_modules里面的找到element-ui

长这样，看着是不是很眼熟(^_−)☆

然后再找collapse组件

主要看collapse-item.vue这个文件

这里可以注意到一个很特别的组件，用法很像插槽，但是引进来的是个js文件

找到这个文件，看看里面到底是什么东东？呐！在这里

具体内容这里就不贴出来了，看到最下面你会发现，这是一个函数式组件，用render函数渲染出来的

其中引用了下面这个，对dom元素进行操作的方法

import { addClass, removeClass } from 'element-ui/src/utils/dom';

好，下面就开始动手了

建一个dom.ts文件，将dom.js中的内容复制过来，然后修改成下面的样子，其他用不到的方法可以删掉，给参数定义类型（注：这个是ts的写法）

import Vue from 'vue';
/* istanbul ignore next */
function trim(val: string) {
    return (val || '').replace(/^[\s