vue2常用组件封装

在日常开发中，导入导出excel是非常常见的，特别是在一些政企类的项目中。那么下面将介绍几种常见的导入导出的方式，仅供参考 导出--方式一：vue + elementui 导出excel 下载依赖：

效果 大致思路 大致思路 对于树形组件的默认高亮：定义provincialCenterId变量用来记录后端返回的数据里的第一个节点的id值，定义treeExpandData空数组用来指定默认展开的节点

利用element-ui 中的 table表格实现手动新增功能 可以点击 +添加行 从而进行新增一行el-table-column

效果： 大致思路： el-select和el-tree进行嵌套，将el-tree放到el-option里，循环遍历el-option，同时定义一个方法比如：formatData，对树形数据进行递归处理

效果如下： 思路： 定义变量columnCheckedId 记录当鼠标移入到当前行的序号上时其对应的id值，然后与当前行本身的id进行比较若相等则变为复选框，当移出时将columnCheckedId变

在我们日常开发中，在很多地方都会用到dialog，特别是在一些后台管理系统中，比如新增数据、编辑数据等等 但是有时候由于业务需求的原因，原有的一些框架，比如element-ui中提供的模态框满足不了当

下面是一组查看更多的css样式炫酷效果，主要利用的是scss的混入语法、css3的过渡动画以及CSS中用于定义贝塞尔曲线的函数 cubic-bezier(0.65, 0, 0.076, 1) P1x

下面是基于html和css实现的一些非常炫酷的按钮 下面直接上代码：下面是基于html和css实现的一些非常炫酷的按钮 下面直接上代码：

下面是一个利用css和input的一些小技巧，所实现的一个比较炫酷和美观的card卡片 当点击下面的slider时会实现内容的切换 当点击左侧的图片时，图片会铺满这个内容区域，同时内容隐藏，当再次点击

对于数字滚动特效在一些大屏项目里是非常受欢迎的 写在前面 参考：海的对岸 链接：https://juejin.cn/post/7021417758520770596 参考：你可能需要这样的大屏数字滚动

textElpise.vue demo.vue 转载至：https://juejin.cn/post/7254450297467863096#commenttextElpise.vue demo.vu

```vue ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/60276d47d2e04ed4ad0447f68b

最近在做项目时遇到一个需求，类似于: 也就是以图片的形式来代替传统的复选框，从而实现想要的效果 由于项目中用到的框架是 elemenu-ui，因此当时的第一反应就是基于element-ui的单选框和复

知识点： 具名插槽 props传值 watch scrollHeight：元素内容在垂直方向上的总高度，包括溢出的部分。如果元素没有溢出，则scrollHeight等于元素的clientHeight；

这里主要对一些基础的echarts进行封装 echarts官网：https://echarts.apache.org/handbook/zh/basics/download 因为不管我们是需要饼图、南

模仿填写验证码组件，主要利用keyDown事件来监听检查用户是否按了键盘上我们指定的键，并加上自动聚焦和动画来实现炫酷的效果

在很多商城网站或者一些其他的网站我们都可以看到，当用户在页面中向下滚动到一定位置时，就会出现一个返回顶部按钮，这样做的目的就是便于用户操作 思路： 这里的做法其实很简单，就是监听用户在页面中的

以下是封装的一个常用的Tab栏切换，这在日常工作和学习中都是常见的，当然也有很多UI组件库都给我们提供了tabs组件，但是有时候还是觉得自己动手去封装一个更有意思