全局组件和全局自定义指令

组件和指令是项目中不可避免都要使用的东西，不过相对来说组件使用的更多，自定义指令可能用的不是很多（相对初学者而言）

存放位置

在src同级创建customInstruction文件夹----自定义指令

在src同级创建gloablComponts文件夹----组件

自定义指令

customInstruction文件夹新建real-img.ts文件 这是一个判断图片路径是否有效的作用

const realImg = (app: any) => {
    app.directive('real-img', {
        async beforeMount(el, binding) {
          const imgURL = binding.value;
          if (imgURL) {
            const exist = await imageIsExist(imgURL);
            exist && el.setAttribute('src', imgURL);
          }
          // 判断一个图片是否存在, 注意是异步行为
          function imageIsExist(url) {
            return new Promise(resolve => {
              let img = new Image();
              img.src = url;
              img.onload = () => {
                if(img.complete) {
                  resolve(true);
                  img = null;
                }
              }
              img.onerror = () => {
                resolve(false);
                img = null;
              }
            })
          }
        }
      })
}

export default realImg

customInstruction文件夹新建index.ts文件

    const componentsName = import.meta.globEager('./*.ts');
    const components = import.meta.glob('./*.ts'); // 异步方式
    export default function install(app: any) {
      for (const [key, value] of Object.entries(components)) {
            componentsName[key].default(app)
      }
    }

src/main.ts

import instruction from '../customInstruction/index';
const app = createApp(App)

app.use(instruction).mount('#app')

使用 logo图片

error图片

<script setup lang="ts">

import { ref } from "vue";
import LogoImg from "@/assets/logo.png";

</script>

<template>
  <img v-real-img="LogoImg" src="@/assets/error.png"/>
  <img v-real-img="'./src/assets/logo.png'" src="@/assets/error.png"/>
</template>

图片路径正确的效果

<script setup lang="ts">

import { ref } from "vue";
import LogoImg from "@/assets/logo.png";

</script>

<template>
  <img v-real-img="LogoImg" src="@/assets/error.png"/>
  <img v-real-img="'./src/assets/logo12.png'" src="@/assets/error.png"/>
</template>

图片路径错误的效果

我这里默认显示失败的图片，可以根据实际需求调整 自定指令的全局自动注册大概流程就这样了

全局组件

juejin.cn/post/704448…

这是我之前写的一篇自动注册全局组件的文章，就不再另外在写了