![](https://img-blog.csdnimg.cn/20190828104755267.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Module
常用组件开发
明知山_
这个作者很懒,什么都没留下…
展开
-
Aos插件实现滚动动画效果
多了浏览器回滚,动画效果会再次展现。原创 2023-08-26 10:55:42 · 404 阅读 · 0 评论 -
Axios使用CancelToken取消重复请求
处理重复请求:没有响应完成的请求,再去请求一个相同的请求,会把之前的请求取消掉。原创 2023-08-17 08:55:49 · 1258 阅读 · 0 评论 -
ffmpeg.wasm前端实现多张图片合成视频
该功能主要是借助了这个库实现该项目是由创建的首先进行安装使用这时候浏览器会报错这是因为谷歌浏览器的安全策略机制改变了解决在添加,用打开因为对上传进行单独的抽离这里只展示核心代码更多源代码可以下载我的......原创 2022-07-07 10:11:34 · 2105 阅读 · 2 评论 -
downloadjs浏览器下载文件
如果下载的文件报跨域,就用。自己实现了类似的效果。原创 2021-12-15 17:05:04 · 2133 阅读 · 0 评论 -
mavon-editor引入开发markdown编辑器
文档地址安装npm install mavon-editor --save在组件引入,也可在全局引入import Vue from "vue";import mavonEditor from "mavon-editor";import "mavon-editor/dist/css/index.css";Vue.use(mavonEditor);完整代码<template> <div class="box"> <mavon-editor v-m.原创 2020-10-24 11:31:22 · 312 阅读 · 0 评论 -
nprogress路由切换添加进度条
文档地址安装npm install nprogress -S在vue路由页面进行引入import NProgress from 'nprogress'import 'nprogress/nprogress.css'npm install nprogress -S使用router.beforeEach((to, from, next) => { NProgress.start(); next()})router.afterEach(() => { NProgr.原创 2020-10-12 16:50:01 · 321 阅读 · 0 评论 -
微信SDK实现多张图片上传
必须要先wx.config配置,jsApiList里面引入我们需要的微信Api wx.config({ debug: false, appId: 'appId', timestamp: 'timestamp', nonceStr: 'nonceStr', signature: 'signature', ...原创 2020-04-23 10:28:23 · 395 阅读 · 0 评论 -
wangEditor富文本编辑
官方文档地址安装 vue-html5-editornpm install vue-html5-editor --save-dev默认使用的是font-awesome提供的图标也要安装font-awesomenpm install font-awesome.css该富文本的配置较多,所以单独建了个htmlEditor.js的文件夹然后引到main.js中去htmlEditor.js...原创 2020-03-16 11:24:31 · 861 阅读 · 0 评论 -
Oss视频截帧
范例https://sucai.suoluomei.cn/sucai_zs/video/2020/03/03/78cb3207c9871eaf9017bd1cd036199e.mp4?x-oss-process=video/snapshot,t_2000,f_jpg,w_0,h_0,m_fast在视频地址后面拼接’?x-oss-process=video/snapshot,t_2000,f_...原创 2020-03-03 14:45:05 · 1959 阅读 · 2 评论 -
vconsole进行手机端调试
copy到index.html<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> <script> // 初始化 var vConsole = new VConsole(); console.log...原创 2019-09-19 14:26:22 · 299 阅读 · 0 评论 -
swiper.animate实现轮播展示动画效果
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial...原创 2020-01-06 15:53:43 · 2210 阅读 · 0 评论 -
scrollReveal实现网页重复动画效果
文档链接<!doctype html><html lang="zh-CN"><head> <title>scrollReveal.js</title> <meta charset="utf-8"> <style> * { margin: 0;...原创 2020-01-02 16:00:39 · 778 阅读 · 0 评论 -
jquery.qrcode生成带logo二维码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery.qrcode生成二维码</title></head><body> <div id="qrcode"><...原创 2019-12-30 16:39:57 · 464 阅读 · 0 评论 -
html2cavas实现生成图片
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script> $(document).ready(function () { html2canvas($(".box")[0], { scale: 2, logging: true, useCORS: ...原创 2019-09-11 16:48:35 · 556 阅读 · 0 评论 -
Swiper做轮播图
文档api地址<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...原创 2019-12-17 16:04:42 · 209 阅读 · 0 评论 -
animate.css+wow.js实现网页动画
文档地址<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2019-11-28 14:31:14 · 557 阅读 · 0 评论 -
jquery.rotate.js实现转盘抽奖活动
效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2019-09-26 16:57:31 · 423 阅读 · 0 评论 -
jquery.countup实现数字滚动
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=...原创 2019-11-12 16:33:23 · 919 阅读 · 0 评论 -
form-create实现纯Json驱动表单验证
文档地址<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2019-11-12 11:39:18 · 1205 阅读 · 1 评论 -
jQueryWEUI解决input框调起的软键盘和选择器重叠的问题
$("#address").click(function(){//点击picker选择器 document.activeElement.blur();//input框失去聚焦 })原创 2019-09-12 16:02:44 · 1255 阅读 · 0 评论 -
jQueryWEUI动态赋值select下拉框并获取value值
数据形式 var gift_id = ""; $.ajax({ url: '', type: 'post', dataType: 'json', success: function (res) { if (res.errcode == 0) ...原创 2019-10-15 15:44:04 · 4188 阅读 · 2 评论 -
jQueryWEUI使用picker实现二级联动
项目需求根据不同的日期选择不同的时间段实现二级联动日期的返回数据时间段的返回数据 <input type="text" placeholder="请选择日期" id='date'> <div id='eloct'> <input type="text" placeholder="请选择时段"> </div&...原创 2019-10-08 09:27:00 · 4080 阅读 · 0 评论 -
jQueryWEUI引picker组件的时候报错
在拿picker组件滑动报错只需要在css中添加 html { touch-action: none; }完美解决原创 2019-09-29 09:10:49 · 381 阅读 · 0 评论 -
Echartsjs图表的使用
很实用的表格引用,文档地址echarts引入的cdn <script src="https://cdn.bootcss.com/echarts/4.3.0-rc.1/echarts-en.common.min.js"></script>原创 2019-09-12 09:37:59 · 614 阅读 · 0 评论