vue.js【常用UI组件库】

Element Plus组件库

Element Plus是基于Vue 3开发的优秀的PC端开源UI组件库，它是Element的升级版，对于习惯使用Element的人员来说，在学习Element Plus时，不用花费太多的时间。因为Vue 3不再支持IE 11，所以Element Plus也不再支持IE 11及更低的IE版本。

安装Element Plus

使用npm或yarn包管理工具安装Element Plus。

在Vue 3项目中安装Element Plus

Element Plus中的常用组件

Element Plus组件库中的组件主要包括基础组件、配置组件、表单组件、数据展示组件、导航和反馈组件以及其他组件。每个组件类别又进行了细分，例如，基础组件包含Button组件、Border组件、Container组件等；表单组件包含Form组件、Input组件等。下面对Element Plus中常用的Button组件、Table组件、Form组件和Menu组件进行讲解。

1. Button组件

Button组件使用<el-button>标签定义，<el-button>标签的常用属性如下表所示。

如果需要设置plain、round或circle的属性值为true，可以写成“:属性名="true"”或“属性名”的形式。以round为例，示例代码如下。

注意：如果需要设置plain、round或circle的属性值为false，可以写成“:属性名="false"”的形式，或直接省略这些属性。

演示基础的按钮效果

在浏览器中查看Element Plus的按钮效果如下图所示。

演示链接按钮和禁用按钮的使用

在浏览器中查看Element Plus的链接按钮和禁用按钮效果如下图所示。

2. Table组件

Element Plus组件库提供了Table组件，用于展示多条结构类似的数据，例如工资表、课程表和计划表等，可以对数据进行排序、筛选、对比或其他自定义操作。

Table组件使用<el-table>标签定义，在该标签中绑定data对象数组后，在<el-table-column>中使用prop属性对应对象中的键名，即可将数据添加到表格中；使用label属性可以定义表格的列名，使用width属性可以定义表格的宽高。

<el-table>标签的常用属性如下表所示。

属性名	描述
data	显示的数据
stripe	是否加斑马线，默认值为false
border	是否带有纵向边框，默认值为false

演示基础的表格效果

在浏览器中查看Element Plus的表格效果如下图所示。

3. Form组件

大多数的网站中都涉及表单的应用，例如登录和注册页面。Element Plus组件库提供了Form组件，该组件采用Flex布局，用于收集、验证和提交数据。基础的表单包含输入框、单选框、下拉选择、多选框等组件。

Form组件使用<el-form>标签定义，在该标签中使用<el-form-item>作为输入项的容器，用于获取值和验证值。

<el-form>标签的常用属性如下表所示。

注意：当label-position属性设置为left或right时，需要设置label-width属性，否则label-position属性不生效。

演示基础的表单效果

在浏览器中查看Element Plus的表单效果如下图所示。

表单默认为垂直表单，若想实现行内表单，可以修改步骤①的代码，为<el-from>标签添加inline属性，使表单元素并列显示。

在浏览器中查看表单内容横向排列效果如下图所示。

4. Menu组件

导航栏是网页设计中不可或缺的一部分，通常应用于页面的顶部，可以帮助用户快速找到他们想要访问的内容。例如，导航栏可以实现页面之间的跳转。Element Plus组件库提供了Menu组件，用于为网站提供导航功能。

Menu组件使用<el-menu>标签定义，在该标签中包含<el-menu-item>和<el-sub-menu>标签。菜单默认为垂直模式，通过将mode属性值设为horizontal，可以将导航菜单变更为水平模式。

<el-menu>标签的常用属性如下表所示。

演示顶部菜单栏效果

在浏览器中查看Element Plus顶部菜单栏效果如下图所示。

若想实现垂直菜单栏效果，可以修改上述代码，将<el-menu>标签中class的值改为el-menu-vertical-demo，将mode的值改为vertical。单击“我的”菜单项，会显示折叠的子菜单信息，如下图所示。

Vant组件库

安装Vant

使用npm或yarn包管理工具安装Vant。

在Vue 3项目中使用yarn安装Vant

Vant中的常用组件

Vant组件库中包含很多组件，由于篇幅有限，仅对Vant组件库中Button组件、Swipe组件、Tab组件、Form组件、Grid组件和Tabbar组件进行讲解。

1. Button组件

Button组件使用<van-button>标签定义，<van-button>标签的常用属性如下表所示。

演示基础的按钮效果

在浏览器中查看Vant的按钮效果如下图所示。

演示图标按钮的使用

在浏览器中打开开发者工具，测试在移动设备模拟环境下Vant的图标按钮效果如下图所示。

多学一招：按钮尺寸和页面导航

使用<van-button>的size属性可以设置按钮的尺寸。size取值分别为large（大型按钮）、normal（普通按钮）、small（小型按钮）和mini（迷你按钮），默认为 normal。

使用<van-button>的url属性和to属性可以实现页面导航，其中，url属性可以进行URL跳转，to属性可以进行路由跳转。

演示按钮尺寸和页面导航效果

在浏览器中查看Vant按钮尺寸和页面导航效果如下图所示。

2. Swipe组件

Vant组件库提供了Swipe组件，用于实现图片轮播效果。轮播图是页面结构中重要的组成部分，常用于网站的首页，主要用于展示页面中的活动信息，让用户不用滚动屏幕就能看到更多内容，可以最大化信息密度。

Swipe组件使用<van-swipe>标签定义，在该标签中使用<van-swipe-item>定义每一张轮播的图片。在<van-swipe>中可以使用autoplay属性设置自动轮播的间隔；当轮播中含有图片时，可以通过lazy-render属性来开启懒加载模式，从而优化网页性能。

<van-swipe>标签的常用属性如下表所示。

演示一种简单的图片轮播效果

在浏览器中查看图片的横向滚动如下图所示。

若想要图片纵向滚动，可以为<van-swipe>标签添加vertical属性，并设置滑块容器的高度，使轮播图片纵向排列。在浏览器中查看图片的纵向滚动如下图所示。

3. Tab组件

Vant组件库提供了Tab组件，用于实现标签页效果。标签页一般出现在页面的顶部或者页面中，用于在不同的内容区域之间进行切换。

Tab组件使用<van-tabs>标签定义，在该标签中使用<van-tab>定义每一个标签项。在<van-tabs>标签中可以使用v-model:active绑定当前激活标签的对应的索引值，默认情况下启用第一个标签，其索引值为0；如果<van-tab>标签中指定了name属性，则v-model:active的值为<van-tab>标签的name，此时无法通过索引值来匹配标签。

<van-tabs>标签的常用属性如下表所示。

演示一种简单的标签页效果

在浏览器中查看Vant的标签页效果如下图所示。

4. Form组件 

Vant组件库提供了Form组件，用于数据输入、校验，支持输入框、单选框、复选框等类型。

Form组件使用<van-form>标签定义，该标签需要与<van-field>标签搭配使用，用户可以在输入框内输入或编辑文字。<van-field>标签内可以通过rules属性定义校验规则，通过@submit触发单击事件。

演示一种简单的表单效果

在浏览器中查看Vant的表单效果如下图所示。

单击“提交”按钮后，会进行规则校验，如下图所示。

5. Grid组件

Vant组件库提供了Grid组件，用于实现网格效果，网格可以在水平方向上把页面分隔成等宽度的区块，一般用于同时展示多个同类项目的场景，例如微信支付页面。

Grid组件使用<van-grid>标签定义，在该标签中使用<van-grid-item>作为每一个网格元素的容器。

<van-grid-item>标签的常用属性如下表所示。

演示一种基础的网格效果

在浏览器中查看Vant的网格效果如下图所示。

若想网格的内容呈横向排列，则可以为<van-grid>标签添加direction属性，将属性值设置为horizontal，网格内容横向排列效果如下图所示。

6. Tabbar组件

Vant组件提供了Tabbar组件，用于在不同页面之间进行切换，常放置在页面的底部。

Tabbar组件使用<van-tabbar>标签定义，在该标签中使用<van-tabbar-item>定义每一个标签项。

<van-tabbar>标签的常用属性如下表所示。

演示一种基础的标签栏效果

在浏览器中查看Vant的标签栏效果如下图所示。

Ant Design Vue组件库

安装Ant Design Vue

Ant Design Vue是一个优秀的前端UI组件库，由蚂蚁金服体验技术部推出，于2018年3月正式开源，受到众多前端开发者及企业的喜爱。Ant Design Vue基于Vue实现，专门服务于企业级后台产品，支持主流浏览器和服务器端渲染。

使用npm或yarn包管理工具安装Ant Design Vue

在Vue 3项目中使用yarn安装Ant Design Vue

Ant Design Vue中的常用组件

1. Button组件

Button组件使用<a-button>标签定义，<a-button>标签的常用属性如下表所示。

演示基础的按钮效果

在浏览器中查看Ant Design Vue的按钮效果如下图所示。

2. Layout组件

大多数的后台管理系统都涉及到Layout组件的应用。

Ant Design Vue组件库提供了Layout组件，该组件采用Flex（弹性）布局，用于对页面进行整体布局。

Layout组件使用<a-layout>标签定义，其中，<a-layout-header>标签用于定义顶部布局，<a-layout-content>标签用于定义内容部分布局，<a-layout-footer>标签用于定义底部布局。

Layout组件中可以嵌套Header（顶部布局）、Sider（侧边栏）、Content（内容部分）和Footer（底部布局）。除此之外，也可以嵌套Layout本身。常见的布局方式包括上-左右-下布局、上-中-下布局、左-上-中-下布局。

下面以上-左右-下布局为例，演示其布局效果。

通过实际操作实现后台管理主页面，在这里将内容重点放在布局的实现上，不再详细介绍样式的设计，后台管理主页面效果如下图所示。

本章小结

本章对常用的UI组件库进行了详细讲解。首先讲解了Element Plus组件库的安装和常用组件的基本使用方法，包括Button组件、Table组件、Form组件和Menu组件；然后讲解了Vant组件库的安装和常用组件的基本使用方法，包括Button组件、Swipe组件、Tab组件、Form组件、Grid组件和Tabbar组件；最后讲解了Ant Design Vue组件库的安装和常用组件的基本使用方法，包括Button组件和Layout组件，并使用Layout组件实现了一个简单的后台管理系统主页面的布局。通过本章的学习，读者能够在实际开发中灵活运用UI组件库实现想要的效果。