- 博客(47)
- 收藏
- 关注
RSS订阅原创 vue 中 window.open打开的子路由 如何 调用上一个页面的方法
父页面跳转子路由： const { href } = this.$router.resolve({ path: `/djSealPage`, query: { pdfUrl: this.pdfUrl }, }) window.open(href, '_blank')子路由页面发送消息给父页面： window.opener.postMessage('getProcessFormData', window.location)父页面监听，调用相应
2021-08-13 16:34:33
614
原创 图片、txt文件直接下载，不预览
通常下载文件会使用 window.open(url)，但是对于浏览器可以解析的文件，浏览器会自动在新标签页打开，所以需要特殊处理。图片的下载： //以下是获取图片 DataURL getImageDataURL(image) { // 创建画布 const canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height
2021-07-28 15:48:26
1110
原创 电子签名 vue-signature-pad
main.jsimport VueSignature from 'vue-signature-pad'Vue.use(VueSignature)引用电子签名弹窗<hand-painted-signature ref="handpaintedSignature" :caseId="caseId" @handleSignDialog="handleSignDialog" :signatureFlag="signatureFlag"
2021-07-04 16:39:17
973
原创 判断上传文件的类型
//获取已上传文件后缀，判断是否可编辑 getFileSuffix(file) { //获取最后一个.的位置 let index = file.lastIndexOf('.') //获取后缀 let ext = file.substr(index + 1) return ext },//遍历已上传文件 通过文件后缀判断 添加是否可编辑allowEdit属性 this.processFormData.fileInfoLis
2021-06-29 15:05:21
257
原创 vue展示pdf
主要使用了vue-pdf<template> <div style="height: 100%"> <div style="height: calc(100% - 30px); padding: 15px; position:relative"> <div style="height: 96%; overflow: auto; border: 1px solid #dcdcdc;" @mouseover="h
2021-06-29 15:01:27
371
原创 iframe中引用html 并实现传值 （进度条）
iframe中引用html，将html文件放了很多地方都没办法引用的到，最终在项目与src同级的public下新建static文件，将所用到的html文件全部放到static中，在iframe中直接引用即可。由于两个iframe文件一个作为背景，一个作为内容，所以两个html文件完全重叠，所以通过z-index做了显示调整。loading.vue文件<template> <div style="position: fixed; top: 0; left: 0; right: 0;
2021-06-29 14:52:56
933
原创 滚动条样式
1.基本可以隐藏滚动条::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px;}2.改变滚动条样式::-webkit-scrollbar { width: 10px; height: 10px;}::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(#fff,#fff,#fff,0.3);
2021-06-22 11:14:05
116
原创 谷歌浏览器配置-暂时解决跨域问题
1.首先关闭所有的谷歌浏览器的页面2.在你的谷歌浏览器右键 -> 属性 -> 快捷方式 -> 目标复制 --disable-web-security --user-data-dir 到后面。********注意：两个 – 前面都要加空格哦，不然就会报错。3.直接保存就可以了再次打开浏览器，出现这个就可以了。...
2021-06-22 10:26:27
175
原创 Vue-Devtools安装及正常显示
vue项目为了开发调试方便，想要安装Vue-Devtools，百度了很多去github上下载安装包，然而，大概是我的网络不好吧，一个进不去，两个进不去，三个进不去……最终找到了一个大佬的下载路径，献上：vue-devtools下载如果打不开，可直接下载：链接: 网盘链接 提取码: ght8下载完成后，存放到一个你能快速找的到的地方。打开谷歌浏览器，输入地址chrome://extensions/ ，点击加载已解压的扩展程序然后找到你刚才存放的已解压的Vue-Devtools，打开文件夹，选择chr
2021-06-03 15:52:51
248
原创 JavaScript基础（10）— 常用方法（ing）
推荐ES6相关链接：1.5万字概括ES6全部特性ES6、ES7、ES8特性一锅炖(ES6、ES7、ES8学习指南)1、var/let/const（1）var/let 用来声明变量，var只有全局作用域和函数作用域的概念，没有块级作用域的概念；let只有会计作用于的概念由{ }包起来，if语句和for语句里面的{ }也属于块级作用域。众所周知，var声明变量，存在变量提升，那么let究竟是否存在变量提升呢？实际上let声明的变量是存在变量提升的，但是由于【暂时性死区（temporal dea
2021-02-18 17:59:23
138
原创 JavaScript基础（6）— 事件机制/Event Loop(事件循环)
计算机的核心是CPU，它承担了所有的计算任务。它就像一座工厂，时刻在运行。线程和进程的关系：进程相当于工厂里的车间，代表CPU所能处理的单个任务，线程相当于车间里的工人，一个进程可以包括多个线程。图文解释链接：进程与线程的一个简单解释进程线程一个进程的内存空间是共享的每个线程都可以使用这些共享内存工厂的资源系统分配的内存（独立的一块内存）工厂之间的相互独立进程之间相互独立多个工人协作完成任务多个线程在进程中协作完成任务工厂内有一个或多个工人一个进程
2021-01-21 18:32:30
274
1
原创 JavaScript基础（5）— 深浅拷贝
1、js中的变量数据类型可分为两种类型：基本类型和引用类型。基本类型值指的是简单的数据段：number、string、Boolean、null、undefined、symbol引用类型值指那些可能由多个值构成的对象：Object2、在将一个值赋值给变量时，解析器必须先确定这个值是基本类型值还是引用类型值。基本数据类型是按值访问的，因为可以操作保存在变量中的实际的值。引用类型的值是保存在内存中的对象，与其他的语言不通，js不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间，在操作对
2021-01-04 18:35:11
117
原创 JavaScript基础（4）— Promise
先抛出一个问题：问：js为什么不设计为多线程的语言呢？答： 因为js是可以操作DOM的，如果js设计为多线程的语言，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时候浏览器该以哪个线程为准呢？为了利用多喝CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个县城，但是子线程完全受主线程控制，且不得操作DOM，所以新表真并没有改变js单线程的本质。很多时候，我们在加载图片或接口时候，接口的耗时难免会造成页面的阻塞，因此就要考虑到异步加载了，
2021-01-04 16:03:41
147
原创 JavaScript基础（3）— 原型/继承
1.区分普通对象/函数对象通过new Function() 创建的对象都是函数对象，其他的均为普通对象，其中包括 Function 实例的实例。Function.__proto__ === Function.prototype//truefunction fun1(){};const fun2 = function(){};const fun3 = new Function('name','console.log(name)');const obj1 = {};const obj2 = n
2021-01-04 13:45:37
99
原创 JavaScript基础（1）— 执行上下文/作用域链/闭包
执行上下文概念当前JavaScript代码被解析和执行时所在的环境。（代码运行的地方）执行上下文的类型全局执行上下文：全局对象（浏览器中的window），只有一个，this指向全局对象；函数执行上下文：调用函数时都会创建一个函数上下文，可以有无数个；Eval函数执行上下文：执行eval函数中的代码会有自己的执行上下文。*** 拓展：Eval函数：eval(string)； 计算某个字符串，并执行其中的JavaScript代码。执行栈 ：用于存储所有的执行上下文，具有LIFO（..
2020-11-16 15:14:25
181
原创 vue 列表内容详情返回定位&返回顶部
<jk-back-top v-if="isShowBack" :scrollTop="scrollTop"></jk-back-top><md-scroll-view class="scroll" ref="scrollView" v-show="!isNoData" :scrolling-y="true" :scrolling-x="false" :auto-reflow="autoReflow" @scroll="onScroll" @endRea
2020-07-16 17:50:51
1577
原创 解析后端返回带有标签的字符串
使用场景：后端返回带有标签的字符串，前端只需标签内部的值。var str = "<span id='detail' style='color:red;'>查看详情</span>";思路：利用正则表达式，找出标签，然后用空字符串替换。var pattern = /<[^>]+>/g;str.match(pattern ); // 返回匹配到的标签数组 ["<span id='detail' style='color:red;'>", "<.
2020-06-01 14:26:26
3498
原创 if /esle 优化方案
与（&&）或（||）短路处理当 && 时，找到为false的分项就停止处理，并返回该分项的值，否则就执行完，并返回最后的分项的值。var a = 5 && 6; console.log(a); //返回的结果为 6var a = false && 6; console.log(a); //返回的结果为 false...
2019-11-27 16:39:21
165
原创 联调前的 数据制造 Mock
前后端分离开发项目中，前端往往很别动，很多交互需要用数据来操作，等后端完成接口的编写并保证联调顺利的情况下再去写交互，显然是很耽误时间的。这时就需要前端自己来模拟真实的数据。交互的特殊性不高，我们还可以在代码中直接写个data，如果交互的特殊性较多，就需要多条数据来完成了。Mock就是一款用于前端模拟数据的工具，具体的使用方法Mock官网介绍的很详细。模拟数据Mock.mock(templa...
2019-11-06 17:26:24
330
原创 函数防抖、函数节流（性能）
函数防抖（debounce）某个函数执行后开始计时，到指定时间之后才开始执行想要执行的函数通俗点讲，就是通过SetTimeout设置毫秒时间，在触发事件后，n秒内没有再次触发事件，处理函数才会执行，如果在这一段时间来到之前，又一次触发了事件，那就重新计时。例子例子中是利用了echart图标插件来展示的一个统计图，在浏览器窗口改变大小时，我们需要实时的改变图表的大小，使得图表始终居中完整...
2019-11-05 15:39:21
224
原创 前端 杂七杂八 常用方法
获取当前时间 并返回格式为（yyyy-MM-dd HH:mm:ss） //获取当前时间 function getFormatDate() { var date = new Date(); var month = date.getMonth() + 1; var strDate = date.getDat...
2019-09-24 13:25:33
163
原创 前端 样式 鼠标悬停效果
在样式中操作，例如：@keyframes pulse { 25% { transform: scale(1.1); } 75% { transform: scale(.9); }}配置方法：pulse:hover { animation-name: pulse; #方法名称 animation-durat...
2019-09-24 10:15:59
1708
原创 前端 父子页面间调用 iframe跨域
父页面调子页面window.onload = function () { 1、 document.getElementById("子页面元素ID").contentWindow.子页面方法名; 2、 document.getElementsByTagName("子页面元素标签名")[i].contentWindow.子页面方法名; 3、 document.getEle...
2019-09-18 10:39:41
839
原创 Chrome调试工具技巧（ing）
1. consoleconsole.table平时我们打印数组或对象时，大多用console.log()，很少用到console.table()，其实表格的形式更直观，当列太多的时候，就可以通过第二个参数，只传入你想展示的列名，console.table(data, ['channelId', 'channelName'])。点击列名可进行排序。2.console.log一个简单变量，...
2019-08-29 16:07:31
184
原创 循环 for for in map
js循环的方法有很多种，我经常用的是map，感觉什么都可以用map循环来实现，今天查找了下其他的循环方式，发现好多人分析了for 和 for in 的区别，也让我重新对学习了一遍。对于一个数组对象，例如：var arr = [ { name: "zh", age: 25 }, { name: "lm", age: 17 }]用for循环和for in 循环达到的效果是相同的。fo...
2018-12-11 11:53:09
761
原创 前端 数组去重 汇总
一直对数组的去重都了解的不深，每次都要去百度然后各种调试，今天在网上看到一篇博客，写的很好，不仅让我巩固了很多数组的方法，也解决了工作中遇到的问题。问题是有一个数组对象，例如：案例一：arr = [ { a: '1', b: 'q1' }, { a: '2', b: 'q2' }, { a: '1', b: 'q3' }, { a: '1', b: 'q4' ...
2018-12-07 16:18:29
193
原创 积累 前端知识点
0.js 中 Math.ceil()、Math.floor()和Maht.round()之间的使用区别， Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数。 Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数。 Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数。1.clientHeight、cli...
2018-03-05 13:53:34
189
原创 miniUI——弹出框的数据绑定
通用代码片段function addEditFill(config) {mini.open({targetWindow: window,url: config.url,title: config.title,width: "860",height: "500",allowResize: false,showModal: true,allowDrag: false,onlo...
2018-02-26 17:08:49
2293
原创 积累 MySQL常用函数
数学函数ABS(x) 返回x的绝对值BIN(x) 返回x的二进制（OCT返回八进制，HEX返回十六进制）EXP(x) 返回值e（自然对数的底）的x次方GREATEST(x1,x2,…,xn) 返回集合中最大的值LEAST(x1,x2,…,xn) 返回集合中最小的值LN(x) 返回x的自然对数LOG(x,...
2018-02-26 16:50:31
150
原创 Ext js 消息框组件
1.基本弹出框 Ext.Msg.alert('Title', 'Basic message box in ExtJS');{ xtype: 'button', text: 'Button', listeners: { click: function () { Ext.Msg.alert('确定', '弹出框显示'); ...
2018-02-26 16:34:52
576
原创 Ext js 表单组件
1.文本域：textfield{ xtype: 'textfield', fieldLabel: 'Text field' } 2.文本区域：textarea{ xtype: 'textarea', fieldLabel: 'Text Area'}3.显示字段：displayfield{ xtype: 'displayfie...
2018-02-26 16:32:10
554
原创 适配知识点
em和rem的使用避免px单位的使用是个很重要的一点。这里用em和rem来代替px。em：根据父标签的字体大小来设置当前标签的宽高或字体大小。如：<div id=”a”><div id=”b”></div></div>如果给b设置字体大小为0.5em，则b的字体大小将会是a的一半。但是本人并不推荐大量使用em，因为这会让你的计算变得困难。试想，当多层嵌套时都使用em那最里面的字体将是最外层标
2017-11-27 10:00:15
306
原创 前端 样式 水平垂直居中
水平居中水平居中这个问题首先要搞清楚存在两个条件才能够称之为水平居中，即父元素必须是块级盒子容器，父元素宽度必须已经被设定好，下面对子元素的不同情况进行讨论：子元素为行内元素，宽度是由其内容撑开的 这种情况下解决方案是给父元素设定text-align:center;html代码：<div class="wrap center"> <span class="span">1111</spa
2017-11-19 22:39:52
393
原创 事件模型的解释
原始事件模型在原始事件模型中（也有说DOM0级），事件发生后没有传播的概念，没有事件流。事件发生，马上处理，完事，就这么简单。监听函数只是元素的一个属性值，通过指定元素的属性值来绑定监听器。书写方式有两种：HTML代码中指定属性值：<input type=”button” onclick=”func1()” />在js代码中指定属性值：document.getElementsByTagNam
2017-11-19 20:59:57
1664
原创 前端 请求方式 get和post
因为浏览器和服务器的交互是通过HTTP协议执行的，而GET和POST也是HTTP协议中的两种方法。HTTP全称为Hyper Text Transfer Protocol，中文翻译为超文本传输协议，目的是保证浏览器与服务器之间的通信。HTTP的工作方式是客户端与服务器之间的请求-应答协议。HTTP协议中定义了浏览器和服务器进行交互的不同方法，基本方法有4种，分别是GET，POST，PUT，DELETE
2017-11-19 14:38:21
1469
原创 json、jsonp、jsonp跨域
jsonJSON是一种基于文本的数据交换方式，或者叫做数据描述格式json 对象和 json 字符串的区别：json 对象var str2 = { "name": "asan", "sex": "man" };json字符串var str1 = '{ "name": "deyuyi", "sex": "man" }';你可以使用 for-in 来循环对象的属性：var myObj = { "
2017-11-19 13:54:54
356
原创 前端 AJAX 梳理
ajax所包含的技术大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。使用CSS和XHTML来表示。使用DOM模型来交互和动态显示。使用XMLHttpRequest来和服务器进行异步通信。使用javascript来绑定和调用。在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttp
2017-11-18 23:37:34
311
原创 前端 知识点 作用域和作用域链
作用域作用域就是变量和函数的可访问范围，控制着变量和函数的可见性与生命周期，JavaScript中只有全局作用域与局部作用域如何判断是全局还是局部作用域？全局：最外层函数和在最外层函数外面定义的变量拥有全局作用域所有末定义直接赋值的变量自动声明为拥有全局作用域所有window对象的属性拥有全局作用域局部：函数内部用var声明的变量var a=3; //全局变量 f
2017-11-18 22:42:25
520
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人