# web-tips

**Repository Path**: qin_hu/web-tips

## Basic Information

- **Project Name**: web-tips
- **Description**: web学习指南
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2023-11-06
- **Last Updated**: 2025-03-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, JavaScript, Electron

## README

# 初衷

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

# 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](https://gitee.com/qin_hu/web-tips/blob/master/vue/vue3-vite-ts/src/components/WeekSelect/index.vue)

> 选择周范围时间组件

### 2.[RollBox](https://gitee.com/qin_hu/web-tips/blob/master/vue/vue3-vite-ts/src/components/RollBox/index.vue)

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

### 3.[VideoImageView](https://gitee.com/qin_hu/web-tips/blob/master/vue/vue3-vite-ts/src/components/VideoImageView/index.vue)

> 视频和图片预览组件

### 4.[ElCustomTable](https://gitee.com/qin_hu/web-tips/blob/master/vue/vue3-vite-ts/src/components/ElCustomTable/index.vue)

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

### 5.[LeftRightDragBox](https://gitee.com/qin_hu/web-tips/blob/master/vue/vue3-vite-ts/src/components/LeftRightDragBox/index.vue)

> 左右可拖拽组件

### 6.[TextScroll](https://gitee.com/qin_hu/web-tips/blob/master/vue/vue3-vite-ts/src/components/TextScroll/index.vue)

> 文字溢出滚动组件
>

### 7.[QrCodeView](https://gitee.com/qin_hu/web-tips/blob/master/vue/vue3-vite-ts/src/components/QrCodeView/index.vue)

> 二维码预览组件

### 8.[AliFilesUpload](https://gitee.com/qin_hu/web-tips/blob/master/vue/vue3-vite-ts/src/components/AliFilesUpload/index.vue)

> 阿里云断点上传组件

### 9.[CtnUpload](https://gitee.com/qin_hu/web-tips/blob/master/vue/vue3-vite-ts/src/components/CtnUpload/index.vue)
> 基于elementPlus的上传组件(支持文件,图片svga,音乐)
### 10. [SvgaPreview](https://gitee.com/qin_hu/web-tips/blob/master/vue/vue3-vite-ts/src/components/SvgaPreview/index.vue)
> svga动效图预览
### 11. [SvgaView](https://gitee.com/qin_hu/web-tips/blob/master/vue/vue3-vite-ts/src/components/SvgaView/index.vue)
> svga动效图展示
### 12. [CtnTable](https://gitee.com/qin_hu/web-tips/blob/master/vue/vue3-vite-ts/src/components/CtnTable/index.vue)
> 基于elementPlus的表格
- [x] 渲染header
- [x] 渲染数据（一级，二级，多级表头）
- [x] 操作按钮处理
- [x] 多选处理
- [x] 自定义列处理
- [x] 自适应宽度处理
- [x] 表头筛选处理
- [x] 分页
- [x] 动态表头和表列
- [x] 自定义行颜色 

### 13. [IpInput](https://gitee.com/qin_hu/web-tips/blob/master/vue/vue3-vite-ts/src/components/IpInput/index.vue)
ip输入框


### 14. [LeafletMap](https://gitee.com/qin_hu/web-tips/blob/master/vue/vue3-vite-ts/src/components/LeafletMap/index.vue)
基于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
### 阿里文件上传封装类
- [x] 断点上传

# 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

> 面试技巧