- 博客(39)
- 收藏
- 关注
RSS订阅原创 el-tree重新渲染数据保存上次展开操作记录
首先是设置默认展开数据，element官网上给我们提供了属性default-expand-keys这个属性，每次数据变化时，给这个属性绑定值（expandKey）就好。我这里初始化默认展开第一级watch：{ treeData：{ handler：function () { if(this.treeData.length > 0) { this.expandKey = [this.treeData[0].id]
2022-03-16 15:19:43
3074
1
原创 vue项目写法小技巧
1.不要在vue中使用dom查询，如document.queryselector()，使用this.$refs.XXX原因：查询是从根页面查询的，而vue的的粒度是组件级别的，使用this.$el 从当前组件查询2.操作方法时，使用data中定义对象的某个属性，不要老是 this.xxx.xxx, this.xxx.xxx原因：减少查询次数，如果一个变量用了四次每次使用this.xxx就要在data里面找四次，如果使用const {xxx} = this，只用了一次只有引用的时候找了一次3.
2022-01-18 15:04:24
832
原创 【vue原理】响应式原理（数据双向绑定）
vue数据双向绑定的原理：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。以上属于官方说法，听得似懂非懂，只知道vue的双向绑定采用了js中的Object.defineProperty方法，其中get方法是值读取时触发函数，set是设置值时触发函数，当监听到数据变化时把变化的消息通知订阅者，触发相应的监听回调。但是发布者订阅者是谁？相应的监听回调又是什么？我查了很
2022-01-17 16:19:47
1804
原创 经纬度正则匹配
经度坐标的范围：-180 ~ 180 其中，负坐标代表西半球，正坐标代表东半球，最多支持5位小数：/^-?((([1-9]\d?|1[0-7]\d)(\.\d{1,5})?)|180)$/纬度坐标的范围：-90 ~ 90 其中，负坐标代表南半球，正坐标代表北半球，最多支持五位小数：/^-?(([1-8]\d?(\.\d{1,5})?)|90)$/...
2022-01-11 10:46:08
1056
原创 clientX，clientY，offsetY，offsetX，screenX，screenY区分
在js中clientX，clientY，offsetX，offsetY，screenX，screenY都是鼠标事件的几个对象：如下图可知：clientX：在鼠标事件发生时，鼠标相对于浏览器位置的X轴位置（浏览器有效区域）clientY：在鼠标事件发生时，鼠标相对于浏览器位置的Y轴位置（浏览器有效区域）offsetX：在鼠标事件发生时，鼠标相对于事件源X轴位置offsetY：在鼠标事件发生时，鼠标相对于事件源Y轴位置screenX：在鼠标事件发生时，鼠标相对于显示器屏幕X轴位置sc
2021-12-27 17:17:36
558
原创 canvas时钟绘制方法总结
1.首先需要一个画布，因为要画时钟肯定需要计算角度，Math.PI*degree/180，所以将Math.PI存起来2.绘制表盘，表盘是由60个刻度线构成，时间整点刻度是5的倍数，用着个特点来算刻度线的颜色和宽度3.绘制时钟一定要知道时间，然后计算时分秒角度4.绘制时分秒5.指针时刻在走动，每次绘制记得把画布清空，上面绘制表盘里面使用了清空方法注意点：每次的状态记得保存，每一帧画完记得清空 绘制完一帧记得使用closePath的方法...
2021-11-04 11:33:02
763
原创 canvas鼠标在屏幕上的互动效果实现
1.首先我们整屏画布（你也可以随机设置）2.想要鼠标经过的时候有大小圆圈跟着鼠标动，故需要创建一个类来装圆的属性：随机的圆唯一的标识（id我这里用index），坐标(x, y),半径r，颜色color（因为要很多圆需要一个数组来装，上面变量中自行添加）3.圆的所有属性有了，我想要把它画出来，故创建一个方法4.以上基本工作就做完了，因为我希望圆跟着我的鼠标运动，故需要过去鼠标移动过程中的坐标5.接下来就需要做动画了，为了保证画面的流畅这里使用了requestAnimation.
2021-10-28 16:02:07
1340
1
原创 canvas画满天星
绘制满天星我们需要黑色的天空，若干星星散落在天空各个地方1、夜晚的天空，全屏黑色2.在画布上画星星，也就是画布也应该是全屏var ctx = document.getElementById('canvas') context = ctx.getContext('2d') HEIGHT = document.documentElement.clientHeight WIDTH = document.documentElement.clientWid
2021-10-27 10:41:59
613
原创 canvas中getContext(“2d“) 对象的属性和方法
HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。以下是getContext("2d") 对象的属性和方法：一、颜色、样式和阴影属性 描述 值 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
2021-10-15 16:06:56
27671
原创 认识canvas
一、什么是canvas<canvas>是 HTML5 新增的元素，可用于通过使用 JavaScript 中的脚本来绘制图形。可以理解为<canvas>只是一个画布（创建一个可以绘制的矩形区域），本身并不具有绘图的能力，绘图必须使用 JavaScript 等脚本语言。二、canvas的出现在互联网出现的早期，Web 只不过是静态文本和链接的集合。自从1993年，img的出现，随后flash的诞生，以及video和audio标签的出现，人们越来越希望在其网站和应用程序..
2021-10-14 11:10:54
642
原创 el-cascader点击任意一级的label，并将菜单收起
前言：需要一个级联菜单，点击任意一级就可以进行查询，然后点击后级联菜单收起根据element文档将checkStrictly设置为true就可以了：可是问题又来了：1>以下级联菜单只能点击单选框生效 2>级联菜单选中后不消失，只能点击空白处才会消失而我不需要单选框的出现，点击label直接选中，然后级联菜单消失方法一：选中让级联菜单收起：设置每次监听值变化的时候，把dropDownVisible属性设置为 false 即可（每次级联菜单的值有变化，就把级联菜单...
2021-06-11 17:15:03
912
2
原创 取消vue项目eslint语法检测
vue_cli2.0vue+javaScript找到build文件下的webpack.base.conf.js,将选中文件注释掉卸载eslint：npm uninstall eslint --save如果你是使用vue+typeScript则在build文件下的webpack.base.conf.js,//{//删除或者注释掉// test：/\.ts$/,// exclude:/node_modules/,// enforce:'pre',// loader.
2021-06-02 11:32:13
370
1
原创 el-form表单校验无效
前言： 当表单填写完成，提交表单，使用表单验证的方法，如果验证通过保存表单，若验证不通过，则提示警告，可是validate，没有任何返回，控制台也没有任何报错信息产生原因：自己定义的验证方法，有种情况掉了callback返回（每个条件都需要callback返回，使validate事件进行下去）定义解释：rule： 是自定义校验的规则value：是被校验的数据callback：是每一次校验之后，也就是if语句后都会返回一个callback，将结果给了validate从而继续执行代码，否
2021-05-21 10:28:06
3462
原创 鼠标禁用样式和鼠标禁用事件的冲突（cursor: not-allowed和 pointer-events: none）
cursor: not-allowed;鼠标样式为 禁用图标pointer-events: auto; 效果和没有设置pointer-events属性相同；点击后不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。pointer-events: none；元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向其后代元素。如果同时使用 ，鼠标为默认样式；cursor: not-allowed;（cur...
2021-05-08 16:07:08
4236
3
原创 el-tree懒加载遇到的问题 —— 默认选中前几个节点，父节点以及所有子节点也被选中
前言：el-tree使用懒加载方式（由于数据量大）设置默认选中的是父节点的前两个子节点，展开时，发现父节点和所有子节点全选中了，于是打了一下debugger，发现点击展开时，默认走选中的前两个子节点，到第二个节点是时走了reInitChecked父节点的checked属性变成了true，因为父节点变成了true，所以他又将所有子节点都变成了true（莫名其妙子节点还没渲染完就重置了父节点的状态）；然后我尝试了一下默认选中节点设置父节点的第一个和第三个节点，发现没有问题呢！？？？首先我是使用懒加载的方式加
2021-04-01 21:02:03
2546
原创 input框光标错位问题
前言：使用element组件不论是input还是inputNumber（其实都是input），这个输入框的光标都会错位，文字底部和光标底部平齐但是删除或者重新输入光标就会归位，于是我将此输入框用H5标签写，发现也有此问题解决方式：将input框设置的line-height注释掉这个问题是解决了，我使用的input框是number类型，发现输入框右侧的图标跟上下有缝隙，像文字一样居中了input::webkit-textfield-decoration-container { h
2021-03-10 19:45:23
1582
原创 jstree处理节点大量数据性能处理
前言：使用jstree插件写了一棵树，由于我是点击节点请求一个节点数据，并渲染树的方式（也就是懒加载叶子节点）但是当一个节点下有10000个子节点，节点半天打不开，用户体验不好于是我的处理方式就是个坑this.$nextTick(()=>{ $('jstree').jstree({ 'core':{ 'data':function(obj,callBack) { let url = 'xxxx' let organ
2021-03-04 15:46:44
1006
2
原创 jstree在TypeScript+vue的项目使用
前言：不能像在javaScript+vue中一样使用jquery插件的主要原因是：这些插件不是由TypeScript编写的，所以不会导出TypeScript声明文件，我们在TypeScript引入这些包，就会编译错误以下是我在TypeScript+vue的项目中使用jstree的步骤：步骤一：下载插件以及插件所需依赖 npm install –save jquery jstree步骤二：需要ts声明文件，对外暴露API，有时候声明文件在源码中，大部分是单独提...
2021-03-03 15:36:27
749
1
原创 DataTransfer.setDragImage()自定义拖拽图像遇到的坑
发生拖动时，从拖动目标(dragstart事件触发的元素)生成半透明图像，并在拖动过程中跟随鼠标指针。这个图片是自动创建的，你不需要自己去创建它。然而，如果想要设置为自定义图像，那么DataTransfer.setDragImage()方法就能派上用场。使用时需注意：1、setDragImage传入的第一个值img或者Element是页面中已经存在的元素，不然设置了也是白设置，浏览器将使用默认的拖动图片 2、当拖拽父节点时，拖拽图片展示的是父节点和...
2021-03-02 16:58:36
4867
3
原创 el-tree中实现拖拽遇到的问题
前言：实现树节点拖拽功能element-ui中tree是支持的，draggable设置为true即可，draggable拖拽结束后，调用接口（保存这次改变的顺序）但是当我拖拽树节点，将节点拖入播放器中（拖到树之外，另一个区域中），他将触发两个事件1>被拖拽的节点被放在最后一次经过的节点位置2>被拖拽节点放入另一个区域，触发该区域事件但是我们如果节点拖拽到树外面，我们就不改变节点位置想法一：当节点拖拽超出树的拖拽范围，就不让该节点放置，可惜allow-drop只提供了三个参数，
2021-02-26 17:37:26
7890
4
原创 el-tree中default-checked-keys属性变化不生效
前言：使用element-ui中tree组件时，天真的以为只要动态修改default-checked-keys这个属性值得变化，默认勾选的值也会随之变化，实际发现并不是这样的我们先看看官网上对default-checked-keys的定义：（看完依旧觉得没问题）于是我就去探寻了一下原因是啥：原因是：tree.vue中使用watch监听default-checked-keys值得变化，调用了以下方法在tree-store.js中又使用了此方法终于知道原因了，发现只有监听到def
2021-02-25 16:18:09
13145
6
原创 el-tree处理大量数据
一、节点懒加载 + 异步加载某个节点大量数据（有某个节点数据可能几万条）首先节点懒加载：element-ui中写的非常清楚https://element.eleme.cn/#/zh-CN/component/tree异步加载某个节点的大量数据：首先你会发现一个节点底下的数据只能一次性给树结构，他将一次性渲染，el-tree没有提供相应的方法，但是我已经使用该组件并不想选组件，而且想简单处理处理思路：1>修改依赖代码，解决方式可参考：https://www.cnblogs.com/web
2021-02-24 16:17:30
6767
5
原创 relace（）方法使用总结
定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 注意点：如果没有一个变量来接收的话，replace()方法是不起作用的方法一：全文检索某个字符，并全部替换 this.articleContent=data.content.replace(/data-src/g,'src')方法二：字符串中某些字符切换 varpreviewUrl=window.location....
2020-12-16 19:03:47
462
原创 对象数据的处理方式总结(Object.keys(),Object.values(),Object.entries())
1.Object.keys()和Object.values()都是将对象里面的值转换成数组 例如： let person = {name:"张三",age:25,address:"深圳"} 1. Object.keys(person) //["name", "age", "address"] 2. Object.values(person) //["张三", "25", "深圳"] 综合使用：...
2020-12-16 18:58:56
555
原创 Vue如何动态绑定类
方法一： 例1：放在循环里点击切换类，根据点击的index来确定 <el-menu-item:index="index+'' " v-else-if="!item.classify" @click="menuClick(item,index);" :class="{'active-menu':index+''===activeIndex}"> ...
2020-12-15 19:42:42
379
原创 对于vuex存在的思考
为什么有了sessionStorage和localStorage，vue还需要vuex呢？（也许只有我这种小菜鸟才有这种问题）这个问题我从来没有想过，只是知道vue有这个vuex(可以存数据）在整个项目里，随处调用数据，方便但是问题来了sessionStorage和localStorage也可以存储数据，随处调用啊？区别是什么，vue不是开发了一个无用的东西？显然不是！1.存储空间：vuex的存储是没有大小限制的，但是sessionStorage和localStorage是有的大概5M2.v
2020-12-15 19:31:28
1368
原创 在jquery项目中嵌入vue项目的方法，以及遇到的问题
因为我们知道vue项目打包完成后，就是一个index.html我们在jquery项目中使用iframe嵌入vue项目1.创建vue项目，根据路由写页面2.将vue打包后的dist文件夹，复制到你的jquery目录下3.配的地址跟自己vue项目访问地址一致即可，例如：“traffic/#/notice”varhtml='<divid="item'+gridItemIndex+'"class="item"style="background-color:#fff...
2020-12-09 09:54:18
4010
原创 vue-router的常见问题解决
在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的，我们只要把路径和组件对应起来就可以了，然后在页面中把组件渲染出来。在router.js中的固定写法const router = new Router({ // mode: 'history', routes, base: process.env.BASE_URL, scrollBehavior(to, from, savedPosition) { if (savedPositi
2020-12-08 17:43:52
2571
原创 vue最大优化点
vue的最大的优化点：首屏加载速度快原因如下： 1.不直接操作dom树，造成页面卡顿，而是操作虚拟dom然后在去操作真实dom渲染页面 2.将一些图片直接转换成base64的形式（也就是转变成js代码） 3.组件化开发，实现代码高复用，每一块是一串精短的js代码，解析速度快加快首屏加载速度的处理方式： 1.使用路由懒加载，当不使用该路由时，不进行加载 2.组件懒加载和v-if的结合使用，由于浏览器加载vue页面会把页面上所有组件，...
2020-12-08 16:57:38
85
原创 vue项目的加载顺序
vue项目的入口：main.jsvue项目唯一的页面：index.htmlvue的特点：就是将所有的vue页面（实质上是所有的js代码），全部整合到app.vue（app.js）中合成一个template放入index.html中的页面里面vue的加载顺序：先加载组件，然后是加载app.vue（由内往外加载），所以很多小伙伴（其实是我）把一切请求放到app.vue的mounted中使用，再从组件中调用其实就大错特错了，实际上你会发现组件中的mouted方法会先执行，你要获取的变量其实未定义但
2020-12-08 16:57:13
5702
原创 前端解决跨域问题总结
其实一般情况下，都是由后端解决跨域问题，因为后端处理跨域比前端 更加方便，而且更加安全，前端处理跨域安全性不高，数据容易被劫持，但是当后端实在没办法解决的时候就需要我们前端处理了什么叫做跨域：一个域下的文档或者脚本视图请求另一个域下的资源叫做跨域如何判断跨域：同源策略：协议，域名，端口三者相同称为同源跨域限制行为：1.cookie,localstorage无法获取 2.dom和js对象无法获取 ...
2020-12-06 11:42:00
1672
原创 在vue中echart的使用
方法一：全局引入在main.js中全局引入// 引入echartimport echarts from "echarts";Vue.prototype.$echarts = echarts;在页面组件中使用，定义一个装echart的容器<div id="quPicture"></div>在script中使用方法调用（如果局部也引入echart，可以使用echarts.init;否则使用this.$echarts）initQuPicture(uploa
2020-11-09 11:34:50
286
原创 导出下载公共方式（后台返回文件流或文件地址）
/** * @param attachPath 导出路径 * @return 导出文件 */export const downloadFile =(attachPath)=> { var $a = document.createElement('a'); $a.setAttribute("href", attachPath); $a.setAttribute("download", ""); var evObj = document.createEven..
2020-10-22 18:10:37
423
原创 时间格式化方法
/** * @param fmt 时间格式 * @param date 转换前的日期 * @return 不重复的数组 */export const dateFormatNormal =(fmt, date)=> { let ret; const opt = { "Y+": date.getFullYear().toString(), // 年 "m+": (date.getMonth() + 1).toString()..
2020-10-22 18:09:47
719
原创 数组去重三种常见方法
/** * @param arr 转换前的数组，可能存在长虹复数句 * @return 不重复的数组 */export const getUnique = (arr) => { const map = {}; // 1、把数组元素作为对象的键存起来（这样就算有重复的元素，也会相互替换掉） arr.forEach(item => map[JSON.stringify(item, ['tuUserId', 'tuUserName'])] = item); ..
2020-10-22 17:59:12
330
原创 router.js的常用写法
例如1：使用变量，减少代码量{path:'/pages/:name',//主页面，各列表页//name:'mylist',component:()=>import('@/dymatrixfrontweb/views/pageList/pageList.vue'),meta:{mainPage:true}}例如2：规范写法，清晰明了，父子组件按层级...
2020-10-22 13:55:35
3133
原创 如何快速入手小程序（2）
1.小程序的代码组成结构pages 表示项目界面， 该目录下一个文件夹表示一个界面每个文件夹下有四个文件 wxml ----------html wxss --------- css(推荐用flex) js ------------ js index.json ----- 当前页的配置文件（ 配置界面不能加注释，否则会报错.）app.js 全局的js控制...
2020-07-07 15:43:08
103
原创 vue中路由meta的作用
meta的定义：meta简单来说就是路由元信息 也就是每个路由身上携带的信息。meta的作用：有利于我们处理seo的东西，我们在html中加入meta标签，就是有利于处理seo的东西，搜索引擎方法一：直接在路由配置的时候，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。用它来做登录校验再合适不过了例如：{ { path: '/actile', name: 'Actile', ...
2020-07-07 15:40:24
9650
原创 如何快速入手小程序（1）
1.什么是小程序？小程序是在微信内部的网页，不过微信官方提供了很多的功能和语法，帮助你自己去实现自己所需要的功能。2.小程序有哪些优势？小程序的优势：开发速度快，上线快，用户流量大3.学习微信小程序的官方文档有什么？js-SDK推荐网址：https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0...
2019-08-31 14:20:14
179
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人