import{o as n,c as s,a}from"./app.51e46c58.js";const t='{"title":"组件注册","description":"","frontmatter":{},"headers":[{"level":2,"title":"按需引入","slug":"按需引入"},{"level":3,"title":"tsx 文件注册","slug":"tsx-文件注册"},{"level":2,"title":"全局注册","slug":"全局注册"}],"relativePath":"guide/component.md","lastUpdated":1721205967753}',p={},e=a('

组件注册

按需引入

项目目前的组件注册机制是按需注册，是在需要用到的页面才引入。

<script setup lang="ts">\nimport { ElBacktop } from 'element-plus'\nimport { useDesign } from '@/hooks/web/useDesign'\n\nconst { getPrefixCls, variables } = useDesign()\n\nconst prefixCls = getPrefixCls('backtop')\n</script>\n\n<template>\n  <ElBacktop\n    :class="`${prefixCls}-backtop`"\n    :target="`.${variables.namespace}-layout-content-scrollbar .${variables.elNamespace}-scrollbar__wrap`"\n  />\n</template>\n\n

tsx 文件注册

tsx 文件内不能使用全局注册组件，需要手动引入组件使用。

全局注册

如果觉得按需引入太麻烦，可以进行全局注册，在src/components/index.ts，添加需要注册的组件。

目前只有 Icon 组件进行了全局注册。

import type { App } from 'vue'\nimport { Icon } from './Icon'\n\nexport const setupGlobCom = (app: App<Element>): void => {\n  app.component('Icon', Icon)\n}\n\n

如果 element-plus 的组件需要全局注册，在 src/plugins/elementPlus/index.ts 添加需要注册的组件。

目前 element-plus 中只有 ElLoading 与 ElScrollbar 进行了全局注册。

import type { App } from 'vue'\n\n// 需要全局引入一些组件，如ElScrollbar，不然一些下拉项样式有问题\nimport { ElLoading, ElScrollbar } from 'element-plus'\n\nconst plugins = [ElLoading]\n\nconst components = [ElScrollbar]\n\nexport const setupElementPlus = (app: App) => {\n  plugins.forEach((plugin) => {\n    app.use(plugin)\n  })\n\n  components.forEach((component) => {\n    app.component(component.name, component)\n  })\n}\n\n
',13);p.render=function(a,t,p,o,c,l){return n(),s("div",null,[e])};export default p;export{t as __pageData};