Cxiaomu的博客

画一个三角形并仅点击三角形区域才会触发点击事件。画个三角形绑定点击事件（涉及点击区域）关于画三角形，是个老生常谈的问题，最常用的就是使用border来实现，这里提供更多更好用的方法，svg polygon绘制三角形、canvas、css clip-path:polygon( ) 裁剪可视区域，并结合 addEveentListener 实现仅点击三角形时触发事件。

某些情况，大屏页面需要实现一些比较美观的图表，常用的图表插件有，此篇的实现效果为饼图和的结合体。这两种图具体实例可查看同时实现轮播高亮，采用定时循环操作，先调用的取消所有的高亮，再调用高亮指定数据。每次窗口大小改变时，进行监听，chart更新，调用resize方法，避免出现错乱效果。其中，需要注意到keep-alive 缓存特殊的两个阶段，activated(组件激活时) 和deactivated(组件停用时)

在Vue开发中，可以利用一些第三方插件来实现文件预览功能。例如使用vue-office插件来实现文件的预览。注意：据网上资料所说，此插件还存在部分缺陷，比如docx的艺术字体、excel的多种数据格式解析不准确的问题，对此有很高要求的小伙伴慎用。文件上传时触发handleChange事件，执行操作：1. 解析文件名匹配对应预览组件，利用previewFileCom函数，2. 设置预览文件的url，3. 展示预览弹窗预览组件渲染完成、渲染失败时分别调用**render

后台管理系统中，会常用到打印功能，打印一些表格数据、信息之类的。此处做个简单的打印示例。此功能模块，主要分为三个部分打印组件作为处理，将需求跟模板文件映射起来。1. 打印模板文件，提前编写好的数据展示模板；2. 打印组件，将模板文件名跟模板文件映射起来；3. 应用demo，实际应用。

开发后台管理系统的过程中，会出现一些管理员配置功能的部分，比如一些开放接口权限的开通。分析一下，“开放接口权限的开通”，会有很多的权限可以开通，那就是多选。另外，开放接口肯定会进行分类，类别唯一。按类进行多选，再加上个全选的功能。支持多选的同时还需要分类，会有点复杂，就需要设计好数据结构，内部有具体类别的标识与选中的数据存储。至此，需求就分析完毕了。

前篇：结合本博客之前的国际化多语言的实现与实际业务场景，意识到人工在项目中手动配置、替换多语言花费的人力成本较高，于是衍生出其他的管理方案，解放双手，核心原理就是多语言配置文件与 Excel 文件相互转换、文件读写。因为Vika单词插入记录最多10条，此处就不演示直接与Vika进行多语言管理的实现，代码在博主本地，有需要的可以私。

在做后端开发管理实际业务开发中，有时会遇到处理导入、导出Excel文件的数据，比如多语言管理和报表数据。将前端数据中对象数组格式的数据与excel格式数据进行相互转换。既然时对 Excel 文件进行处理，自然需要插件了，比如 xlsx。于是，进行简单demo的实现与演示。

因实际工作中有涉及到前端调用邮件发送的功能，了解到 EmailJS 插件，即出此文。需要在 EmailJS 官网中注册一个邮箱账号，并创建邮件发送服务和邮件模板，获取serviceID和templateID，进而实现功能。

在实际业务开发中，经常需要实现将页面中的echarts图表和统计数据一键保存为pdf文件。这涉及到两个阶段功能：1. 将页面某部分内容截取出来，成为图片格式（类似于截图）；2. 将图片保存为pdf文件。于是，此处需要**html2canvas.js** 和 **jspdf.js** 两个插件。首次，需要安装此两个js插件。插件安装好后，进行引入。明确需要打印的元素、操作事件，接下来就是插件调用与逻辑处理了。需要将报表内容以图片、pdf文件的形式通过邮件发送给指定客户，此处扩展发送邮件相关内容。

在实际项目开发中，请求后端接口都需要去调用http，目前常用的基于promise的网络请求库。但是实际应用时，还是需要进行封装处理，配置ip、超时时间、请求拦截、响应拦截等操作。此处涉及以下几个方面：1. 基本配置 2. 参数处理 3. request拦截器 4. response拦截器。

vue有自定义指令的功能，开发者可根据实际业务需求自定义各种功能的指令，其中常出现就的就有鉴权指令。登录时获取用户信息，包含权限列表，存储到store中。每次使用自定义权限指令时，代码都会跟store中的权限列表内权限做比对，有权限则显示该元素，否则删除其节点（其子节点也会被删除）。

RSA加密算法是一种非对称加密算法，有公钥、私钥，长度越长 加密强度越大，高于768位的密钥相对比较安全，所以被广泛使用。使用公钥加密的数据，利用私钥进行解密。使用私钥加密的数据，利用公钥解密。前端放A公钥、B密钥。服务端放B公钥、A密钥。服务端用B公钥加密数据传给前端，前端用B密钥解密。