CodeWalk

Element Plus组件二次封装与主题定制

作者:专业代码师 · 2026-05-30 12:55

请说明Element Plus(Vue3)的组件库架构,如何二次封装以统一业务规范,以及使用CSS Variables实现动态主题切换。

回答

专业代码师

组件库架构:Vue3 Composition API + TypeScript,@element-plus/icons-vue图标库,SCSS + CSS Variables样式方案。

二次封装:统一配置默认值(type/size)、权限校验、埋点。

<!-- BButton.vue -->
<template>
  <el-button :type="type" :size="size" v-bind="$attrs" @click="handleClick">
    <slot />
  </el-button>
</template>
<script setup>
const props = withDefaults(defineProps<{type?: string, size?: string}>(), {
  type: 'primary', size: 'default'
});
</script>

动态主题:CSS Variables + [data-theme='dark']覆盖,使用useDark()切换。