- 博客(31)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 CamanJS 一个超好用的图像编辑器（附带跨域问题解决）
需求：为原本较模糊的图片进行颜色加深。（目的是为了将该html转pdf打印查看更清晰，pdf为后台转化，使用的是wkhtmltopdf）接到这个需求之后找到了一款图片编辑器，CamanJS，可对图像进行加深，明亮，模糊等，或者增加各种滤镜。源码库：https://github.com/meltingice/CamanJS文档：http://camanjs.com/基本使用：用法一： Caman('#my-image', function () { this.brightness(10);
2021-09-28 10:07:58
1131
原创 前端为本地已生成的pdf文件添加水印
对于已存在的pdf需要如何添加水印呢？前端也可实现该功能。利用pdf-lib库即可实现。官网地址：https://pdf-lib.js.org/源码地址：https://github.com/Hopding/pdf-lib注意：如是添加图片水印，该水印图片需为网络图片<html> <head> <meta charset="utf-8" /> <script src="https://unpkg.com/pdf-lib@1.4.0"&g
2021-09-18 14:54:44
1195
原创 js 接收服务器返回的二进制流文件，保存并转成文件
接到一个新需求，从某一个服务器返回一个二进制流文件,然后要保存起来上传到另一个服务器。无需用户手动上传。实现过程及分析过程如下：新版本的XMLHttpRequest对象可以获取服务器端的二进制数据，方法如下：XMLHttpRequest对象的其中一个属性responseType,是一个用于定义响应类型的枚举值。详细值如下表格所示，而xhr另一个属性response则是返回一个 ArrayBuffer、Blob、Document，或 DOMString，具体是哪种类型取决于 XMLHttpReques
2021-03-29 22:15:28
12429
原创 使用flv.js遇到的问题（含vue中使用flv.js的简单教程）
最近项目中使用到flv.js，却遇到如下两种情况第一种报错情况：谷歌浏览器控制台出现的报错使用报错如下：Failed to read the ‘buffered’ property from ‘SourceBuffer’: This SourceBuffer has been removed from the parent media source.这种错误提示一般是在flv源发生异常中断的时候产生的。错误提示大多数都在 mse-controller.js 这个模块中。解决办法：在 mse-con
2020-11-23 19:50:20
14099
12
原创 举例IE浏览器不兼容问题及解决方案
清除IE10下input的叉叉（X）和密码输入框的眼睛图标从IE10开始，input输入框中，type=”text”时，输入框最后会自动生成一个小叉号，type=”password”时，输入框最后会生成一个小眼睛，以方便用户清除已输入文本及查看按钮。但是在个人项目中，并不需要这个小眼睛按钮，并了解到了使用以下CSS代码可轻松实现隐藏IE浏览器自带的文本删除按钮和密码查看按钮input::-ms-clear{display: none;}//清除小叉号input::-ms-reveal{d.
2020-06-04 09:42:42
605
原创 Vue----Element UI 表格点击某一行完成选中事件或取消选中事件
需求：点击表格的某一行，即可触发选中该行。如同element table中组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。如下图。但element仅提供了单选，那多选的情况如何实现呢？多选点击效果如下：选中某一行后，相当于对应的checkbox被选中实现如下：界面：在表格上添加以下三个参数<el-table border ref="serveTable" :data="tableData" @selection-
2020-05-22 16:09:45
19015
7
原创 web每日一题
2020/4/15 let num=10; const increaseNumber =() =>num++; const increasePassedNumber = number =>number++; const num1 = increaseNumber(); const num2 = increasePassedNumber(num1); //...
2020-04-15 16:21:08
212
原创 JS高级笔记（3）函数进阶
函数的定义函数的定义方式1.函数声明方式function关键字（命名函数）function fn() {}2.函数表达式（匿名函数）var fun =function() {}3.new Function(‘参数1’,‘参数2’,…,‘函数体’)var f= new Function(‘a’,‘b’,‘console.log(a+b)’);f(1,2)；Function里面参数都...
2020-04-12 22:42:18
246
原创 js 多个文件下载方法
for(var i=0;i<3;i++){downloads("http://test.mp4’);}//多文件下载function downloads(url) {const iframe = document.createElement(‘iframe’);iframe.style.display = ‘none’;function iframeLoad() {conso...
2020-04-03 10:58:03
916
1
原创 文本溢出截断省略的方法
单行文本溢出省略：white-space: nowrap;overflow: hidden;text-overflow: ellipsis;多行文本溢出省略：overflow: hidden；-webkit-line-clamp: 2；（用来限制在一个块元素显示的文本的行数）display: -webkit-box；-webkit-box-orient: vertical；tex...
2020-03-30 09:37:37
217
原创 vue----使用echart基本使用（关于图标坐标轴文字过长，自定义样式等问题详细讲解）
在开发项目中，经常需要使用到表格，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。v-charts官网：https://v-charts.js.org/#/基本使用：npm安装：npm i v-charts echarts -S...
2020-03-27 15:09:59
1970
原创 Vue-----Vue Router 的params和query传参的使用和区别
在路由声明中：export default new Router({mode: ‘history’,routes: [{path: ‘/info/:id’,name:‘info’,component: () => import(’…/components/HelloInfo.vue’),}]});跳转：query传参： this.router.push(name:′...
2020-03-27 13:53:44
308
原创 Vue----Vue-Router安装及使用
安装npm install vue-router新建router文件夹，在文件夹中添加index.js文件，引入vue-routerimport Vue from 'vue';import Router from 'vue-router';Vue.use(Router);export default new Router({ mode: 'history', ro...
2020-03-27 11:42:29
1589
原创 js高级笔记（2）构造函数和原型
创建对象可以通过以下三种方式：//1.对象字面量var obj1 = new Object();//2.new Object();var obj2 = {};//3.自定义构造函数function Star(uname,age){ this.uname =uname; this.age = age; this.sing = function(){ con...
2020-03-24 00:51:51
141
原创 js高级笔记（1）类和对象
面对过程编程面对过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个个的一次调用就可以了。面对对象编程 OOP面对对象是把事务分解成一个个对象，然后由对象之间分工与合作。面对对象具有灵活，代码可复用，容易维护和开发的优点，更适合多人合作的大型软件项目面对对象的特性：封装性 继承性 多态性面对对象和面对对象的对比面对过程：优点：性能比面向对对象高，适合...
2020-03-23 23:21:15
134
原创 Vue----右键弹出菜单(vue-contextmenu)
需求：点击右键，弹出菜单，查询资料，找到vue-contextmenu。项目地址：https://github.com/chIIC/vue-contextmenu安装：npm install vue-contextmenu --save引入：import VueContextMenu from 'vue-contextmenu'Vue.use(VueContextMenu)使用：...
2020-03-23 14:06:16
24340
6
原创 VUE----监听浏览器窗口大小的改变
如题，方法如下：export default { data(){ return { clientWidth:document.body.clientWidth } }, mounted(){ let that = this; window.onresize =() =>{ ...
2020-03-20 16:41:32
4890
原创 vue-socket.io引发的浏览器兼容问题
问题：因项目需要用到socketIO进行通讯,通过npm install vue-socket.io，后将其运入即可，如下：//引入socket.ioimport VueSocketIO from 'vue-socket.io'Vue.use(new VueSocketIO({ debug: true, connection: 'http://172.16.101.250:2...
2020-03-20 13:52:51
1181
2
原创 Vue----axios中传数组
今天用axios中get方法传输数组，发现了是这样的。。。于是了解了一下，可以采用qs库自带的 arrayFormat 参数配置做一下转化，如下：import axios from 'axios'import qs from 'qs'//get方法：axios.get(url, { params: { target: [1,2,3], type: 1 ...
2020-03-19 17:05:13
527
原创 Vue-----element框架中，可输入下拉框（el-select和el-autocomplete对比）
需求：需要一个即可选择也可输入的输入框,且需要自定义模板（输入视频源url时，其名称也需展示）。考虑到element有两种组件可实现，那么就来对比一下这两种实现：的实现比较简单，参考element的官网：https://element.eleme.io/#/zh-CN/component/select只需加filterable allow-create即可完成此需求，且有clearable...
2020-03-19 16:45:07
17737
1
原创 VUE------element框架 Form表单中回车事件出现页面刷新问题解决
问题描述：在给输入框添加回车事件时，发现一按回车，页面就刷新了。怀疑是form表单的原因，经查询，是由于当form表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。解决办法：在el-from 加上 @submit.native.prevent如下代码： <el-dialog title="请输入要添加的节点" :visible.sync="dialogAddVis...
2020-03-19 11:09:34
688
1
原创 VUE----vue-cli3.0设置页面icon图标
最近做的一个项目中在用vue-cli3.0创建项目的时候不小心选择了pwa这一个插件，碰到了不能设置网页图标的问题。在最新的vue-cli3.0直接在index.html中设置icon是不行的，需要在vue.config.js中设置一个pwa属性。重要！！！将public下的应文件夹下的icon下的图标都删除掉。 vue.config.js module.exports = {...
2020-03-17 09:45:41
2627
原创 Chrome 按F12总是进入 paused in debugger解决办法
最近调试，按F12总是进入如下图的状态，总是需要按F8结束。于是，找到了解决办法供参考解决办法：进入Sources，查找如下图选中红框中是否有选中的，取消即可。...
2020-03-16 09:42:00
6087
原创 VUE----限制无权限路径访问
需求 后台系统从后台获取允许访问的菜单列表，并在右侧菜单栏展示，但路由已在router.js中配置完成，此时无权限的路径不展示在前端页面，但用户仍可输入url进行访问。则需要解决该问题。解决办法：1.从后台获取的允许访问的菜单列表储存在vuex或localStorage中2.在router.js中对需要进行需要校验权限的页面配置*meta: { requiresAuth: true }*属...
2020-02-29 11:37:57
4349
3
原创 VUE----mounted()函数中无法定义初始化样式的原因
基于vue框架在mounted()函数中，初始化某一个元素的css样式，发现无法成功。解决办法：使用nextTickthis.$nextTick()函数作用是等页面的数据更新完成以后，它再执行内部回调函数中的逻辑参考如下：<div> <span ref="red">我需要初始化颜色</span></div>new Vue({ ...
2019-12-27 16:00:31
1627
原创 在element框架中使用videojs-markers插件时，无法正常引入的坑
接到需求：在视频播放的时候添加打点标志的功能。原项目基本情况：基于element的vue框架，使用的播放视频的插件为：video.js于是，在网上查找关于video.js插件的打点标志功能，很快就找到了videojs-markers可参考：https://github.com/spchuang/videojs-markers使用情况也很简单：如下：页面中，添加视频 <div cl...
2019-12-27 15:39:35
1666
3
原创 element-ui使用报错（一）TypeError: dateObject.getTime is not a function
出现TypeError: dateObject.getTime is not a function报错今天在使用element-ui的表单验证的时候，出现了以下报错：源代码如下：<el-form-item label="直播日期：" style="width: 400px;" prop="date"> <el-date-picker type="date" pl...
2019-09-04 00:03:17
5001
2
转载 实现AJAX的基本步骤
要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤: (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. (3)设置响应HTTP请求状态变化的函数. (4)发送HTTP请求. (5)获取异步调用返回的数据. (6)使用JavaScript和DOM实现局...
2019-02-21 21:07:10
3030
转载 JSON
json是JavaScript的一个严格的子集，利用了javascript中的一些模式来表示结构化数据。json是一种数据格式，不是一种编程语言。很多编程语言都有针对json的解析器和序列化器。语法三种类型的值：简单值（字符串，数值，布尔值和null）不支持undefined对象数组json不支持变量，函数或对象实例，他是一种表示结构化数据的格式。序列化json对象有两个方法：s...
2019-02-21 17:50:29
118
转载 前端开发所需掌握知识点
HTML&amp;CSS：对Web标准的理解（结构、表现、行为）、浏览器内核、渲染原理、依赖管理、兼容性、CSS语法、层次关系，常用属性、布局、选择器、权重、盒模型、Hack、CSS预处理器、CSS3、Flexbox、CSS Modules、Document flow、BFC、HTML5（离线 &amp; 存储、Histoy,多媒体、WebGL\SVG\Canvas）； JavaScrip...
2019-02-20 21:39:11
157
demo.vue（基于element框架，添加videojs-markers打点标记插件的demo）
2019-12-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人