主要记录一下平常开发中遇到的问题和一些我没学到的知识点，查漏补缺，notion 同步更新

文本超出显示省略号

1
2
3
4
5
6
7
8
9
10
// 单行
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

// 多行
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

textarea 多行文本禁止拉伸

  • 设置样式 resize: none；

element 组件给 item 设置宽度

element from 组件 给 item 设置宽度 label-width=”auto”时 会和 表单验证冲突报错 ElementPlusError: [Form] unexpected width

  • 注释 label-width=”auto”

两个字需要设置字距

只有两个字需要设置字距时，直接设置 letter-spacing 后文字不能居中

  • 添加缩进 text-indent 可抵消解决

params 路由传参，刷新后，数据会消失

  • 使用 query 方式不会消失

vue3 中的监听路由

  • 使用 vue-router 里的 onBeforeRouteUpdate

element 组件自定义样式有时候不生效

  • 原因是我把样式标签的 scoped 写成了 scope

像素 1px 问题

  • 通过 :before 或者 :after 选择器设置高度 1px 同时缩放 0.5 倍实现

css 动画页闪白卡顿

  • 尽可能地使用合成属性 transform 和 opacity 来设计 CSS3 动画，不使用 position 的 left 和 top 来定位
  • 开启硬件加速

h5 移动端在 ios 上 overflow-y 滑动不流畅

  • 给容器加上 webkit-overflow-scrolling: touch;touch-action: pan-y;

ios 键盘收起时页面没用回落，底部会留白

  • 通过监听键盘回落时间滚动到原来的位置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.addEventListener("focusout", function () {
  window.scrollTo(0, 0)
})

//input输入框弹起软键盘的解决方案。
var bfscrolltop = document.body.scrollTop
$("input")
  .focus(function () {
    document.body.scrollTop = document.body.scrollHeight
    //console.log(document.body.scrollTop);
  })
  .blur(function () {
    document.body.scrollTop = bfscrolltop
    //console.log(document.body.scrollTop);
  })

ios 下 fixed 失效

软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。

  • 不让页面滚动，而是让主体部分自己滚动,主体部分高度设为 100%，overflow: scroll

导出 Excel 流文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// axios.js
export const downPostRequest = (url, params,responseType) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        transformRequest: [function (data) {
            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            return ret;
        }],
        responseType: responseType,
        headers: getAjaxHeaders(null,false)
    });
};

// demo.vue
// 导出按钮
getOverExcel() {
    let downUrl = `/statistics/overseasUnitsStatisticsExcel?departmentId=${this.ptId}&current=${this.qureyOveData.current}&size=${this.qureyOveData.size}&startTime=${this.startTime}&endTime=${this.endTime}`;

      downPostRequest(downUrl, null,'blob').then((res) => {
        const content = res;
        const blob = new Blob([content]);
        const fileName = "导出信息.xlsx";
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      });

    },

小程序里面有游戏链接是无法审核通过

  • 通过替换云开发链接地址，审核通过后再换回来，要选择环境上传部署

多个 promise 请求加载

  • 这样写效率更高，也更合理
  • 不能在 foreach 、map 之类的循环写异步，他们不会等待异步执行，最好还是用 for
1
2
3
4
5
6
async function f() {
  const promiseA = fetch("http://.../...")
  const promiseB = fetch("http://.../...")

  const [a, b] = await Promise.all([promiseA, promiseB])
}

安装 ts 失败

  • 检查本地 npm 文件夹是否有 tsc 依赖，删除所有 tsc 相关文件，重新安装 ts

  • 本地 npm 文件夹地址：C:\Users\用户\AppData\Roaming\npm

数组去重排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let arr = [1, 1, 2, 12, 9, 8, 8, 2, 3, 4, 5, 5, 6, 6, 7, 7]

// case1
// let setArr = new Set(arr)
// const newArr = Array.from(setArr).sort((a, b) => {
//   return a - b
// })

// case2
let newArr = []
arr.map(i => {
  let res = newArr.indexOf(i)
  if (res == -1) {
    newArr.push(i)
  }
})
newArr = newArr.sort((a, b) => {
  return a - b
})

console.log(newArr)

?? 双问号语法

  • 只会判断左边的值是否是 undefined 或者 null， 如果是则读右边的值

使用 ElementePlus 鼠标悬浮 TS 没提示

  • 去 ts 配置文件配置 “types”: [”element-plus/global”]

像素转换 vh、vw

  • 安装 postcss-px-to-viewport 插件可以把 px 转成 vh 和 vw

把 proxy 对象转换成原始对象

处理后端返回的数据碰到了

  • 通过 toRaw() 方法可以

路由拼接传值后面的参数丢失

通过路由拼接传值时因为最后一个参数是地址，导致地址后面的参数丢失，原因是因为解析把后面的参数都当成了是地址的一部分

  • 给地址参数包上 encodeURIComponent 加密使用

小程序实现组件通信

  • properties / triggerEvent 对应 props / emit

快手小程序遇到插槽渲染冲突的问题

  • 解决办法更换图片地址，竟然好了，具体原因没时间细查

VS Code 安装完依赖，代码还是报红

  • 可以试着重启扩展宿主，ctrl + shift + P , 输入 developer ，选择重启扩展宿主

快手小程序 css 背景图

  • 无法使用 getImageInfo API 编译后的图片链接，只能使用网络地址

如果配置完路径别名后 ts 报红

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 如果ts报红或缺少@types/node，需要再安装一下
yarn add @types/node -D

// 修改 tsconfig
{
  "compilerOptions": {
    // ...
    "baseUrl": "."
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
// 修改完 vite.config.ts 文件需要重启

Git 报错 OpenSSL SSL_read

fatal: unable to access ‘https://github.com/.......‘: OpenSSL SSL_read: Connection was reset

1
2
3
4
5
6
7
8
9
10
11
12
13
产生原因：一般是这是因为服务器的SSL证书没有经过第三方机构的签署，所以才报错

解除ssl验证后，再次git
git config --global http.sslVerify "false"

或者尝试清除缓存
ipconfig /flushdns

修改上传大小上线为 500M
git config http.postBuffer 5242880003

多数情况下国内访问 Github 会被…，或因网络波动问题推送失败，不行多试几次。
推荐使用 SSH 方式拉去代码或者参考 开源项目 修改本机 hosts 文件解决访问问题

vite 初始化时红线 vue 未声明

  • 是没有@types/node 声明文件包产生的问题
1
2
3
4
5
6
7
8
9
10
11
// 安装 @types/node文件包：
npm install @types/node -D

// 在 tsconfig.json 配置：
"compilerOptions": {
    ...

    "types": [
      "node"
    ],
  },

本地使用 http-server 服务 hs 指令报错

1
2
3
4
5
// 报错
hs -p 1001

// 改用
http-server -p 1001 -o

使用 mantine UI 库的坑

  • 和 tailwind 冲突，导致 button 组件无底色，需要手动加背景色
  • 不能使用 div 和 p 标签了，会导致无法使用明暗主题，引入 box 组件代替 div

判断当前系统颜色主题

1
2
3
4
5
6
7
const isSystemTheme = window.matchMedia("(prefers-color-scheme: dark)")

if (isSystemTheme.matches) {
  console.log("当前系统是 dark")
} else {
  console.log("当前系统是 light")
}