vue3---自定义插件注册全局对象

m0_679927202023-11-29 19:15

① 在src/components文件夹下创建SvgIcon组件

复制代码

<template>
    <div>
        <svg :style="{ width: width, height: height }">
            <use :xlink:href="prefix + name" :fill="color"></use>
        </svg>
    </div>
</template>

<script setup lang="ts">
defineProps({
    // xlink:href属性值的前缀
    prefix: {
        type: String,
        default: '#icon-'
    },
    // svg矢量图名字
    name: String,
    // svg图标颜色
    color: {
        type: String,
        default: ''
    },
    // svg图标宽度
    width: {
        type: String,
        default: '16px'
    },
    // svg图标高度
    height: {
        type: String,
        default: '16px'
    }
})
</script>

<style scoped></style>

② 在src/components文件夹下创建index.ts：用于注册components文件夹下全部的全局组件

复制代码

// 引入项目中的全部全局组件
import SvgIcon from './SvgIcon/index.vue'
import Pagination from './Pagination/index.vue'

// 定义全局组件对象：用于存放所有要引入的全局组件
const allGlobalComponents: any = {
    SvgIcon,
    Pagination
}

// 对外暴露一个插件对象
export default {
    install(app: any) {
        // 遍历注册全局组件对象中的所有组件
        Object.keys(allGlobalComponents).forEach(keys => {
            app.component(keys, allGlobalComponents[keys])
        })
    }
}

③在入口文件（通常是main.ts）引入步骤②的index.ts文件，通过app.use方法安装自定义插件

复制代码

// 引入自定义插件对象：注册全局组件
import globalComponent from '@/components/index.ts'
// 安装自定义插件，使用该方法就会调用自定义插件对象文件中的install方法，从而进行全局组件注册
app.use(globalComponent)