Element Plus 前端组件库 (一)
|
271
|
0
|
前端

2346 字
|
26 分钟

Element Plus前端组件库

❖ 认识 Element Plus

❖ Element Plus 基础组件

❖ Element Plus 表单组件

❖ Element Plus 数据表格

❖ Element Plus 反馈组件

1 认识Element Plus

• Element Plus介绍

• 引入Element Plus

• Vue3新特性：setup

1.1 Element Plus介绍

Element-UI 是基于 vue 实现的一套不依赖业务的 UI 组件库，提供了丰富的 PC 端组件，减少用户对常用组件的封装，降低了开发的难易程度。

  • Element-UI：基于vue2
  • Element-Plus：基于vue3

官网：https://element-plus.gitee.io/zh-CN/

1.2 Vue导入ElementPlus

使用 ElementPlus 的三种方式：

• 在 HTML 中以 CDN 包的形式导入

• 下载 JS 文件保存到本地再导入

• 使用 npm 安装，Vue项目使用该方法

参考文档： https://element-plus.gitee.io/zh-CN/guide/installation.html

1.2.1 通过 npm 安装并导入 ElementPlus

使用 npm 安装，Vue项目使用流程：

1、npm install element-plus

2、在 vue 项目 main.js 中引入 element-plus 组件以及 css 文件

3、在 vue 文件里使用 element 组件

1 安装流程如下：

# 创建一个前端项目目录
root@ubuntu:~# mkdir vueproject
root@ubuntu:~# cd vueproject

# 创建一个 codez 的 vue 项目
root@ubuntu:~/vueproject# vue create codez
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)           # 选择 vue3 项目
  Default ([Vue 2] babel, eslint) 
  Manually select features

# 进入 codez 目录并启动该项目
root@ubuntu:~/vueproject# cd codez/
root@ubuntu:~/vueproject/codez# npm run serve

> codez@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 3245ms                                                                                                                                                               10:40:16 pm

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://10.0.0.134:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

# 再次开启一个终端用于安装 ElementPlus
root@ubuntu:~/vueproject/codez# npm install element-plus

2 安装完了之后就需要导入，所以修改 src/main.js 文件

// 修改该文件
root@ubuntu:~/vueproject/codez# ls src/main.js 

// 修改之后的内容如下
import { createApp } from 'vue'
import App from './App.vue'

// 导入 element-plus 组件以及 css 文件
// 因为 element-plus 自带了许多样式所以需要导入 css 文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

// 将 element plus 引用到实例中
app.use(ElementPlus)
app.mount('#app')

3 打开浏览器点击 F12 ，可以看到就有 Elements 的代码，说明导入成功

http://10.0.0.134:8080/

1.3 Vue3新特性：setup

参考文档： https://v3.cn.vuejs.org/guide/composition-api-introduction.html

在Vue3版本中，引用了一大特性

函数：setup，先来了解下。

组合式API（Vue3） ：

我们可以在 vue3 中看到直接定义 setup ，然后不再像一个个的代码块，而是在通过 setup 一个方法直接使用到所有需要的函数，而且所定义的变量和方法都需要通过 return 之后才能够使用，如果不 return 出去是无法使用的

选项式API（Vue2）：

可以在下图中看到其实在 Vue2 中的操作更像是一个个代码块，而且与 vue3 中的 setup 区别在于不能将方法 return 出去

但是在下面的示例中依旧继续采用 vue2 的语法

2 Element Plus 基础组件

• 组件介绍

• Button 按钮

• Card 卡片

• Container 容器布局

• Menu 导航栏

• Layout 布局

2.1 组件介绍

Element Plus组件：带有 el- 前缀的标签

使用方法：

1、Vue 导入 Element Plus

2、在官方文档找到需要的样式组件

3、复制代码到对应的.vue中

4、修改为对应的数据

2.1.1 标签 tag

1 创建目录

root@ubuntu:~/vueproject/codez/src# pwd
/root/vueproject/codez/src

# 进入到 src 目录下创建 views 文件夹，该目录用来存放我们的各种 web 页面
# basic 文件用来存放各类组件源码
root@ubuntu:~/vueproject/codez/src# mkdir  views/basic -p

2 创建 tag.vue 文件

<template>
  <el-tag>Tag 1</el-tag>
  <el-tag class="ml-2" type="success">Tag 2</el-tag>
  <el-tag class="ml-2" type="info">Tag 3</el-tag>
  <el-tag class="ml-2" type="warning">Tag 4</el-tag>
  <el-tag class="ml-2" type="danger">Tag 5</el-tag>
</template>

3 在 src 下创建路由规则目录

root@ubuntu:~/vueproject/codez/src# mkdir router

4 新建 index.js 文件并定义路由规则

// 定义路由
import {createRouter,createWebHistory} from "vue-router"

// 定义路由规则，我们都知道路由有多个所以这里定义 routes 为一个数组
const routes = [
    {
        // 定义 url paht
        path: '/tag',
        // 导入 tag 文件路径，这种导入方式只有在加载该页面的时候才会进行导入
        component:()=> import('@/views/basic/tag.vue')
    }
]

// 初始化路由实例
const router = createRouter({
    // hash 模式：createWebHistory，web 访问的时候会在 url 上添加 #
    // history 模式：createWebHistory，web 访问时不会添加 #
    history: createWebHistory(),
    routes
})

// 导出路由
export default router

5 修改 App.vue 文件

<template>
  <router-view> </router-view>
</template>
<!-- 定义 html 页面长宽高 vh 就表示整个页面百分之百 -->
<style>
.html, body{
  width: 100vh;
  height: 100vh;
}
</style>

6 修改 main.js ，也就是要将路由规则导入至 main.js 中

import { createApp } from 'vue'
import App from './App.vue'

// 导入 element-plus 组件以及 css 文件
// 因为 element-plus 自带了许多样式所以需要导入 css 文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 导入路由规则，直接写 router 目录即可，他会自动找到对应的 js 代码
import router from './router'

const app = createApp(App)

// 将 element plus 引用到实例中
app.use(ElementPlus)

// 使用 router
app.use(router)

app.mount('#app')

7 安装 vue-router

root@ubuntu:~/vueproject/codez# npm install vue-router

8 关闭 vue 语法检查，修改 vue.config.js 文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 关闭语法检查
  lintOnSave:false
})

9 通过浏览器访问可以看到对应的 tag 标签已经渲染

访问 tag 路由 url http://10.0.0.134:8080/tag

2.1.2 el-button

el-button 与 button 标签用法一致，区别是el-button拥有默认的样式属性，使用type、plain、round、和circle来定义按钮的样式。

参考文档：https://element-plus.gitee.io/zh-CN/component/button.htm

1 编写一个 button.vue 的文件里面写的就是我们的演示代码

<template>
  <el-button>Default</el-button>
  <el-button type="primary">Primary</el-button>
  <el-button type="success">Success</el-button>
  <el-button type="info">Info</el-button>
  <el-button type="warning">Warning</el-button>
  <el-button type="danger">Danger</el-button>
</template>

2 在 router/index.js 中新增 button 路由规则，从而实现能渲染 button

// 定义路由
import {createRouter,createWebHistory} from "vue-router"

// 定义路由规则，我们都知道路由有多个所以这里定义 routes 为一个数组
const routes = [
    {
        // 定义 url paht
        path: '/tag',
        // 导入 tag 文件路径，这种导入方式只有在加载该页面的时候才会进行导入
        component:()=> import('@/views/basic/tag.vue')
    },
    {
        // 定义 rul button
        path: '/button',
        // 导入源码文件
        component:()=> import('@/views/basic/button')
    }
]

// 初始化路由实例
const router = createRouter({
    // hash 模式：createWebHistory，web 访问的时候会在 url 上添加 #
    // history 模式：createWebHistory，web 访问时不会添加 #
    history: createWebHistory(),
    routes
})

// 导出路由
export default router

3 浏览器

http://10.0.0.134:8080/button

2.1.2.2 plain 字段

plain ：一般在 web 渲染的时候看起来是比较简洁明了的

<template>
  <!-- plain 和 默认的对比 style="margin-bottom:10px" 上下行间距为 10px br 标签换行 -->
  <el-button style="margin-bottom:10px" >Default</el-button>
  <br><br>
  <el-button type="success" plain>中文</el-button>
</template>

浏览器访问，而且当我们将鼠标放置到对应的 button 上他的颜色也会发生变化

2.1.2.3 round 字段

round 是一个圆角的按钮如下代码：

<template>
  <!-- plain 和 默认的对比 style="margin-bottom:10px" 上下行间距为 10px br 标签换行 -->
  <el-button style="margin-bottom:10px" >Default</el-button>
  <br><br>
  <el-button type="success" plain>中文</el-button>
  <br><br>
<!-- round 圆角 -->
  <el-button type="success" round>中文</el-button>
</template>

2.1.2.4 circle 字段

circle 圆形按钮，代码如下：

<template>
  <!-- plain 和 默认的对比 style="margin-bottom:10px" 上下行间距为 10px br 标签换行 -->
  <el-button style="margin-bottom:10px" >Default</el-button>
  <br><br>
  <el-button type="success" plain>中文</el-button>
  <br><br>
<!-- round 圆角 -->
  <el-button type="success" round>中文</el-button>
  <br><br>
  <!-- circle 圆形 -->
  <el-button type="success" circle>中文</el-button>
</template>

2.1.2.5 导入图标

我们在 button 中可以对某个按钮进行图标的导入

1 在 main.js 文件添加下面代码实现导入图标包

// 导入 element 图标库
import * as ELIcons from '@element-plus/icons-vue'

const app = createApp(App)
// 将所有图标加入到 app 的组件中
for (let iconName in ELIcons) {
    app.component(iconName,ELIcons[iconName])
}

2 修改 button.vue 文件添加一个带有图标的 button

<template>
  <el-button type="success" circle icon="Edit"></el-button>
</template>

3 可以在web 页面上看到已经变为了 edit 的图标

2.1.3 el-card

卡片包含标题，内容及操作区域。

卡片组件由header和body组成，header是可选的，其内容取决于一个具名的slot。

参考文档：https://element-plus.gitee.io/zh-CN/component/card.html

1 创建一个 card.vue 文件

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>Card name</span>
        <el-button class="button" text>Operation button</el-button>
      </div>
    </template>
    <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
  </el-card>
</template>

2 路由导入

    {
        path: '/card',
        component:()=>import('@/views/basic/card')
    }

3 浏览器访问

2.1.3.1 shadow 阴影

1 修改 card.vue 文件

<template>
<!-- 带 header 的 card ，默认 shadow 就是 alway 总是开启阴影 -->
  <el-card class="box-card" shadow="always">
    <template #header>
      <div class="card-header">
        <span>Card name</span>
        <el-button class="button" text>Operation button</el-button>
      </div>
    </template>
    <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
  </el-card>
  <br><br>
<!-- 不带 header 的 card ,shadow="hover" 只有当我们鼠标放到对应的卡片上才会阴影-->
  <el-card class="box-card" shadow="hover">
    <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
  </el-card>
  <br><br>
<!-- shadow="never" 表示不在显示阴影 -->
  <el-card class="box-card" shadow="never">
    <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
  </el-card>
</template>

2 浏览器

2.1.4 Container 容器布局

用于布局的容器组件，方便快速搭建页面的基本结构。

所谓容器布局也就是说当我们在初始化一个项目前就需要做一个整体项目的布局，如上图 Header：容器一般用来写我们的标题；

Aside：容器用来写我们的侧边导航栏；

Main：根据侧边栏不同的选项加载对应的内容，也就是说我们的操作其实都是在对 Main 这里面的内容进行操作；

Footer：一般写对应的项目组信息

由以下部分组成：

• <el-container>：外层容器。当子元素中包含<el-header>或<el-footer>时，全部子元素会垂直上下排列，否则会水平左右排列。

• <el-header>：顶栏容器。

• <el-aside>：侧边栏容器。

• <el-main>：主要区域容器。

• <el-footer>：底栏容器。

参考文档：https://element-plus.gitee.io/zh-CN/component/container.html

2.1.4.1 演示

1 新建 containertest.vue 文件

<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

2 添加路由

3 浏览器访问可以看到布局的样式已经有了，但是由于缺少内容所以需要修改代码

4 修改 containertest.vue 文件代码，给每个不同的容器添加对应的颜色

<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style>
  .el-header{
    background: #00b0e8;
  }
  .el-aside{
    background: green;
  }
  .el-main{
    background: red;
  }
  .el-footer{
    background: yellow;
  }
</style>

5 现在可以看到浏览器中每个对应的位置都有对应的颜色用来区分不同的容器

2.1.5 Menu 导航栏

导航栏分为两种：

1、顶部菜单栏

2、侧边垂直菜单栏

参考文档：https://element-plus.gitee.io/zh-CN/component/menu

2.1.5.1 侧边菜单栏

<template>
      <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
      >
<!-- 父菜单 -->
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
<!-- 父菜单名字 -->
            <span>Navigator One</span>
          </template>
<!-- 子菜单 -->
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
            <el-menu-item index="1-3">item three</el-menu-item>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    <el-col :span="12">
    </el-col>
</template>

2 修改 index.js 注册路由

3 浏览器访问

http://10.0.0.134:8080/menu

2.1.5.2 Menu 与 container 结合使用

我在上面的 container 中演示了对应的容器位置，也就是在 container 的 aside 其实就是预留给侧边导航菜单使用，那么我们只需将 menu.vue 的代码复制到 container.vue 中的 el-aside 字段下即可

浏览器访问现在导航栏就已经出现了

2.1.6 Layout 布局

通过基础的 24 分栏（将web页面分为一共 24 个篮筐），迅速简便地创建布局。使用行和列创建基础网格布局，通过 row 和 col 组件，并通过 col 组件的 span 属性，就可以自由的组合布局。

参考文档：https://element-plus.gitee.io/zh-CN/component/layout.html

layout 布局主要是对 container 中的 main 里面的内容做布局如下图：

2.1.6.1 代码演示

1 编写 layout.vue 文件

<template>
<!-- gutter="10" 每个块之间的间距 -->
  <el-row :gutter="10">
<!-- span="6" 浏览器默认的长度为 24 然后 el-col 就占用 6 格，正好占完 -->
    <el-col :span="6"><div class="grid-content ep-bg-purple" >1</div></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" >2</div></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" >3</div></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" >4</div></el-col>
  </el-row>
</template>

<!-- 自定义 css 样式 对 ep-bg-purple 类进行定义-->
<style>
  .ep-bg-purple{
    background: mediumpurple;
    color: white;
    text-align: center;
    height: 100px;
  }
</style>

2 注册 index.js 路由，添加下面字段

3 浏览器访问就可以看到分别有 4 个不同的块

暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																				
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇