Vue+Typescript记录

云默

2023-12-01

报错：TypeScript emitted no output for

解决方法：
ts混入的方法：https://www.cnblogs.com/zhongchao666/p/11207117.html
解决问题的方法：https://stackoverflow.com/questions/54413763/trading-view-typescript-emitted-no-output

导入js文件如@/api/aaa.js的函数报错找不到此内容(有问题)

解决方法：
修改tsconfig.json中的compilerOptions，将其中的"allowJs"设为true，如： “allowJs”: true
在tsconfig中的"include"字段中将js文件的路径添加进去。

{
  "compilerOptions": {
  	...
  	"allowJs": true, // 允许编译javascript文件
	"include": [
  		"src/**/*",
  		"types",
  		"./src/api/equipment/*.js" //匹配equipment下的所有js文件
	],
	...

TS下，form表单验证validate报错

validate找不到类型，此时可以使用类型断言，将 validate 断言成： HTMLFormElement

(this.$refs[aaaa] as HTMLFormElement).validate();

父组件调用子组件方法，TS不识别this.$refs

暂时的解决方法：先拿到对应的元素，定义其类型再拿到对应的方法

let flv:any = this.$refs.flvV
flv.endFlvVideo()

Element-Ui样式失效问题

vue.config.js配置文件里css的requireModuleExtension: 改为true

使用ElementUI遇到TS的问题Property ‘resetFields’ does not exist on type ‘Vue’

使用类型断言

let ref = (this.$refs.queryForm as ElForm)
ref.resetFields()

在js部分中使用this.$t报错：Cannot read property ‘_t’ of undefined"

引入vue-i18n配置文件中的i18n，在页面中采用i18n.t替换this.$t(’…’)

//
import i18n from "@/locales"
...
//js代码中
i18n.t('login.usernameRule')

交换elementui的messagebox的取消和确认按钮位置，改为确认在前

this.$msgbox({
	...
	cancelButtonClass: "btnCancel",
	...
})

// style
.btnCancel{
  float: right;
  margin-left: 10px;
}

echarts自适应宽度

  mounted() {
  	this.chart = echarts.init((this.$refs.flowChart as any), "macarons");
    this.chart.setOption(this.chartOptions);
    window.addEventListener("resize", this.resizeChart);
    this.$on("hook:beforeDestroy", () => {
      window.removeEventListener("resize", this.resizeChart)
    })
  }
  
  //resize
  private resizeChart() {
    this.chart.resize();
  }

遮罩层阻止默认滚动事件

<div class="dialog" @touchmove.prevent.stop @mousewheel.prevent></div>

如何判断鼠标按下的是左键还是右键

private mouseDown(e:MouseEvent) {
	e.which == 1;  //鼠标左键
	e.which == 3； //鼠标右键
}

使用onmousemove时，鼠标移动过快会导致图形跟不上或者事件不全部响应

原因：鼠标移动时，不会存储所有的移动信息，而是通过取插值的方法取得鼠标位置信息，否则，系统会被鼠标移动拖垮。所以就会出现，移动过快时，出现断点的问题。
解决方案：使用相对于整个浏览器窗口的坐标来定位。

private mouseDown(e: MouseEvent) {
	...
	let a:DOMRect = this.timeSelect.getBoundingClientRect() // 获得相对于浏览器的坐标
	this.offectXY[0] = e.clientX - a.x;  //用相对于浏览器的坐标以免鼠标移动过快导致位置出错
	...
	this.selectBar.style.left = this.offectXY[0].toString() + "px";
	//添加鼠标移动事件
    document.onmousemove = (e: MouseEvent) => {
    	...
    	this.offectXY[1] = e.clientX - a.x;
	    this.selectBar.style.width = this.offectXY[1] - this.offectXY[0] + "px";
    }
}

await语句后面的promise变为reject，那么整个async函数都会中断执行

await命令，会阻塞代码，如果函数体中有一个await语句后面的promise变为reject，那么整个async函数都会中断执行。但是我们希望即使前一个异步操作失败，也不要中断后面的异步操作。解决办法：将await放在try …catch结构里面

this.loading = true;
try {
  await UserModule.Login(this.loginForm);
} catch (error) {
  console.log(error)
}
  this.loading = false;
  this.$router.push({
    path: this.redirect || "/",
    query: this.otherQuery,
  });

Vue-Router升级导致的Uncaught (in promise)问题

解决方法：在调用方法的时候用catch捕获异常

...
this.$router.push({
  path: this.redirect || "/",
  query: this.otherQuery,
}).catch(err =>{ err })
...

动态添加路由，跳转页面时，页面报错路由重复： [vue-router] Duplicate named routes definition: {…}

原因:addRoutes 方法仅仅是注入新的路由，并没有剔除原有的其它路由
解决方法:使用router.addRoutes(routes)之前调用resetRouter()清空路由

//router.ts
...
export function resetRouter() {
  const newRouter = createRouter();
  (router as any).matcher = (newRouter as any).matcher; // reset router
}
...

//premission.ts
...
import { resetRouter } from "./router"
...
router.beforeEach(async (to: Route, from: Route, next: any) => {
...
  resetRouter();
  router.addRoutes(accessedRoutes);
...
}

el-select框中出现数字的解决方法

el-select 默认以字符串进行匹配，现实情况中后端经常存整型，el-select 默认会原样输出
解决办法：el-option中的:value转为整形

<el-select size="mini" v-show="scope.row.show" v-model="scope.row.type">
  <el-option
    v-for="item in typeOptions"
    :key="item.value"
    :label="item.label"
    :value="parseInt(item.value)"
  >
  /el-option>
</el-select>