自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(77)
  • 资源 (3)
  • 收藏
  • 关注

原创 vue-export2excel 导出表格

export2excel,是一个可以将 json 格式的数据导出成 excel 文档。一般用于 admin 后台管理系统中,实现快速将线上数据,导出为本地表格数据。

2022-04-21 23:36:42 5743

原创 切换效果:other-translate 另类轮播图

other-translate 另类轮播图的实现。

2022-03-13 00:44:33 416

原创 关于 IOS 移动设备常见的触控问题以及解决方案

关于 IOS 移动设备常见的触控问题以及解决方案

2022-03-05 19:26:22 383

原创 Nuxt 填坑集合(面向实际开发解决方案)

在nuxt开发的过程中,遇到了一些坑,通过官方文档和面向百度式的学习,这些坑得到了解决,最后将这些坑的解决方式记录下来。无需全文阅读,直接阅读需求内容即可。「后续还会更新nuxt相关的坑,并欢迎指正」

2022-02-13 23:45:52 1617

原创 [iPhone] input表单输入过程中,页面会自动放大

问题当在 iphone 运行带有 input输入框的页面,并尝试输入内容时,页面会自动放大。解决meta 方式<meta name="apple-mobile-web-app-capable" content="yes" /><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /&g

2022-01-10 10:04:54 1643 1

原创 [Google Chrome] ERR_NAME_NOT_RESOLVED

报错[Google Chrome] ERR_NAME_NOT_RESOLVED在使用谷歌浏览器进行网页访问时,控制台一直提示外部资源请求失败。解决前往 cmd命令提示符(管理员),续订 dns。$ ipconfig /flushdn传送门:如何修复ERR_NAME_NOT_RESOLVED错误?...

2021-12-07 09:38:57 1762

原创 常用的 git 命令总结

仓库# 在当前目录新建一个Git代码库$ git init#新建一个目录,将其初始化为Git代码库$ git init [project-name]# 下载一个项目和它的整个代码历史$ git clone [url]配置# 显示当前的Git配置$ git config --list# 编辑Git配置文件$ git config -e [--global]# 设置提交代码时的用户信息$ git config [--global] user.name "[name]"$ g

2021-11-23 09:56:26 116

原创 (5) 日期倒计时计算 countdown

输入一个时间,自动计算与当前时间的时间差,可返回剩余天数、小时数、分钟数、秒数、毫秒数,或全部最佳时间集合。

2021-10-17 23:30:00 779

原创 (4)计算一维数组、一维数组对象指定属性的平均值 getAvg

求平均值,可计算一维数组,一维数组对象.

2021-10-17 15:35:34 1274

原创 如何在vue项目中使用less公共变量以及vant ui中定制主题

在vue项目中使用正确是用less公共变量,并且搭配UI框架的使用.

2021-09-12 23:56:23 3395 2

原创 [Intervention] Unable to preventDefault inside passive event listener due to target being treated

报错[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.大意:[干预] 由于目标被视为被动,无法防止被动事件侦听器内部的默认设置。解决绑定 touch 触控事件的时候,添加第三个参数 passive/。document.addEventListener( 'touchmove', function (e) { e.

2021-09-09 15:33:22 1153

原创 remote: Support for password authentication was removed on August 13, 2021.(SSH令牌解决法)

remote: Support for password authentication was removed on August 13, 2021.(SSH令牌解决法)

2021-08-17 23:08:44 3125

原创 warning: adding embedded git repository: NeteaseCloudMusicApi

warning: adding embedded git repository: NeteaseCloudMusicApi

2021-08-17 22:17:16 7117 1

原创 CSS3 转换过渡动画

在过去,我们想要页面上实现动画效果,往往是需要通过 javascript 脚本来进行事件监听执行的,如今 css3 的推出,我们可以更简洁地实现动画效果,本文将主要从 transform、transition、animate 三大点出发,对其的属性进行深度的梳理。

2021-08-03 23:43:19 201

原创 touch触摸事件以及常用触摸功能

为了给基于触摸的用户界面提供高质量的支持,触摸事件提供了在触摸屏或触控板上解释手指(或触控笔)活动的能力。我们可以通过触摸事件监听用户的操作,从而响应用户。

2021-07-18 19:19:03 3478 2

原创 drawImage 绘制多张图片时层次顺序错乱

日常 canvas 开发中

2021-07-18 19:18:02 1544

原创 关于 Vue2 .prettier 配置项

eslint,是一个语法检测工具,我们可以使用 prettier插件,实现自动格式化,得到一个符合 eslint 规则的文件,免去了手动格式化这一繁琐流程。需要在开发工具中安装 eslint 和 prettier 插件。右键选择格式化文档的方式… - 选择 “Prettier - Code formatter”在 vue 2 项目根目录中,创建一个名字为 .prettier 的文件,文件内

2021-07-17 10:53:46 3240

原创 Prettier 一个固执的代码格式化程序

Prettier 是一个“有态度”的代码格式化工具,它支持:JavaScript (包括实验性功能)、JSX、Angular、Vue、Flow、TypeScript、CSS、Less 和 SCSS、HTML、JSON、GraphQL、Markdown,包括 GFM 和 MDX、YAML

2021-07-17 10:53:08 1579 2

原创 ESLint 语法检验工具的使用

文章目录前言ESLint一、安装1. cmd 命令式安装2. 编辑器式安装二、配置方式1. 配置对象2. 指定解析器选项 parserOptions3. 规则定义 rules4. .eslintrc.json 示例三、规则页面总结前言在计算机科学中,lint 是一种工具的名称,它用来标记代码中,某些可疑的、不具结构性(可能造成 bug)的语句。它是一种静态程序分析工具,最早适用于 C 语言,在 UNIX 平台上开发出来。后来它成为通用术语,可用于描述在任何一种编程语言中,用来标记代码中有疑义语句的工具

2021-07-17 10:52:30 917

原创 CSS Flex 弹性布局

文章目录前言Flex一、专业名词二、属性值定义 flex 布局CSS 属性flex-directionflex-wrapflex-flowflex-growflex-shrinkflex-basisflexorder对齐属性align-contentalign-itemsalign-selfjustify-contentplace-contentrow-gapcolumn-gapgap总结前言在页面开发的过程中,CSS 页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器

2021-07-13 18:43:05 1362 1

原创 CSS Position 定位布局

文章目录前言一、 Position 定位布局二、 属性值定位类型语法top,right,bottom,left 属性三、 实例相对定位绝对定位固定定位粘性定位总结前言在页面开发的过程中,CSS 页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。当前主要的布局方式有:浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等,本文将探讨 position 定位布局。一、 Position 定位布局定位

2021-07-13 18:42:10 505

原创 CSS Float 浮动布局

文章目录前言一、Float 布局二、属性值三、代码实现clear 清除浮动clear 属性值三、Float 设计初衷与不足不足总结前言在页面开发的过程中,CSS 页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。当前主要的布局方式有:浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等,本文将从浮动布局开始学习。一、Float 布局把一个元素“浮动”(float)起来,会改变该元素本身和在正常

2021-07-13 18:41:38 2738

原创 (3)获取当前设备的类型,以及是否为微信内置浏览器

一、实现代码html 部分代码:<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>获取当前设备的类型、系统、以及是否为微信内置浏览器</title> </head> <body></body> <script> …… </script>

2021-05-29 18:18:02 437

原创 VScode 超好用的插件「工欲善其事,必先利其器」

目录一、开发类二、效率类一、开发类HTML CSS Support:html提示css自动补全。Auto Close Tag:自动闭合标签。Auto Rename Tag:重新命名标签。CSS Peek:快速查看当前标签设置的css属性。「将光标移动要需要查看的标签,然后按下f12即可查看」cdnjs:在线的js文档。ESLint:可组装的JavaScript和JSX检查工具。Prettier - Code formatter:代码格式化。T

2021-05-22 18:20:08 544 8

原创 加密算法的认识及常用加密算法

前言数据加密,是一门历史悠久的技术,指通过加密算法和加密密钥将明文转变为密文,而解密则是通过解密算法和解密密钥将密文恢复为明文。数据加密仍是计算机系统对信息进行保护的一种最可靠的办法。它利用密码技术对信息进行加密,实现信息隐蔽,从而起到保护信息的安全的作用。本文将分别从加密算法的分类,具体的内容,以及前端代码的实现作为切入口,下面让我们一起来学习一下。一、加密算法1. 加密算法的分类需要密钥对称密钥加密非对称密钥加密不需要密钥(或称:散列算法)2. 名词解读密钥:密

2021-05-20 17:30:48 1056

原创 (2)将指定内容复制到剪切板

一、实现代码html 代码部分:<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>将指定内容复制到剪切板</title> </head> <body> <p><input type="text" value="需复制的内容请在此输入" /></p&gt

2021-05-12 15:40:40 401 2

原创 (1)获取当前标签页地址栏指定参数

一、实现代码html 代码部分:<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>获取当前标签页地址栏指定参数</title> </head> <body></body> <script> …… </script></html&gt

2021-05-12 10:56:33 273

原创 Linux常用基本命令

Linux常用基本命令# 改变目录$ cd# 回退到上一个目录,直接cd进入默认目录$ cd ..# 显示当前所在的目录路径$ pwd# 列出当前目录中的所有文件$ ls$ ll 相比前者,内容更加详细# 新建一个文件$ touch# 新建一个目录$ rm dir # 删除一个文件$ rm# 删除一个文件夹$ rm -r # 删除电脑全部文件 !慎用$ rm -rf # 移动文件$ mv# 重新初始化终端、清屏$ reset# 清屏$

2021-05-07 12:00:05 119

原创 transform: rotateY(360deg); 导致页面元素闪烁

项目场景:动画过渡效果开发,需要根据实际状态让页面上的某个元素发生过渡效果。问题描述:需要过渡的元素正常执行过渡,但是在他过渡的时候会让在他层级(z-index)上的元素发生闪烁。bug出现在iPhone移动设备上,Win10和Android移动设备可以正常显示。原因分析:这里涉及了一个概念:层叠上下文,给元素设置transform属性会创建一个新的stacking context,导致z-index的层级不同,从而出现闪烁问题。解决方案:方法 一添加 transform: tra

2021-04-26 15:44:36 2369 1

原创 自定义小程序navigationBar的高度,以及避免设备系统不同产生不兼容

项目场景:在小程序中通过 navigationStyle: custom; 属性,自定 navigationBar的时候。自定 navigationBar 实现思路:通过wx.getSystemInfo() 获取到当前设备的状态栏高度(statusBarHeight)。然后通过wx.getMenuButtonBoundingClientRect() 获取到胶囊的高度信息(height)。需要注意的是在胶囊和状态栏之间的间距,计算方式是用胶囊的top值减去设备状态栏高度即可。// 大致的计算

2021-04-14 11:51:47 2084 2

原创 微信小程序设置 navigationBarTitleText 没效果

问题描述:在做微信小程序开发的过程中,因为需要通过不同的页面显示不同的标题,以便用户可以清晰了解当前页面的功能以及服务。其中如果事先确定了某个页面的标题时,可以通过该页的 .json 文件进行设置。{ "navigationBarTitleText": "这是一个标题"}通过以上设置,就可以快速设置页面的标题了。可是在我的开发当中这个方法并行不通。原因分析:原来想要在页面的标题 navigationBarTitleText 可以成功设置,前提是需要在 app.json 文件中设置好 pa

2021-04-01 23:36:58 5601 12

原创 微信小程序生命周期函数

关于微信小程序的生命周期函数介绍,通过简单的图片来认识。

2021-03-31 10:31:31 185 1

原创 程序命名公式及规范

命名公式动+名判断+名命名规范匈牙利命名法驼峰式命名法帕斯卡命名法BEM命名法BEM:(Block: 块, Element: 元素, Modifier: 修饰符)是一种基于组件的Web开发方法,基本思想是将用户界面划分为独立的块。官方标准:namespace-block__element_modifier追加约定:给组件添加命名空间m,表示 模块,防止和第三方组件命名冲突。如:m-block__element_modifier所有单词一律小写。单词之间用

2021-03-29 12:48:20 729

原创 Canvas学习笔记七 - 属性方法大集合

一、 图形绘制1. 矩形属性、方法说明fillRect(x, y, width, height)绘制一个填充的矩形strokeRect(x, y, width, height)绘制一个矩形的边框clearRect(x, y, width, height)清除指定矩形区域,让清除部分完全透明。rect(x, y, width, height)绘制一个左上角坐标为(x,y),宽高为width以及height的矩形。(画完之后是空白的,没有边框显示,需要配合 st

2021-03-26 23:40:54 534

原创 Canvas学习笔记六 - 合成裁剪与动画

在此之前,总是将一个图形画在另一个之上,对于其他更多的情况,仅仅这样是远远不够的。比如,对合成的图形来说,绘制顺序会有限制。不过,我们可以利用 globalCompositeOperation 属性来改变这种状况。此外, clip属性允许我们隐藏不想看到的部分图形。一、globalCompositeOperation通过globalCompositeOperation属性,不仅可以在已有图形后面再画新图形,还可以用来遮盖指定区域,清除画布中的某些部分(清除区域不仅限于矩形,像clearRect()方法做

2021-03-26 23:40:25 253 1

原创 Canvas学习笔记五 - 变形 Transformations

一 、状态的保存和恢复 Saving and restoring stateCanvas状态存储在栈中,每当save()方法被调用后,当前的状态就被推送到栈中保存。可以调用任意多次 save方法。每一次调用 restore 方法,上一个保存的状态就从栈中弹出,所有设定都恢复。其中绘画状态包括如下:当前应用的变形(即移动,旋转和缩放)以及下面这些属性:strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLim

2021-03-26 23:39:58 186

原创 Canvas学习笔记四 - 使用图像

canvas更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等。浏览器支持的任意格式的外部图片都可以使用,比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。引入图像到canvas里需要以下两步基本操作:获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源,也可以通过提供一个URL的方式来使用图片(参见例子)使用drawImage()函数将图片绘制到画布上

2021-03-26 14:30:25 259

原创 Canvas学习笔记三 - 绘制文本

一、 绘制文本方法描述fillText(text, x, y [, maxWidth])在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.strokeText(text, x, y [, maxWidth])在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta

2021-03-26 14:29:59 481

原创 Canvas学习笔记二 - 样式和颜色

颜色 Colors方法说明fillStyle = color设置图形的填充颜色。strokeStyle = color设置图形轮廓的颜色。<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

2021-03-26 14:29:24 394

原创 Canvas学习笔记一 - 图形的绘制

canvas画布。canvas会初始化宽度为300像素和高度为150像素。一、替换内容<!-- 当前浏览器如果不支持 canvas 标签时,会打印 canvas 内部的html标签 --><canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15</canvas><canvas id="clock" width="150" height="1

2021-03-26 09:51:59 180

GitHubDesktopSetup.exe

简化您的开发工作流程。帮助外网下载慢的童鞋。

2021-03-11

vant area 省市区列表数据数据源

vant官网中找不到关于area省市区选择的数据源,所以我这边整理成 json格式,以便下载使用。

2021-03-05

rubyinstaller-devkit-2.6.6-1-x64.zip

ruby的服务器在国外,避免不必要的下载时间,方便需要学习sass扩展样式的童鞋。

2021-02-20

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除