一、image相关
动态加载本地静态图片
// 获取assets静态资源
export const getAssetsFile = (url: string) => {
return new URL(`../assets/${url}`, import.meta.url).href
}
const urlStr = getAssetsFile(`image/${i + 1}.jpeg`)
1.js获取图片的宽高
const imgInfo = (url: string): Promise<ImgUrl> => {
return new Promise((resolve) => {
const img = new Image()
img.src = url
img.onload = () => {
resolve({
url,
height: img.height,
width: img.width,
})
}
})
}
//调用
const img = await imgInfo(getAssetsFile(`image/${i + 1}.jpeg`))
二、数组相关
//定义数组类型
interface ImgUrl {
url: string
height: number
width: number
}
const arr = <ImgUrl[]>[]
const list = ref<ImgUrl[]>([])
//数组初始化
var arr_names: number[] = new Array(50)
三 遍历接口返回的字典
Object.keys(res.data).forEach((key) => {
const item = myMap[key]
});
四、路由相关
route-link拦截
const tapAction = (event) => {
if (props.path === '/ai-chat/chat') {
//下面两句会阻止时间继续传递，如果需要继续传递吧下面两句注释掉
event.stopPropagation()
event.preventDefault()
ElMessage.error('该功能暂时供企业专版使用')
return
}
}
<component :to="path" :is="path ? 'router-link' : 'div'">
<div
class="menu-item"
:class="{
'router-link-active': route.fullPath.indexOf(path as string) === 0,
}"
@click="tapAction($event)"
>
<img v-if="props.avatar" :src="props.avatar" class="menu-item__avatar" />
<span v-else-if="isSvg" v-html="props.icon" />
<svg-icon
v-else-if="icon"
:name="icon"
:size="sizeMap[icon as keyof typeof sizeMap] ?? '22px'"
/>
{{ name }}
</div>
</component>
四、纯js文件如何出现dialog
/**
大致思路：
第一步：创建一个dialog.vue 模版
第二步：创建一个dialog.js文件 ，创建个实例 const instance=createApp(rootComponent: Component, rootProps?: object)
创建一个div:( const mountNode = document.createElement('div'))
将这个div 添加到body上: document.body.appendChild(mountNode)，
然后将这个实例挂载到div上： instance.mount(mountNode)
第三步：js文件中引入dialog.js(import DialogHandle from "@/components/dialog.js";)
const handleOpenDialog = () => {
const dialog = DialogHandle({
title: "操作确认",
content: "<div>是否确定删除数据？</div>",
onConfirm: () => {
return new Promise(async (resolve) => {
dialog.showLoading();
setTimeout(() => {
dialog.hideLoading();
resolve();
}, 1500);
});
},
});
};
**/
dialog参考链接：https://juejin.cn/post/7136099187057721380
