在第三方的组件或者是一些类库 按照文档的流程去进行配置和api的调用就能实现功能的需求，
其实也不能说太难，只是在第一次对接的时候有一定的学习成本。
其实我觉得前端最难的不是框架的应用和类库成使用，而是数据的处理，在我们的实际开发过程当中，
有些后台返回的数据并不能直接用于我们的类库，这个时候往往需要进行数据的处理，
改变数据的层次结构等来满足目标组件或者类库的时候。
这个比较考验前端的数据结构的处理能力，要对数组或者是函数的递归调用等很熟悉才行。
1 无焦点扫码枪
通过全局监听 keypress 事件 然后获取 ev 对象是否为 Enter 事件
计算 扫码枪录入的平均间隔时间 10s 通过的话就请求接口获取商品信息
原理：扫码枪就是一个输入设备，和电脑连接扫码就会输入数字最后有个 Enter 字符 如 1 2 3 Event
判断每次的 ev 对象里面的 key 不同执行不同逻辑 数字就 记录第一个输入的时间 然后将数字添加到数组
如果超过了 50 毫秒每输入就清空数组 避免之后二次输入
是 Event 就获取第一次记录时间 和 当前时间相差的时间戳 除以 数组的长度 判断是否小于 10 毫秒
如果提到了在任何页面扫码都可以 就要说 会先判断当前的页面是否是盘点页这样 是的话就正常流程，
否则就是默认弹出一个表单框里面有对应的商品信息显示这样
2 权限管理
一般可以分为 接口权限 按钮权限 路由权限
路由权限
3 scoket实现双向视频通话
createOffer // 创建一个offer 对象
video 需要添加 autoplay pl
webrtc的一些基础概念:
1 SDP
2 const pc = new RTCPeerConnection()
3 createOffer
4 createAnswer
5 setRemoteDescription
6 setLocalDescription
7 navigator.mediaDevices( getUserMedia getDisplayMedia )
8 pc.onicedidate()
9 pc.oncl
具体的实现;
1 通过navigator.mediaDevices来获取摄像头或者是音频信息( 也可以是共享屏幕)
2 通过createOffer创建一个 offer 然后得到对应的offer的sdp
3 通过socket.io把这个sdp给到对方
4 接受放在收到提示的时候如果确认通讯的话会调用createAnswer来创建一个answer对象 然后也会获得对应的answer的sdp,再把这个 ans的sdp传递给发起方
5 无论是发起方 还是 接收方 都是分别跟别双方的关系去调用 setRemoteDescription 和 setLocalDescription传入对应的sdp就完成了通讯。 （ 发起方的local是offer remote是ans ， 接收方的local 是ans remote 是offer ）
6 通过 rtc实例对象的 ontrack 事件的监听让video标签的srcObject播放媒体流。
4 实时聊天室怎么实现的
登录后会拿到对应的uuid然后和后端建立连接
客户端主要是通过 socket 的 io 实现长连接来达到 emit 提交信息 然后通过 on 接受对应的信息 然后渲染到页面上
实现客户端的逻辑，包括发送消息、接收服务器广播的消息、处理加入聊天室请求等。
后端主要就是创建了一个socket的连接 用来监听客户端的连接请求
实现服务器端的逻辑，包括接收客户端消息、处理加入聊天室请求、广播消息给聊天室中的其他成员等。
然后添加了一个 uuid 用来区分各用户在各聊天室消息的唯一性
5 excel 如何导入导出 -sheetjs
js-export-excel导出：
const handleExport = () => { const option: { fileName: string; datas: { sheetData: CustomerType[]; sheetName: string; sheetFilter: string[]; sheetHeader: string[]; }[] } = { fileName: "客户信息", // 导出的文件的名称 datas: [ { sheetData: filterTableData.value, // 表格数据 sheetName: "客户信息", // excel表格中表格的名字 sheetFilter: ["number", "name", "sex"], // 需要导出的数据的字段 sheetHeader: ["客户编号", "客户姓名", "客户性别"], // 表头的值 } ] } var toExcel = new ExportJsonExcel(option); //new toExcel.saveExcel(); //保存 ElMessage.success("导出成功")}XLSX导入:
import * as XLSX from 'xlsx' <input type="file" hidden id='fileRef' onChange={importExcel} /> const importExcel = () => { const file = (document.getElementById('fileRef') as HTMLInputElement).files![0] if (!file) return const reader = new FileReader() reader.readAsBinaryString(file!) // 转成 二进制格式 reader.onload = function () { const workbook = XLSX.read(this.result, { type: 'binary' }); const tableData = workbook.Sheets['产品列表'] // excel表格中表格的名字，拿到表格数据 const proList: any[] = XLSX.utils.sheet_to_json(tableData) // 转换成产品列表js对象 proList.forEach((item: any, index: number) => { item.index = index }) setProList(proList) } }6 自定义海报生成
接下来我们可以通过 html2canvas 来把一个指定的html节点转换成 canvas 然后保存成图片
这里涉及到三个类库
1 qrcode-vue vue当中的一个二维码生成组件
https://github.com/scopewu/qrcode.vue
2 html2canvas 把一个指定的dom节点以canvans的形式生成截图
https://html2canvas.hertzen.com/
3 download-canvas 下载canvans的类库
https://github.com/huytbt/download-canvas
7 需求：需要支持自定义快捷键设置
解释： 让用户可以在中后台设置快捷键 ，进行一些常规的弹窗拉起 ，比如录入操作 锁屏操作
实现方式： 创建一张本地字典，可以支持用户输入快捷键并帮助他绑定相关事件。
（一大串json，放到localStorage里面，例：{ keyBuy: 114, keySell: 115 } ）
那么本地就会存储对应按键编码以及绑定的事件函数，按这些快捷键，就会监听相应的事件，触发对应的事件函数。
8 需求：自定义布局、自定义拖拽改变位置和大小
解释： 有一些统计信息的展示界面，用户可以通过拖拉的形式来放置自己要看的信息（比如财务只想看 日流水统计 运营看 用户访问量 注册量） , 还可以调整窗口大小
解决方式：自己开发的话成本较高；然后通过线上选型分析，最终使用了 vue-grid-layout来实现对应的功能GitHub - jbaysolutions/vue-grid-layout: A draggable and resizable grid layout, for Vue.js. ；选型的理由 该组件下载量大说明社区活跃，遇到了问题可以有更好的提问的渠道，而且该组件api 友好，所以就选择了这个组件。
9 需求：实现离线编辑及自动草稿
解释： 在用户网络丢失链接 或者 意外退出，自动帮用户正在填写的信息进行草稿的形式记录，然后用户重新进入之后 提示用户有草稿存在是否使用草稿的内容。
实现方式： 在组件销毁的生命周期里面，通过vuex + 数据持久化( vuex-persistedstate) 记录数据，如果是表单的数据就按照表单的对象存储，然后通过mixin的方式写一个mounted 里面检测当前页面是否是输入预设的需要录入的页面，如果是 就检测是否有草稿，如果有就提示用户，然后根据用户的选择进行加载
10 需求：如何实现自动提取图片作为封面
解释 需求是模仿