自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(40)
  • 问答 (8)
  • 收藏
  • 关注

原创 el-table实现日期表头+二级表头+嵌套echarts

2、实现将charts放到el-table中(主要就是想办法给你要放图标的元素指定id,因为echarts需要获取到指定元素才能初始化)表头的时间首个是搜索项的endTime,后面的时间则是startTime到endTime-1的正序排列,折线图则是时间的正序排列。1、先实现月份表头,用的是项目封装后的el-table,但是跟直接在页面上实现没有啥区别。

2024-03-01 10:39:57 728

原创 实现el-transfer下拉加载

【代码】实现el-transfer下拉加载。

2024-02-28 11:15:15 534

原创 vue实现页面上传文件夹压缩后传给服务器

需求:点击页面按钮上传文件夹,但是需要经过前端压缩后再上传到服务器(至于为什么不先打好压缩包再直接上传,领导的意思是他要上传的文件在本地是加密的,上传到浏览器的文件是解密的,并不是很懂但是需求还是得完成)1.首先下载所需要的插件jszip和FileSaver。2.页面标签的话只需要一个button按钮即可。

2023-09-14 15:46:37 772

原创 vue给多层嵌套的数组对象每层分级

【代码】vue给多层嵌套的数组对象每层分级。

2023-09-11 17:24:58 297

原创 vue中获取dpi,并将mm转为px

在main.js全局引入。

2023-07-11 15:06:23 927

原创 vue项目实现上传类型转base64,base64转file,下载file文件

vue项目实现上传类型转base64,base64转file,下载file文件。

2023-02-27 15:23:17 839

原创 el-upload上传base64位的证书(.cer格式)

el-upload上传base64位的证书(.cer格式)

2022-07-29 14:45:42 378

原创 js中for循环取值只能取到最后一位

js中for循环赋值只能取到最后一位

2022-06-24 18:51:38 2116

原创 前端根据后端返回数据顺序进行页面复选框排序

js根据后端返回顺序进行页面排序

2022-06-23 18:07:22 1043

原创 vue 数据赋值给新变量后,更改新变量会影响原数据

vue 数据赋值给新变量后,更改新变量会影响原数据

2022-06-14 18:31:36 1617

原创 vue项目通过Network进行局域网访问

通过network在局域网访问vue项目

2022-06-08 15:47:48 1912

原创 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 3688

原创 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 3463 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 1172

原创 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 10627

原创 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 1494

原创 利用第三方网址判断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 575

原创 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 4200

原创 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 737

原创 H5页面实现点击复制文字功能,兼容ios

主要使用的clipboardJS,首先在项目中引入cdn<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/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 536

原创 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 469

原创 windows绑定hosts

在自己电脑上找到C:\Windows\System32\drivers\etc下的hosts文件地址打开hosts文件(以文本形式打开就行),然后在里面添加要绑定的ip和端口号保存,win+r打开命令行输入ping www.baidu.com

2021-05-28 14:02:53 1201

原创 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 444

原创 前端数据精度

今天记录一个奇奇怪怪的bug,这是后端接口的数据,是在preview里看的然后下图是在response里看的可以明显的看出后三条数据与上面的不一样,然后在数据库里看也是respones里的结果。后来查了下,发现了是js数据精准度的问题,js所支持的最大的位数就是16位的,超过就可能引起浏览器自动解析成错的。修改的话前端或者后端把数据转成字符串类型的就行...

2021-04-09 15:15:38 330

原创 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 564

原创 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 428

原创 vue实现点击按钮复制图片(类似浏览器右键复制)

新需求有点击按钮生成二维码+点击复制二维码的功能,因为二维码是后端php生成的,所以这里我只做点击复制功能就行。网上找了很多插件和办法,但是不是只能复制文字就是只能复制本地的图片(因为后端生成的图片是http:xxxxx.jpg)。最后找到了个直接调用浏览器自带的复制方法(类似浏览器右键复制图片)npm i html2canvas //vue项目,首先下载html2canvasimport html2canvas from "html2canvas"; //在页面中引入<!--页面内容--&

2021-04-06 16:40:54 2267

原创 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 837

原创 video标签不显示视频只有进度条

新需求的模块上有个上传视频并预览的功能,我自己用自己的电脑测试视频都能播放,但测试却指了我视频不能播放的bug,因为测试的视频跟我自测的都是mp4格式的,所以基本可以排除视频格式的问题。然后我去教程上查看了video标签才发现端倪MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器才知道原来还有视频编码这一说,然后我用qq影音查看了两部视频的编码第一个是我电脑的视频,第二个是测试的视频。第二个很显然视频编码并不支持video标签mp4格式的编码规范要想解决的话只能换播

2021-03-24 16:01:49 2587

原创 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 945

原创 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 167

原创 react中对props的一些基础限制

通过propTypes跟PropTypes实现对props的类型限制 //在函数式组建中通过这两种自带的方法实现对props的类型限制 Person.propTypes = { //Person类的属性规则 name: PropTypes.string.isRequired, //具体的规则,注意这个跟上面的propTypes没有任何关联,使用前需引入,isRequired表示必填 sex: PropTypes.string, .

2021-02-07 21:06:20 690

原创 展开运算符的基本使用

…最基本的使用方法就是展开数组 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 368

原创 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&gt.

2021-02-05 16:30:07 115

原创 vue+electron实现获取媒体流

首先在vue页面中import { desktopCapturer } from “electron”;这个我们以点击事件为例在触发点击的时候调用方法这里的sources就是我们桌面所有的流3.接着需要用到浏览器的自带方法navigator.mediaDevices.getUserMedia(constraints),MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。4.桌面流已经.

2021-01-26 15:28:59 993 6

原创 input上传多选和上传文件夹

在原生的input标签上有两个属性,multiple和webkitdirectory,这两个属性虽然在很多的时候都使用不到,但还是应该知道他们的作用 1.multiple的作用,他可以让我们在比如input是file上传或者是selet下拉的时候完成多选,就比如上传图片的时候,键盘按下ctrl在点击鼠标就可以实现多选 2.webkitdirectory的作用则基本只用在file上传中了,设置webkitdirectory="webkitdirectory"就可以在上传文件的时候点击上传文

2021-01-25 17:06:29 1685

原创 vue报错apply is not a function

vue在控制器报 `TypeError: handler.apply is not a function!` 出这个问题的原因是因为事件名与你的变量名一样而发生冲突,所以解决的话只要换一个名字就行

2021-01-22 15:55:19 1345

原创 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 908

原创 vue中keep-alive的理解与使用

简单的理解keep-alive是什么keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素keepalive 音译过来就是保持活跃,所以在vue中我们可以使用keepalive来进行组件缓存keep-alive的作用1、 在 vue 项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还

2020-07-17 19:58:38 697

原创 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 225

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除