初衷

记录开发中使用到的一些技巧

html

记录 html 的隐藏技巧

1_特殊的属性

2_移动端禁止双手缩放

3_datalist 下拉框

4_details 内容展现

6_拖拽元素

07_Object 元素

08_contenteditable 使 html 元素可编辑

09_tooltip

10_image Map

11_网站自动刷新

12_原生进度条

13_input 选择文件夹

14_实现元素的拖拽

15_indexedDB

16_webRtc 实现截图

17_htmlCanvasImage 截图

18_手风琴

19_轮播图

20_input 节流输入框

css

记录 css 布局技巧，新样式和选择器技巧

1_瀑布流布局

2_禁止复制文字

3_页面全部变灰

4_css3 伪类选择器

5_首字母特殊处理

6_shape-outside 图文环绕

7_使用 where()简化代码

8_文字打字效果

9_图片阴影

10_自定义鼠标样式

11_纯 CSS 实现列表清单

12_文字描边效果

13_解决移动端 hover 触发问题

14_用图像填充文本

15_强调文本

16_裁剪元素

17_利用 CSS 穿透覆盖默认样式

18_css 动画基本使用

19_column-count

20_使用 css 做一个气泡框

21_玻璃效果

22_clamp()函数

23_input 抖动效果

24_background-blend-mode

25_修改选择文字颜色

26_css 优化文本显示

27_模糊文本

28_禁用鼠标事件

29_文字超出隐藏

30_画一个太极

31_圆锥梯度函数

32_writing mode

33_css 图片过滤

34_实现打字效果

35_定位简写

36_text-decoration

37_背景图片铺满屏幕

38_css 返回顶部.html

39_实现栅格系统.html

40_flex 实现常用布局

41_hover 放大的盒子

es6

记录效率高的 es 封装方法

内置对象 Map

2_flat()数组扁平化

3_toReversed()数组翻转

4_防抖()

5_节流

6_promise.all 并发请求

7_this

8_判断数据类型

9_变量更换位置

10_打印表格

11_常用数组方法

12_Object.keys()

13_js 创建 inpiut[type=file],获取文件路径

14_js 实现复制

vue

vue 主流框架在工作中使用的技巧

组件 (components)

1.WeekSelect

选择周范围时间组件

2.RollBox

滚动盒子组件。设置指定高度 ， 支持监听滚动到底的事件

3.VideoImageView

视频和图片预览组件

4.ElCustomTable

基于 element-ui 的表格组件（动态数据，动态表头，多列等功能）同CtnUpload

5.LeftRightDragBox

左右可拖拽组件

6.TextScroll

文字溢出滚动组件

7.QrCodeView

二维码预览组件

8.AliFilesUpload

阿里云断点上传组件

9.CtnUpload

基于elementPlus的上传组件(支持文件,图片svga,音乐)

10. SvgaPreview

svga动效图预览

11. SvgaView

svga动效图展示

12. CtnTable

基于elementPlus的表格

• 渲染header
• 渲染数据（一级，二级，多级表头）
• 操作按钮处理
• 多选处理
• 自定义列处理
• 自适应宽度处理
• 表头筛选处理
• 分页
• 动态表头和表列
• 自定义行颜色

13. IpInput

ip输入框

14. LeafletMap

基于leftletMap的地图显示

skill

1_keep-alive 实现页面缓存

  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>

react

react 使搭建项目更快，封装组件效率更高，记录 react 在开发中的技巧

Hook封装

uniapp

移动端的一些解决方案

class

开发中封装的类方法

IPCheck

判断 IP 是否合法

AliFilesUpload

阿里文件上传封装类

• 断点上传

electron

创建桌面端应用技巧

web-component

封装 web 原生组件的技巧和学习

oc-button

按钮组件

oc-image

图片组件

update

更新

utils

常用工具函数分类

时间相关(time)

URL 相关(url)

判断相关(judge)

1_isExcel

判断是否是 excel 文件类型

2_isBase64

判断是否是 base64

3_isIos

判断是否是 ios

4_isAndroid

判断是否是安卓

5_isPc

判断是否是 pc

6_isMobile

判断是否是移动端

7_isWeChatBrowser

判断是否是微信内置浏览器

8_getType

判断数据类型

9_containsDuplicate

判断数组是否存在重复数据

文件相关(file)

1_getBase64

file 转 base64

2_base64toBlob

base64 转 blob

3_blobToDataURI

blob 转 base64

4_blobToUrl

blob 转换为 url

5_urlDownload

blob 地址 to 下载

6_fileDownload

file to 下载

7_base64FileDownload

base64 to 下载

8_fileToUrl

file to url

9_urlToBlob

url to file

10_getFileUrl

获取远程地址

11_checkFileType

判断文件的数据类型

12_beforeAvatarUpload

图片压缩

13_convertCanvasToImage

从 canvas 提取图片 image

14_b64EncodeUnicode

base64 转换 unicode

15_getImageDimension

获取图片尺寸宽高

16_base64ToUrl

base64 转换成 Url

数字相关(number)

URL 相关(url)

DOM 相关(dom)

字符串相关(string)

数据处理相关(other)

1_deepClone

深度克隆对象

2_numberFilter

身份证数字过滤带*号

node

nodeJs 开发技巧

ts

ts 变量类型赋值规范

1_定义对象类型

2_枚举

3_元组

4_定义数组类型

5_定义函数类型

6_联合类型,类型断言

interview

面试技巧