- 博客(60)
- 收藏
- 关注
RSS订阅
原创 Vue3.2单文件组件setup的语法糖总结
满满的干货，建议收藏慢慢看，可以当作Vue3.0的学习资料。 setup是Vue3.0后推出的语法糖，并且在Vue3.2版本进行了大更新，像写普通JS一样写vu...
2022-05-07 17:58:38
8086
8
原创 基于Element-UI的组件改造的树形选择器（树形下拉框）
前言：由于做项目需要一个树形选择器，项目用的也是element-ui框架，然而它自带的选择器组件没有树形选项，又不想引入其他的框架组件，于是自己利用el-select和el-tree改造了一个，感觉还挺好用的，就封装成了一个组件，如下图：element-ui的el-select组件的选项只能是列表形式：改造后的树形选择器：简介：此树形选择器组件是基于elment-ui框架的e...
2019-03-18 13:46:16
67577
146
原创 js实现无限层级树形数据结构（创新算法）
由于做项目的需要，把一个线性数组转成树形数组，在网上查了很多文章，觉得他们写的太复杂了，于是自己写了一个，在折腾了一下午终于把它写出来啦（激动.gif），用两个filter过滤器就搞定了，代码简洁明了，数据结构小白都能看懂。js代码：把扁平数据转成树形数据function setTreeData(source){ let cloneData = JSON.parse(JSON.s...
2018-09-22 20:19:32
40873
100
转载 git如何撤销未push的commit
撤销commit一般用git reset ，语法如下：git reset [ --mixed | --soft | --hard] []
2022-12-02 20:44:55
5453
1
原创 vue3.0实现前进刷新后退不刷新
1、通过keep-alive缓存组件；2、组件路由里定义一个变量isKeepAlive来控制组件的缓存；3、通过路由独享守卫根据条件修改缓存变量，选择性缓存组件。
2022-07-16 13:44:50
2483
原创 TypeScript的泛型和泛型约束
在使用ts封装一个函数时，由于入参是不固定的，必然参数类型也无法固定，这时就要用到泛型来定义参数类型。泛型可以理解为宽泛的类型，通常用于类和函数。例2. 在函数中使用泛型例3. 接口中使用泛型 例3中的T1和T2泛型添加了默认类型，类似于函数的默认参数。 泛型约束即是对泛型的类型进行约束控制，如限制为object类型或指定接口类型。当在函数里使用泛型参数的属性或者方法时，就需要对泛型进行约束。例2. object约束上面例2的getKeys方法获取一个对象的所有属性
2022-06-29 10:13:03
783
原创 Vite打包后的dist不能直接在浏览器打开吗
先来看看Vite打包后生成的index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2022-06-06 18:11:21
4053
原创 JavaScript洗牌算法
概念洗牌算法即是把一组数组里的元素随机组合生成一个新数组。实现const shuffle = ([...arr]) => { let m = arr.length; while (m) { const i = Math.floor(Math.random() * m--); [arr[m], arr[i]] = [arr[i], arr[m]]; } return arr;}; // 测试const tes
2022-05-17 18:02:10
506
原创 Vue3.0在script setup里定义变量时提示×××is declared but its value is never read.Vetur的解决办法
问题重现如下图：问题：根据提示判断问题是，IDE编辑器没法识别到script setup里定义的变量已经在template里被使用。解析：作者阅读Vue3.0的文档得知，新版Vue提供了新的语法检测插件叫Volar，以前使用的vue语法检测插件Vetur已不支持新版的script setup语法。以下为官方文档原文：推荐的 IDE 配置是VSCode+Volar扩展。Volar 为模板表达式、组件 prop，甚至是插槽验证提供了语法高亮和智能提示。我们强烈推荐这种设置，...
2022-05-11 18:03:59
19907
13
原创 taro路由传参正确的接收方式
扯淡taro路由传参官方文档只说明了怎么传参，但是并没有说明具体怎么去接收参数，它又不像微信小程序那样在onload生命周期里拿到，百度正文
2021-06-15 15:07:19
2699
2
原创 解决uni-file-picker组件在ios点击失效的问题
从组件源码里找到choose-and-upload-file.js文件，查找chooseAndUploadFile方法，在方法里添加下面代码，保存即可解决。opts.sourceType = ['album','camera']如下图所示：
2021-06-15 14:29:45
2115
3
原创 微信小程序页面如何滚动到底部
在需要滚动的页面根节点定义一个id="page"<view id="page"> <text>需要滚到的页面</text></view>点击事件触发以下方法wx.createSelectorQuery().select('#page').boundingClientRect(rect => { wx.pageScrollTo({ duration: 500, // 动画时长 scrollTop: re.
2021-03-16 14:29:05
901
转载 一篇文章搞懂CSS3网格布局（Grid）
<!-- div class="asset-body" --> <h2>一、概述</h2>网格布局（Grid）是最强大的 CSS 布局方案。 <!-- /div --> <!-- di...
2020-08-13 16:47:02
844
1
原创 js通过match方法和正则表达式截取某两个字符串中间部分的字符
比如我要从下面base64编码字符串中截取一个文件后缀名，即image/和;之间的字符串，方法如下：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA......代码：let src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA......'let res = src.matc...
2020-03-13 10:37:37
3878
2
原创 基于Vue和Vant-ui开发的移动端周历日期选择器
该周历日期选择器是在基于Vue的小日历（支持按周切换）的基础上改造而来，对其代码进行优化，并引入了Vant-ui新增了年份和月份的选择、一键返回今日的快捷键功能，以及支持4种常用日期格式的选择。总体来说，该日期选择器适用于中小型移动端web项目，非常好用，现在我把它封装成了一个组件，有需求的同学就拿去用吧，别忘了点赞哦！动图演示：详细介绍和源码，请戳此链接：https://gi...
2020-01-07 15:46:08
4337
3
原创 js实现树形数据转成扁平数据
利用递归的方法循环树形数组，当遇到有children的对象再次调用递归函数循环children数组，每次循环的数据放入一个提前声明好的数组里，等所有递归函数执行完，这个数组即是想要得到的扁平数据数组。let res = []const fn = (source)=>{ source.forEach(el=>{ res.push(el) e...
2019-10-31 11:14:32
8781
4
原创 js如何修改伪类样式如before或after
概括通过js创建一个内嵌样式表，并添加需要修改的伪类样式，覆盖原始的伪类样式。介绍html代码<ul> <li>apple</li> <li>banana</li> <li>pear</li></ul>css代码ul li{ list-style: no...
2019-07-29 15:46:07
4294
转载 .gitignore忽略规则的匹配语法
1、举例说明，掌握这些基本够用了#注释 .gitignore的注释*.txt 忽略所有 .txt 后缀的文件!src.a 忽略除 src.a 外的其他文件/todo 仅忽略项目根目录下的 todo 文件，不包括 src/todobuild/ 忽略 build/目录下的所有文件，过滤整个bu...
2019-06-13 09:14:12
8973
原创 Mint-UI的mt-search如何触发事件（确定和取消）
Mint-ui的官方文档写得是真的简单，简单到遗漏了许多重点，使用文档里关于mt-search的api只介绍了属性的部分，各个调用方法完全没有介绍，让用户自己去探索？官方文档。关于开源框架的使用文档，我接触到的还是Element-UI写得最为简洁明了了，相比于Mint-UI都是同一个爸爸（饿了么）出来的，差距为什么就这么大呢？正文1、确定事件mint-ui使用文档开头里有提到，...
2019-05-23 15:20:05
4023
原创 axios请求文件流下载文件
axios.post('/api',{ // 传参},{ responseType:'blob' // 设置响应数据类型}).then(res=>{ if (res.status == 200) { let url = window.URL.createObjectURL(new Blob([res.data])) ...
2019-04-30 16:07:49
12495
原创 JS数据结构与算法 —— 散列表（哈希表）
概念：散列表（Hash table，也叫哈希表），是根据关键码-值(Key-value)的形式进行存储和访问的数据结构。散列表类似于字典，是以 键-值(Key-value) 对形式存储的数据结构，不同点在于散列表的键key是经过散列函数计算得出，我们称之为关键码，每个关键码都对应一个值，我们把这种以 关键码-值 形式存储数据的数组称为散列表。作用：可以快速定位元素，并拿到对应的值。相...
2019-03-03 15:09:33
1273
原创 JS数据结构与算法 —— 字典
字典是一些节点的集合，每个节点包含了一个key和数据域。字典是一种以 键-值对 形式存储数据的数据结构。如同我们平时查看通讯录一样，要找一个电话，首先要找到该号码的机主名字，名字找到了，紧接着电话号码也就有了。JavaScript 中的 Object 类就是以字典的形式设计的，下面我们将会借助 Object 类的特性，自主实现一个字典类。js实现一个字典定义一个Dictiona...
2019-01-05 14:31:20
478
原创 JS数据结构与算法 —— 集合，并集，交集，补集
概念：集合是由一组无序且唯一（每个元素只出现一次）的项组成的一组数据。其与数学里的集合是同一个概念。在ES6里已经引入了集合的数据结构概念——Set类。分类：常见的有空集，并集，交集，差集。应用场景：1）数据去重；2）用于存储一些独一无二的数据。js实现一个集合集合的特性类似于JavaScript数据类型里的Object，Object对象里的每个键都是唯一。下面用一个名为item的...
2019-01-05 14:10:31
1680
原创 js高效修改对象数组里的对象属性名
有些时候，我们前端从后端拿过来的JSON对象数据，某些字段并不是前端想要的，需要对一些字段名进行重命名。一般修改对象数组的对象属性名，最简便的就是通过遍历对象数组的方法进行修改，但是用这个方法，如果处理的数据量很大，它的执行效率是非常低的。下面介绍一个更高效的方法，即通过正则的方法进行过滤修改。JSON.parse(JSON.stringify(data).replace(/title/g,...
2019-01-01 14:16:55
18663
11
转载 Flex布局教程 —— 实例篇
一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。如果不加说明，本节的HTML模板一律如下。&amp;amp;lt;div class=&amp;quot;box&amp;quot;&amp;amp;gt; &amp;amp;lt;span class=&amp;quot;item&amp;q
2018-12-08 16:10:17
492
转载 Flex布局教程 —— 语法篇
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介...
2018-12-08 15:52:06
1474
原创 JS数据结构与算法 —— 链表
概念：链表是计算机的一种存储结构。链表由一系列结点组成，每个结点里包含了本结点的数据域和指向下一个结点的指针。如下图item存储数据，next存储下一个节点的引用，其中最后一个节点的指针指向了null，表示链表结束的位置。作用：按一定顺序储存数据，允许在任意位置插入和删除结点。分类：单向链表、双向链表、单向循环链表和双向循环链表应用场景：适用于需要频繁进行插入和删除操作的数据存储。...
2018-12-01 15:56:45
625
原创 JS数据结构与算法 —— 队列
概念：只允许在表的前端（front）进行删除操作，在表的后端（rear）进行插入操作的一种特殊线性表核心思想：先进先出分类：1）循环队列：普通队列的首尾相接形成圆环，这样的队列称为循环队列（Circular Queue） 2）优先队列：普通队列的元素被赋予了优先级，具有最高优先级的元素最先删除，这样的队列称为优先队列（Priority Queue）操作方法：1）...
2018-11-26 22:37:36
328
原创 JS数据结构与算法 —— 栈
概念：表头进行插入和删除操作的线性表核心思想：先进后出作用：在编程语言的编译器和内存中保存变量、方法调用操作方法：1）push() 进栈，即向栈里添加元素 2）pop() 出栈，即把元素从栈中删除 3）peak() 查询栈顶元素，即查询栈里最顶部那个元素（最后添加） 4）i...
2018-11-25 13:12:12
586
2
原创 阿里巴巴web前端电话面试题
招聘网站上偶然间看到了一个阿里巴巴的前端招聘信息，要求半年到一年的工作经验，看起来要求不是很高，于是就抱着试试的心态投了简历，没想到第二天惊喜的收到了电话面试预约，然后顺利的进行了电话面试，面试后我把面试过程中问到的问题都大概的记录了下啦，拿出来供大家一起学习，希望对一些准备阿里前端面试的同学有帮助。题外话：由于我本人在vue缓存机制和跨域安全方面了解不深，故回答得不是很好，再加上自己的数据...
2018-11-24 23:05:31
8450
8
转载 Hybrid APP混合模式应用开发的经验和总结
Hybrid APP混合开发的一些经验和总结写在前面：由于业务需要，接触到一个Hybrid APP混合开发的项目。当时是第一次接触混合开发，有一些经验和总结，欢迎各位一起交流学习~1、混合开发概述Hybrid&amp;nbsp;App主要以JS+Native两者相互调用为主，从开发层面实现“一次开发，多处运行”的机制，成为真正适合跨平台的开发。Hybrid&amp;nbsp;App兼具了Native&amp;...
2018-11-09 17:37:02
735
原创 Git clone项目时报错Permission denied (publickey).的解决方案
在一台新设备上首次使用git clone 克隆GitHub仓库项目时，报了这个错误，如下：[email protected]: Permission denied (publickey).fatal: Could not read from remote repository.原因新设备还不存在ssh key或者ssh key失效，解决办法就是新建一个ssh key。步骤1、查看s...
2018-11-06 15:48:00
7462
原创 vue项目引入vux-ui框架详解（快速入门）
一、新建自带vux框架的vue项目（免配置）1、安装vue环境 （已安装，跳过这一步）2、新建基于vux的vue项目;vue init airyland/vux2 projectName //（新建项目配置已省略） cd projectName //（新建成功后切换到项目根目录下）npm install --registry=https://re...
2018-11-04 13:32:02
4935
2
原创 基于Element-UI可以动态生成表单项的form表单
由于做项目的需要做一个不定项的form表单，即可以动态生成表单项的form表单，自己利用element-ui的el-form表单制作了一个，如下动图：此动态form表单是基于element-ui里的el-form表单基础上进行修改而来，它实现了新增表单项、删除表单项、表单验证和重置表单、表单提交等form表单所拥有的基本功能。详细介绍，请查看源代码应用场景：表单项不确定的form表单...
2018-10-14 20:08:38
16746
7
原创 解决GitHub每次push时都提示输入用户名和密码的问题
最近在GitHub上建了个项目仓库，可是在每次push的时候，都提示我输入用户名和密码，查了很多资料，得到如下解决方案：原因我们在建立远程仓库或者克隆项目时，使用的是HTTPS方式 ，HTTPS方式push不会保存用户名和密码。我们需要把HTTPS方式改成SSH的方式解决办法1、git remote -v 查看远程连接的方式2、git remote rm origin...
2018-10-13 23:17:26
15289
5
原创 CSS3实现内容以指定行数显示，超出后显示省略号
-webkit-line-clamp 结合其他样式属性一起使用，可以实现内容指定行数来显示的效果，不过，它还是一个不规范的属性，没有被列入CSS 规范草案（不影响实现效果）。代码如下：与其他属性配合使用：-webkit-line-clamp:n; //设置行数，n为行数（必选）display: -webkit-box; //盒子模型（必选）-w...
2018-10-09 19:19:02
2175
原创 CSS解决中英文的换行、不换行、超出后显示省略号的问题
white-space:nowrap; //强制不换行（中英文都起作用）white-space:pre-wrap; //只对中文起作用，强制换行word-break:break-all; // 只对英文起作用，以字母作为依据，强制换行word-break:break-word; //只对英文起作用，以单词作为依据，强制换行overfl...
2018-09-17 18:24:31
7127
原创 Git常用命令符和GitHub使用教程图文详解
这是本人学习Git的笔记，涵盖了大部分常用的操作，在工作和学习中使用足矣。前期准备安装GitGitHub的注册即使用Git常用命令符：1、git init //本地新建仓库2、git status //查看仓库状态3、git add <file> //添加单个文件到仓库（注意文件后缀） git add *.文件后缀...
2018-08-18 13:26:15
1536
转载 Vue简单的实现五星级评分
效果：原理：类似于四舍五入的方法，不同点在于四舍五入是把数字转成整数，而这个方法是把分数转成整数或（整数+0.5），有点抽象，举个例子就明白了，例如 把4.7转成4.5（即四个半星），4.3转成4.0（即四个星），4.0就是四个星。需要准备三张星星图片，即全星，半星，空星。代码：<template> <div class="score"> ...
2018-08-16 13:23:46
3252
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人