Element Plus 基本使用

蔚落 2024-04-17 13:48 68阅读 0赞

## 一、概述 ##

### 1.1介绍 ###

> Element Plus 基本使用
> 
> `element-ui 是基于vue 开发的一套ui组件库，提供丰富的网页开发组件，可用快速开发网站，降低前端开发成本`  
> **版本 element目前有两个版本**
> 
>  *  element-ui：基于vue2
>  *  element-plus: 基于vue3
> 
> 官网地址
> 
>     https://element-plus.org/zh-CN/
> 
> element-plus 基本使用
> 
>     1.安装
>     npm install element-plus
>     2.	在vue项目main.js引入element-plus组件，以及css文件
>     3.	在官方文档中找到需要的样式组件复制代码对应的.vue中使用。

具体部署请看[快速开始][Link 1]

### 1.2网页基础布局 ###

#### icon组件 ####

> 安装
> 
>     pnpm install @element-plus/icons-vue
> 
> 在main.ts中进行全局挂载
> 
> ![e968bf8c891e4b8fa0977cfd498b7e1d.png][]
> 
> 官网图标地址
> 
>     https://element-plus.org/zh-CN/component/icon.html#

#### Container 布局容器 ####

<div class="common-layout">
        <el-container>
          <el-aside width="200px">Aside</el-aside>
          <el-main>Main</el-main>
        </el-container>
      </div>

我们将这个布局抽离为两个组件，分别为一个header组件和一个aside组件，接下来开始抽离。

#### 模板组件分离 ####

##### header组件 #####

<template>
    <div>
        <el-header style="display: flex; font-size: 16px;">
        
          <div style="display: inline-flex; flex: 1; align-items: center; justify-content: left;">
            
            <el-icon v-show="!showIcon.isCollapse" @click="collapseAside" style="color: #303133;">
              <Fold />
            </el-icon>
            
            <el-icon v-show="showIcon.isCollapse" @click="collapseAside" style="color: #303133;">
              <Expand />
            </el-icon>
          </div>
    
          
          <div class="toolbar">
            
            <div class="block" style="margin-right: 10px;">
              <el-avatar :size="40" :src="Avatar" />
            </div>
            
            <span>管理员</span>
            
            
            <el-dropdown trigger="click">
              
              <el-icon style="margin-left: 18px; margin-top: 1px; color: #303133;">
                <setting />
              </el-icon>
              
              
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>View</el-dropdown-item>
                  <el-dropdown-item>Add</el-dropdown-item>
                  <el-dropdown-item @click="LogOut">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
    </div>
    </template>
    <script setup lang="ts">
    import Avatar from '@/assets/touxiang.jpg'
    import { ref } from 'vue'
    // eslint-disable-next-line vue/no-dupe-keys, @typescript-eslint/no-unused-vars
    const isCollapse = ref(true)
    // 获取父组件传递过来的数据 
    const showIcon = defineProps({
        isCollapse: Boolean
    })
    
    // 获取父组件自定义的事件
    const emit = defineEmits(['changeAside'])
    
    // 自定义按钮点击事件，侧边栏的收缩按钮
    const collapseAside = () => {
        emit('changeAside')
    }
    
    // 登出按钮
    const LogOut = ()=>{
      
    }
    
    </script>
    
    <style>
    .el-header {
        width: 100%;
        background-color: #fff;
        color: var(--el-text-color-primary);
        box-shadow: var(--el-box-shadow);
    }
    
    .toolbar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        right: 20px;
        text-align: right;
    }
    
    .el-dropdown-menu__item {
        width: 120px;
    }
    
    .icon-color {
        color: white;
    }
    </style>

##### aside组件 #####

##### 动态路由 #####

import { createRouter, createWebHistory } from 'vue-router'
    import HomeView from '@/views/HomeView.vue'
    
    const router = createRouter({
      history: createWebHistory(import.meta.env.BASE_URL),
      routes: [
        {
          path: '/',
          name: '仪表盘',
          component: HomeView
        },
        {
          path: '/article',
          name: '文章管理',
          component: HomeView,
          children: [
            {
              path: '/id',
              name: '文章管理列表',
              component: () => (
                '../views/A.vue'
              )
            }
          ]
       },
       {
        path: '/comment',
        name: '评论管理',
        component: HomeView,
        children: [
          {
            path: '/id',
            name: '评论管理列表',
            component: () => (
              '../views/B.vue'
            )
          }
        ],
        
     },
      ]
    })
    
    export default router

侧边栏代码改进

<template>
      <el-aside :width="settings.width">
        <el-scrollbar>
          <el-menu :default-openeds="['1', '3']" 
          :collapse="settings.collapse" active-text-color="#ffd04b"
            background-color="#304156" text-color="#FFFFFF" router="true">
        <template v-for="menu in this.$router.options.routes" :key="menu">
        
        <el-menu-item v-if="!menu.children" :index="menu.path">
          <el-icon><component :is="menu.icon" ></component> </el-icon>
          <span>{
       {menu.name}}</span>
        </el-menu-item>
        
        
        <el-sub-menu v-else-if="menu.children" :index="menu.path">
          <template #title>
            <el-icon><component :is="menu.icon" ></component> </el-icon>
            <span>{
       {menu.name}}</span>
          </template>
          
          
          <el-menu-item v-for="child in menu.children" :key="child" :index="child.path">{
       {child.name}}</el-menu-item>
        </el-sub-menu>
      </template>

> 1.  **Element Plus Icon组件**：如果你正在使用 Element Plus UI 库，你可以直接使用其提供的 Icon 组件来显示图标。你可以在路由配置中使用该组件作为路由菜单的一部分，例如在`meta`字段中定义图标名称，然后在导航菜单的组件中动态渲染它。
> 2.  **SVG图标**：你可以使用 SVG 格式的图标，并在你的 Vue 组件中直接引入它们。这种方法允许你在路由配置中指定不同的 SVG 文件，并在导航菜单中显示它们。
> 3.  **@iconify/vue**：这是一个流行的图标库，提供了多种图标集的支持。你可以通过这个库来在你的 Vue 项目中使用图标，包括在路由中。你可以选择适合你项目的图标集，并在路由配置中指定相应的图标类名。

整合

### 1.3基础布局知识 ###

![dc03b961666a40c6b37416dd1409ff87.png][]

盒子模型拆分网页

![985c5bffc0b7484f8e9c2f96253746b2.png][]

在你的 UserController 的上面加个小注解

@CrossOrigin

> \`@CrossOrigin\` 注解是 Java 中 Spring 框架提供的一种用于处理跨域请求的方法。跨域请求通常出现在前后端分离的 Web 应用中，当前端和后端部署在不同的域名或端口下时，浏览器会因为同源策略（Same-origin policy）而阻止跨域请求。
> 
> 使用 \`@CrossOrigin\` 注解可以允许来自不同域的请求访问后端资源。该注解可以应用于类级别和方法级别，用于配置 CORS（CORS：跨域资源共享）相关的参数。
> 
> 下面是一个示例代码，演示如何在 Spring 中使用 \`@CrossOrigin\` 注解：
> 
>     import org.springframework.web.bind.annotation.CrossOrigin;
>     import org.springframework.web.bind.annotation.GetMapping;
>     import org.springframework.web.bind.annotation.RestController;
>     
>     @RestController
>     @CrossOrigin(origins = "http://example.com", maxAge = 3600)
>     public class MyController {
>     
>         @GetMapping("/api/data")
>         @CrossOrigin(methods = ["GET"], allowedHeaders = ["Content-Type"])
>         public String getData() {
>             // 处理跨域请求的逻辑
>             return "Hello, World!";
>         }
>     }
> 
> 在上述代码中，\`@CrossOrigin\` 注解应用于类级别和方法级别。类级别的注解允许来自 \`http://example.com\` 域的请求访问所有方法。方法级别的注解进一步限制了只允许 \`GET\` 方法的跨域请求，并指定了允许的请求头为 \`Content-Type\`。
> 
> 通过配置 \`@CrossOrigin\` 注解，可以实现对跨域请求的灵活控制，确保安全性和数据的正确交互。

## 二、Element Plus 基本样式 ##

### 2.1按钮 ###

![25367bdc550c49f6a46998fd40bdb809.png][]

### 2.2图标 ###

![588dd12555a0472184397a3ee9677bed.png][]

### 2.3提示框 ###

### ![5d907b0f18974adead09c549718e1e27.png][] ###

### 2.4导航 ###

详情请见[导航][Link 2]

![61f60e207a714644808162643de51a97.png][]

### 2.5标签页 ###

[标签页][Link 3]详情请见[标签页][Link 3]

![2517b69c776b4ef8a6c3c56dc598bef2.png][]

### 2.6输入框 ###

详情请见[输入框][Link 4]

![0139e8128ece4e59a1d6a445e9edf293.png][]

### 2.7单选框、复选框 ###

详情请见[单选框][Link 5]

[多选框][Link 6]

![2d21ddae432f43aa8553f38339d04f3a.png][]

### 2.8下拉框 ###

[详情请见下拉选择器][Link 7]

![5c9c387118f7406495b2d58b04a6a259.png][]

### 2.9日期选择器 ###

详情请见[日期选择器][Link 8]

![b6f87b373da74b65b061fb0968aa66f9.png][]

### 2.10表单 ###

### ![73f59890c2b94327acc32dca14f2d15a.png][] ###

### 2.11对话框 ###

详情请见[对话框][Link 9]

![7c95d5d9241043e7b66ef4487a641585.png][]

### 2.12表格 ###

详情请见[表格][Link 10]

![74a42b62ddf441ecb648e857fe75720d.png][]

## 三、实战进阶 ##

### 3.1设置布局 ###

栅格布局：通过基础的24分栏，迅速便捷创建布局，

el-row 代表行，里面嵌套el-col
    el-col  代表列，总分为24列
    属性
    gutter列间隔
    span占据的列数

![a4a13fde50bb409f81f314a09a84b2b5.png][]

### 3.2表单：校验规则 ###

表单包含输入框，单选框，下拉选择，多选框等用户输入的组件。使用表单可以收集，验证和提交数据。  
**表单项常用组件：**

el-input: 输入框
    el-select: 下拉框
    el-checkbox-group 多选框
    el-radio-group：单选框

表单：校验规则

表单组件允许你校验用户的宿儒是否符合规范，来帮助你找到和纠正错误  
使用流程

1.定义校验规则
    2el-form指定“rules” 属性传入定义的校验规则
    3.el-form-item指定“prop”属性与校验规则名称对应

### ![8a5bd6725e9f44c0875a7d75ca05bf6a.png][] ###

### 3.3表格 ###

边框，宽度，固定列

表格属性：
    border:是否带有纵向边框
    data:表格使用的数据，自动渲染
    列属性：
    prop: 键名，对应数据中的字段
    label:列名
    width：列宽度
    fixed:列是否固定在左侧或者右侧， true 表示固定在左侧
    fixed= "right"

#### 卡片 ####

悬浮展示数据，类似于卡片效果。

详情请见[卡片][Link 11]

![6e3e6056fc144a7f9e4a6aa4fcb03d29.png][]

#### 弹窗 ####

![4cba7bf14c354d8697a41c5d30686fa2.png][]

#### 分页· ####

详情请看[分页][Link 12]

const total = ref(10)
    const pageNum = ref(1)
    const pageSize = ref(1)
    
    
    
    <div style = "margin: 15px 0">
          <el-pagination background layout="sizes, prev, pager, next" 
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[1, 5,10]"
          :total="total" 
          @size-change="load"
          @current-change="load"/>
        </div>

### ![132788fad042496688a4fb4afa3d71ff.png][] ###

#### 国际化 ####

import ElementPlus from 'element-plus'
    import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
    
    app.use(ElementPlus, {
      locale: zhCn,
    })

### ![0540838e7ee845ed91c08777f0434f9b.png][] ###

#### 日期选择器 ####

详情请见[日期选择器][Link 8]

<el-date-picker
            v-model="value2"
            type="date"
            placeholder="Pick a day"
            :disabled-date="disabledDate"
            :shortcuts="shortcuts"
            :size="size"
          />

### 3.4轮播图 ###

![eafc601df1424e04a754c366823a1843.png][]

### 3.5面包屑 ###

详请参考[https://juejin.cn/post/7087003440773070856][https_juejin.cn_post_7087003440773070856]

![9275412e38a8417997e9271845a97ac1.png][]

路由

![13c839b8004042bd9fdbd5ed927a2c53.png][]

<template>
        <div class="breadcrumb">
          
          <el-breadcrumb separator="/">
            
            <el-breadcrumb-item v-for="(crumb, index) in breadcrumbs" :key="index">
              
              <router-link :to="crumb.to">{
       { crumb.title }}</router-link>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </template>
      
      <script setup lang="ts">
      // 导入所需的模块
    import { computed } from 'vue';
    import { useRouter } from 'vue-router';
      
      // 获取当前路由实例
      const router = useRouter();
      
      // 使用 computed 函数计算面包屑导航项
      const breadcrumbs = computed(() => {
        // 从当前路由匹配的规则中筛选出带有 isBreadcrumb 元信息的规则
        const matchedRoutes = router.currentRoute.value.matched.filter(route => route.meta && route.meta.isBreadcrumb);
        // 根据匹配到的路由规则生成面包屑导航项
        return matchedRoutes.map(route => ({
          to: route.path, // 面包屑导航项的链接路径
          title: route.meta.title, // 面包屑导航项的标题
        }));
      });
      </script>
      
      <style scoped>
      .breadcrumb {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start; 
        text-align: right;
        margin: 0 20px;
        flex: 1;
      }
      </style>

[Link 1]: https://element-plus.org/zh-CN/guide/quickstart.html#%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8
[e968bf8c891e4b8fa0977cfd498b7e1d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/7e684c1644fe4d9fbbca0a9444f6dae0.png
[dc03b961666a40c6b37416dd1409ff87.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/e3bc4152a4ff424994df207031351c6e.png
[985c5bffc0b7484f8e9c2f96253746b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/06118b1e333841479385ac49dbae260b.png
[25367bdc550c49f6a46998fd40bdb809.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/f220b79310814d0c8b642104d14cde6c.png
[588dd12555a0472184397a3ee9677bed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/51d519fd4b33466fb7f0dcdab5f3bdc9.png
[5d907b0f18974adead09c549718e1e27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/8b2e8a01e04443bcaf15b964eec66562.png
[Link 2]: https://element-plus.org/zh-CN/component/affix.html
[61f60e207a714644808162643de51a97.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/c80a9932e37f48139431dca3c91c68bd.png
[Link 3]: https://element-plus.org/zh-CN/component/tabs.html#tabs-%E6%A0%87%E7%AD%BE%E9%A1%B5
[2517b69c776b4ef8a6c3c56dc598bef2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/d641548359be4bd0b168ce94e7569e0b.png
[Link 4]: https://element-plus.org/zh-CN/component/input.html
[0139e8128ece4e59a1d6a445e9edf293.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/6530eecb169e49b6a1d13093cbb4e178.png
[Link 5]: https://element-plus.org/zh-CN/component/radio.html
[Link 6]: https://element-plus.org/zh-CN/component/checkbox.html#checkbox-%E5%A4%9A%E9%80%89%E6%A1%86
[2d21ddae432f43aa8553f38339d04f3a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/c140e9b26e5847cf83de00cc62e6ee94.png
[Link 7]: https://element-plus.org/zh-CN/component/select.html#select-%E9%80%89%E6%8B%A9%E5%99%A8
[5c9c387118f7406495b2d58b04a6a259.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/a3292ea401d94758b7f7c78b5a6e5dfd.png
[Link 8]: https://element-plus.org/zh-CN/component/date-picker.html
[b6f87b373da74b65b061fb0968aa66f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/262cdf0e624a48d581b902e18fe8cf28.png
[73f59890c2b94327acc32dca14f2d15a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/8ac4e8a3915343658d188eea468193e7.png
[Link 9]: https://element-plus.org/zh-CN/component/dialog.html#dialog-%E5%AF%B9%E8%AF%9D%E6%A1%86
[7c95d5d9241043e7b66ef4487a641585.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/fce1f4b25a2847a08724f03b0de211a3.png
[Link 10]: https://element-plus.org/zh-CN/component/table.html#table-%E8%A1%A8%E6%A0%BC
[74a42b62ddf441ecb648e857fe75720d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/be911ab04fc64185a9097a7e9fe81e41.png
[a4a13fde50bb409f81f314a09a84b2b5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/15d12def023e48df8386501c75a27e74.png
[8a5bd6725e9f44c0875a7d75ca05bf6a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/d0228d972dcf4198903196175be48a68.png
[Link 11]: https://element-plus.org/zh-CN/component/card.html#card-%E5%8D%A1%E7%89%87
[6e3e6056fc144a7f9e4a6aa4fcb03d29.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/0f0293e56d4c49c480e1c051844b91b5.png
[4cba7bf14c354d8697a41c5d30686fa2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/6624b295265a418f9e5f8e6d648eaa2b.png
[Link 12]: https://element-plus.org/zh-CN/component/pagination.html
[132788fad042496688a4fb4afa3d71ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/a48ff3cd94d8459e935b38780a672bbc.png
[0540838e7ee845ed91c08777f0434f9b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/5711a5190d724f3f8ad2c64e4ef89894.png
[eafc601df1424e04a754c366823a1843.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/5c0dfabc669a4afe974a1c6338d3c1e5.png
[https_juejin.cn_post_7087003440773070856]: https://juejin.cn/post/7087003440773070856
[9275412e38a8417997e9271845a97ac1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/dd5b75e1f41e4368870a2840ece5f80f.png
[13c839b8004042bd9fdbd5ed927a2c53.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/13/adb4be73de7e472590c584d1c8cf7aa8.png