一、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