- 博客(18)
- 收藏
- 关注
RSS订阅原创 vite将vue3打包成非type=“module“的方式
公司的新需求，要将一个vue项目打包，丢进一个app里头，然后用iframe显示出来，结果前期一切正常，因为都是用苹果测的，后来试了一下安卓手机，发现打不开了，经过一番调试，最终发现是使用了module，引入的js文件压根就没有执行，最后经过一番折腾，改了一下打包方式，终于是解决了问题，在此做一下记录o(然后就ok了，大功告成！
2023-05-12 19:10:24
3488
1
原创 浏览器调用摄像头
背景来了来了，用户奇怪的需求又来了，是这样的，原生的文件上传，在移动设备上是可以调用摄像头现拍然后直接上传的，而web端则是弹出选择图片的窗口，而用户用的那个平板，确实后者，他想直接拍直接上传，然后我就想，把设备的照相机功能放在任务栏不就行了吗，结果他们说，操作的工人都是年龄比较大的老工人了，那么繁琐的操作他们整不明白…然后我就只能，封装个组件…话不多说，上代码：ps：需要注意的是，浏览器只支持 https，localhost和127.0.0.1调用摄像头，而http是不支持的HTML<di
2022-05-24 11:12:05
5990
原创 自定义输入框
背景客户的要求总是奇奇怪怪的，这个需求，触摸屏设备点击文本框输入时不弹出软键盘，用外接的键盘输入，一般来说，设备都有设置可以不弹出软键盘的，可是这个设备他找不到这个设置，因此就需要，自己写一个输入框，哎，绝了。话不多说，上代码：HTML<div class="customizeInput"></div>CSS.customizeInput{ width: 260px; height: 36px; border: 1px solid #ddd;
2022-04-28 10:52:52
703
原创 js 图片url转文件格式
背景由于项目需求，需要将图片url装成文件格式上传到服务器，百度过后，发现大多都是将url利用canvas转成base64，再转成文件格式，这里存在一个跨域问题，需要图片那边的服务器允许跨域才可以。话不多说，上代码： handleImportFile() { let img = "https://img.alicdn.com/imgextra/i2/35353105/O1CN01t6ic7y1Yo8UtlM9ah_!!0-saturn_solar.jpg_468x468q75.jpg
2021-11-30 11:22:49
3159
2
原创 vue 插件 XLSX 的使用，将excel表格导入后转json传给后端
准备工作需要先安装 XLSX 插件npm install xlsx --saveHTML部分 <input type="file" ref="fileTemp" accept=".xlsx,.xls" @change="getImportFile" />JS部分 // 获取文件 getImportFile() { if (this.$refs.fileTemp && !this
2021-11-19 15:52:28
1098
原创 基于 element ui Upload 上传 的粘贴截图上传图片功能
需求背景由于项目需要，原本简单的图片上传功能需要支持以下功能：可以从其他地方复制图片，或者截图后，直接粘贴过来就可以上传原本的图片上传是用的 element ui，于是我便基于这个组件去改了。以下是代码：<el-upload :action="api" ref="uploadMutiple" list-type="picture-card" :file-list="fileList" :limit="limit" :on-preview="handlePictureC
2021-11-16 14:15:25
2349
原创 基于 element-ui Cascader 级联选择器 的动态加载
需求Cascader 级联选择器点击一级菜单后动态加载二级菜单直接上代码 <el-cascader :props="props" v-model="val" filterable clearable ></el-cascader> data() { let self = this; return { props: { lazy: true, lazyLoad(node, resolve) {
2021-11-12 14:51:53
1221
5
原创 VUE中拦截请求并无感知刷新token
应用场景前端登录后，后端返回token和token失效时间，当达到特定条件（本文以距离token过期两小时为例），前端需要主动请求token刷新接口去获取一个新的token，做到用户无感知地去刷新token。思路拦截请求判断是否达到需要刷新token的条件，符合条件则刷新token并将请求存入一个重试队列中，当token刷新后，执行重试队列中的函数，达到刷新token的效果，需要注意的是，当多个请求几乎同时进来时，为了避免多次执行token刷新，需要定义一个变量（本文变量名为isRefreshing
2021-11-08 16:20:01
2600
原创 表格删除列
html部分<table id="billTbale"></table>js部分tableDelCol(event) { //被点击的列索引 let cellIndex = event.target.parentNode.parentNode.cellIndex //获取表格 let table = document.getElementById("billTbale"); //列长度 let columnLength = table.rows[1].cells.
2021-09-27 20:37:05
312
原创 js 下划线转换驼峰 驼峰转换下划线
下划线转换驼峰 toHump(name) { return name.replace(/\_(\w)/g, function(all, letter) { return letter.toUpperCase(); }); },驼峰转换下划线 toLine(name) { return name.replace(/([A-Z])/g, "_$1").toLowerCase(); },
2021-09-27 20:26:17
263
原创 Element ui 树形结构自定义节点
html部分<el-tree ref="tree" :data="backStageList" show-checkbox node-key="key" :expand-on-click-node="false" :render-content="renderContent" ></el-tree>js部分（当时由于公司项目版本较低，又暂时不进行升级，所以只能用支持 1.4.13 的方法来做） renderContent
2021-09-27 20:19:36
659
原创 图片压缩功能
<el-upload :action="Api" list-type="picture-card" :file-list="ImgArr" :headers="headers" :on-success="saveImgInfo" ref="upload" :before-upload="beforeUpload"> </el-upload> /* 限制图片上传 */ beforeUpload(file) { let _this =...
2021-09-22 21:10:57
157
原创 保留小数点后几位
// 获取小数位数(decimals:需要处理的数据,len小数位长度) getDecimalsLen(decimals, len) { var lens = Math.pow(10, len); return Math.round(decimals * lens) / lens; },
2021-09-22 21:09:44
101
原创 表格行拖动排序功能
插件网址： http://www.sortablejs.com/options.html /* 初始化表格行拖动功能*/ initDrag() { const el = document.querySelectorAll("#menu_config_table>.el-table__body-wrapper > table > tbody")[0];//menu_config_table 表格id名称 Sortable.create(
2021-09-22 21:06:27
430
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人