- 博客(34)
- 资源 (1)
- 问答 (5)
- 收藏
- 关注
RSS订阅原创 2021-09-27
vue 使用html2canvas + jsPDF 生成pdf 踩坑记录问题记录安装部分问题打印部分问题问题记录安装部分问题1.使用npm安装jsPDF插件，安装后，报错。报错内容:export 'SVGPathData' (imported as 'SVGPathData') was not found in 'svg-pathdata' (possible ...解决方法：不采用npm安装的模式，通过cdn引入jsPDF2.使用cdn引用报错：报错内容：找不到 jsPDF对象解决
2021-09-28 17:46:13
895
2
原创 2021-06-18
一到三级菜单封装代码：菜单数据如下： { name:'平台', icon:'server', url:'/Platform' }, { name:'店铺管理', icon:'store', child:[ { name:'绩效', icon:'star', url:'/ShopPerform',
2021-06-18 15:54:21
98
原创 element-ui keep-alive踩坑
keep-alive 有个 exclude 和 include 属性；分别用于设置白名单(include)和黑名单(exclude);这里的两个属性对应的name 需要 的不是路由中设置的name{ path:'/home', name:'home', component:home}错误X而是 在组件中 定义的name// home组件export default { name:'home', data(){ return{ } }}正确...
2021-05-24 11:36:17
839
原创 el-table个人封装使用及表单验证结合使用
组件部分：<template> <div id="tableCol"> <el-table @row-click="clickRow" @cell-click="cellClick" :row-class-name="tableRowClassName" :cell-class-name="tabelCellClassName" :ref="tableAll.select ? 'multipleTable
2021-05-19 10:10:04
198
原创 el-menu和el-tabs联动+el-tabs重复请求踩坑
通过使用el-menu和el-tabs联动来实现效果如下：打了马赛克，大概说一下，左侧菜单栏，右侧标签页，点击标签页跳转不同的菜单相关代码：// 数据注释// 0.menuTitle 是菜单数据 因为有一级和二级菜单，形式为 obj:{level1:[{}],level2:[{}]}// 1.使用router 和 :default-active="$route.path" 自动识别路由，标记菜单项// 2. isCollapse 通过个人需求实现是否折叠// 3. 菜单项 绑定index为路
2021-05-13 09:33:05
2127
3
原创 关于download下载
1.a标签用于下载，download属性，如果定义值则下载文件名为该值。不写为下载文件名<a href="路径" download=""></a>2.a下载文件相对路径：如果是vue项目中，将下载文件保存在public文件夹下，相对于public的index文件写相对路径。（其他会报错，找不到文件路径）<a href ="./favicon.ico" download="">下载</a>...
2021-01-10 20:01:52
1393
原创 头像上传笔记
input的onchange事件accept 上传类型，此处为图片<input type='file' onchange = 'upload' id='uploadInput' accept="image/png, image/jpeg, image/gif, image/jpg"> // 1.获取input let file = document.getElementById('uploadInput'); // 2.new一个Fil
2020-11-18 21:12:14
105
原创 code 练习系列，用于回顾及复习2
1.加载小圆球：菜鸟版： // window.onload = function () { // var list = []; // var opacity = 1; // var r = 10; // for (var angle = 0; angle < 300; angle += 30) { // var div = document.createElement('div')
2020-11-16 00:22:15
186
原创 面向对象学习
面向对象学习面向对象：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>寻找徐峥</title> <style> * {
2020-11-16 00:21:46
88
3
原创 code 练习：轮播图实现
轮播图实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title></head><body><script&g
2020-11-16 00:21:00
1829
原创 code 练习系列，用于回顾及复习
code 练习系列，用于回顾及复习1.小球运动：其中，setInterval 可以使用requestAnimationFrame代替；function anime() { // 每16毫秒执行一次 页面刷新频率requestAnimationFrame(anime);} window.onload = function () { var arr = []; init(); function init() {
2020-11-16 00:20:27
2222
9
原创 增加li元素
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title&
2020-11-16 00:20:08
72
原创 点击清除内容
var msg='<div class=\"header\"><a id=\"close\" href="#">close X</a></div>'msg+='<div><h2>System Maintenance</h2>';msg+='Our se
2020-11-16 00:19:51
84
原创 简单小案例：点击删除列表中的物品
html:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</ti
2020-11-16 00:19:32
55
原创 瀑布流3
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-
2020-11-16 00:18:30
43
原创 数量组件
数量面向对象<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <met
2020-11-16 00:17:48
193
原创 ife(9-11)
切图：1.手动切片：设置参考线–切片工具–切片–导出–导出为web格式–选择png-24（质量较好），勾选交错，透明度–选中用户切片–确定2.自动切片：1》首选项–增效工具–勾选启用生成器2》文件–生成–图像资源3》将需要生成的组或者图层修改为名字.png...
2020-11-16 00:17:20
110
原创 原生Js
1.将类数组转化为数组：es5：arr = [].slice.call(arr);arr = Array.prototype.slice(arr);es6:arr = Array.from(arr);
2020-11-16 00:16:14
91
原创 vue简单总结
vue没有反应时，首先查看是否在包裹的id中模板只能有一个包裹的divv-on:click=“greet(‘hello’,event)"//在指令中使用event要用event)" // 在指令中使用event要用event)"//在指令中使用event要用event;// 在函数中可以使用event// 方法也可以通过app.greet()调用v-for=“value in list” // vue中绑定的data数据v-bind:todo=“value” // todo是组件中的p
2020-11-16 00:15:33
112
原创 Vue响应原理理解
Vue响应原理理解Vue采用的数据劫持+发布订阅模式实现数据响应原理流程图：细节图代码操作过程的响应流程：当编译类编译时，需读取数据，此时调用数据劫持中的get方法，后生成了一个Watcher实例，实例执行getOldVal方法，将实例赋给Dep.target，进入get方法,将实例添加进入观察者，当数据跟新时，执行Watcher的回调函数，执行跟新函数。// 代码const CompileUtils={ 'text':function (node,expr,vm) {
2020-11-15 12:00:51
123
原创 模仿一个B站的up主实现一个有趣的页面效果。
下面是全部的代码啦，比较简单，up主的是另一种实现方法，（up主的链接：https://www.bilibili.com/video/BV1Jp4y1y75i/?spm_id_from=333.788.videocard.7）代码复制后直接运行就可以看到效果了，如果有什么问题大家可以交流，谢谢<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name
2020-10-12 00:24:00
534
4
原创 ES6基础
为什么要学习ES6es5存在的一些问题 es6更加简便 许多大公司都在用es6ES6 新特性ES6编译：编译器报错关于es6，有两种解决办法：1.在js顶部添加注释，/*jshint esversion: 6 */2.在项目根目录下添加.jshintrc配置文件，在配置文件添加一段{"esversion": 6}在Settings>Languages & Frameworks>JavaScript>Code Quality Tools>
2020-09-15 12:02:51
149
原创 原型理解
对于原型的理解：对象通过原型继承相关的属性及方法。实例对象可以通过__proto__访问构造函数的prototypefunction A(){};var a = new A();console.log(a.__proto__ === A.prototype);实例，构造函数，对象均由构造函数构建。1.实例的父亲是构造函数，对象的父亲是Object，构造函数的父亲是Function，2.构造函数，Function也属于对象，3.根据关系可以列出：fn.__proto__ === Fn.p
2020-09-08 10:57:58
313
原创 二分法插入练习
二分法：插入位置：function getIndexToIns(arr, num) { // Find my place in this sorted array. arr = arr.sort((a,b)=>{ return a-b; }); var start = 0,end = arr.length-1; var mid = parseInt((start + end )/2); while(start <= end){ if(num == arr
2020-09-07 22:42:20
118
原创 2020-9-5,input双向绑定
vue模拟input[type=‘number’] 组件功能。父组件传入最大值，最小值，step <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <style> [v-cloak]{
2020-09-05 13:52:45
183
原创 ife(7-9)
一.定位元素1.定位absolute：相对于定位（定位不为static）的父元素定位，如果父元素均无定位，则以body为父元素；fixed：相对浏览器定位；relative：相对元素本身定位；sticky：相对位置和固定定位的混合体：先是相对定位，等到滚动到一定的位置（top或者bottom）就会变成固定定位；2.定位特点：同级定位元素之间使用z-index设置级别；默认为0；3.简单的tab切换： <style> *{ margin: 0;
2020-07-24 18:51:10
118
原创 html+css查漏补缺
ife(5-6)用时：1天收获：BFC，浮动1.用css写三角形 div{ height: 0; width: 0; border-width: 20px; border-style: solid; border-color: red; border-bottom-color: transparent; border-left-color: transparent;}2.margin 塌陷解决方法1：使用padding代替解决方法2：触发BF
2020-07-24 11:11:52
113
原创 原生js实现三级级联
思路：接口请求 省级 type:0 市级 type：1，province：province 县：type：2 ，province：province，city：city响应：省市县数据数组。实现每个select的Menu类及render数据渲染方法，change方法监听类中抛发的事件，渲染数据总的：生成三个空select，给第一个select 传入数据，createSel时会抛发出数据，在html页面接收，并且根据数据判断是第几个select，然后请求数据并渲染后面的selecthtml
2020-07-17 11:49:29
500
原创 有短连接ajax实现长连接简单聊天室
本人小白一个，如有错误请指正，如果有更好的改进大家可以评论留言，欢迎大家来交流讨论，一起共同进步。下面是正文：接口：// 访问同一个服务器页面：http://localhost/chatroom/server.php 方法 post // 发送消息接口 // type = 1 // 发送msg对象，包括时间，用户名，信息，接口类型 // 返回 msg对象 // 主动询问他人消息接口 // type=2 // 发送type=2 //
2020-07-14 15:00:45
488
原创 购物车：
购物车：数量组件：class StepNum { constructor(parent, data) { this._data = data; this.num = data.num; this.step = 1; this.evt = new Event(StepNum.CHANGENUM);// this.flag = false; if (!parent) parent = document.body;
2020-07-01 23:57:02
146
原创 数量组件及滚动的数量组件，可直接运行；
1.不滚动：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <met
2020-06-30 16:38:15
136
原创 商品列表
商品列表:html代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2020-06-16 14:50:36
183
原创 code 练习
学习code 练习<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <
2020-06-15 12:46:15
130
原创 关于notepad++ emmet及pythonscript 的下载及安装
关于notepad++ emmet及pythonscript 的下载及安装这个笔记是为了总结并且帮助使用notepad++ 的新手安装notepad++插件 emmet及pythonscript 。我的情况：自学前端，之前一直在用vs code，但是插件装多了之后十分卡顿。所以无奈卸载，尝试notepad++。系统：win10 64位安装notepad++最新版本 64位之后没有办法安...
2019-08-05 16:26:49
428
大家都是如何通过仿写网页提高网页编写能力的呢？
2020-08-29
ie8下改变html根元素设置大小，rem的宽度及高度没有改变
2020-07-31
for循环第二参数问题, 第二个参数中如果出现多个条件
2020-05-19
用jquery做轮播图，在尾页跟首页切换时出现错误。
2020-04-22
TA创建的收藏夹 TA关注的收藏夹
TA关注的人