另一个大脑

主题

ElementUI使用手册 ​

Vue项目引入ElementUI ​

安装element-plus ​

npm
$ npm install element-plus

导入element-plus ​

全量导入 ​

如果不关心打包后应用大小，可以采用全量导入。

javascript
import { createApp } from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'
const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')

之后在vue模板中可以直接使用，无需再导入。

vue
<script setup>
</script>
<template>
    <el-button>按钮</el-button>
</template>
<style scoped></style>

按需导入 ​

按需导入分为两种方式：自动导入、手动导入。

自动导入 ​

自动导入需要安装unplugin-vue-components和unplugin-auto-import这两款插件，它会帮我们自动导入组件和组件样式。（仅开发和构建项目时需要）

npm
npm install -D unplugin-vue-components unplugin-auto-import

然后在vite的配置文件添加插件配置：

javascript
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

之后在vue模板中可以直接使用，无需再导入。

vue
<script setup>
</script>
<template>
    <el-button>按钮</el-button>
</template>
<style scoped></style>
手动导入 ​

Element Plus提供了基于ES Module的方式导入组件，可以允许我们在需要的地方手动导入elementUI组件，组件的样式则需要安装unplugin-element-plus插件来帮我们自动引入样式。

npm
npm install -D unplugin-element-plus

在vite中配置插件

javascript
// vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'

export default {
  plugins: [
    ElementPlus({
      // options
    }),
  ],
}

安装插件后，源码中导入element组件地方，编译后会自动导入对应样式。

javascript
import { ElButton } from 'element-plus'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'

配置ElementUI ​

ElementPlus提供了一些属性，用于配置。

  • size：用于设置表单组件的默认尺寸。
  • zIndex：用于设置弹出组件的层级，zIndex的默认值为 2000。
  • locale：配置国际化配置
  • message：控制Elmessage最大显示条数。
  • button：autoInsertSpace控制按钮内文字的显示样式，文字之间是否自动添加空格。
  • empty-values：配置组件的默认空值。
  • value-on-clear：设置清空选项的值。

在按需引入的情况下，通过el-config-provider组件配置。

vue
<script setup>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import {ref} from 'vue';
const size=ref('small');
const zIndex=ref('2000');
const zhCn=ref
</script>
<template>
  <el-config-provider :size="size" :z-index="zIndex",:locale="zhCn">
    <app />
  </el-config-provider>
</template>

Icon图标组件 ​

安装 ​

shell
npm install @element-plus/icons-vue

全局全量导入 ​

在创建vue应用时，导入图标组件

javascript
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

之后可以直接在模板中使用

vue
<template>
	<el-icon color="#409efc">
		<Share />
    </el-icon>
</template>

自动导入 ​

需要引入unplugin-icons，搭配unplugin-vue-components使用，并在vite配置文件中使用。

shell
npm i -D unplugin-icons
//图标数据集
npm i -D @iconify/json
javascript
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver(),
      IconsResolver({ prefix: 'Icon', enabledCollections: ['ep'] }),],
    }),
    Components({
      resolvers: [ElementPlusResolver(),
      IconsResolver({ prefix: 'Icon', enabledCollections: ['ep'] }),]
    }),
    Icons(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

之后可以直接在模板中使用需要添加前缀

vue
<template>
	<el-icon color="#409efc">
		<icon-ep-share />
    </el-icon>
</template>

24分栏 ​

24 分栏：通常是指一种基于栅格系统的布局方式，特别是在网页设计和前端开发中。这种布局系统将页面的宽度划分为 24 等分，通过设置不同的列宽和偏移量，可以灵活地安排内容，创建各种复杂的布局。

常用组件 ​

基础组件 ​

  • el-button：按钮
  • el-container：容器。默认左右排列。当存在el-header或el-footer时上下排列。
    • el-header
    • el-aside
    • el-main
    • el-footer
  • el-icon：存放图标组件。
  • el-row：行、列布局，基础布局，24分栏布局。
    • el-column
  • el-link：文字超链接
  • el-text：文本
  • el-scrollbar：给容器添加滚动条
  • el-space：包裹容器内组件，并为它们添加统一间距

配置组件 ​

  • el-config-provider：提供配置选项。

Form表单组件 ​

  • el-form：form表单
    • el-form-item：表单输入项
  • el-input：输入框
  • el-input-number：数字输入框
  • el-autocomplete：自动补全输入
  • el-select：下拉选择器
    • el-option：选项
    • el-option-group：选项组
  • el-select-v2：虚拟化选择器，用于选项数量巨大的场景。当选项数量有上万行时，可以使用这个组件，提升效率。
  • el-tree-select：树形选择器
  • el-cascader：级联选择器
    • el-cascader-panel：级联面板
  • el-checkbox-group：多选框组
    • el-checkbox：多选框
    • el-checkbox-button：多选按钮
  • el-radio-group：单选框组
    • el-radio：单选框
    • el-radio-button：单选按钮
  • el-color-picker：颜色选择器
  • el-date-picker：日期选择器
  • el-time-picker：时间选择器
  • el-time-select：时间选择
  • el-switch：开关
  • el-mention：提及
  • el-rate：评分
  • el-slider：滑块
  • el-transfer：穿梭框
  • el-upload：文件上传

数据展示 ​

  • el-avatar：头像
  • el-badge：徽章、待办数量
  • el-calendar：日历
  • el-card：卡片。卡片由header、body、footer三个部分的插槽组成。
  • el-carousel：走马灯
    • el-carousel-item：走马灯项目
  • el-collapse：折叠面板
  • el-description：描述列表
  • el-empty：空状态
  • el-image：图片
  • v-infinite-scroll：列表属性，无限滚动
  • el-pagination：分页
  • el-progress：进度条
  • el-result：结果，用于对用户操作结果或异常状态做反馈。
  • el-skeleton：骨架屏。在需要等待加载内容的位置设置一个骨架屏，某些场景下比 Loading 的视觉效果更好。
    • el-skeleton-item：骨架屏项目
  • el-table：表格
    • el-table-column：表格列
  • el-table-v2：虚拟化表格
  • el-tag：标签
  • el-check-tag：复选框样式的标签
  • el-timeline：时间线
  • el-timeline-item：时间线项目
  • el-tour：漫游式引导
    • el-tour-step：漫游式引导步骤
  • el-tree：树形控件
  • el-tree-v2：虚拟化树形控件
  • el-statistic：统计组件
  • el-countdown：倒计时组件
  • el-segmented：分段控制器

导航 ​

  • el-affix：固钉。将页面元素固定在特定可视区域。
  • el-anchor：锚点
    • el-anchor-link：锚点链接
  • el-backtop：回到顶部
  • el-breadcrumb：面包屑
    • el-breadcrumb：面包屑项目
  • el-dropdown：下拉框
    • el-dropdown-menu：下拉菜单
      • el-dropdown-item：下拉菜单项
  • el-menu：菜单
    • el-menu-item：菜单项目
    • el-sub-menu：二级菜单
    • el-menu-group：菜单组
  • el-page-header：页头
  • el-steps：步骤条
    • el-step：步骤条步骤
  • el-tabs：标签页容器组件
    • el-tab-pane：标签页

反馈组件 ​

  • el-alert：提示框
  • el-dialog：对话框
  • el-drawer：抽屉
  • el-popconfirm：气泡确认框
  • el-popover：气泡卡片
  • el-tooltip：文字提示
  • ElLoading、v-loading：加载
  • ElMessage：消息提示
  • ElMessageBox：消息弹出框，模拟alert、confirm、prompt
  • ElNotification：通知

其他 ​

  • el-divider：分隔线
  • el-auto-resizer：是一个容器，可以自动调整宽度和高度。
  • el-watermark：水印

Powered by VitePress

Copyright © 2024-present Evan Chen