Vue.js前端开发实战（第2版） 课件 第6章 常用UI组件库.pptx

第6章常用UI组件库;学习目标/Target;学习目标/Target;章节概述/Summary;目录/Contents;ElementPlus组件库;;什么是ElementPlus？;;6.1.1安装ElementPlus;在Vue3项目中安装ElementPlus;在Vue3项目中安装ElementPlus;在ui-component目录下使用yarn安装ElementPlus。;使用VSCode编辑器打开ui-component目录，在src\main.js文件中，导入并挂载ElementPlus模块。;执行命令启动服务。;;6.1.2ElementPlus中的常用组件;1.Button组件;如果需要设置plain、round或circle的属性值为true，可以写成“:属性名=true”或“属性名”的形式。以round为例，示例代码如下。;;;在浏览器中查看ElementPlus的按钮效果如下图所示。;;;在浏览器中查看ElementPlus的链接按钮和禁用按钮效果如下图所示。;6.1.2ElementPlus中的常用组件;ElementPlus组件库提供了Table组件，用于展示多条结构类似的数据，例如工资表、课程表和计划表等，可以对数据进行排序、筛选、对比或其他自???义操作。;Table组件使用el-table标签定义，在该标签中绑定data对象数组后，在el-table-column中使用prop属性对应对象中的键名，即可将数据添加到表格中；使用label属性可以定义表格的列名，使用width属性可以定义表格的宽高。

el-table标签的常用属性如下表所示。;;;在浏览器中查看ElementPlus的表格效果如下图所示。;6.1.2ElementPlus中的常用组件;大多数的网站中都涉及表单的应用，例如登录和注册页面。ElementPlus组件库提供了Form组件，该组件采用Flex布局，用于收集、验证和提交数据。基础的表单包含输入框、单选框、下拉选择、多选框等组件。;Form组件使用el-form标签定义，在该标签中使用el-form-item作为输入项的容器，用于获取值和验证值。

el-form标签的常用属性如下表所示。;;;在浏览器中查看ElementPlus的表单效果如下图所示。;表单默认为垂直表单，若想实现行内表单，可以修改步骤①的代码，为el-from标签添加inline属性，使表单元素并列显示。;6.1.2ElementPlus中的常用组件;导航栏是网页设计中不可或缺的一部分，通常应用于页面的顶部，可以帮助用户快速找到他们想要访问的内容。例如，导航栏可以实现页面之间的跳转。ElementPlus组件库提供了Menu组件，用于为网站提供导航功能。;Menu组件使用el-menu标签定义，在该标签中包含el-menu-item和sub-menu标签。菜单默认为垂直模式，通过将mode属性值设为horizontal，可以将导航菜单变更为水平模式。

el-menu标签的常用属性如下表所示。;演示顶部菜单栏效果;修改src\main.js文件，切换页面中显示的组件。;修改src\main.js文件，将导入style.css的代码进行注释，以免其影响Menu组件的样式效果。;在浏览器中查看ElementPlus顶部菜单栏效果如下图所示。;若想实现垂直菜单栏效果，可以修改上述代码，将el-menu标签中class的值改为el-menu-vertical-demo，将mode的值改为vertical。单击“我的”菜单项，会显示折叠的子菜单信息，如下图所示。;Vant组件库;;什么是Vant？;;使用npm或yarn包管理工具安装Vant。;在Vue3项目中使用yarn安装Vant;在Vue3项目中使用yarn安装Vant;在vant-component目录下使用yarn安装Vant。;使用VSCode编辑器打开vant-component目录，在src\main.js文件中，导入并挂载Vant模块。;执行命令启动服务。;;;Button组件使用van-button标签定义，van-button标签的常用属性如下表所示。;演示基础的按钮效果;修改src\main.js文件，切换页面中显示的组件。;在浏览器中查看Vant的按钮效果如下图所示。;;;在浏览器中打开开发者工具，测试在移动设备模拟环境下Vant的图标按钮效果如下图所示。;6.2.2Vant中的常用组件;;;在浏览器中查看Vant按钮尺寸和页面导航效果如下图所示。;;Vant组件库提供了Swipe组件，用于实现图片轮播效果。轮播图是页面结构中重要的组成部分，常用于网站的首页，主要用于