Gauss Zhou

# 开发问题记录排查

# 1

Typescript 项目中导入图片时，报错

// src/shims-image.d.ts

declare module "*.svg";
declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.gif";
declare module "*.bmp";
declare module "*.tiff";

declare module "*.vue" {
  import { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

# 2

解决中文输入法触发多次 input 和 keyup 事件的问题，关键词“组合输入”

let inputEl = document.querySelector("#input");
let composition = false;
inputEl.addEventListener("compositionstart", (e) => {
  composition = true;
});
inputEl.addEventListener("keyup", (e) => {
  if (composition) return false;
  inputEl.value = inputEl.value.replace(/[^\w]+$/g, "");
});
inputEl.addEventListener("compositionend", (e) => {
  composition = false;
  inputEl.value = inputEl.value.replace(/[^\w]+$/g, "");
});

# 3

webpack 开发和打包样式不一致

  1. 严格控制样式的导入
  2. 组件内的全局样式，务必使用唯一的 class （这一步可编写脚本进行扫描来保障代码质量，看护项目代码）

1
2
3