devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

《循序渐进Vue.js前端开发实战》电子书学习-第10章-基于v3的ui组件库：element plus_循序渐进vue.js 3前端开发实战 配套ppt和源代码

作者：笔触狂放9 | 2024-02-11 20:34:18

赞

踩

循序渐进vue.js 3前端开发实战 配套ppt和源代码

实际的开发过程中，需要结合各种基于vue框架开发的第三方模块来完成项目。以直接的UI展现为例，通过使用基于vue的组件库，可以搭建功能强大、样式美观的页面。

element plus框架是vue开发里非常流行的一款UI组件库，其可以带给用户全网一致的使用体验、目的清晰的控制反馈等。其内置了非常丰富的样式和布局框架。

element plus入门

element plus可以直接使用CDN的方式进行引入，单独的使用其提供的组件和样式，这和渐进式风格的vue框架十分类似，同样也可以使用npm在vuecli创建的模板工程中依赖element plus框架进行使用

element plus的安装和使用

如果我们在开发简单的静态页面的时候采用了cdn的方式引入了vue框架，那么也可以用同样的方法来引入element plus框架

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7.   <script src="https://unpkg.com/vue@next"></script>
  8. </head>
  9. <body>
  10.   <div id="Application" style="text-align: center;">
  11.   <h1>这是模板的内容：{{count}}</h1>
  12.   <button v-on:click="clickButton">按钮</button>
  13.   </div>
  14.   <script>
  15.     const App={
  16.       data() {
  17.         return {
  18.           count:0
  19.         }
  20.       },
  21.       methods: {
  22.         clickButton(){
  23.           this.count++
  24.         }
  25.       },
  26.     }
  27.     Vue.createApp(App).mount("#Application")
  28.   </script>
  29. </body>
  30. </html>

为其加上element plus样式，首先在head引入框架

  1. <head>
  2.   <meta charset="UTF-8">
  3.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.   <title>Document</title>
  5.   <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
  6.   <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
  7.   <script src="https://unpkg.com/vue@next"></script>
  8. </head>

好像不太兼容，没有正确显示在页面，看了一下element plus的网站，确实是改变了cdn的链接了

那么尝试使用在工程里使用，运行

npm i elemnet-plus --save

依赖已经添加了

  1.  "dependencies": {
  2.     "axios": "^1.4.0",
  3.     "core-js": "^3.8.3",
  4.     "element-plus": "^2.3.6",
  5.     "vue": "^3.2.13",
  6.     "vue-axios": "^3.5.2"
  7.   },

可以尝试修改一下helloworld.vue里的代码

  1. <template>
  2.   <div class="hello">
  3.     <h1>{{ msg }}</h1>
  4.     <el-empty description="description" />
  5.   </div>
  6. </template>

发现改了是没有效果的，又看了一下官网，需要引入一下，在main.js里面改一下

  1. import { createApp } from 'vue'
  2. import ElementPlus from 'element-plus'
  3. import 'element-plus/dist/index.css'
  4. import App from './App.vue'
  5.  
  6. const app = createApp(App)
  7.  
  8. app.use(ElementPlus)
  9. app.mount('#app')

效果就有了：

 按钮组件

element plus里面有许多el-button，组件中提供了很多属性来对按钮的样式进行定制

Button 按钮 | Element Plus更多介绍参考官方文档

sizebutton sizeenum—
typebutton typeenum—
plaindetermine whether it's a plain buttonbooleanfalse
text 2.2.0determine whether it's a text buttonbooleanfalse
bg 2.2.0determine whether the text button background color is always onbooleanfalse
link 2.2.1determine whether it's a link buttonbooleanfalse
rounddetermine whether it's a round buttonbooleanfalse
circledetermine whether it's a circle buttonbooleanfalse
loadingdetermine whether it's loadingbooleanfalse
loading-iconcustomize loading icon componentstring / ComponentLoading
disableddisable the buttonbooleanfalse
iconicon componentstring / Component—
autofocussame as native button's autofocusbooleanfalse
native-typesame as native button's typeenumbutton
auto-insert-spaceautomatically insert a space between two chinese charactersboolean—
colorcustom button color, automatically calculate hover and active colorstring—
darkdark mode, which automatically converts color to dark mode colorsbooleanfalse
tag 2.3.4custom element tagstring / Componentbutton

标签组件

 标签组件和按钮组件是很类似的

el-tag

Tag 标签 | Element Plus

可以设置标签的类型风格、尺寸、是否描边、背景色、主题、标签是否可关闭、是否禁用渐变动画等

空态图和加载占位符组件

当页面没有数据或者页面在加载数据的时候，需要一个空态图或者占位符来提示用户，这两种情况分别是el-empty和el-skeleton组件

el-empty用来定义空态图组件，当页面没有数据的时候，可以使用此组件进行占位提示

el-empty组件还提供了插槽，可以很灵活的定制所需的空态图的样式，

图片和头像组件

el-image组件，相比于原生的image标签，这个组件封装了一些加载过程的回调和处理相关占位图的插槽

表单类组件

表单类组件一般只可以进行用户的交互，可以根据用户的操作而改变页面逻辑的相关组件。element plus对常用的交互组件都有封装，例如单选框、多选框、选择列表、开关等。

单选框和复选框

el-radio是用来定义单选框的，同属一组的单选框其v-model需要绑定到相同的组件属性上，当选中某个选项的时候，属性对于的值设置为单选框label设置的值

el-checkbox是复选框组件，用法和单选框是类似的，

标准输入框组件

el-input是一种非常复杂的UI组件，提供了非常多的属性供开发者来进行定制。输入框一般用来展示用户的输入内容，可以使用v-model进行数据绑定，

带推荐列表的输入框组件

这种组件是当激活了某个输入框的时候，其会自动弹出推荐列表供用户来进行选择，这种组件叫做el-antocomplete组件

数字输入框

数字输入框专门用来输入数字，例如在电商网站购物会遇到梳理的选择、商品尺寸的选择。el-input-number可以用来创建数字输入框

选择列表

选择列表可以提供一组选项供用户进行选择，可以单选也可以多选，是用el-select来创建的

多级列表组件

el-select组件创建的选择列表是单列的，但是很多时候需要使用多级的选择列表，可以通过el-cascader组件来支持

开关和滑块组件

开关如其名，有开和关这两种的状态来支持用户的交互。在element plus里使用el-switch来创建开关组件，如果想要使用连续状态的组件，可以使用el-slider组件，这个组件能够渲染出进度条和滑块，用户可以对进度进行调节

开关组件

el-switch组件支持开发者定义开关的颜色和背景色

滑块组件

滑块可以支持承载连续变化的值，也支持承载离散变化的值。滑块也可以支持结合输入框一起使用，el-slider组件

选择器组件

选择器组件的使用场景和选择列表类似，只是其场景更加定制化，element plus提供时间日期、颜色相关的选择器

时间选择器

el-time-picker可以用来床事件选择器，能方便的供用户选择一个时间点或时间范围，这个组件的时间选择器的样式是表格类型的，还有一个el-time-select组件，渲染出的选择器是列表样式的

日期选择器

el-data-picker

颜色选择器

颜色选择器可以提供一个调色板组件，用户方便的在调色板上进行颜色的选择。el-color-picker

提示类组件

提示类组件包括有警告组件、加载提示组件、消息提醒组件、通知和弹窗组件等

警告组件

用来展示页面的重要提示信息、页面产生错误、用户交互处理产生失败等的场景，警告组件使用el-alert，有四种类型，分别可以在操作成功提示、普通信息提示、行为警告和操作错误提示场景，更换type类型即可完成场景的切换

el-alert是一种常驻的提示组件，除非用户手动单击关闭，否则提示框是不会自动关闭的，悬浮式的提示组件是另外部分

消息提示

主动触发消息提示的方法：当触发消息提示的时候，页面顶部会出现一个提示栏，展示三秒后会自动消失。

element plus为vue里面的app.config.globalPropertier全局注册了$message方法，因此在vue组件内部，可以直接使用this来触发消息提示，此方法适用于对用户进行简单提示的场景，如果需要进行用户交互，就需要用到提供的另外一个方法$msgbox，这个方法触发的提示框效果是类似于系统的alert、confirm和prompt方法，可以进行用户交互

通知组件

通知是可以用来全局的进行系统提示，可以像消息提醒一样在出现一定事件后自动关闭，也可以像提示栏一样常驻，用户手动才能关闭。$notify来触发通知

数据承载相关组件

数据承载组件例如表格组件、导航组件、卡片和折叠面板组件等，这些组件是用来组织页面的数据

表格组件

表格组件能够承载大量的数据信息，在实际开发中，需要展示大量数据的页面都会使用到表格组件，el-table-column和el-table组件

导航菜单组件

导航组件名为页面提供导航功能的菜单，出现在页面的顶部或者侧部，点击导航组件上不同的栏目页面就会对应跳转到指定页面。el-menu、el-submenu、el-menu-item来定义导航组件、

标签页组件

标签页组件可以用来将页面分割成几部分，单击不同标签可以实现页面内容切换。使用el-tabs来创建

抽屉组件

这是一种全局的弹窗组件，当用户打开抽屉组件的时候，能够从页面的边缘滑出一个内容面板，可以灵活定制内容面板来实现产品的需求el-drawer

布局容器组件

布局容器是用来方便快速的搭建页面基本结构的，一般网页都是由头部模块、尾部模块、侧栏模块和内容模块

el-container创建布局容器，如何内部的子元素一般是el-header、el-aside、el-main、el-footer。第一个是定义头部模块，如其名。

实战：教务系统学生列表页面

本章节的ui组件每个都有很多属性，感觉还是用的时候再来查看吧，记忆下来实属有点困难。尝试编写一个简单的学生列表页面，运用一下表格组件、容器组件和导航组件

首先考虑一下页面的布局，页面由三部分构成，顶部标题框展示当前页面的名称，左侧的侧边栏用来进行年级和班级的选择，中间的内容分为上下两部分，上面分为标题栏，用来显示一个控制哦按钮例如新增、搜索学生信息，下面为当前班级的完整的学生列表，展示的信息有名字、年龄、性别和添加信息的日期等，html的内容模板代码如下

  1. <template>
  2.   <el-container>
  3.     <el-header height="80px" style="padding: 0;">
  4.     <div>教务系统学生管理</div>
  5.   </el-header>
  6.   <el-container>
  7.   <el-aside width="200px">
  8.     <el-menu class="aside" @select="selectFunc" default-active="1" :unique-opened="true">
  9.       <el-submenu index="1">
  10.         <template #title>
  11.           <span>
  12.             七年级
  13.           </span>
  14.         </template>
  15.         <el-menu-item index="1">1班</el-menu-item>
  16.         <el-menu-item index="2">2班</el-menu-item>
  17.         <el-menu-item index="3">3班</el-menu-item>
  18.       </el-submenu>
  19.       <el-submenu index="2">
  20.         <template #title>
  21.           <span>
  22.             八年级
  23.           </span>
  24.         </template>
  25.         <el-menu-item index="4">1班</el-menu-item>
  26.         <el-menu-item index="5">2班</el-menu-item>
  27.         <el-menu-item index="6">3班</el-menu-item>
  28.       </el-submenu>
  29.       <el-submenu index="3">
  30.         <template #title>
  31.           <span>
  32.             九年级
  33.           </span>
  34.         </template>
  35.         <el-menu-item index="7">1班</el-menu-item>
  36.         <el-menu-item index="8">2班</el-menu-item>
  37.         <el-menu-item index="9">3班</el-menu-item>
  38.       </el-submenu>
  39.     </el-menu>
  40.   </el-aside>
  41.   <el-container>
  42.     <el-header height="80px" style="padding:0;margin:0">
  43.     <el-container class="subHeader">
  44.       <div class="desc">{{ desc }}</div>
  45.       <el-button style="width:100px;height:30px;margin: 20px;">新增记录</el-button>
  46.     </el-container>
  47.     </el-header>
  48.     <el-main style="margin: 0;padding:0;">
  49.     <div class="content">
  50.       <el-table :data="stus">
  51.         <el-table-column prop="name" label="姓名"></el-table-column>
  52.         <el-table-column prop="age" label="年龄"></el-table-column>
  53.         <el-table-column prop="sex" label="性别"></el-table-column>
  54.         <el-table-column prop="date" label="录入时期"></el-table-column>
  55.       </el-table>
  56.     </div>
  57.     </el-main>
  58.     <el-footer height="30px" class="footer">vue框架搭建，elementplus提供组件支持</el-footer>
  59.  
  60.   </el-container>
  61. </el-container>
  62. </el-container>
  63. </template>

CSS代码

  1. <style scoped>
  2. .header{
  3.   font-size: 30px;
  4.   line-height:80px;
  5.   background-color: #f1f1f1;
  6. }
  7. .aside{
  8.   background-color: wheat;
  9.   height: 600px;
  10. }
  11. .subHeader{
  12.   background-color: cornflowerblue;
  13. }
  14. .desc{
  15.   font-size: 25px;
  16.   line-height: 80px;
  17.   color: white;
  18.   width: 800px;
  19. }
  20. .content{
  21.   height: 410px;
  22. }
  23. .footer{
  24.   background-color: dimgray;
  25.   color: white;
  26.   font-size: 17px;
  27.   line-height: 30px;
  28. }
  29. </style>

完成js代码，提供测试数据实现菜单交互逻辑

  1. <script>
  2. export default {
  3.   name: 'HelloWorld',
  4.   props: {
  5.     msg: String
  6.   },
  7.   data() {
  8.     return {
  9.       desc: "七年级1班学生统计",
  10.       stus: [
  11.         {
  12.           name: "小王",
  13.           age: 14,
  14.           sex: "男",
  15.           date:"2020.8.15"
  16.         }, {
  17.           name: "小张",
  18.           age: 15,
  19.           sex: "男",
  20.           date:"2020.5.15"
  21.         }, {
  22.           name: "小秋",
  23.           age: 14,
  24.           sex: "女",
  25.           date:"2020.8.15"
  26.         }
  27.       ]
  28.     }
  29.   },
  30.   methods: {
  31.     selectFunc(index) {
  32.       let strs = ["七", "八", "九"]
  33.       let rank = strs[Math.floor((index - 1) / 3)]
  34.       this.desc=`${rank}年级${((index-1)%3)+1}班学生统计`
  35.     }
  36.   },
  37. }
  38. </script>

效果

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/76860
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号