第6章 常用UI组件库

news2024/11/17 12:48:30

一.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版本。

使用npm或yarn包管理工具安装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和微信小程序的支持。

使用npm或yarn包管理工具安装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实现，专门服务于企业级后台产品，支持主流浏览器和服务器端渲染。

               使用npm或yarn包管理工具安装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.coloradmin.cn/o/2162687.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CC面试准备

CC面试准备

半导体基础 半导体是介于导体和绝缘体之间的一种介质&#xff0c;在不同条件下表现出不同的导电性或者不导电特性&#xff0c; 电子半导体器件材料大部分为硅&#xff0c;锗等元素 本征半导体&#xff1a;完全不含杂质的纯净半导体&#xff0c;因为不含杂质&#xff0c;其中…
阅读更多...
[笔记]一组电缆、定位相关产品的技术参数

[笔记]一组电缆、定位相关产品的技术参数

csdn不允许做广告&#xff0c;这里的那家定位供应商的技术看起来是可以的。很有希望。它的原理并不复杂&#xff0c;这家企业在处理业务领域以外的新型产品时&#xff0c;是查过资料的&#xff0c;这就超过了60%的同行。 1.电缆 仅给出现在市面供应的铠装电缆结构&#xff0c…
阅读更多...
七层负载均衡和四层负载均衡的区别

七层负载均衡和四层负载均衡的区别

文章目录 什么是七层负载均衡&#xff1f;一、定义与工作原理二、优点与缺点三、应用场景四、常见七层负载均衡器五、负载均衡算法 什么是四层负载均衡&#xff1f;一、定义与原理定义&#xff1a;原理&#xff1a; 二、特点与应用场景特点&#xff1a;应用场景&#xff1a; 三…
阅读更多...
STM32基础学习笔记-ADC面试基础题6

STM32基础学习笔记-ADC面试基础题6

第六章、ADC 常见问题 1、基本概念&#xff1a;什么是ADC &#xff1f;作用 &#xff1f;逐次逼近型 2、传感器本质 &#xff1f;传感器、电压、ADC数值转化 &#xff1f; 3、ADC的特征 &#xff1f; 转化时间、分辨率、精度、量化误差 &#xff1f; 4、ADC框图组成部分 &…
阅读更多...
华为云发布全栈可观测平台AOM，以AI赋能应用运维可观测

华为云发布全栈可观测平台AOM，以AI赋能应用运维可观测

9月19日&#xff0c;华为全联接大会2024举办期间&#xff0c;在“AI赋能应用现代化&#xff0c;加速软件生产力跃升”为主题的论坛上&#xff0c;华为云发布全栈可观测平台AOM&#xff0c;以AI赋能应用运维可观测&#xff0c;提升企业应用可用性与稳定性。 该平台发布标志着华…
阅读更多...
针对国产化--离线安装Nginx rpm包下载 ARM64(.aarch64.rpm) 版本下载

针对国产化--离线安装Nginx rpm包下载 ARM64(.aarch64.rpm) 版本下载

源地址&#xff1a;https://nginx.org/packages/centos/7/aarch64/RPMS/ 可以选择系统分别进行下载对应的rmp包
阅读更多...
公安局软件管理平台建设方案和必要性，论文-2-———未来之窗行业应用跨平台架构

公安局软件管理平台建设方案和必要性，论文-2-———未来之窗行业应用跨平台架构

一、平台方略 随着gov信息化建设的不断推进&#xff0c;各类ZW软件的应用需求日益增加。为了提高ZW软件的获取便利性、AQ性和规范性&#xff0c;建设一个专门的GOV软件管理平台具有重要意义。 集中提供各类ZW软件&#xff0c;方便工作人员快速获取和安装&#xff0c;减少因软…
阅读更多...
基于DAMODEL——Faster-RCNN 训练与测试指南

基于DAMODEL——Faster-RCNN 训练与测试指南

Faster-RCNN 训练与测试指南 前言 今天我们要来实现一个经典的目标检测模型&#xff1a;Faster-Rcnn。我们使用DAMODEL云平台来实现&#xff0c;这是个很强大的云端平台&#xff0c;功能众多&#xff0c;你可以投你所好去进行你想做的事情。 1. 环境与工具准备 1.1 远程连接…
阅读更多...
经颅磁刺激技术，脑科学研究——精神患者治疗方案

经颅磁刺激技术，脑科学研究——精神患者治疗方案

经颅磁刺激&#xff08;Transcranial Magnetic Stimulation &#xff0c;TMS&#xff09;技术是一种利用脉冲磁场作用于中枢神经系统&#xff08;主要是大脑&#xff09;&#xff0c;改变皮层神经细胞的膜电位&#xff0c;使之产生感应电流&#xff0c;影响脑内代谢和神经电活动…
阅读更多...
开放原子开源基金会OPENATOM

开放原子开源基金会OPENATOM

AtomGit_开放原子开源基金会代码托管平台-AtomGit 开放原子开源基金会是致力于推动全球开源事业发展的非营利机构&#xff0c;于 2020 年 6 月在北京成立&#xff0c;由阿里巴巴、百度、华为、浪潮、360、腾讯、招商银行等多家龙头科技企业联合发起。 精选项目&#xff1a; 比…
阅读更多...
HDFS_API文件和文件夹

HDFS_API文件和文件夹

代码&#xff1a; Beforepublic void init() throws URISyntaxException, IOException {URI uri new URI("hdfs://master:9000");// 创建一个配置文件Configuration entries new Configuration();// 获取到了客户端对象 // entries.set("dfs.replicat…
阅读更多...
【C++笔试强训】

【C++笔试强训】

​ 学习编程就得循环渐进&#xff0c;扎实基础&#xff0c;勿在浮沙筑高台 循环渐进Forward-CSDN博客 目录 循环渐进Forward-CSDN博客 第一题&#xff1a;除2&#xff01; 第二题&#xff1a;dd爱框框 第三题&#xff1a;简写单词 第一题&#xff1a;除2&#xff01; 牛客网…
阅读更多...
Uniapp 打包后的横屏控制

Uniapp 打包后的横屏控制

文章目录 问题处理参考 问题 Uniapp 打包后的横竖屏跟开发模式不太一样&#xff0c;需要在代码里设置一下 处理 需要改两个地方 pages.json&#xff1a;在 globalStyle 中添加 "pageOrientation": "auto", manifest.json&#xff1a;在第一层后面添加…
阅读更多...
每日学习一个数据结构-哈希表(散列表)

每日学习一个数据结构-哈希表(散列表)

文章目录 示意图一、基本概念二、工作原理三、常用哈希函数四、冲突解决方法五、优缺点六、应用场景 哈希表&#xff08;Hash table&#xff09;&#xff0c;也被称为散列表&#xff0c;是一种基于哈希函数的数据结构&#xff0c;它通过把关键码值&#xff08;Key value&#x…
阅读更多...
毛竹泛基因组-文献精读52

毛竹泛基因组-文献精读52

Haplotype-based pangenomes reveal genetic variations and climate adaptations in moso bamboo populations 基于单倍型的泛基因组揭示了毛竹种群中的遗传变异和气候适应性 摘要 毛竹&#xff08;Phyllostachys edulis&#xff09;是东亚地区一种在生态和经济上都具有重要…
阅读更多...
二刷LeetCode：“51.N皇后 37.解数独”题解心得（简单易懂）

二刷LeetCode：“51.N皇后 37.解数独”题解心得（简单易懂）

引言&#xff08;初遇噩梦&#xff0c;再遇坦然&#xff09; 在阅读本文之前&#xff0c;建议大家已经接触过回溯算法&#xff0c;并完成回溯相关题目&#xff0c;例如&#xff1a;子集问题、组合问题、排列问题。 子集&#xff1a;子集II、子集 组合&#xff1a;组合、组合总和…
阅读更多...
[spring]用MyBatis XML操作数据库 其他查询操作 数据库连接池 mysql企业开发规范

[spring]用MyBatis XML操作数据库 其他查询操作 数据库连接池 mysql企业开发规范

文章目录 一. MyBatis XML配置文件1. 配置链接字符串和MyBatis2. 写持久层代码方法定义Interface方法实现xml测试 3. 增删改查增:删改查 二. 开发规范(mysql)三. 其他查询操作1. 多表查询2. #{} 和 ${}(面试题)使用区别 排序功能like查询 三. 数据库连接池 一. MyBatis XML配置…
阅读更多...
【华为】用策略路由解决双出口运营商问题

【华为】用策略路由解决双出口运营商问题

需求描述 不同网段访问互联网资源时&#xff0c;走不同的出口&#xff0c;即PC1走电信出口&#xff0c;PC2走移动出口。 客户在内网接口下应用策略路由后往往出现无法访问内网管理地址的现象&#xff0c;该举例给出解决办法。 拓扑图 基础配置 #sysname R1 # # interface G…
阅读更多...
【hot100-java】【下一个排列】

【hot100-java】【下一个排列】

R8-技巧篇 最近速成java中&#xff0c;算法基础需要兼顾。 class Solution {public void nextPermutation(int[] nums) {int lennums.length;List<Integer>list new ArrayList<>();boolean flagtrue;for (int ilen-1;i>0;i--){list.add(nums[i]);Collections.…
阅读更多...
若依生成主子表

若依生成主子表

一、准备工作 确保你已经部署了若依框架&#xff0c;并且熟悉基本的开发环境配置。同时&#xff0c;理解数据库表结构对于生成代码至关重要。 主子表代码结构如下&#xff08;字表中要有一个对应主表ID的字段作为外键&#xff0c;如下图的customer_id&#xff09; -- ------…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023