Web前端
前端小白的逆袭
实践是检验代码的唯一标准。。。
展开
-
JS查询遍历树后得到一颗新树
本篇文章主要介绍查询遍历树结构数据,然后得到一颗新树的方法。1、需求如下:要实现的效果是下图的样子,其难点主要在于对树的查询过滤后仍能得到一个保持原结构的结果树。2、查询过滤树关键代码如下:(1)测试数据 const tree = [ { title: '语法', value: '1', key: '1', children: [原创 2021-09-29 18:27:59 · 1737 阅读 · 2 评论 -
Antd的Form.List使用
Antd的Form.List使用原创 2021-09-08 20:54:32 · 12242 阅读 · 2 评论 -
CSS单、多行文本显示省略号
多行文本显示省略号1.创建一个宽度为100px的div,要求2行文字显示省略号 width: 100px; overflow: hidden; /* 超出部分隐藏 */ display: -webkit-box; /* 设置为弹性伸缩盒模型 */ -webkit-box-orient: vertical; /* 规定框的子元素垂直排列。 */ -webkit-line-clamp: 2; /* 文本行数 */ word-wrap: break-word; /原创 2021-05-12 11:10:19 · 293 阅读 · 0 评论 -
js实现文字按照首字母排序
1、安装cnchar(GitHub)npm i cnchar2、引入import cnchar from cnchar;3、比较拼音(汉字)大小: compareSpellconsole.log(cnchar.sortSpell(['杨阳', '杨名','杨氏'']));原创 2021-05-04 23:09:44 · 1324 阅读 · 1 评论 -
JS中文转Unicode,Unicode转中文
JS中文转Unicode,Unicode转中文一、JS中文转Unicode function leftZero(str) { if (str != null && str != '' && str != 'undefined') { if (str.length == 2) { return `00${str}`; } } return s原创 2021-04-12 20:16:14 · 1907 阅读 · 0 评论 -
前端开发必备神奇,mac工具,vscode必备插件
一、开发机Mac。1、Mac必备开发辅助工具:alfred https://www.alfredapp.com/charles https://www.charlesproxy.com/postman https://www.postman.com/mobile debugger https://www.mobiledebug.com/2、shell客户端iterm23、shell omyzshhttps://ohmyz.sh/#install安装使用教程:https://segme原创 2021-02-26 14:04:23 · 1120 阅读 · 1 评论 -
JavaScript简写技巧
一、变量声明JavaScript简写技巧:多变量声明// 冗余let x; let y = 2021; // 简写 let x, y = 2021;二、多变量赋值使用解构JavaScript简写技巧:多变量赋值使用解构// 冗余let a, b, c; a = 2021; b = 1; c = 25;// 简写let [a, b, c] = [2021, 1, 25];三、if转化为三目运算符JavaScript简写技巧:if转化为三目运算符// 冗余let gr原创 2021-01-25 21:59:58 · 802 阅读 · 3 评论 -
ng-Zorro表格分页器更换pageSize后表格不渲染
NG-ZORRO表格分页器更换pageSize后表格不渲染使用NG-ZORRO(ANTD的Angular版本)中的Table(表格)组件和Pagination(分页)组件遇到更换分页器每页数据数量后,表格数据不能正常渲染。BUG现场更换pageSize后,接口成功拿到对应条数的数据,表格却没有请确渲染,如下图,本应渲染20条数据,现在却只有10条数据。解决方案方法一:把tbody渲染数据的【表名.data】换成自己定义的接收接口数据的变量,如下图。方法二:给表格添加属性[nzFrontP原创 2021-01-18 10:52:01 · 738 阅读 · 2 评论 -
js判断是否是手机端或web端浏览器
js判断是否是手机端或web端浏览器 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod" ]; var flag = t原创 2021-01-16 20:37:05 · 1685 阅读 · 2 评论 -
Invalid base64 input,it looks like a data url. Error: Invalid base64 input, it looks like a data url
使用JZip压缩图片时报错core.js:12501 ERROR Error: Uncaught (in promise): Error: Invalid base64 input, it looks like a data url.Error: Invalid base64 input, it looks like a data url.at Object.r.decode (jszip.min.js:13)at jszip.min.js:13at…错误代码如下:解决方案通过正则表原创 2021-01-14 10:19:33 · 3554 阅读 · 2 评论 -
前端批量下载文件、图片、打包成压缩包,JZip和file-saver
前端批量下载文件、图片、打包成压缩包,JZip和file-saver原创 2021-01-13 16:00:56 · 3060 阅读 · 5 评论 -
前端生成二维码qrcode.js,并下载
前端生成二维码qrcode.js,并下载原创 2021-01-13 15:06:36 · 3172 阅读 · 0 评论 -
前端生成二维码使用@techiediaries/ngx-qrcode
前端生成二维码使用@techiediaries/ngx-qrcode原创 2021-01-13 14:47:27 · 823 阅读 · 2 评论 -
for循环内的setTimeout、setInterval(闭包、异步、变量提升)
for循环内的setTimeout、setInterval(闭包、异步、变量提升)原创 2021-01-13 12:38:29 · 2378 阅读 · 0 评论 -
前端生成二维码(借助草料)
前端生成二维码。使用草料API: generateQrCode(qrCode) { window.location.href = `https://cli.im/api/qrcode/code?text=%2F%2F${"二维码内容"}%2F&mhid=sELPDFnok80gPHovKdI` }原创 2021-01-11 15:34:55 · 1743 阅读 · 0 评论 -
移动端开发使用rem时动态设置html的字体大小
移动端开发使用rem时动态设置html的字体大小原创 2021-01-05 10:59:50 · 1656 阅读 · 1 评论 -
CSS中content的特殊字符集
CSS中content的特殊字符集原创 2020-12-27 12:26:30 · 3203 阅读 · 0 评论 -
angular创建项目、模块、组件、服务命令
1、创建项目命令ng new 项目名2、创建模块命令ng g module 模块名3、创建组件命令ng g component 组件名4、创建服务命令ng g service5、启动服务ng serve --open原创 2020-12-23 09:33:09 · 3009 阅读 · 0 评论 -
Vue响应式、双向绑定原理即代码实现
vue响应式、双向绑定原理代码实现原创 2020-12-12 17:08:27 · 479 阅读 · 1 评论 -
ES2020新特性你了解吗?
ES2020新特性原创 2020-12-08 14:54:57 · 526 阅读 · 3 评论 -
new的实现
一、new的特性返回一个对象,对象的__proto__指向构造函数的prototype。构造函数的this指向返回的对象构造函数可以传递参数二、new的实现 function Person(name = 'Li', age = '20') { this.name = name; this.age = age } Person.prototype.gender = 'male'; Person.p原创 2020-12-07 17:11:40 · 408 阅读 · 1 评论 -
bind的原理和bind的实现
一、bind的特性传递的第一个参数做为调用它的函数的this指向(bind可传递若干参数)。若第一个参数传递基础数据类型,则调用他的函数的this指向该基础数据类型的包装类实例化对象。若第一个参数为null或undefined,则调用他的函数的this指向window。bind的第二个之后的参数为调用它的函数的参数列表。bind方法会返回一个新的方法,并且该方法满足柯里化,仍可以传递参数,但这个方法的this不可被call、apply、bind改变。bind方法返回的新方法,如果使用new实例原创 2020-12-07 13:00:39 · 5035 阅读 · 0 评论 -
apply方法的实现
apply方法的实现原创 2020-12-04 16:19:49 · 1838 阅读 · 2 评论 -
call方法的实现
call方法的实现原创 2020-12-04 15:13:53 · 3077 阅读 · 0 评论 -
object-fit属性-详解
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。应用示例:点这里【object-fit的使用】一、object-fit属性测试基本配置(后附有代码)1.选择一张图片(1024*582)大于容器(200*400)宽高,一张图片(150*150)小于容器(200*400)宽高。2.容器宽高css分别为200px、400px,图片宽高css均设置为100%二、object-fit属性值:1.fill(与不使用模样一样)默认值,不保证保持原有的比例,内容全部显示铺满容.原创 2020-12-02 12:25:46 · 28754 阅读 · 8 评论 -
容器已知宽高,图片宽高不定,图片填充满容器且不变形
容器已知宽高,图片宽高不定,图片填充满容器且不变形原创 2020-12-02 10:21:55 · 1801 阅读 · 0 评论 -
object-fit属性
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。属性值:1.fill2.contain3.cover4.scale-down5.none如果对你有帮助,可以????关注,我们一起学前端。????原创 2020-12-02 10:15:21 · 1953 阅读 · 1 评论 -
Object.create()实现原理
Object.create()实现原理原创 2020-12-01 22:25:18 · 1078 阅读 · 0 评论 -
纯css实现tab切换(锚点定位)
纯css实现tab切换(锚点定位)原创 2020-12-01 09:33:52 · 1845 阅读 · 1 评论 -
纯css实现tab切换(input[type=radio])
纯css实现tab切换(input[type=radio])原创 2020-11-30 22:26:57 · 1492 阅读 · 0 评论 -
js事件委托
js事件委托原创 2020-11-30 16:36:52 · 154 阅读 · 0 评论 -
js千分位分隔,数字货币化
js千分位分隔,数字货币化原创 2020-11-30 11:11:22 · 346 阅读 · 0 评论 -
移动端tap(轻触)事件的封装实现
移动端tap(轻触)事件的封装实现原创 2020-11-30 10:01:15 · 699 阅读 · 2 评论 -
webpack的devServer配置
开发服务器devServer自动化(自动编译、自动刷新、自动打开浏览器等等)webpack打包demo,git地址:https://github.com/OnionMister/webpack-demo.git1、目录结构2、html,css,jshtml、css、js文件内容对照这篇文章完成【webpack打包其他资源,即非js、html、css、jpg等资源,打包字体图表库】3、安装webpack-dev-server务必完成第二部cnpm install webpack-dev-ser原创 2020-11-29 21:48:55 · 432 阅读 · 2 评论 -
internal/modules/cjs/loader.js:968 throw err; ^ Error: Cannot find module ‘webpack-cli/bin/conf
internal/modules/cjs/loader.js:968 throw err; ^ Error: Cannot find module 'webpack-cli/bin/conf原创 2020-11-29 20:55:41 · 6316 阅读 · 4 评论 -
webpack打包其他资源,即非js、html、css、jpg等资源,打包字体图表库
webpack打包其他资源,即非js、html、css、jpg等资源,打包字体图表库原创 2020-11-28 21:29:01 · 190 阅读 · 1 评论 -
webpack这样打包图片资源,你会吗?webpack打包图片资源
webpack这样打包图片资源,你会吗?webpack打包图片资源原创 2020-11-27 20:46:44 · 1784 阅读 · 0 评论 -
webpack打包报错:if (!scriptUrl) throw new Error(“Automatic publicPath is not supported in this browser“)
webpack打包报错:if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser")原创 2020-11-27 16:37:40 · 637 阅读 · 0 评论 -
webpack打包html插件html-webpack-plugin的使用
webpack打包html插件html-webpack-plugin的使用1.创建这样的测试目录结构1)index.html是即将被打包的文件,你可以随便写一些内容2)index.js是打包的入口文件,你可以写或不写内容2.webpack.config.js的代码如下:/** * 压缩html需要插件:html-webpack=plugin * 插件使用方法:下载,引入,使用 * loader使用方法:下载,使用 */const HtmlWebpackPlugin = require(原创 2020-11-24 17:22:29 · 484 阅读 · 0 评论 -
webpack HtmlWebpackPlugin报错 TypeError: The ‘compilation‘ argument must be an instance of Compilation
webpack HtmlWebpackPlugin报错 TypeError: The 'compilation' argument must be an instance of Compilation,webpack5和html-webpack-plugin的版本兼容问题原创 2020-11-24 15:56:51 · 2990 阅读 · 10 评论