1. 找不到模块“path”或其相应的类型声明。
npm install @types/node --save-dev
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base: "/",
server: {
host: "0.0.0.0"
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src')//设置别名
}
},
})
2. 创建路由提示 --找不到模块“@/views/XXX.vue”或其相应的类型声明。
出现这个问题的原因大概就是:ts只支持导出导入模块,但是vue不是模块,我们需要申明一下vue是个模块
在vite-env.d.ts中写入
/// <reference types="vite/client" />
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
也可以参考:http://t.csdn.cn/36V2B
3. 数据大屏全屏切换
<template>
<div id="content" class="h-full bg" style="">
<div>
<div class="text-3xl text-center text">
数据大屏
<div class="text-xl float-right mt-2 text" @click="togggle">
{{ isFullscreen ? "退出全屏" : "打开全屏" }}
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, toRefs } from "vue";
//判断浏览器是否支持全屏
let isSupport = document.fullscreenEnabled;
//给全屏一个判断状态,全屏时为true,窗口为false
let isFullscreen = ref(false);
//监听全屏状态,在浏览器支持全屏的条件下,当前元素是否是全屏
//document.fullscreenElement 当前展示为全屏模式的元素
const screenchange = () => {
if (isSupport) {
document.fullscreenElement
? (isFullscreen.value = true)
: (isFullscreen.value = false);
}
};
//注册监听
document.addEventListener("fullscreenchange", screenchange, true);
//点击 切换屏幕状态
const togggle = () => {
const element: HTMLElement = document.getElementById(
"content"
) as HTMLElement; //指定全屏区域元素
if (isSupport) {
if (isFullscreen.value) {
//document.exitFullscreen()退出全屏模式的方法
document.exitFullscreen();
isFullscreen.value = false;
} else {
//requestFullscreen(),请求全屏的方法
element.requestFullscreen();
isFullscreen.value = true;
}
}
};
</script>
下载功能
原理:创建一个节点,触发该节点,最后删除节点。
参考文章:https://blog.csdn.net/weixin_45397318/article/details/121514349
方法1:
export const downLoad = (url: string) => {
const iframe = document.createElement("iframe");
iframe.src = url;
iframe.style.display = "none"; // 防止影响页面
iframe.style.height = "0"; // 防止影响页面
document.body.appendChild(iframe); // 必写,iframe挂在到dom树上才会发请求
// 定时删除节点
setTimeout(() => {
document.body.removeChild(iframe);
}, 2000);
};
方法2:
export const downLoad1 = (url: string) => {
const link = document.createElement('a') // 创建一个 a 标签用来模拟点击事件
link.style.display = 'none'
link.href = url
link.setAttribute('download', '文件名')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
对象拼接
const aaa = Object.assign(对象1,对象2 );
使用element plus部分样式引入后存在问题
在 tsconfig.json 中 include 引入 auto-imports.d.ts 这个element-plus 自动引入组件的ts文件
TS中的!和?用法
-
属性或参数中使用 ?:表示该属性或参数为可选项
-
属性或参数中使用 !:表示强制解析(告诉typescript编译器,这里一定有值),常用于vue-decorator中的@Prop
-
变量后使用 !:表示类型推断排除null、undefined
时间
let date = +new Date() // 1712628507312 -- 毫秒值
let date = new Date().toLocaleString('chinese',{hour12:false}) // 2024/4/9 10:11:14