做网站会出现哪些问题,滕州做网站比较好的网络公司,私密浏览器免费版在线看视频,做漂亮的网站Element Plus组件库
Element Plus是基于Vue 3开发的优秀的PC端开源UI组件库#xff0c;它是Element的升级版#xff0c;对于习惯使用Element的人员来说#xff0c;在学习Element Plus时#xff0c;不用花费太多的时间。因为Vue 3不再支持IE 11#xff0c;所以Element Plu…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组件库实现想要的效果。
