![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 65
何必诗债换酒钱
From now on, I will expect nothing, and just take what I get.
展开
-
vue-cli 3 以上的项目使用 axios 请求本地 json 文件
vue-cli 3 以上的项目使用 axios 请求本地 json 文件原创 2022-07-10 16:06:36 · 1211 阅读 · 1 评论 -
关于 Chrome 浏览器设置 border-radius 不成效的解决办法
关于 Chrome 浏览器设置 border-radius 不成效的解决办法原创 2022-07-06 16:36:47 · 832 阅读 · 0 评论 -
前端 <textarea> 标签中的内容保存、展示
前端 标签中的内容保存、展示原创 2022-07-03 15:41:23 · 1961 阅读 · 0 评论 -
web开发之长度单位:px, pt, rem, vw, vh
在前端开发中,常常会碰到各种长度单位,比如 px, em, rem, vw 等。总的来说,可以把这些长度单位分成两类:绝对长度单位 和 相对长度单位。 绝对长度单位绝对长度单位是一个固定的值,一个真实的物理值,它不随设备或者受别的因素影响。具体的绝对长度单位主要包括以下几个:1)cm,厘米:一个长度计量单位,1m=100cm。2)mm,毫米:与厘米一样,也是一个长度计量单位,1cm=10mm;...原创 2021-08-21 17:36:33 · 1441 阅读 · 0 评论 -
js实现一个对页面某个节点的拖曳
js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件。一、js拖拽插件的原理常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤:用鼠标点击被拖拽的元素按住鼠标不放,移动鼠标拖拽元素到一定位置,放开鼠标这里的过程涉及到三个dom事件:onmousedown,onmousemove,onmouseup。所以拖拽的基本思路就是:用鼠标点击被拖拽的元素触发onmousedown(1)设置当前元素的可拖拽为true,表示可以拖拽(2)记录当前鼠标的坐标x,y(3)记录当前元素转载 2021-04-30 15:26:08 · 1055 阅读 · 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 · 7715 阅读 · 0 评论 -
vue 中 EventBus 实现组件通信
Vue项目中,一般会通过 vuex 进行状态管理,但在一些小项目或者初期没有规划 vuex 的情况下,在开发过程中需要进行组件通信(不止是父子组件),就可以选择通过 EventBus 来解决。EventBus又称事件总线。在 Vue 中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件。具体使用:1、建立一个 bus.js 的文件。import Vue from 'vue'c...原创 2020-12-27 15:49:07 · 181 阅读 · 0 评论 -
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 · 1129 阅读 · 0 评论 -
浅析赋值、浅拷贝、深拷贝的区别
1、原理赋值:将某一对象赋给某个变量的过程,称为赋值。浅拷贝:浅拷贝是创建一个对象,这个对象有着原始对象属性值的一份精准拷贝,如果属性是基本类型,拷贝的就是基本类型的值;如果属性是引用类型,拷贝的就是内存地址,如果其中一个对象改变了这个地址,就会影响到另一个对象。深拷贝:深拷贝就是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原有的对象。2、区别赋值:当我们将一个对象赋值给另外一个新的变量时,赋的其实是该对象在栈中的地址,而不是堆中的数据。也就是说原创 2020-10-25 17:23:42 · 2015 阅读 · 1 评论 -
JavaScript之this指向
this 是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。关于 this,经常会有一些误解:比如会把 this 理解成指向函数自身,又或者认为 this 指向函数的作用域。其实,this 是在函数调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。因此,函数的不同使用场合,this 也有不同的值。那么我们该如何判断 this 呢?可以按照下面的顺序来进行判断:1.函数是否在 new 中调用(new绑定)?如果是的话,this 绑定的是新创建的对象。首先,回想下 new 运算符原创 2020-09-23 21:21:32 · 99 阅读 · 0 评论 -
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 · 2810 阅读 · 0 评论 -
vue自定义指令实现页面添加水印
最近遇到个给页面添加水印的需求(之前没弄过也没见过这种效果),然后组长还要求我使用指令的方式实现,做到水印内容、样式基本可配置,说是以后再有这种需求的话就不用再开发了(嗯,道理我都懂,就是有点儿迷茫…)先去vue官网看看自定义指令:有了钩子和钩子参数,具体的就是怎么实现水印效果了。这里采用的是 canvas 的方式,具体的:'use strict';exports.__esModule = true;/** * 自定义指令'v-watermark' * 可以传入自定义参数(v-wate原创 2020-07-12 12:15:04 · 1351 阅读 · 3 评论 -
TS之装饰器
装饰器装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,属性或参数上,可以修改类的行为。通俗的讲,装饰器就是一个方法,可以注入到类、方法、属性、参数上来扩展类、方法、属性、参数的功能。常见的装饰器有:普通装饰器(无法传参)、装饰器工厂(可传参)装饰器类型类装饰器属性装饰器方法装饰器函数参数装饰器类装饰器类装饰器在类声明之前被声明(紧靠着类声明);类装饰器应用于类构造函数,可以用来监视、修改或替换类定义;类的构造函数将作为唯一参数传递给装饰器;如果类装饰器返回一个值,它会原创 2020-06-21 17:07:40 · 597 阅读 · 0 评论 -
TypeScript 中类的定义 & 继承 & 多态
1.修饰符ts里面定义属性的时候给我们提供了三种修饰符:public: 共有类型,在当前类里面、子类、类外部都可以访问private: 私有类型,在当前类里面可以访问,子类、类外部不能访问protected: 保护类型,在当前类里面、子类可以访问,类外部不能访问注:属性如果没有显示声明修饰符,则默认为 public2.定义使用 class 关键字定义类。// 定义 Person 类class Person { name: string; // 属性,前面省略了原创 2020-05-23 17:17:37 · 1427 阅读 · 0 评论 -
关于 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 · 182 阅读 · 0 评论 -
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 · 154 阅读 · 0 评论 -
前端防抖与节流
1、防抖 1.1 定义: 在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计时。 1.2 应用场景: (1) 用户在输入框中连续输入一串字符后,只会在输入完后去执行最后一次的查询ajax请求,这样可以有效减少请求次数,节约请求资源; (2) window的resize、scroll事件,不断地调整浏览器的窗口大小、或者滚动时会触发对应事件,...原创 2020-03-16 11:10:01 · 332 阅读 · 0 评论 -
中英文状态的符号转换
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 · 1292 阅读 · 0 评论 -
前端处理跨域问题
跨域:即请求的地址与被请求的地址协议头、域名、端口有一个不一样就叫跨域。相反,不跨域即叫同源,同源:即协议头、域名、端口完全一致。举个例子:URL 说明 是否允许通信http://www.demo.com/a.jshttp://www.demo.com/b.js ...原创 2020-03-06 16:21:38 · 287 阅读 · 0 评论 -
URLSearchParams 小记
URLSearchParams接口定义了一些实用的方法来处理 URL 的查询字符串。之前没有没有接触过,了解之后发现还是挺实用的,记录一下。首先,我们调用 new URLSearchParams()会返回一个 URLSearchParams对象实例:let str = 'name=Amy&age=24&sex=female';let obj = new URLSe...原创 2020-03-04 17:55:33 · 341 阅读 · 0 评论 -
vue 注册全局组件
项目中,可能有些组件的复用性非常高,出现的场景也比较多,这时候,一个个页面去引用组件效率就有些低了。其实我们没有必要在每一个需要的地方使用,而是采取在根组件中注册。根组件中的注册是全局注册。全局注册了之后就可以在根组件下的任何子组件中使用。具体的:1、准备要全局注册的组件 unshelveTip.vue<template> <div class="messageB...原创 2020-01-15 15:19:32 · 190 阅读 · 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 · 1616 阅读 · 0 评论 -
js 获取服务器时间
js 是客户端执行的,所以,js的一切关于时间的函数,如 Date.now() 都是以客户端为准的。但是如果客户端的时间跟网络时间不一致,对有些对时间依赖度较高的项目来说,可能就是致命性的问题,这种情况下,就不能简单的使用客户端的时间,而是要获取服务器时间以保证项目的正常运行。接下来说下 js 如何获取服务器时间。原理:使用 ajax请求,返回的头部信息就含有服务器端的时间信息,获取到就可...原创 2019-11-25 17:36:45 · 627 阅读 · 0 评论 -
element-ui table组件翻页后记录之前页面勾选数据
如图:问题:当上面的表格翻到第二页的时候,第一页勾选的数据就没有了。解决办法:给 table 设置 row-key 属性(值是可以唯一标识该条数据的属性),同时给 type 为 selection 的列设置reserve-selection 属性为 true。附上官方文档里的解释:...原创 2019-11-25 12:07:12 · 1609 阅读 · 0 评论 -
vue-cli 搭建项目打包后element-ui图标异常问题
利用 vue-cli 构建的项目,打包后放到服务器,测试发现,图标显示异常。打开控制台有如下报错:这是因为vue项目打包后样式目录结构变为static/css 导致找不到对应的文件。解决办法:在 build/utils.js 文件如下位置添加一行代码:publicPath: '../../'...原创 2019-11-22 17:08:14 · 1296 阅读 · 1 评论 -
axios: post 请求 变成 options 提示跨域问题
开发的时候,有个接口一直提示跨域,同一个页面发出的其他指向相同域的接口访问是正常的,不知道是怎么回事,服务器肯定是设置了Access-Control-Allow-Origin 这个东东的。仔细研究发现,本来的 post 请求 变成了 options 请求: 解决办法: 将 post 请求的参数 JOSN 化处理。我是在请求拦截器中处理的...原创 2019-10-26 19:54:45 · 839 阅读 · 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 · 233 阅读 · 0 评论 -
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 · 846 阅读 · 0 评论 -
textarea 文字换行保存后读出来没有换行
问题:页面上有个 <textarea></textarea> 元素,输入内容以后预览,发现回车键的位置并没有换行。如下图所示:预览结果:将内容打印出来,可以看到,<textarea> 中的内容里面,换行是用的 “\n” ,而 html 并不识别:解决办法:将内容里面的\r替换成<br>再进行预览就可以了:var ...原创 2019-10-16 20:23:27 · 1149 阅读 · 0 评论 -
递归遍历树形结构,根据属性值查找所在对象
目标:有一个对象数组,已知某个 id 属性的值,改变其所在对象的 children 属性值。方法:通过递归方式遍历对象数组,找到指定 id 对应的对象,改变该对象的 children 属性值。具体实现:// 原始对象数组[数据结构是这样的,但是每层有多少数据是不一定的]var originData = [{ id: 1, name: 'name1', children: [{...原创 2019-08-29 09:54:28 · 2494 阅读 · 0 评论 -
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 · 309 阅读 · 0 评论 -
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 · 8996 阅读 · 1 评论 -
关于vue-cli打包后iconfont路径不对问题
昨天遇到个问题,将 vue 项目(利用 vue-cli 构建的项目,版本是 2.x)打包后,别人在部署的时候发现项目里面图标显示异常,从控制台看,是 iconfont 路径不对。小白的我赶紧拿出小本本做笔记,解决办法如下: 在 build/utils.js 文件中,如下位置添加公共路径属性:publicPath: '../../'...原创 2019-09-12 16:07:18 · 760 阅读 · 0 评论 -
element-ui 中 table 设置默认选中
toggleRowSelection(row, selected)接受两个参数,row传递被勾选行的数据,selected设置是否选中注意:调用toggleRowSelection这个方法需要获取真实dom所以需要注册 ref来引用它相关操作:(一).默认选中1.当数据源固定在table的<script>export default { m...转载 2019-09-12 16:15:13 · 9032 阅读 · 1 评论 -
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 · 1799 阅读 · 0 评论 -
将本地项目上传到github
将本地项目上传到github主要分为两步:先要创建本地版本库,然后将本地版本库添加到远程仓库。具体步骤如下:1、创建版本库(创建一个文件夹)2、进入文件夹,通过 git init 命令将这个目录变成 Git 可以管理的仓库。 注:也不一定必须在空目录下创建Git仓库,选择一个已经有东西的目录也是可以的。3、把文件添加到版本库: git add 命令把文件添加到仓库 ...原创 2019-05-20 19:07:08 · 212 阅读 · 0 评论 -
webstorm注册码
从别人那里得到的,可以用(分享才是最重要的~~~~)webstorm注册码: User Name: EMBRACE License Key: 24718-12042010 00001h6wzKLpfo3gmjJ8xoTPw5mQvY YA8vwka9tH!vibaUKS4FIDIkU原创 2015-07-23 21:41:03 · 650 阅读 · 0 评论 -
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 · 2364 阅读 · 0 评论 -
Git提交时设置忽略规则
在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则,来忽略这些文件的提交。Git 忽略文件提交的方法 1、在Git项目中定义 .gitignore 文件 这种方式通过在项目的某个文件夹下定义 .gitignore 文件,在该文件中定义相应的忽略规则,来管理当前文件夹下的文件...转载 2019-07-30 15:46:36 · 316 阅读 · 0 评论 -
win10安装mongodb
最近看书的时候用到了 mongoose ,顺便摸出了 mongodb ,本以为就是个简单的安装,没想到问题频出,安装、卸载弄了好几轮才总算ok了,记录下最后的操作流程,以防万一。。1、下载、安装。官网下载安装文件,然后一直 Next 往下就行,不再赘述,只是在最后有一步需要注意下:把默认勾选的 Compass 去掉,不然进度可能会被卡住(反正我是卡了有一个小时。。) 若弹出服务启动...原创 2018-09-14 07:35:28 · 1903 阅读 · 1 评论