vue2-element-admin-plugin

# vue2-element-admin-plugin 一款供vue2-element-admin后台管理系统框架使用的插件。 ## 安装 ```shell npm install vue2-element-admin-plugin ``` ## 使用 ```js import {getResultSidebarMenuList, generateRoutes ....等等} from vue2-element-admin-plugin ``` #### 通过menuList生成侧边菜单栏的方法 ##### getResultSidebarMenuList(menuList) #### 通过pageMenuList生成生成路由的方法 ##### generateRoutes(constantRoutes, pageMenuList, nameComponentObj) constantRoutes 基本路由 pageMenuList 一维页面菜单数组 nameComponentObj name对应页面组件对象 ## 1.0.1版本 ### 新增加密方法 #### 1. encryptObj (JSON对象，秘钥) 对象加密秘钥可不传默认值XXX #### 2. decryptObj (密文字符串，秘钥) 对象解密 #### 3. encryptStr (字符串，秘钥) 字符串加密 #### 4. decryptStr(密文字符串，秘钥) 字符串解密 ## 1.0.2版本 ### bug修复 1. 修复showFooter配置无效问题 ### 新增组件 #### autocompleteEmail 自动填充邮箱组件 #### autoHeightTable 自动高度表格组件 ## 1.0.0版本 ### 自定义指令 #### 1. v-closeSelect 实现当页面滚动时，关闭element组件库中部分弹出的选项框。使用方法详细阅读[页面滚动时隐藏弹出的选项框(vue+element)](https://mp.weixin.qq.com/s?__biz=MzUyMjkxNDc3Mg==&mid=2247486233&idx=1&sn=0ed47cba16e883416f5f6a726a9528d9&chksm=f8c5e181f2fca9e11b7b6affb0f6b32007bca6348953cb098c26e4835f0a8283d90394318b51&scene=126&sessionid=1719475299#rd) ### 方法 #### 1. 防抖 ##### debounce(func, wait = 300, immediate = false, onlyOneTime = false) func 防抖执行的方法 wait 间隔时间默认值 300 immediate 是否使用的时候立即执行一次 func 默认值 false onlyOneTime 是否只执行一次 func （immediate 为true时无效）默认值 false #### 2. 节流方法 ##### throttle (func, wait = 300, immediate = false) func 节流执行的方法 wait 间隔时间默认值 300 immediate 是否使用的时候立即执行一次 func 默认值 false 停止触发条件时会立马再执行 func #### 3. 通过树形数据与值查找路径 ##### getPathByTreeValue(treeArr, targetValue, config, deleteChild = false) treeArr 树形数据 targetValue 要查找的值 config 对象形式 config.targetField 配置targetValue 通过什么字段名来匹配默认值 id config.childrenField 配置treeArr子元素的字段名默认值 children 源码可以阅读文章[JavaScript常用的树形数据方法](https://mp.weixin.qq.com/s?__biz=MzUyMjkxNDc3Mg==&mid=2247486525&idx=1&sn=953499c19c4b3cc1478822276410da68&chksm=f9c5d286ceb25b903eced80c893ae33e5ac8a141ef021a67255aec28220c32e9734a51862d5e&token=1002094515&lang=zh_CN#rd) #### 4. 一维数组数据转化为树形数组数据 ##### listArrToTreeArr(data, config) data 一维数组，符合要求的有父元素id的一维数组数据 config 一些配置不传值时默认以下配置，可只配置部分字段 idField: "id", //唯一标识字段名 parentIdField: "parentId", //父节点唯一标识字段名 childrenField: "children", //子节点标识字段名 firstId: "0", // 根节点值 labelField: "label", //label字段名 labelArrField: "labelArr", //给对象新增的中文数组字段名 idArrField: "idArr", //给对象新增的id数组字段名 targetArrField: "", //目标字段数组多个可以用 , 分隔开 idArrField 获取的目标字段不配则取 idField levelField: "level", //给对象新增的层级字段名 level: 0, // 给根目录配置的层级 leafField: "leaf", //叶子节点标识字段名源码可以阅读文章[JavaScript常用的树形数据方法](https://mp.weixin.qq.com/s?__biz=MzUyMjkxNDc3Mg==&mid=2247486525&idx=1&sn=953499c19c4b3cc1478822276410da68&chksm=f9c5d286ceb25b903eced80c893ae33e5ac8a141ef021a67255aec28220c32e9734a51862d5e&token=1002094515&lang=zh_CN#rd) #### 5. 树形数组数据转化为一维数组数据 ##### treeArrToListArr(data , config) data 树形数组数据 config 一些配置不传值时默认以下配置，可只配置部分字段 idField: "id", //唯一标识字段名 parentIdField: "parentId", //父节点唯一标识字段名 childrenField: "children", //子节点标识字段名 firstId: "0", // 根节点值 labelField: "label", //label字段名 labelArrField: "labelArr", //给对象新增的中文数组字段名 idArrField: "idArr", //给对象新增的id数组字段名 targetArrField: "", //目标字段数组多个可以用 , 分隔开 idArrField 获取的目标字段不配则取 idField levelField: "level", //给对象新增的层级字段名 level: 0, // 给根目录配置的层级 leafField: "leaf", //叶子节点标识字段名源码可以阅读文章[JavaScript常用的树形数据方法](https://mp.weixin.qq.com/s?__biz=MzUyMjkxNDc3Mg==&mid=2247486525&idx=1&sn=953499c19c4b3cc1478822276410da68&chksm=f9c5d286ceb25b903eced80c893ae33e5ac8a141ef021a67255aec28220c32e9734a51862d5e&token=1002094515&lang=zh_CN#rd) #### 6. 树形数组根据函数过滤数据 ##### filterTreeArr(data, callback, childrenField = "children") data 树形数组数据 callback 回调函数接受一个item形参，为数组里面的项 childrenField 配置树形数组数据的子元素字段名默认值为 children 示例：filterTreeArr(data, (item) => {return item.id === "5201314"}) 则将会过滤掉id为 ”5201314“的数据，如果其有子元素，子元素也会被过滤。源码可以阅读文章[JavaScript常用的树形数据方法](https://mp.weixin.qq.com/s?__biz=MzUyMjkxNDc3Mg==&mid=2247486525&idx=1&sn=953499c19c4b3cc1478822276410da68&chksm=f9c5d286ceb25b903eced80c893ae33e5ac8a141ef021a67255aec28220c32e9734a51862d5e&token=1002094515&lang=zh_CN#rd) #### 7. 生成唯一id的方法 ##### uuid() ## 扫码点个关注呗 ![爆米花小布微信公众号二维码](https://www.xiaobusoft.com/static/gongzhonghao_QR_code.png) ## 打赏 ![打赏二维码](https://www.xiaobusoft.com/static/qr-card.png)