lavendersue-CSDN博客

原创 vue canvas实现手写签字

小编最近的项目与合同有关，与合同有关就避免不了合同的签署，自然而然就需要搞个签名版啦，废话少说，上代码比较实在。sign.vue<template> <div class="signHandle"> <canvas ref="signHandle" class="canvas" id="canvas" @touchstart="drawStart" @touchmove="drawing"

2022-01-20 10:04:59 1516

小编最近接手的项目中，有个需求，前端显示后端返回的PDF格式的文件，经过小编两天的调研和试验，终于找到了一个比较好的插件方法，直接贴代码。1、安装npm i vue-pdf-signature --save-dev2、pdfShow.vue<template> <div class="pdf-content">  <div class="all-pdf" v-if="isShowAll"&

2022-01-20 09:19:11 5974 1

原创 vue项目将px转换为rem进行移动端适配

使用postcss-px2rem-exclude实现将px转换为rem进行移动端适配安装依赖npm install postcss-px2rem-exclude --save-dev.postcssrc.json添加：module.exports = {........'plugins':{ "autoprefixer":{}, 'postcss-px2rem-exclude':{ remUnit:37.5, propList:[], exclude:/(node_module

2021-12-01 14:35:00 677

原创图片压缩

插件对比：一、compressorjs1、使用方式npm i compressorjs --save引入：import Compressor from ‘compressorjs’;使用：2、压缩结果（图片原始大小为9.8M）:（图片原始大小为4.4M）:由上图可见，当图片为5M左右时，压缩效果并不明显。二、image-compressor.js由名称就可看出，和compressorjs异曲同工，使用方法、引入以及压缩效果与compressorjs别无二致，故在此不做赘述。

2021-05-25 18:02:58 591

翻译微信小程序新分享功能

原分享api：//1、分享到朋友圈wx.onMenuShareTimeline({ title: '', // 分享标题 link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 success: function () { // 用户点击了分享后执行的回调函数 }},//2、分享给朋友wx.onMenuShareAppMessage({ title: '', // 分享标题 desc:

2021-04-20 10:52:02 407

原创 Vue 长按文本复制事件实现

longpress.jsexport default { install(Vue, options = { time: 2000 }) { Vue.directive('longpress', { bind: function (el, binding, vNode) { // 确保提供的表达式是函数 if (typeof binding.value !=

2021-03-19 10:59:37 1075 1

原创 Vue 仿蚂蚁森林能量球生成&获取组件

小编最近刚刚结束了一个需求，需求是这样的：通过做任务生成一定的太阳，领取太阳后达到一定等级树苗进行生长。嗯？听起来是不是觉得很熟悉？是的，小编就想到了蚂蚁森林，不知道各位同学获取到多少个证书了呢？这些证书花了你们多少毛爷爷呢？原本小编不想自己实现的，奈何网上资料太少，所以小编只能自己动手了，代码奉上，有需要的童鞋自取哦~组件代码如下：命名为sun.vue<template> <div class="sun-container"> <ul> &

2021-03-18 10:42:33 2000 7

转载 js下载文件、音频、视频的方式

下载文件可以直接通过a标签的href属性直接下载，也可以通过Blob对象转换为文件流进行下载。如果要对大数据量或者需要分片下载、上传等操作，可以考虑Blob对象。同事Blob对象可以对下载过程进行额外操作（拦截等操作），这是a标签直接下载做不到的。1、a标签下载文件const downloadFileA = document.createElement('a')document.body.append(downloadFileA)downloadFileA.href=`https://xxx`do

2020-12-15 10:43:37 4363 1

原创 Taro开发遇到的坑&总结

涉及到开发框架①语言框架：目前使用到的开发框架主要以Vue为主，Taro开发提供了多种语言和框架，其中就有Vue，既然对Vue较为熟悉，那是否可以使用Vue为开发语言基础进行小程序的开发？可以是可以，但不建议。我亲身体验过，谈谈我的感受。首先，Taro中无论是组件库还是API亦或是UI框架，皆以React为例，虽然UI框架也有针对Vue而开发的Taro UI Vue（链接:http://taro-ui-vue.fontend.com/#/），但还是有一定的缺陷。说白了就是，Taro 是针对React进.

2020-11-13 18:27:13 2863

原创 H5 将html页面内容生成图片并上传至七牛

小编最近在做项目时遇到一个问题，那就是，需要将html页面生成图片后并传给app客户端，至于为什么要传给客户端，自然是因为小编的这个项目是客户端中嵌入h5页面，故而需要和客户端内部交互。那么问题就来了，怎么将html页面生成图片，小编在网上查找资料，都是说用html2canvas，find，那就用。好嘛，用了之后发现，小编生成的图片格式为base64格式，难不成将生成的base64编码像在url后边拼接参数一样传给客户端，额…估计会炸了，所以想到将其上传至七牛，生成外部链接后将该链接传给客户端，所以，才有了

2020-06-19 10:52:16 1296

原创 vue项目中使用http-proxy-middleware解决前端开发中跨域的问题

使用方式：1、安装npm install http-proxy-middleware --save-dev2、使用一般的使用新建js文件，在此小编命名为proxy.jsconst proxy = require("http-proxy-middleware");module.exports = { entry:{ index:"./index.js" }, output:{ }, devServer:{ proxy:{ '^/api/'

2020-05-27 17:52:29 2612 1

原创微信小程序获取微信绑定授权手机号

方法：1、使用<button>组件，并将该组件的open-type的属性值设置为getPhoneNumber，绑定bindgetphonenumber事件2、当用户点击允许时，可以通过绑定事件的回调获取到微信服务返回的加密数据3、调用login接口，获取到用户的code4、将获取手机号事件返回的加密数据结合sessionkey、appid以及login接口返回的code传给后端提供的接口进行解密获取手机号。示例：<button open-type="getPhoneNumber

2020-05-26 17:57:53 2261 1

原创 npm与Node.js版本不兼容问题

今天小编在安装依赖的时候，突然间就报了以下的错误提示：嗯，小编虽然过了英语CET-4，但早不知道把他丢到哪一个大洋里面去了，所以去百度翻译了一波。翻译的结果说是：可能使用的node tar或npm版本与node.js的此版本不兼容。然后小编在百度上搜索答案，有说将npm降级的，且错误提示也说让小编把npm的版本提到大于5.5.1或是降到小于5.4.0的。然鹅，小编根据它说的降级或升级操作一波猛如虎，结果，呵呵。于是乎，小编在度娘上又看到了另一篇文章，嗯，完美解决问题，故而和各位童鞋分享分享，小编也记

2020-05-19 11:09:02 5963 1

转载 velocityJs-动画库

一、概念velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API，但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能，还拥有：颜色动画、转换动画(transforms)、循环、缓动、SVG 动画、和滚动动画等特色功能。用法：引入js文件&lt...

2020-04-30 16:35:31 674

翻译 clipboard.js-实现复制功能的插件

clipboard是一款现代化的拷贝文字的插件。一、在一般的使用：1、引入js文件<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>2、使用//1、new ClipboardJS('.btn');//2、//d...

2020-04-29 16:24:33 882

翻译 Driver.js-分步指引插件

Driver.js是一个用于凸显页面的某一部分的插件。改插件可以在直接引入到页面中使用，也可引入到vue项目中使用，但如果在vue项目中使用到UI框架，或在分步指引中断层，小编不推荐使用该插件来实现分步指引。1、直接引入js、css使用<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script&g...

2020-04-29 14:33:33 3741

转载移动端、微信开发注意事项

1、ios调起键盘，页面没有恢复问题（fixed定位缺陷导致）this.$nextTick(() => { window.scrollTo(0, 0);});也可以使用iScroll插件进行解决。iScroll链接地址：http://caibaojian.com/iscroll-5/较详细解说CSDN：https://blog.csdn.net/weixin_34102807...

2020-04-28 20:49:38 222

转载 MongDB解决Authentication Failed导致的不能连接问题

MongoDB的安装Step1.　打开MongoDB产品下载页面https://www.mongodb.com/download-center?jmp=nav#community，选择Windows Server 2008 R2 64-bit and later, with SSL support x64，点击下载。Step2.　双击上一步下载的安装包，根据安装向导的提示，一直next，选择c...

2020-03-17 16:16:14 28747

原创 node-sass安装失败解决方案

npm 安装 node-sass 依赖时，会从 github.com 上下载 .node 文件。由于国内网络环境的问题，这个下载时间可能会很长，甚至导致超时失败。方式一：使用淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org方式二：若使用淘宝镜像后依旧失败删除整个依赖node_modules文件后使用c...

2020-03-17 13:58:49 157

原创 vue本地静态文件图片的require引入方式

<template> <img :src="imgUrl"></template><script>//方法1.直接将图片引入为模块require imgUrl from "../../static/test.png"//或import imgUrl from "@/static/test.png"data(){ retu...

2020-03-06 15:27:19 3912 2

转载 git生成秘钥配置SSH公钥的简单方法

首先安装git然后安装后在桌面任意空白处右击，选择Git Base Here即可如下图：①方式一：输入命令：cd ~然后输入：ssh-keygen.exe然后按回车，再次按回车，在回车，按三次回车：②方式二：输入：ssh-keygen -o -t rsa -b 4096 -C “[email protected]”然后按回车，再次按回车，在回车，按三次回车（和方式一回车处一致）...

2020-03-04 17:45:52 773

原创 Vue常用UI框架-elementUI和vant的对比

一、vant1、引入与使用直接通过 CDN 引入到html页面中<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css"><script src...

2020-03-04 15:09:13 20092

原创 Fundebug-实时监控网页应用的错误插件

一.含义Fundebug的JavaScript插件能够实时监控网页应用的错误，第一时间给您发送报警，帮助您及时发现BUG，快速解决BUG。二.特点自动捕获未处理的错误能够捕获3种不同的前端错误：JavaScript执行错误，资源加载错误和HTTP请求错误出错场景完全可视化重现，相当于"录屏"支持通过Source Map还原出错源代码记录出错前的鼠标点击、HTTP请求、页面跳转、co...

2020-03-04 13:57:59 772

原创关于ES6常用语法

1.箭头函数①普通函数function fn(){}② 箭头函数当函数没有参数时，（）不能省略当函数只有一个参数，且函数体是一句代码，且是返回语句参数的（）可省略、函数体 {} 可省略、return可省略、中间使用 => 连接若函数体只有一句，且不是return 语句，不能省略 {}若函数体有多条语句，不能省略 {}若函数有多个参数，不能省略()若函数的返回值为对象，...

2020-03-03 14:37:35 519

原创树状图插件

1. jsTree介绍jsTree是一个基于jQuery的Tree控件。支持XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖"放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。使用方式引入jq以及jstree js文件和css文件<link rel="stylesheet" href="jstree/th...

2019-12-18 11:52:24 1683

原创阿里云 oss （图片、视频上传）

示例：前端封装方法并调用，直接上传至阿里云此方法需要在阿里云拥有账号，并配置好才可使用，配置就不贴出了，只贴出前端代码。/**** 阿里云 oss (图片、视频上传) 插件** @param opts 参数详情* opts = {* timeout:"请求过期时间（配置项 timeout, 默认 60000）",* partSize:"分片大小（配置项 partSize...

2019-12-17 14:07:56 3428

翻译 UEditor--富文本编辑器

介绍UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。特点支持拖拽图片上传支持QQ截图后粘贴上传图片支持图片直传第三方云储存支持Chrome的图片拖动改变大小支持公式编辑支持地图插入支持表情插入支持附件图片插入下载官网下载：http://ueditor.b...

2019-12-16 15:33:45 1080

翻译 uploadify---jQuery多文件上传

介绍ploadify是JQuery的一个上传插件，支持多文件上传，实现的效果非常不错，带进度显示。下载前往官网进行下载，但小编发现，各路人马提供的官网全都打不开，在Github下载的文件为uploadifive.js ，小编怎么看这个文件名都觉得是个山寨货，所以小编不推荐这种方式。通过npm下载 npm install --save uploadify 小编...

2019-12-16 11:08:35 337

翻译滚动条插件

介绍：把任何div元素包裹的内容区加上具有好的滚动条。slimscroll不占用任何视觉空间，它只出现在一个用户启动的鼠标。用户可以拖动滚动条或使用鼠标滚轮改变滚动值。使用方式：全局引入：npm install jquery-slimscroll引入jq和slimscroll.js文件<script type="text/javascript" src="js/jque...

2019-12-13 16:25:16 725

翻译 jBox----弹出层插件

介绍：jBox 是一款功能强大的 jquery 弹出层插件。jBox 插件可以用来创建 tooltips 提示框、模态窗口、图片画廊等多种效果。使用方式：在页面中引入 jBox.all.min.css、jquery 和 jBox.all.min.js 文件。在此提供CDN地址：<script src="https://code.jquery.com/jquery-3.4.1.min...

2019-12-13 15:23:53 1105

翻译 metisMenu侧边栏插件

介绍metisMenu是一个jQuery的导航栏插件，使用该插件可以定义导航栏的二级甚至三级导航菜单，并能实现菜单的折叠和展开等操作，将节省我们的开发时间，提高开发效率。引入方式：npm$ npm install --save metismenuyarn$ yarn add metismenu直接引入<link rel="stylesheet" href="v...

2019-12-06 14:02:46 2212

原创 ICheck表单复选框、单选框控件美化插件

作用：渲染并美化当前页面的复选框或单选框响应复选框或单选框的点击事件特点：在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括桌面和移动设备支持触摸设备 — iOS、Android、BlackBerry、Windows Phone等系统方便定制 — 用HTML 和 CSS 即可为其设置样式 (多套皮肤)体积小巧 — gzip压缩后只有1 kb25 种参数用来定制复...

2019-12-05 11:06:05 508

原创 iframe高度自适应解决方式

带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大家几种iframe动态调整高度的方法。1、<iframe width="778" align="center" height="200" id=...

2019-11-26 10:23:27 1332 1

原创 js 调用 IOS 、Android原生方法

如今，由于有些页面排版或实现对于android、ios开发人员而言实在麻烦与复杂，实现需要的时间成本太高，导致很多App里都内置了Web网页，app中嵌入Web网页便免不了涉及到Android客户端、IOS客户端与Web网页交互。小编最近就遇到了这个问题，也找到了相应的解决方法，在此和大家分享一下，但小编只接触了js调用android客户端和ios客户端原生方法，故而只介绍js调用android客...

2019-09-19 12:02:00 4919

转载 input框输入文本限制

1、文本框只能输入数字(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />2、只能输入数字,能输小数点①方式一：<input onkeyup="if(isNaN(value))...

2019-09-12 09:31:13 1225

翻译 vue常用插件

一、轮播图-------vue-awesome-swiper安装：npm install vue-awesome-swiper --save① vue中使用：全局使用mport Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper' // require stylesimport 'swiper/dist/...

2019-09-11 18:40:24 383

原创 vue项目中多行文本超出省略失效解决方式

使用vue-cli构建的项目在打包之后，-webkit-box-orient: vertical 会丢失，还有包括使用flex布局进行兼容性hack写法的一些属性，如:#app{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; ...

2019-09-11 18:07:44 2493

原创 vue 组件之间传值解析

1、父子组件传值Ⅰ、父组件向子组件传值①首先先定义一个子组件，小编命名为child，在child组件中组件props，props里的字段可以详细一些，也可以很简洁例：<template> <div> <div>{{message}}(子组件)</div> </div></template&g...

2019-09-06 17:47:41 200

原创 HTML+CSS实现时间轴（移动端）

html:<section id="cd-timeline" class="cd-container"> <div class="cd-timeline-block"> <div class="cd-timeline-img cd-picture"></div> <p class="cd-date">01:06...

2019-06-25 13:59:50 3179 1

翻译将Excel中的数据导入html以及将html表格数据导出Excel

html:<input type="file" onchange="importExcel(this,false,function(data){getJsonData(data)})" class="upload-input" /><div> <table class="table table-bordered"> <thead> ...

2019-06-24 16:41:08 6616 2

空空如也

空空如也