weixin_72151882的博客

原创 前端页面展示列表不支持复制

需求是前端展示一个list页面，页面上展示相关内容，用户想复制页面上的内容，但是复制不了，页面也没有写禁止复制的相关代码什么的，查询资料发现可能是浏览器自带的，加上css样式可以解决这个问题。

原创 前端对导入文件进行预览

import * as xlsx from 'xlsx'，表格用v-for遍历出来dataName（表格抬头）需求是点击文件上传按钮，上传Excel文件，然后页面的tab表格可以对上传的文件进行预览，预览题之后再点击确认按钮将文件传给后端，用到的插件是xlsl，首先下载插件并在页面引入。

原创 将后端返回的PDF文件流转化为URL并用vue-pdf插件在页面预览

第一步将后端返回的base64转化为URL地址。第二步 下载插件进行预览，页面进行应用。

原创 判断用户是否滑动到底部遇到的特殊机型

在判断是否滑动到底部时发现一个特别的安卓机型，就划到底部时元素的scrollHeight会大于clientHeight和scrollTop的高度之和，前者会比后者大0.0几，就导致用户滑动到底部之后也不符合判断条件，ios手机是前者和后者相等，大部分安卓机是划到底部前者小于后者，这次遇到的是华为的一个机型滑到底也不够，所以又加了一个判断条件相差在1之内都算滑到低了。最近一个需求背景是页面展示一个pdf内容，pdf有好多页，用户可以滑动pdf进行浏览，滑动到底部时，在显示签字页让用户进行签字操作。

原创 el-popover使用时想手动设置弹起隐藏

需求是再点击页面的x时不需要展开下拉框，需要删除选中的一个数据 ，给x注册点击事件，但是一点就会弹起el-popover框，将el-popover框的v-model值改为false并不能阻止框的弹起，后来不断尝试发现一个新的方法可以生效，如下图。设计稿是这样的，但是element-ui的多选下拉框的选中样式不满足公司的ui需求，就用 el-popover手动写了一个多选框的样式，如下图。showPopper改为true时弹框是隐藏，为false时是弹起。

原创 路由router的核心功能手动实现代码（面试小点）

【代码】路由router的核心功能手动实现代码（面试小点）

原创 Vue3+ts对dom元素的操作

原创 如何在Vue3+ts中获取事件对象

原创 canvas学习汇总

day01。

原创 分享文件到朋友圈、微信好友一点使用经验

最近做一个需求是需要把h5的图片分享到微信，一开始无从下手就百度查找相关资料，发现好多文章都是需要下载SDK插件，但是这个插件分享的是公众号，不符合本次需求的要求。后来确认需要原生的老师提供相关方法，才能达到要求。原生的老师会提供相关方法，需要的相关参数，然后我们在前端页面调用即可，以下附上相关代码。

原创 router跳转传参和el-scrollbar的使用经验

el-scrollbar></el-scrollbar>标签要包裹需要滚动条的内容部分，标签是需要设置高度的，当内容的高度比el-scrollbar标签的设置高度高时就会出现竖向滚动条。参数"与你要跳转到的"hash值和?如果包裹的内容的数据是后端获取的，当首次进入页面时，可能会遇到滚动条不会出现的问题。el-scrollbar__bar is-vertical：纵向滚动条。this.$router.push({path: "路由路径"})this.$router.push({name: "路由名"})

原创 element组件库中tab表格利用cellStyle方法单独改变单元格样式

公司项目中已经封装了一个公共的tab组件，新的需求需要对表格中特定的单元格字体颜色做改变，查询了官方文档发现有cellStyle这个属性，在公共组件中加了标签属性，一开始是使用$emit方法触发父传子，使用该表格是自定义该事件，但是样式不生效，试了各种方法，都没效果。后来直接在公共组件里直接写了该方法就生效了，代码如下。