- 博客(425)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 Vue2 之 el-table 实现表格第一列默认显示序号当鼠标移动上去时切换为复选框，并且可以进行选中与反选操作
【代码】Vue2 之 el-table 表格第一列序号与复选框hover切换。
2024-05-12 21:20:34
54
原创 在vue3中，如何优雅的使用echarts之实现大屏项目
这里我们可以新建一个 useScalePage hooks，目的在于随着浏览器视口的变化是，大屏能够随之跟着变化，但是为了限制用户在一定时间内去频繁的改变浏览器视口，因此这里我们可以利用lodash的throttle节流阀进行限制。在大屏中，如果每个图表都去单独写 init 以及进行resize监听机会显得很麻烦，这里我们可以将这些重复的步骤封装成一个hooks，这样在使用的时候就可以统一的进行初始化和进行resize监听。Gasp：是一个 JavaScript动画库,1920*1080px 设计稿尺寸。
2024-05-12 21:11:34
210
原创 vue3中如何更优雅的使用echarts?
将 ECharts 的配置通过 Vue 的 provide/provide API 全局挂载，使得在整个 Vue 应用中都能够方便地使用相同的 ECharts 实例。将 ECharts 的配置封装到插件中，使得项目中的 ECharts 相关配置和代码能够按功能模块进行组织和管理。通过将 ECharts 配置封装到插件中，并通过 provide/provide API 进行全局挂载，可以在 Vue 应用的任意组件中直接使用。将 ECharts 相关配置封装到插件中，可以在不同的组件中复用相同的配置。
2024-05-10 10:49:43
120
原创 vue2结合element-ui实现TreeSelect 树选择功能
利用element-ui组件库中的 el-select 组件 和 el-tree 组件 进行嵌套，从而实现 element-plus组件库 中的 el-tree-select组件 的效果
2024-05-07 18:07:24
233
2
原创 从零开始教你如何完成一个基于Vite+Vue3+TS的后台管理系统
基于Vue3+Vite+TS的后台管理项目，从零开始手把手教你如何实现
2023-02-06 18:27:44
2958
11
原创 react实现评论列表案例
在学习了 react 的 JSX 语法以及 类组件 后，实现的一个 评论列表案例。主要包括：发表评论、删除评论以及清空评论
2022-06-04 16:00:43
761
原创 仿百度自动补全案例
在日常生活中我们通过百度搜索相关内容时，会发现如下这样一个很有趣的现象：那么对于这一部分具体是怎么实现的呢？那么接下来我们就来实现一个和它差不多的效果把这里主要就用到了表单事件里的 获焦事件(onfocus)、失焦事件(onblur)、以及文本框内容发生改变时的事件(oninput )第一步我们要做的就是先有一个输入框，并且还需要有一个 ul 列表框用来盛放当我们在输入框里输入值时的一些智能提示内容，只不过在最开始的时候我们需要将 ul 列表框隐藏起来，大致如下所示：.
2022-05-18 11:14:32
198
原创 网格布局--grid
CSS网格是一个用于web二维的布局系统。利用网格，可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。
2022-04-17 12:44:43
1097
原创 flex布局仿知乎导航
这里主要就是综合利用flex布局来进行开发的这里主要分为了四个区域，分别是logo区域、导航区域、搜索区域、登录区域为了能够实现可以随着屏幕的缩放导航可以进行自动收缩，这里用到了 min-width以及max-width对于头部的整个区域我们采用flex布局，这样就可以让四个区域都在同一水平显示，并且设置子项垂直居中：.header-wrapper { margin: 0 auto; height: 52px; min-width: 10
2022-04-13 23:42:40
1124
原创 clip-path 实现文字聚光灯效果
效果图：clip-path 简介：概念：使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。语法：/* Keyword values */clip-path: none;/* <clip-source> values */clip-path: url(resources.svg#c1);/* <geometry-box> values */clip-path: margin-box;clip-path: border-b.
2022-04-05 11:28:53
407
原创 炫彩流光按钮
做这个的话主要就是利用了基础的html css以及css3的渐变背景以及关键帧动画基本结构如下： <a href="" class="btn">button</a>基本样式如下：* { margin: 0; padding: 0;}a { text-decoration: none; color: #fff;}body { height: 100vh; display: flex; /*
2022-04-05 10:54:58
558
原创 3D立体相册
这个主要就是利用 CSS3 的 transform 属性来做的这里先定义一个父级容器以及6个子元素作为6个面 <div class="container"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div cla...
2022-04-04 17:50:40
342
原创 DNA旋转特效
var()函数在开始这个案例之前先做一下铺垫吧算是用过 less 或者 sass 的人都知道，在这两个预编译里是可以定义变量、函数、混合等，css呢，在后面也推出了var()函数，官网的解释如下：具体语法如下：var( <custom-property-name> , <declaration-value> )第一个参数是要替换的自定义属性的名称（必须）第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值（可选）..
2022-04-04 15:18:57
433
原创 气泡浮动背景特效
首先，定义一个最外层的容器，以及10个气泡标签，结构大致如下： <div class="container"> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div&...
2022-04-04 14:28:32
1278
2
原创 仿小米下拉导航
对于这一部分大致分为三个区域：左侧的logo区域、导航区域、右侧的搜索区域左侧的 logo 区域就是两张图片左侧的导航区域主要用ul li实现，这里需要注意的是第一个li里放的是一张动图右侧的搜索区域就是一个input标签以及button按钮，还有就是模拟当鼠标点击到搜索框后会弹出一个搜索历史其基本机构如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...
2022-04-03 23:42:55
909
原创 利用定位实现仿小米导航
通过分析不难发现该导航主要分为两部分：左侧导航、右侧导航这里主要就是利用 ul li来实现左侧导航左浮动、右侧导航右浮动导航里面的 li 左浮动再将二维码以及购物车提示框直接写在相应的li的下面，然后利用子绝父相的原理，通过定位来实现当鼠标移动到li上时，就显示出来，反之隐藏对于二维码这一部分我们给了一个明确的宽度和高度，当将二维码以及对应的说明文字都放入该框之后，我们将其高度改为0，这样也就相当于隐藏了，当鼠标移动到 “下载APP”对应的li上时再将其高度设为原来的高度，这...
2022-04-03 22:08:54
445
原创 垂直导航栏
垂直导航栏这一类导航栏在很多网站上都是很常见的，比如京东因此可以说是一个前端人员必须要会的吧在这里目前给出了两种方式去实现：第一种就是利用html+css实现，这里模仿的是小米官网的垂直导航、第二种方式就是利用html+css+js实现不管是第一种还是第二种主要都是利用定位来实现的先来看第一种吧先准备相关素材以及一些基础的css样式类，素材这里省略，基础的样式类如下：* { margin: 0; padding: 0;}ul,li { list-s
2022-04-02 23:29:16
5630
原创 赛比朋克效果按钮
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...
2022-04-01 19:25:08
441
原创 充电水滴效果
对于这个的实现主要采用了 html css css3，进行设计的其大致布局结构如下：这里总共有五个div构成，最外层的容器、3个水滴、最底部的一个圆圈容器用于显示数据以及显示文本的span结构： <div class="container"> <!-- 三个水滴 --> <div class="droplet"></div> <div class="droplet">...
2022-04-01 10:54:24
391
原创 响应式卡片悬停效果
效果如下：首先要做的就是先考虑清楚布局效果，这里采用上下布局，上面是图片，下面则是图片的一些说明性文本考虑到复用性这里主要利用ul li 进行布局大致的布局如下： <ul> <li> <div class="container"> <div class="img"> <.
2022-03-31 13:43:09
1220
原创 vue--ssr
目录一、 什么是服务器端渲染？1.1 初始化项目1.2 服务端渲染小案例1.3 右键查看源代码二、什么是客户端渲染？2.1 初始化项目2.2 查看源代码三、客户端渲染vs服务端渲染3.1 运行架构对比3.2 开发模式对比四、vue框架中的服务端渲染4.1 初始化项目4.2 vue服务端渲染最小demo4.3 遗留问题五、理解同构理念六、Nuxt.js框架使用6.1. 使用nuxt.js创建一个ssr项目6.2 启动项目6.3 查看源
2022-01-26 12:47:36
9174
1
原创 vue--组件开发
目录一、button 组件开发1.1 整体目标1.2 确定组件API1.3 编写测试基础Button1.4 完成type配置1.5 完成size配置1.6 完成事件绑定1.7 总结二、Editor编辑器组件开发2.1 确定基础API2.2 编写测试基础Editor2.3 完成v-model双向绑定2.4 总结一、button 组件开发1.1 整体目标了解组件开发的整体流程 掌握组件事件和标签事件的区别 掌握在组件上使用v-...
2022-01-25 14:44:02
2754
原创 vue--原理
一、数据响应式1.1 响应式是什么一旦数据发生变化，我们可以立刻知道，并且做一些你想完成的事情，这些事情包括但不限于以下：发送一个网络请求 打印一段文字 操作一个dom ....1.2 如何实现数据响应式在Javascript里实现数据响应式一般有俩种方案，分别对应着vue2.x 和 vue3.x使用的方式，他们分别是： 对象属性拦截 (vue2.x) Object.defineProperty 对象整体代理 (vue3.x) Proxy 1.
2022-01-23 18:05:22
830
1
原创 软件测试入门
一、软件测试的概念与过程1.1 软件的概念与分类软件：是计算机系统中与硬件相互依存的一部分，包括程序、数据以及与其相关文档的完整集合程序是按事先设计的功能和性能要求执行的指令序列 数据是使程序能正常操作信息的数据结构 文档是与程序开发、维护和使用有关的图文材料1.2 软件的分类按重要性：系统软件 支持软件 应用软件按架构：单机版软件 分布式软件：C/S 架构、B/S 架构二、软件测试的原则与测试工程师的要求.
2022-01-18 09:52:45
1547
原创 软件测试的背景和前期准备
一、初识软件测试软件 = 程序（Java、PHP...） + 数据（使用文件或者数据库来存储数据） + 文档（安装说明、帮助文档...）1.1 测试软件的类型单机版：即只需一台电脑该软件就可以正常使用，因此测试的时候可能只需要一台电脑进行测试即可C/S：客户端服务器软件，至少要有两台及以上的计算机参与才能使用该软件。例如使用的QQ，至少得有一个计算机做服务器，里面可能装数据库或者是其他的一些、如果你想使用该软件那么你的计算机上也需要安装QQ，然后用你的计算机去连接同一个公司的计算机.
2022-01-12 22:37:35
1210
原创 vue3.0--初识vue3.0、组合式API、EventBus、代码组织能力、Teleport、VueX中如何使用
一、初识vue3.0现在主流组件库都已经发布了支持vue3.0的版本，其他生态也在不断地完善中，这是趋势。element-plus(opens new window) 基于 Vue 3.0 的桌面端组件库 vant(opens new window) vant3.0版本，有赞前端团队开源移动端组件库 ant-design-vue(opens new window) Ant Design Vue 2.0版本，社区根据蚂蚁 ant design 开发1.1 vue3.0 的优点最火框...
2021-12-20 18:59:02
828
原创 vue：Element-ui--表单校验
目录一、实现表单基本结构1.1 创建项目1.2 安装Element二、表单校验的先决条件2.1 model属性 (表单数据对象)2.2 绑定model2.3 rules规则2.4 设置prop属性2.5 给input双向绑定字段属性三、表单校验规则3.1 基本使用规则3.2 自定义校验规则3.3 手动校验的实现四、Async 和 Await4.1 回调模式和promise的链式调用4.2 关于Promise你必须知道几件事4.3 异步编程的
2021-12-20 18:15:22
4972
原创 vue--实现Tabbar
最终实现的大致效果如下：这里一样采用组件封装的方式，大致如下：组件拆分:MyHeader.vue – 复用之前的（上一个案例 vue--实现购物车 时里面封装的 头部组件） MyTabBar.vue – 底部导航 MyTable.vue – 封装表格三个页面- MyGoodsList.vue – 商品页 - MyGoodsSearch.vue – 搜索页 - MyUserInfo.vue – 用户信息页需要安装的第三方包：npm install less ..
2021-12-16 16:02:15
3170
1
原创 vue--实现购物车案例
最终效果图：这里我们将头部区域、列表区域、以及列表里的增加和减少商品数量的区域、以及底部计算区域分别单独封装为一个组件，如下：大致实现步骤如下：1. 安装项目所需的第三方包通过 npm install [email protected] --save 安装 bootstrap通过 npm install less [email protected] --save 安装 lessmain.js – 引入bootstrap样式：import 'bootstra...
2021-12-13 22:03:47
8181
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人