- 博客(94)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 vue-cli 3 以上的项目使用 axios 请求本地 json 文件
vue-cli 3 以上的项目使用 axios 请求本地 json 文件
2022-07-10 16:06:36
1145
1
原创 关于 Chrome 浏览器设置 border-radius 不成效的解决办法
关于 Chrome 浏览器设置 border-radius 不成效的解决办法
2022-07-06 16:36:47
750
原创 web开发之长度单位：px, pt, rem, vw, vh
在前端开发中，常常会碰到各种长度单位，比如 px, em, rem, vw 等。总的来说，可以把这些长度单位分成两类：绝对长度单位 和 相对长度单位。 绝对长度单位绝对长度单位是一个固定的值，一个真实的物理值，它不随设备或者受别的因素影响。具体的绝对长度单位主要包括以下几个：1）cm，厘米：一个长度计量单位，1m=100cm。2）mm，毫米：与厘米一样，也是一个长度计量单位，1cm=10mm；...
2021-08-21 17:36:33
1362
转载 js实现一个对页面某个节点的拖曳
js拖拽是常见的网页效果，本文将从零开始实现一个简单的js插件。一、js拖拽插件的原理常见的拖拽操作是什么样的呢？整过过程大概有下面几个步骤：用鼠标点击被拖拽的元素按住鼠标不放，移动鼠标拖拽元素到一定位置，放开鼠标这里的过程涉及到三个dom事件：onmousedown,onmousemove,onmouseup。所以拖拽的基本思路就是：用鼠标点击被拖拽的元素触发onmousedown（1）设置当前元素的可拖拽为true，表示可以拖拽（2）记录当前鼠标的坐标x,y（3）记录当前元素
2021-04-30 15:26:08
989
1
原创 js 跳出 forEach 循环
使用 forEach 的时候，是不能通过 return 来跳出循环的（只可以终止 return 语句后面代码的执行，并不会终止整个循环），比如下面的例子????var list = [ {id: 'id_1', name: 'name_1', price: 1}, {id: 'id_2', name: 'name_2', price: 2}, {id: 'id_3', name: 'name_3', price: 3}, {id: 'id_4', name: 'name_4
2021-01-26 23:09:18
7666
原创 vue 中 EventBus 实现组件通信
Vue项目中，一般会通过 vuex 进行状态管理，但在一些小项目或者初期没有规划 vuex 的情况下，在开发过程中需要进行组件通信（不止是父子组件），就可以选择通过 EventBus 来解决。EventBus又称事件总线。在 Vue 中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。具体使用：1、建立一个 bus.js 的文件。import Vue from 'vue'c...
2020-12-27 15:49:07
174
原创 vue-property-decorator 使用学习
一、安装与使用一般的，vue 项目中使用 TypeScript 时，会安装 vue-property-decorator 这个库，使用装饰器简化书写。安装：npm i -S vue-property-decorator使用：// 当在vue单文件中使用TypeScript时,引入vue-property-decorator之后,script中的标签就变为这样<script lang="ts"> // 按需引入自己需要的功能模块 import { Component, Vue }
2020-11-29 16:19:08
1067
原创 浅析赋值、浅拷贝、深拷贝的区别
1、原理赋值：将某一对象赋给某个变量的过程，称为赋值。浅拷贝：浅拷贝是创建一个对象，这个对象有着原始对象属性值的一份精准拷贝，如果属性是基本类型，拷贝的就是基本类型的值；如果属性是引用类型，拷贝的就是内存地址，如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝：深拷贝就是将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原有的对象。2、区别赋值：当我们将一个对象赋值给另外一个新的变量时，赋的其实是该对象在栈中的地址，而不是堆中的数据。也就是说
2020-10-25 17:23:42
1960
1
原创 JavaScript之this指向
this 是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。关于 this，经常会有一些误解：比如会把 this 理解成指向函数自身，又或者认为 this 指向函数的作用域。其实，this 是在函数调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。因此，函数的不同使用场合，this 也有不同的值。那么我们该如何判断 this 呢？可以按照下面的顺序来进行判断：1.函数是否在 new 中调用（new绑定）？如果是的话，this 绑定的是新创建的对象。首先，回想下 new 运算符
2020-09-23 21:21:32
81
原创 CSS 实现单行、多行文本溢出显示省略号（…）
1、单行文本溢出显示省略号直接用 css 属性 text-overflow: ellipsis; 设置：{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}2、多行文本溢出显示省略号直接用 css 属性 -webkit-line-clamp: n; （n是需要展示的行数）设置：{ overflow: hidden; text-overflow: ellipsis.
2020-08-09 12:17:15
2757
原创 vue自定义指令实现页面添加水印
最近遇到个给页面添加水印的需求（之前没弄过也没见过这种效果），然后组长还要求我使用指令的方式实现，做到水印内容、样式基本可配置，说是以后再有这种需求的话就不用再开发了（嗯，道理我都懂，就是有点儿迷茫…）先去vue官网看看自定义指令：有了钩子和钩子参数，具体的就是怎么实现水印效果了。这里采用的是 canvas 的方式，具体的：'use strict';exports.__esModule = true;/** * 自定义指令'v-watermark' * 可以传入自定义参数（v-wate
2020-07-12 12:15:04
1316
3
原创 TS之装饰器
装饰器装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上，可以修改类的行为。通俗的讲，装饰器就是一个方法，可以注入到类、方法、属性、参数上来扩展类、方法、属性、参数的功能。常见的装饰器有：普通装饰器（无法传参）、装饰器工厂（可传参）装饰器类型类装饰器属性装饰器方法装饰器函数参数装饰器类装饰器类装饰器在类声明之前被声明（紧靠着类声明）；类装饰器应用于类构造函数，可以用来监视、修改或替换类定义；类的构造函数将作为唯一参数传递给装饰器；如果类装饰器返回一个值，它会
2020-06-21 17:07:40
569
原创 TypeScript 中类的定义 & 继承 & 多态
1.修饰符ts里面定义属性的时候给我们提供了三种修饰符：public: 共有类型，在当前类里面、子类、类外部都可以访问private: 私有类型，在当前类里面可以访问，子类、类外部不能访问protected: 保护类型，在当前类里面、子类可以访问，类外部不能访问注：属性如果没有显示声明修饰符，则默认为 public2.定义使用 class 关键字定义类。// 定义 Person 类class Person { name: string; // 属性，前面省略了
2020-05-23 17:17:37
1372
原创 关于 ES 5 中的类、继承 小记
ES 5 ---- 类// 构造函数里定义属性 & 方法function Person() { this.name = 'zhangsan'; this.age = 18; this.run = function() { console.log(`${this.name}在跑步。`); }}// 原型链上定义属性 & 方法Person.prototype.sex = '男';Person.prototype.work = func
2020-05-17 12:18:49
161
原创 vue的组件通信方式小结
https://blog.csdn.net/lplife/article/details/95927762https://www.cnblogs.com/yszblog/p/10135969.htmlhttps://segmentfault.com/a/1190000019208626#item-7
2020-04-01 11:56:10
144
原创 前端防抖与节流
1、防抖 1.1 定义： 在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。 1.2 应用场景： (1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源； (2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，...
2020-03-16 11:10:01
308
原创 中英文状态的符号转换
1、JS把中文的标点全部替换成英文标点：function qj2bj(str){ var tmp = ""; for(var i=0;i<str.length;i++){ if(str.charCodeAt(i) >= 65281 && str.charCodeAt(i) <= 65374){// 如果位于全角！到全角～区间内 tmp += S...
2020-03-13 09:57:59
1242
原创 前端处理跨域问题
跨域：即请求的地址与被请求的地址协议头、域名、端口有一个不一样就叫跨域。相反，不跨域即叫同源，同源：即协议头、域名、端口完全一致。举个例子：URL 说明 是否允许通信http://www.demo.com/a.jshttp://www.demo.com/b.js ...
2020-03-06 16:21:38
281
原创 URLSearchParams 小记
URLSearchParams接口定义了一些实用的方法来处理 URL 的查询字符串。之前没有没有接触过，了解之后发现还是挺实用的，记录一下。首先，我们调用 new URLSearchParams()会返回一个 URLSearchParams对象实例：let str = 'name=Amy&age=24&sex=female';let obj = new URLSe...
2020-03-04 17:55:33
318
原创 vue 注册全局组件
项目中，可能有些组件的复用性非常高，出现的场景也比较多，这时候，一个个页面去引用组件效率就有些低了。其实我们没有必要在每一个需要的地方使用，而是采取在根组件中注册。根组件中的注册是全局注册。全局注册了之后就可以在根组件下的任何子组件中使用。具体的：1、准备要全局注册的组件 unshelveTip.vue<template> <div class="messageB...
2020-01-15 15:19:32
174
1
原创 js 导出 txt 文件
之前有写过一篇js 导出 csv 文件的，现在需求上要求导出 txt 文件，还要导出成指定的格式，只能再次研究下。先贴下这个项目导出 csv 的处理：let rstList = [];let csvList = [];data.list.forEach((item, index)=>{ rstList.push(item.program_info);});rstList...
2019-12-07 14:28:14
1595
原创 js 获取服务器时间
js 是客户端执行的，所以，js的一切关于时间的函数，如 Date.now() 都是以客户端为准的。但是如果客户端的时间跟网络时间不一致，对有些对时间依赖度较高的项目来说，可能就是致命性的问题，这种情况下，就不能简单的使用客户端的时间，而是要获取服务器时间以保证项目的正常运行。接下来说下 js 如何获取服务器时间。原理：使用 ajax请求，返回的头部信息就含有服务器端的时间信息，获取到就可...
2019-11-25 17:36:45
594
原创 element-ui table组件翻页后记录之前页面勾选数据
如图：问题：当上面的表格翻到第二页的时候，第一页勾选的数据就没有了。解决办法：给 table 设置 row-key 属性（值是可以唯一标识该条数据的属性），同时给 type 为 selection 的列设置reserve-selection 属性为 true。附上官方文档里的解释：...
2019-11-25 12:07:12
1577
原创 vue-cli 搭建项目打包后element-ui图标异常问题
利用 vue-cli 构建的项目，打包后放到服务器，测试发现，图标显示异常。打开控制台有如下报错：这是因为vue项目打包后样式目录结构变为static/css 导致找不到对应的文件。解决办法：在 build/utils.js 文件如下位置添加一行代码：publicPath: '../../'...
2019-11-22 17:08:14
1278
1
原创 axios: post 请求 变成 options 提示跨域问题
开发的时候，有个接口一直提示跨域，同一个页面发出的其他指向相同域的接口访问是正常的，不知道是怎么回事，服务器肯定是设置了Access-Control-Allow-Origin 这个东东的。仔细研究发现，本来的 post 请求 变成了 options 请求： 解决办法： 将 post 请求的参数 JOSN 化处理。我是在请求拦截器中处理的...
2019-10-26 19:54:45
811
1
原创 Git 拉取远程分支到本地
方法一（亲测）：1、新建一个空文件夹： mkdir news2、进入文件夹并初始化： cd news git init3、与远程分支建立连接： git remote add origin 代码仓库地址4、把远程分支（假设拉取develop分支）拉到本地 git fetch oringin develop5、在本地创建分支myD...
2019-10-23 23:28:10
213
原创 vue wangEditor 实现富文本编辑器组件
父组件 richText.vue<template> <div> <div class="editorBox"> <editor ref="editor" :catchData="catchData" :content="contentHTML"></editor> </div> </div>...
2019-10-21 14:10:50
822
原创 textarea 文字换行保存后读出来没有换行
问题：页面上有个 <textarea></textarea> 元素，输入内容以后预览，发现回车键的位置并没有换行。如下图所示：预览结果：将内容打印出来，可以看到，<textarea> 中的内容里面，换行是用的 “\n” ，而 html 并不识别：解决办法：将内容里面的\r替换成<br>再进行预览就可以了：var ...
2019-10-16 20:23:27
1061
原创 JavaScript 实现导出 CSV 文件
通过接口拿到的数据结构如上所示，现在要通过 JavaScript 将数据导出： <script type="text/javascript" src="json2csv.js"></script> <script type="text/javascript"> var title = Object.keys...
2019-09-25 15:39:40
1756
转载 element-ui 中 table 设置默认选中
toggleRowSelection(row, selected)接受两个参数，row传递被勾选行的数据，selected设置是否选中注意：调用toggleRowSelection这个方法需要获取真实dom所以需要注册 ref来引用它相关操作：(一).默认选中1.当数据源固定在table的<script>export default { m...
2019-09-12 16:15:13
8467
1
原创 关于vue-cli打包后iconfont路径不对问题
昨天遇到个问题，将 vue 项目（利用 vue-cli 构建的项目，版本是 2.x）打包后，别人在部署的时候发现项目里面图标显示异常，从控制台看，是 iconfont 路径不对。小白的我赶紧拿出小本本做笔记，解决办法如下： 在 build/utils.js 文件中，如下位置添加公共路径属性：publicPath: '../../'...
2019-09-12 16:07:18
740
原创 JS 比较两个字符串的相似度
function similar(s, t, f) { if (!s || !t) { return 0 } var l = s.length > t.length ? s.length : t.length var n = s.length var m = t.length var d = [] f = f || 3...
2019-09-05 17:16:39
8726
1
原创 jQuery 实现全选、全不选、反选 功能
方法：使用 prop() 来设置 "checked" 属性的值，true 为选中，false 为未选中，在整个全选、反选过程中注意处理全选复选框的选中状态。<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" cont...
2019-08-30 12:06:26
298
原创 递归遍历树形结构，根据属性值查找所在对象
目标：有一个对象数组，已知某个 id 属性的值，改变其所在对象的 children 属性值。方法：通过递归方式遍历对象数组，找到指定 id 对应的对象，改变该对象的 children 属性值。具体实现：// 原始对象数组[数据结构是这样的，但是每层有多少数据是不一定的]var originData = [{ id: 1, name: 'name1', children: [{...
2019-08-29 09:54:28
2430
转载 Git提交时设置忽略规则
在使用Git的过程中，我们喜欢有的文件比如日志，临时文件，编译的中间文件等不要提交到代码仓库，这时就要设置相应的忽略规则，来忽略这些文件的提交。Git 忽略文件提交的方法 1、在Git项目中定义 .gitignore 文件 这种方式通过在项目的某个文件夹下定义 .gitignore 文件，在该文件中定义相应的忽略规则，来管理当前文件夹下的文件...
2019-07-30 15:46:36
286
原创 vue+element-ui+axios 实现图片上传小记
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="de...
2019-07-26 12:08:21
2340
原创 谷歌浏览器被hao123劫持
谷歌浏览器被hao123劫持了。。。简直了。。。无力吐槽。。。兜兜转转试了几种方法（因为实在不想改chrome.exe的名字，各种方法均以失败告终。。），最终不得不向现实低头，修改chrome.exe的名字：现在的做法：1、卸载重装 chrome2、删除桌面的 Google Chrome.exe 快捷方式2、修改安装目录下的 chrome.exe 名称，改成“谷歌浏览器.exe...
2019-07-15 16:33:31
8124
5
原创 Google Chrome（谷歌浏览器）js调试
Chrome的调试功能十分强大，这里仅简单记录一些常用的 JS 调试，日常所需必备。1、设置断点 可以通过以下两种方式来设置断点： （1）F12 调出控制台后，在 Source 面板设置。找到要调试的文件，在内容源代码左侧的代码标记行的位置点击，即可打上一个断点： （2）在 js 文件中设置。在 js 源文件中需要执行断...
2019-07-11 14:02:29
1216
原创 js 判断浏览器是否安装 flash 插件
//判断方法function flashChecker() { var hasFlash = 0; var flashVersion = 0; if(document.all) { var swf = new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); if(swf) { ...
2019-06-25 14:12:35
188
json2csv.js
2019-09-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人