第6章 常用UI组件库

一.Element Plus组件库

1. 安装Element Plus

什么是Element Plus?

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

使用npmyarn包管理工具安装Element Plus。

在Vue 3项目中安装Element Plus

步骤一:

步骤一:

步骤二:

步骤三:

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

步骤四:

执行命令启动服务

项目启动后,会默认开启一个本地服务,地址为http://127.0.0.1:5173/。

2. Element Plus中的常用组件

1. Button组件

演示基础的按钮效果

步骤一:创建src\components\Button.vue文件。

<template><el-row class="mb-4"><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></el-row><!-- 此处省略了两个<el-row></el-row> -->
</template>

步骤二:修改src\main.js文件,切换页面中显示的组件,具体代码如下。

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

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

步骤二:

创建src\components\Button2.vue文件。

<template><el-row class="mb-4"><el-button link>Round</el-button><el-button type="primary" link :disabled="false">Primary</el-button><el-button type="success" link :disabled="true">Success</el-button><el-button type="info" link>Info</el-button><el-button type="warning" link>Warning</el-button><el-button type="danger" link>Danger</el-button></el-row>
</template>

步骤二:

修改src\main.js文件,切换页面中显示的组件

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

2. Table组件

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

演示基础的表格效果

步骤一:

创建src\components\Table.vue文件。

<template><el-table :data="tableData" stripe border style="width: 100%"><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="姓名" width="180" /><el-table-column prop="address" label="住址" width="300" /></el-table>
</template>
<script setup>
const tableData = [{ date: '2023-02-03', name: '王五', address: '北京市海淀区' },// 此处省略了3行数据]
</script>

步骤二:

修改src\main.js文件,切换页面中显示的组件

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

3. Form组件

演示基础的表单效果

步骤一:

创建src\components\Form.vue文件,在Element Plus官方文档中找到Form组件的相关代码,复制部分核心代码到当前文件中。

<template><el-form :model="form" label-width="80px" label-position="left"><el-form-item label="用户名:"><el-input v-model="form.name" /></el-form-item><!-- 此处省略了两个<el-form-item></el-form-item> -->
</template>
<script setup>
import { reactive } from 'vue'
const form = reactive({ pass:'', name: '' })
</script>

步骤二:

修改src\main.js文件,切换页面中显示的组件

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

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

4. Menu组件

演示顶部菜单栏效果

步骤一:

创建src\components\Menu.vue文件。

<template><el-menu class="el-menu-demo" mode="horizontal"><el-menu-item index="1">首页</el-menu-item><el-sub-menu index="2"><!-- 此处省略了部分代码 --> </el-sub-menu><el-menu-item index="3" disabled>信息</el-menu-item><el-menu-item index="4">联系</el-menu-item></el-menu>
</template>
<script setup>
import { ref } from 'vue'
const activeIndex = ref('1')
</script>

步骤二:

修改src\main.js文件,切换页面中显示的组件

步骤三:

修改src\main.js文件,将导入style.css的代码进行注释,以免其影响Menu组件的样式效果。

// import './style.css'

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

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

二.Vant组件库

1. 安装Vant

什么是Vant?

           Vant是一个轻量级的、可靠的移动端组件库,于2017年开源。目前Vant官方提供了对Vue 2、Vue 3和微信小程序的支持。

使用npmyarn包管理工具安装Vant

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

步骤一:

            打开命令提示符,切换到D:\vue\chapter06目录,使用yarn创建一个名称为vant-component的项目。

在命令提示符中,切换到vant-component目录,为项目安装所有依赖

步骤二:

在vant-component目录下使用yarn安装Vant

步骤三:

使用VS Code编辑器打开vant-component目录,在src\main.js文件中,导入并挂载Vant模块

import { createApp } from 'vue'
import './style.css'
import Vant from 'vant'
import 'vant/lib/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(Vant)
app.mount('#app')

步骤四:

执行命令启动服务

yarn dev

项目启动后,会默认开启一个本地服务,地址为http://127.0.0.1:5173/。

2 .Vant中的常用组件

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

1. Button组件

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

演示基础的按钮效果

步骤一:

创建src\components\Button.vue文件。

<template><van-button type="primary">主要按钮</van-button><van-button type="success" round>成功按钮</van-button><van-button type="default" disabled>默认按钮</van-button><van-button type="warning" block>警告按钮</van-button><van-button type="danger" plain hairline>危险按钮</van-button><van-button type="danger" loading loading-type="spinner" loading-text="加载中..." />
</template>
<style scoped>button{ margin: 3px; }
</style>

步骤二:

修改src\main.js文件,切换页面中显示的组件

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

演示图标按钮的使用

步骤一:

创建src\components\Button2.vue文件。

<template><van-button icon="circle" type="primary">基础图标</van-button><van-button icon="like" type="primary">实底风格</van-button><van-button icon="phone-o" type="primary">线框风格</van-button><van-button :icon="icon">按钮</van-button>
</template>
<script setup>
import icon from '../assets/user-active.png'
</script>
<style>
.van-button { margin: 5px 1px !important; }
</style>

步骤二:

修改src\main.js文件,切换页面中显示的组件

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

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

步骤一:

创建src\components\Button3.vue文件。

<template><van-button type="primary" size="large">大型按钮</van-button><van-button type="primary" size="normal">普通按钮</van-button><van-button type="primary" size="small">小型按钮</van-button><van-button type="primary" size="mini">迷你按钮</van-button><van-button type="primary" url="/test.html">URL跳转</van-button><van-button type="primary" to="目标地址">路由跳转</van-button>
</template>
<style>
.van-button { margin: 5px 1px !important; }
</style>

步骤二:

修改src\main.js文件,切换页面中显示的组件

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

2. Swipe组件

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

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

步骤一:

创建src\components\Swipe.vue文件,在Vant官方文档中找到Swipe组件相关代码,复制部分核心代码到当前文件中。

<template><van-swipe :autoplay="3000" lazy-render style="width:300px;"><van-swipe-item v-for="image in images" :key="image"><img :src="image" /></van-swipe-item></van-swipe>
</template>
<script setup>
const images = [ '/images/01.jpg', '/images/02.jpg', '/images/03.jpg', '/images/04.jpg']
</script>

步骤二:

修改src\main.js文件,切换页面中显示的组件

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

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

3. Tab组件

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

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

步骤一:

创建src\components\Tab.vue文件。

<template><div style="width: 350x; text-align: center;"><van-tabs v-model:active="active" swipeable type="card"><van-tab title="我是标签1的内容">内容 1</van-tab><!-- 此处省略3个<van-tab></<van-tab>标签 --></div>
</template>
<script setup>
import { ref } from 'vue'
const active = ref(0)
</script>

步骤二:

修改src\main.js文件,切换页面中显示的组件

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

4. Form组件

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

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

演示一种简单的表单效果

步骤一:

             创建src\components\Form.vue文件,在Vant官方文档中找到Form组件相关代码,复制部分核心代码到当前组件中。

<template><van-nav-bar title="登录组件" /><van-form @submit="onSubmit"><van-cell-group inset><van-field v-model="username" :rules="[{  }]" /><van-field v-model="password" :rules="[{  }]" /></van-cell-group><van-button block type="primary" native-type="submit">提交</van-button></van-form>
</template>

步骤二:

修改src\main.js文件,切换页面中显示的组件

步骤三:

修改src\main.js文件,对导入style.css文件的代码进行注释

// import './style.css'

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

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

5. Grid组件

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

演示一种基础的网格效果

步骤一:

           创建src\components\Grid.vue文件,在Vant官方文档中找到Grid组件相关代码,复制部分核心代码到当前文件中。

<template><van-grid><van-grid-item icon="wap-home-o" text="首页" dot /><van-grid-item icon="chat-o" text="聊天" badge="99+" /> <van-grid-item icon="phone-o" text="电话" /><van-grid-item icon="user-o" text="我的" /></van-grid><!--  见下一页 -->
</template>

               实现一行中平均显示3列图片,图片素材从配套源代码中获取。

<van-grid :column-num="3" square :gutter="5"><van-grid-item icon="more-o" text="文字"><van-image src=" /images/01.jpg" /></van-grid-item><van-grid-item icon="more-o" text="文字"><van-image src=" /images/02.jpg" /></van-grid-item><van-grid-item icon="more-o" text="文字"><van-image src=" /images/03.jpg" /></van-grid-item>
</van-grid>

                   修改src\main.js文件,切换页面中显示的组件

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

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

6. Tabbar组件

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

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

步骤一:

                创建src\components\Tabbar.vue文件,在Vant官方文档中找到Tabbar组件相关代码,复制部分核心代码到当前文件中。

<template><van-tabbar v-model="active" fixed active-color="red" inactive-color="blue" :placeholder="true"><van-tabbar-item icon="home-o">标签</van-tabbar-item><!-- 此处省略了3个 <van-tabbar-item>标签 --></van-tabbar>
</template>
<script setup>
import { ref } from 'vue'
const active = ref(2)
</script>

步骤二:

修改src\main.js文件,切换页面中显示的组件

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

三.Ant Design Vue组件库

1 .安装Ant Design Vue

        什么是Ant Design Vue?

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

               使用npmyarn包管理工具安装Ant Design Vue。

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

步骤一:

              打开命令提示符,切换到D:\vue\chapter06目录,使用yarn创建一个名称为ant-component的项目。

                   在命令提示符中,切换到ant-component目录,为项目安装所有依赖。

cd ant-component
yarn

                    在ant-component目录下使用yarn安装Ant Design Vue

步骤三:

                    使用VS Code编辑器打开vant-component目录,在src\main.js文件中,导入并挂载Ant Design Vue模块。

import { createApp } from 'vue'
import './style.css'
import AntDesignVue from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import App from './App.vue'
const app = createApp(App)
app.use(AntDesignVue)
app.mount('#app')

步骤四:

2 .Ant Design Vue中的常用组件

1. Button组件

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

<template><div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }"><a-button type="primary" size="large">主按钮</a-button><!-- 此处省略了8个<a-button></a-button>标签 --><a-button type="primary"><template #icon><SearchOutlined /></template>搜索</a-button></div>
</template>

步骤二:

2. Layout组件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1544855.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

如何使用ssm实现基于Java的超市管理系统

TOC ssm681基于Java的超市管理系统jsp 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进行科学化&#xff0c;规范化…

BUUCTF [SCTF2019]电单车详解两种方法(python实现绝对原创)

使用audacity打开&#xff0c;发现是一段PT2242 信号 PT2242信号 有长有短&#xff0c;短的为0&#xff0c;长的为1化出来 这应该是截获电动车钥匙发射出的锁车信号 0 01110100101010100110 0010 0前四位为同步码0 。。。中间这20位为01110100101010100110为地址码0010为功…

macOS设置 Redis自启动

macOS自定义开机启动程序 1、打开 自动操作app里面的应用程序 过程资料 1、https://juejin.cn/post/7123098435254747149 2、https://blog.twofei.com/889/ 2、编写脚本&#xff0c;可以点击右上角运行测试&#xff0c;保存为 app https://juejin.cn/post/7123098435254747149…

全能的Office插件——不坑盒子 2024.0923发布,云同步配置、合并单元格复制、PPT样机展示……

昨天凌晨&#xff0c;不坑盒子上线了2024.0923版本&#xff0c;这次更新的功能比较多&#xff0c;亮点较多&#xff0c;有必要发文推荐给大家&#xff01; 向新人介绍 不坑盒子是一款全能的Office插件&#xff0c;支持微软Office和WPS Office的办公三件套&#xff08;Word、E…

众数信科 AI智能体政务服务解决方案——AI法律助手

政务服务解决方案 AI法律助手 一款基于AI大模型的智能鼠标 搭裁“寻知AI法律助手” 众数信科AI智能体 产品亮点 能够结合全国各地案例数据 为用户提供法律咨询、文书生成、案例研判 类案推荐、法规检索等法律服务 同时结合Al office插件 具备AI智能办公、PPT生成等功能 …

《动手学深度学习》笔记1.7——模型选择 + 过拟合-欠拟合

目录 1. 模型选择 1.1 训练误差 vs. 泛化误差 1.2 验证数据集 vs. 测试数据集 1.3 K-折交叉验证 1.4 总结 2. 过拟合与欠拟合&#xff08;核心知识&#xff09; 2.1 过拟合 vs. 欠拟合 2.2 模型容量 2.3 估计模型容量 2.4 VC维 衡量模型容量 2.5 数据复杂度 3. 代…

nginx如何拦截未经授权的跳转

nginx如何拦截未经授权的跳转 背景准备好一个网站准备好引用网站配置nginx拦截效果 背景 在现实工作中往往有一些企业或人未取得授权但是转载或挂载我们的网址。那么有些要求严格或者有其他原因的情况下不希望这些链接正常访问。所以就有了这样的需求。前提是咱们的网站什么的是…

linux网络编程7

24.9.24学习目录 一.网络通信过程&#xff08;续&#xff09;1.路由器 二.原始套接字&#xff08;SOCK_RAW&#xff09;1.创建原始套接字2.数据包解析 一.网络通信过程&#xff08;续&#xff09; 1.路由器 路由器是用于连接多个逻辑上分开的网络&#xff1b; 具有判断网络地…

谷歌收录查询工具,有哪些常见的可以查询谷歌收录情况的工具

在SEO&#xff08;搜索引擎优化&#xff09;领域中&#xff0c;了解网站在谷歌搜索引擎中的收录情况是至关重要的。这有助于网站所有者评估网站的可见性和优化效果。以下是一些常见的、可用于查询谷歌收录情况的工具&#xff0c;它们各自具有独特的功能和优势。 1.GoogleSe…

Vue2是什么?有什么用?超详细+通俗易懂版!

Vue2是一种流行的JavaScript前端框架&#xff0c;由尤雨溪&#xff08;Evan You&#xff09;开发&#xff0c;并于2014年首次发布。它旨在使用户能够更轻松地构建用户界面&#xff0c;具有一系列显著的特点和优势&#xff0c;使其成为前端开发领域的重要工具。 Vue2的主要特点包…

VMWare虚拟机键盘卡顿

文章目录 环境问题解决办法参考 环境 Windows 11 家庭中文版VMware Workstation 17 ProUbuntu 24.04.1 问题 最近新入手了一台电脑台式机&#xff0c;型号是联想拯救者刃7000K&#xff0c;自带Win11家庭版。主机的CPU是第14代英特尔酷睿i9处理器&#xff0c;异构24核32线程。…

​无文字高德电子地图分享

如果你有对高德的电子地图进行过自定义加载&#xff0c;你应该知道高德的电子地图是有带文字标注的&#xff0c;这里为你分享无文字版高德电子地图。 普通电子地图 打开下面的网址进入水经微图&#xff08;简称“微图”&#xff09;网页版。 https://map.wemapgis.com 点击…

力扣题解2207

大家好&#xff0c;欢迎来到无限大的频道。 今日继续给大家带来力扣题解。 题目描述&#xff08;中等&#xff09;​&#xff1a; 字符串中最多数目的子序列 给你一个下标从 0 开始的字符串 text 和另一个下标从 0 开始且长度为 2 的字符串 pattern &#xff0c;两者都只包…

DataWhale X 南瓜书学习笔记 task03笔记

对数几率回归 使用场景&#xff1a;分类任务。根据广义线性模型&#xff0c;分类任务构建模型的基本思想&#xff1a;找到一个单调可微函数将分类任务的真实标记&#xff08;值&#xff09;与线性回归模型的预测值联系起来。 对数几率回归的引入 二分类任务 输出标记&#…

windows下成功运行MicroRTS-Py项目

1.microRTS&#xff08;java&#xff09; microRTS是java写的跨平台的小型即时战略模拟器。 Farama-Foundation/MicroRTS: A simple and highly efficient RTS-game-inspired environment for reinforcement learning (github.com)https://github.com/Farama-Foundation/Micr…

828华为云征文|华为云Flexus X实例:极速搭建个人代码仓库GitLab平台

目录 前言 一、Flexus云服务器X介绍 1.1 Flexus云服务器X实例简介 1.2 Flexus云服务器X实例特点 1.3 Flexus云服务器X实例使用场景 二、Flexus云服务器X购买 2.1 Flexus X实例购买 2.2 重置密码 2.3 登录服务器 三、Flexus X 实例安装GitLab 3.1 GitLab镜像下载 3.2 GitLab部署…

Arthas mbean(查看 Mbean 的信息)

文章目录 二、命令列表2.1 jvm相关命令2.1.10 mbean&#xff08;查看 Mbean 的信息&#xff09;举例1&#xff1a;列出所有 Mbean 的名称&#xff1a;举例2&#xff1a;查看 Mbean 的元信息&#xff1a;举例3&#xff1a;查看 mbean 属性信息&#xff1a;举例4&#xff1a;mbea…

游戏化在电子课程中的作用:提高参与度和学习成果

游戏化&#xff0c;即游戏设计元素在非游戏环境中的应用&#xff0c;已成为电子学习领域的强大工具。通过将积分、徽章、排行榜和挑战等游戏机制整合到教育内容中&#xff0c;电子课程可以变得更具吸引力、激励性和有效性。以下是游戏化如何在转变电子学习中发挥重要作用&#…

基于Vue3组件封装的技巧分享

本文在Vue3的基础上针对一些常见UI组件库组件进行二次封装&#xff0c;旨在追求更好的个性化&#xff0c;更灵活的拓展&#xff0c;提供一些个人的思路见解&#xff0c;如有不妥之处&#xff0c;敬请指出。核心知识点$attrs,$slots 需求 需求背景 日常开发中&#xff0c;我们经…

【React】(推荐项目)使用 React、Socket.io、Nodejs、Redux-Toolkit、MongoDB 构建聊天应用程序 (2024)

使用 React、Socket.io、Nodejs、Redux-Toolkit、MongoDB 构建聊天应用程序 (2024) 学习使用 React、Socket.io、Node.js、Redux-Toolkit 和 MongoDB 构建响应式实时消息聊天应用程序。这个项目涵盖了从设置到实施的所有内容&#xff0c;提供了宝贵的见解和实用技能。无论您是…