- 博客(27)
- 收藏
- 关注
原创 excel表格数据渲染到页面上
之前做项目的时候,碰到了一个需求,要求在页面上预览excel表格,但是还不要别的多余的,只要表格内的数据组成的表格,所以就去百度了一下插件,在这里面记录一下。首先下载插件xlsx,或者引入xlsx.core.min.js文件(GitHub下载的)下载链接在/dist/xlsx.core.min.jsnpm install xlsx页面中的代码<template> <div class="wrap"> <div class="home">
2022-03-23 18:20:45
1196
1
原创 输入框00,000...,变0,000...1变1
当输入框里面的值为00,000,等多个连续的0时,变成0,多个连续的0后面接数字时,直接变成后面的数字。//这里的inputValue就是输入框里输入的值let str = inputValue.replace(/^0+/,0);str = str.replace(/^0[1-9]/,str.replace(/^0/,''))//最后的str就是处理后的值,直接赋值即可...
2022-03-08 09:41:13
2020
原创 input框禁止输入表情(手动笑脸)
输入框禁止输入表情符号,在这里记录一下页面代码 <el-input v-model="inputValue" @input="inputVal('inputValue',$event)"></el-input>methods中的方法// 禁止input框输入表情 inputVal(type,e){ console.log(type,e,'--------') let reg = /([0-9|*|#]\uFE0F\u20E3)|([
2022-03-04 17:38:57
2869
原创 element-tree搜索展示包含名字的树,同时树下的子集也能展示,并展开
在使用element的组件tree的时候,我们用组件里面的属性filter-node-method就能返回包含搜索名字的树,但是返回的树如果节点下面还有树节点的话,点击是展不开,不显示的,所以这里自己写了一个方法,来记录一下,之前也写过一篇,但是后来我发现之前的文章其实写复杂了,完全不用那么写,所以再写一遍记录一遍。首页是页面的代码<el-tree ref="tree" :data="treeListData" :props="props"
2022-03-04 09:50:18
1657
2
原创 js前端导出.zip二进制流压缩包
前几天做的导出.zip格式的二进制流压缩包,在这里记录一下,方便以后使用。axios中请求接口代码如下exportDetail(param) { return Fetch({ url: '/purchaseOrder/exportDetail', method: 'post', data: param, headers: { // 这里需要使用form-data格式数据发送请求 "Content-Type": " applicati
2021-12-30 16:12:12
3450
2
原创 element筛选树,同时展示树下面的子集
之前做的一个项目的需求,在用element的树组件时,需要筛选功能,并且匹配的节点下面的子集也要展示出来。树组件原来的筛选方法只能展示匹配到的节点,节点下面的子集不会展示出来,在这里记录一下。页码代码如下<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input><button @click='search'>搜索</button><el-tree ref='t
2021-12-30 14:54:58
1355
原创 零宽断言获取路径参数值
前几天写项目时,有个需求,一个校验由字母数字组成的字符串,最少8位,且不能为纯数字或纯字母,当时为了校验纯数字字母百度,看到了之前没用过的js正则零宽断言。我看了一下,然后自己写了一个获取链接上参数值的方法,暂时测着没发现什么问题,在这里记录一下,以后也可以用用第一种这种情况适用例如https://域名/test?name1=value1&name2=value2这样的地址链接function getValue(url,name){ url = url.substr(url.indexO
2021-12-29 14:52:12
151
原创 正则匹配至少8位字母数字组合,不能为纯数字或纯字母
前几天做项目,遇见一个需求,用户在输入时要校验是一个至少8位数字字母组成的字符串,同时,还不能是纯数子,纯字母组成,我百度修改了一下,记录一下。let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/?!是零宽断言,意思为“不能是”...
2021-12-24 11:19:55
2724
1
原创 axios接口取消
在项目中,我门经常碰见这样的场景,一个页面有一个tab切换标签,切换不同的标签的时候请求不同的接口,但是如果我们不做处理的话,可能会出现这样的情况,点击一次的时候,请求的接口很慢,然后我们又切换了tab,这时又请求了一个接口,这个接口很快,马上就返回数据了,最后的结果就是数据乱了,不是这个标签下的数据显示在了这个标签下。我之前都是通过判断接口是否请求完毕,加遮罩来防止这种情况的。最近搜索了一下取消请求,按照百度到的操作了一下,发现可行,记录一下。以后可以这么操作一、首先在axios封装文件里加上如下图配置
2021-11-18 11:59:12
2609
原创 按拼音首字母排序并分组
把返回的数据,按照拼音首字母排序,并分组,在此记录一下。方法一:所有手机都可用,小程序中也可用,app中亦可用首先建立一个js文件,代码如下let PinYin = { 'a': '\u554a\u963f\u9515', 'ai': '\u57c3\u6328\u54ce\u5509\u54c0\u7691\u764c\u853c\u77ee\u827e\u788d\u7231\u9698\u8bf6\u6371\u55f3\u55cc\u5ad2\u7477\u66a7\u7839\u95
2021-10-15 14:33:45
4129
原创 指定js加载顺序函数
js加载顺序一个js文件加载完成后才加载另一个js文件,js相互依赖,可以用下面的函数。//指定加载完js加载function loadScript ( url, callback) { var script = document.createElement("script"); script.type = "text/javascript"; if (script.readyState) { script.onreadystatechange = function() {
2021-08-13 11:56:34
387
原创 vconsole移动端控制台
vconsole使用在index.html里面饮入cdn链接,script里面创建对象就可以了 <script type='text/javascript' src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script><script> var vConsole = new VConsole(); console.log('Hello worl
2021-08-13 11:51:13
144
原创 根据拼音首字母排序
在做城市,或联系人右侧快速查找时,我们可以根据返回的数据,把相对应的城市名字,或人员名字传入到下面的函数中,来组装成自己需要的数据类型。function pySegSort (arr){ if (!String.prototype.localeCompare) return null let letters = 'abcdefghjklmnopqrstwxyz'.split('') let zh = '阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀'.split('') let segs = []
2021-07-26 16:26:26
260
原创 vant上传图片时压缩图片
vant上传图片,有图片的宽高大小限制,可以上传时压缩图片,在这里记录一下。压缩图片大小afterRead(file){ console.log(file,'0000') this.face = []; let canvas = document.createElement('canvas') // 创建Canvas对象(画布) let context = canvas.getContext('2d') let img =
2021-06-22 15:22:42
1412
2
原创 项目中js生成二维码
项目中js生成二维码记录这里在项目中使用的是插件vue-qrcode首先npm下载依赖cnpm i @chenfengyuan/vue-qrcode -S然后在入口js,index.js中引入注册import VueQrcode from '@chenfengyuan/vue-qrcode';Vue.component(VueQrcode.name, VueQrcode);项目中使用<qrcode :options="{height:50,width:50}" :value="sc
2021-03-31 09:53:16
288
1
原创 导出文件,后台接口返回一堆乱码
当做一个下载文件的功能时,后端返回的可能是一堆乱码,跟后端沟通,看怎么改,我在这里记录一下我当时的修改,机百度到的处理方案首先前端的请求中需要设置responseType:‘arraybuffer’exportManualCashData(params) { return Fetch({ url: '/tmp/exportManualCashData', method: 'get', params: params, responseType:'arraybuffer'
2021-03-23 17:07:21
4062
2
原创 element表格某项文字太多时,鼠标移动时显示更多
element的table组件假如表格某项内容太多时,改成移动鼠标显示更多内容。代码如下 <el-table-column prop="wrongDescription" label="备注"> <template slot-scope="scope"> <div :title="scope.row.wrongDescription" > <el-tag effect="dark" class="myStyle" v-if="sco
2021-03-23 16:57:23
1341
原创 简单记录一下sessionStorage,localstorage,cookie的不同
根据自己简单的使用,记录一下发现这三者之间的不同localstorage:localstorage的使用时间是永久的,只要你自己不去删除它,它就永远存在;同时它和服务端没什么关系;相同浏览器不同标签页间(同源)可以共享。sessionStorage:sessionStorage的使用时间是标签页关闭;它和服务器也没什么关系;相同浏览器不通标签页(同源)不能共享,只限于打开的标签页。cookie:cookie的使用时间默认是浏览器关闭,它可以自己设置过期时间;它和服务器有关系,每次发送请求时,在h
2021-03-09 11:27:42
198
原创 从window对象里的location路径里,获取需要参数对应的值
记录一下从window的location里获取自己需要的参数值function GetQueryName(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) { return decodeURI(r[2]); } return null;}
2021-03-08 14:32:18
656
原创 img的src中填写请求地址
img标签中的src属性,可填写接口地址记录jsp中的img标签的src写请求接口<!-- 缩略图 --><div class="mCommon_basicThumbnail clearfix marginTop10"> <c:forEach items="${outputModel.orderReFundFileList}" var="file"> <p class="mCommon_basicThumbnail_img">
2021-03-02 10:02:19
7179
原创 正则0-1000000
正则匹配0到1000000,最多保留两位小数/(^[1-9]\d{0,5}(\.[0-9]{1,2})?$)|(^[0](\.\d{1,2})?$)|(^[1][0]{6}(\.[0]{1,2})?$)/自己写的,没有发现错
2021-01-05 16:59:50
1330
3
原创 uuid生成记录
uuid生成函数如下createUUID32(){ var s = []; var hexDigits = "0123456789abcdefghigklmnopqrstuvwxyz"; for (var i = 0; i < 32; i++) { s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); } s[14] = "4";
2020-12-31 11:03:36
118
原创 tinymce富文本使用记录
首先按照网上的教程,在static静态文件夹里新建tinymce,按照网上的教程做就可以。查看链接这里说一下,当时我下载的@tinymce/tinymce-vue是4.0.0的tinymce是5.6.2的,但是用不了,报错,具体报错不记得了,当时没有截图,应该是这样的,然后上网一查,说是兼用的问题,好吧,那我就降级,cnpm install @tinymce/tinymce-vue@3 --save,只写个大版本就可以,最后下载好的如下图static目录如下 tinymce 密码:s1qg在
2020-12-30 17:07:43
353
原创 app中修改title标题
移动端app修改title标题,记录当需要修改移动端的标题的时候,如下图首先在router路由表里添加meta属性,同时设置title为空,这里需要注意,如果title不为空,标题是改不过来的,不知道什么原因,也是公司的大佬教我的。代码如下{ name: 'parityMedicine', path: '/parityMedicine', meta: { title: '' }, component: parityMedicine }, {
2020-11-24 19:54:55
1491
原创 记录app中获取版本号
获取app的版本号getAppVerison (expStr) { if (expStr == null) return null; const ua = navigator.userAgent.toLowerCase(); const patt = new RegExp(expStr, "g"); let lastIndex = null; while ((patt.exec(ua)) != null) {
2020-11-13 10:03:22
282
原创 jsp/vue页面通过web页面里的url在项目中找到对应位置
笔记当已知一个jsp的web页面(例图1,图2)的时候,想要在项目中找到对应的文件位置图一图二下面在webstorm中全局搜索ctrl+shift+f,并且右上角的file mask改成*.* 搜索路径名字+",快速定位,并找到下图如果有多个@requestMapping可以再用同样的方法搜索页面地址栏前面的路径;然后点击进入接着,标记mv找到如下图,到此找到页面,ctrl+shift+o,代开文件就可以了上面的路径找到的是图一对应的项目文件,同样的方法我们接着找图二对应的项目位置:
2020-11-05 11:54:11
7145
2
原创 vue中关于GIF不动的解决办法
vue中关于GIF不动的解决办法首先我也是搜索了导致这个问题的原因,看到网上讲的是因为浏览器的缓存机制;现象就是,GIF图正常img标签引入进入后,页面只动了一次,后面就不会动了。我没有深入的去研究他的起因,下面说下是如何解决的:首先页面的img标签不变,正常引入GIF图片,同时给img标签一个ID,如下图然后设置一个计时器,每几秒钟重新赋值,(里面的方法不用管)如下图到此问题解决,结束语:菜鸟一枚,如果有别的方法可以留言...
2020-11-03 11:43:49
4120
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人