- 博客(40)
- 问答 (8)
- 收藏
- 关注
RSS订阅原创 el-table实现日期表头+二级表头+嵌套echarts
2、实现将charts放到el-table中(主要就是想办法给你要放图标的元素指定id，因为echarts需要获取到指定元素才能初始化)表头的时间首个是搜索项的endTime，后面的时间则是startTime到endTime-1的正序排列，折线图则是时间的正序排列。1、先实现月份表头，用的是项目封装后的el-table，但是跟直接在页面上实现没有啥区别。
2024-03-01 10:39:57
505
原创 vue实现页面上传文件夹压缩后传给服务器
需求：点击页面按钮上传文件夹，但是需要经过前端压缩后再上传到服务器(至于为什么不先打好压缩包再直接上传，领导的意思是他要上传的文件在本地是加密的，上传到浏览器的文件是解密的，并不是很懂但是需求还是得完成)1.首先下载所需要的插件jszip和FileSaver。2.页面标签的话只需要一个button按钮即可。
2023-09-14 15:46:37
671
原创 vue项目实现上传类型转base64,base64转file,下载file文件
vue项目实现上传类型转base64,base64转file,下载file文件。
2023-02-27 15:23:17
785
原创 vue设置el-option的样式
在用element ui的下拉框时，有时候会单独让更改下拉列表的样式，也就是el-option，其实加上两行代码就行;popper-class给select添加类名，popper-append-to-body可设置是否将弹框插入至body元素内 <el-select :popper-append-to-body="false" popper-class="optionsContent" >
2022-04-28 17:17:30
3413
原创 vue-pdf不显示电子签章
vue-pdf版本号4.1.0，查看合同类的pdf时显示不出来电子签名，pdf格式是后端返回的base64位格式的；解决方法：找到node_modules包里的pdfjs-dist/es5/build/pdf.worker.js文件，找到下列代码注释掉即可_this3.setFlags(_util.AnnotationFlag.HIDDEN); 不过因为是修改的node包，再次install的时候会把注释覆盖掉，解决这个问题也很简单:通过命令安装 patch-package (npm
2022-01-12 10:48:29
3231
2
原创 element ui时间范围选择器picker-options跟default-time冲突问题
业务需求，时间范围选择器默认时间昨天到前一个月，无法选择超过今天的日期；时间范围可以用picker-options来实现，默认时间的话在mounted生命周期里处理一下就行。问题：用时间搜索的时候需要传开始-结束时间，我们的选择器是yyyy-mm-dd的，但是传接口的时候要传yyyy-MM-dd hh:mm:ss的，意思就是要传参数的话需要2022-01-01 00:00:00跟2022-01-30 23:59:59。我在el-date-picker加上:default-time="[‘00:00:00’
2022-01-07 16:29:46
1120
原创 npm启动项目报Python executable “python2“ in the PATH等
vue项目在npm run serve启动时报gyp verb check python checking for Python executable “python2” in the PATH,等等；其实主要是因为项目中的node-sass需要依赖python环境运行，所以电脑配置下python就行；python官网地址，下载的是2.7的，如果打开慢或者下载慢可以直接去腾讯的软件中心下载腾讯地址；python包下载完成后傻瓜式安装一路next就行；完事后就是配置环境变量—在你电脑的用户变量的path中加
2021-11-01 16:02:47
9429
原创 js判断ipad pro设备
在网上找了一些方法判断ios,安卓,ipad都能实现，但是判断ipad pro却不行，甚至用第三方插件来判断设备，ipad pro竟然被归为Pc//判断放在ipad pro设备里全为falsevar u = navigator.userAgent; iPad: u.indexOf('iPad') > -1, //是否iPad ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端所以只能通过多步判断n
2021-08-27 16:18:36
1338
原创 利用第三方网址判断app,浏览器的UserAgent
1.判断ua的网址：https://www.ip138.com/useragent/。利用这一点我们可以在pc网页上直接打开网址进行ua的查看。当然，如果是app的话可以利用app的扫码功能对网址的二维码进行扫描。如果没有扫码功能的app，我们可以在a标签或者点击事件跳转到此网址进行ua的查看。2. 分享一个vue判断手机内置浏览器和手机浏览器的插件device-detector-js，源码地址https://www.npmjs.com/package/device-detector-js，如果有判断不正
2021-08-13 10:33:51
514
原创 element ui的table选择遇到的坑（如翻页选中态消失）
产品需求实现两步的弹窗选择加table选中并展示到新的表格中，基本样式如下1.在列表选择页选择数据展示到下面的新table中，但是翻页回来列表的选中态就取消了，根据ui文档的方法可以加上row-key <el-table //标签添加 :row-key="getRowKey" ></el-table> //js getRowKey(row) { //缓存列表状态 return r
2021-08-10 15:11:11
4061
原创 mac上用npm下载cnpm,vue等成功但-v提示无此命令
1.检查node环境变量配置，终端输入命令vi ./.bash_profile进入环境，按i进入编辑模式，输入PATH=$PATH:/usr/local/bin/，按esc退出编辑模式，输入 :wq!t退出环境2.配置完环境变量使用npm下载cnpm，输入命令，下载成功，但提示没有cnpm命令，但是文件夹里也有了cnpm。（或者本次可以打印出版本号，但关闭终端重新打开又提示没有），终端输入open ~/.zshrc（如提示没这个文件夹，则先检查电脑是否有zsh，命令查看版本号zsh --version
2021-07-08 10:53:41
684
原创 H5页面实现点击复制文字功能，兼容ios
主要使用的clipboardJS,首先在项目中引入cdn<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>在需要触发复制事件的元素上加上 <div onclick="" class="btn btn_copy_text" data-clipboard-text="https://www.xiwang.com"></div>
2021-06-24 17:15:08
507
原创 vue实现字体跟着banner轮播变化
要实现的效果：banner轮播的时候顶部导航也跟着banner变颜色，这里我的头部导航跟banner是两个组件，swiper用的是v3的。 mounted() { let that = this; new Swiper(".swiper-container", { loop: true, // 如果需要分页器 pagination: ".swiper-pagination", // 如果需要前进后退按钮 // nextButto
2021-06-17 17:12:31
427
原创 windows绑定hosts
在自己电脑上找到C:\Windows\System32\drivers\etc下的hosts文件地址打开hosts文件(以文本形式打开就行),然后在里面添加要绑定的ip和端口号保存，win+r打开命令行输入ping www.baidu.com
2021-05-28 14:02:53
986
原创 vue处理JSON格式
后端返回图片的类型有["http:\/\/pic.tjxes.com\/myhqwag1f34x10uv58gx.png"],["http://pic.tjxes.com/bq94qgls1fzwmuil3s2u.png","http://pic.tjxes.com/ax1453acbl72nvyxuaea.png"],"http://pic.tjxes.com/809c7fcbd43a4c31b3b0ac3a8a428c72"需要处理三种渲染到页面上 let _list = r
2021-04-16 16:29:51
415
原创 前端数据精度
今天记录一个奇奇怪怪的bug，这是后端接口的数据，是在preview里看的然后下图是在response里看的可以明显的看出后三条数据与上面的不一样，然后在数据库里看也是respones里的结果。后来查了下，发现了是js数据精准度的问题，js所支持的最大的位数就是16位的，超过就可能引起浏览器自动解析成错的。修改的话前端或者后端把数据转成字符串类型的就行...
2021-04-09 15:15:38
285
原创 vue将后端返回的文件流导出成文档
1.创建一个js文件,封装导出的接口,里面的内容如下// 导出Excel公用方法import axios from 'axios'export function exportMethod(data) { axios({ method: data.method, url: `${data.url}${data.params ? '?' + data.params : ''}`, responseType: 'blob' }).then((res) =>
2021-04-08 15:27:35
538
原创 element ui日期组件设置只能选择前30天
默认显示日期是今天至前一个月的今天 value1: [new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date()],最多选择到今天至前30天 <el-date-picker v-model="value1" type="daterange" range-separator="至" start-pl
2021-04-08 15:19:12
400
原创 vue实现点击按钮复制图片(类似浏览器右键复制)
新需求有点击按钮生成二维码+点击复制二维码的功能，因为二维码是后端php生成的，所以这里我只做点击复制功能就行。网上找了很多插件和办法，但是不是只能复制文字就是只能复制本地的图片(因为后端生成的图片是http:xxxxx.jpg)。最后找到了个直接调用浏览器自带的复制方法(类似浏览器右键复制图片)npm i html2canvas //vue项目，首先下载html2canvasimport html2canvas from "html2canvas"; //在页面中引入<!--页面内容--&
2021-04-06 16:40:54
2100
原创 element ui的图片上传限制图片尺寸
新需求，vue+element ui实现图片上传，但上传的图片有尺寸限制，只能是164x103的:before-upload="beforeAvatarUpload" // 在el-upload标签中加入此事件 beforeAvatarUpload(file) { // const isLt2M = file.size / 1024 / 1024 < 2; //调用[限制图片尺寸]函数 let _this = this; let imgWidth = ""; let
2021-04-06 16:20:21
788
原创 video标签不显示视频只有进度条
新需求的模块上有个上传视频并预览的功能，我自己用自己的电脑测试视频都能播放，但测试却指了我视频不能播放的bug，因为测试的视频跟我自测的都是mp4格式的，所以基本可以排除视频格式的问题。然后我去教程上查看了video标签才发现端倪MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器才知道原来还有视频编码这一说，然后我用qq影音查看了两部视频的编码第一个是我电脑的视频，第二个是测试的视频。第二个很显然视频编码并不支持video标签mp4格式的编码规范要想解决的话只能换播
2021-03-24 16:01:49
2319
原创 vue监听网络状态改变
1.主要思路是用HTML5中的window.navigator对象的一个属性onLine先在data中声明onLine: navigator.onLine,然后在你要触发的事件中加上 window.addEventListener("online", function () { alert("网络连接恢复"); }); window.addEventListener("offline", function () { alert("网络连
2021-03-22 15:54:36
883
原创 react中ref的基本使用
字符串形式的ref class Demo extends React.Component{ showData = () =>{ const {input1} = this.refs alert(input1.value) } showData2 = () =>{ const {input2} = this.refs .
2021-02-09 21:02:57
144
原创 react中对props的一些基础限制
通过propTypes跟PropTypes实现对props的类型限制 //在函数式组建中通过这两种自带的方法实现对props的类型限制 Person.propTypes = { //Person类的属性规则 name: PropTypes.string.isRequired, //具体的规则，注意这个跟上面的propTypes没有任何关联，使用前需引入,isRequired表示必填 sex: PropTypes.string, .
2021-02-07 21:06:20
661
原创 展开运算符的基本使用
…最基本的使用方法就是展开数组 let arr = [1,2,3,4,5] console.log(...arr) //打印结果是1 2 3 4 5用来连接两个数组 let arr = [1,2,3,4,5] let arr1 = [5,6,7,8,9] let arr2 = [...arr,...arr1] console.log(arr2) //打印结果为[1,2,3,4,5,6,7,8,9]计算数组数据的总和(在不知道数据多少的时候处理数据) fun.
2021-02-06 21:51:44
351
原创 jsx的语法规则
定义虚拟dom时，不要写引号const VDOM = <div><h1>声明的标签外部不需要加引号</h1></div>2.标签中混入js表达式时要用{}包裹const myName = "小明"const VDOM = <div>{myName}</div>样式的类名不要用class，要用className const VDOM = <div className="box"></div>.
2021-02-05 16:30:07
88
原创 vue+electron实现获取媒体流
首先在vue页面中import { desktopCapturer } from “electron”;这个我们以点击事件为例在触发点击的时候调用方法这里的sources就是我们桌面所有的流3.接着需要用到浏览器的自带方法navigator.mediaDevices.getUserMedia(constraints),MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。4.桌面流已经.
2021-01-26 15:28:59
911
6
原创 input上传多选和上传文件夹
在原生的input标签上有两个属性,multiple和webkitdirectory,这两个属性虽然在很多的时候都使用不到,但还是应该知道他们的作用 1.multiple的作用,他可以让我们在比如input是file上传或者是selet下拉的时候完成多选,就比如上传图片的时候,键盘按下ctrl在点击鼠标就可以实现多选 2.webkitdirectory的作用则基本只用在file上传中了,设置webkitdirectory="webkitdirectory"就可以在上传文件的时候点击上传文
2021-01-25 17:06:29
1572
原创 vue报错apply is not a function
vue在控制器报 `TypeError: handler.apply is not a function！` 出这个问题的原因是因为事件名与你的变量名一样而发生冲突，所以解决的话只要换一个名字就行
2021-01-22 15:55:19
1242
原创 vue-electron点击关闭电脑
electron官方文档:https://www.electronjs.org/在vue页面中引入 `const { exec } = window.require("child_process");`然后点击的时候调用方法 `exec("shutdown /s /t 0");`即可，亲测有效
2021-01-20 09:47:28
805
原创 vue中keep-alive的理解与使用
简单的理解keep-alive是什么keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素keepalive 音译过来就是保持活跃，所以在vue中我们可以使用keepalive来进行组件缓存keep-alive的作用1、 在 vue 项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还
2020-07-17 19:58:38
669
原创 Vue的组件通信
前言组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系； B与C之间是兄弟关系；A与D、A与E之间是隔代关系； D与E是堂兄关系（非直系亲属）针对以上关系我们归类为：父子组件之间通信非父子组件之间通信(兄弟组件、隔代关系组件等)针对不同的使用场景,如何选择合适的组建通信方式是重要的,如我们常见的props,$ emit/$ on,vuex
2020-07-17 19:22:24
194
空空如也
js打印元素可以看到高有值，但是直接打印高的值是0
2021-09-16
video标签设置宽高视频播放问题
2021-09-02
css实现高斯模糊，毛玻璃遮挡效果
2021-08-17
百度APP的自带播放器会顶掉自己的H5播放器
2021-07-29
mac下配置东西都不成功
2021-06-27
axios的post请求在浏览器看不到传的参数
2021-05-11
vue实现点击按钮复制图片
2021-04-01
vue大屏项目的适配问题
2021-01-13
TA创建的收藏夹 TA关注的收藏夹
TA关注的人