自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(35)
  • 收藏
  • 关注

原创 移动端Vant-list的二次封装,查询参数重置

场景:在写项目需求的时候,移动端有用到vant-list组件。后续需求更新说要对列表数据页加搜索和筛选的功能。发现每次筛选完得在页面内手动重置一次查询参数。不方便,所以封了一层。

2024-07-08 10:44:16 448

原创 Vant组件--下拉多选和单选功能

【代码】Vant组件--下拉多选和单选功能。

2024-07-05 14:03:54 805

原创 el-upload基础封装

element-plus 的el-upload的基础封装

2023-12-22 15:58:54 574

原创 滚动条下拉触底加载数据

滚动条触底后,数据获取

2023-12-21 10:17:31 473

原创 自定义文本复制指令v-copy

vue中通过自定义指令实现文本复制

2023-12-12 15:39:20 603

原创 Leaflet地图数据迁徙 + 飞线效果

Leaflet地图数据迁徙 + 飞线效果

2023-09-14 14:23:24 1108 16

原创 Leaflet地图画线 + 点位扩散效果

Leaflet地图画线 + 点位扩散效果

2023-09-14 14:02:58 583 3

原创 后台列表页–全屏和退出全屏操作

后台用的是vue3+elementui-Plus构建编写,当前需要给列表数据的展示添加全屏和退出全屏的操作。

2023-06-05 15:18:05 355

原创 el-table 列表单元格的合并操作实现及封装

后台页面中需要对某些行的展示做单元格合并的操作,后台的列表组件主要用了Element UI-Plus 的el-table。

2023-06-05 14:16:36 1398 2

原创 Vue保留上一次查询记录

后台页面,点击列表操作的详情按钮进入详情页面后返回需保留上一次的查询记录

2023-06-05 13:59:07 444

原创 大屏天气效果-台风

因为可视化大屏的业务需求,需要绘制全屏的天气效果。共用canvas绘制了晴天、雨天、台风天三种天气。在此记录供参考。

2023-05-31 13:24:35 172

原创 大屏天气效果-晴天

因为可视化大屏的业务需求,需要绘制全屏的天气效果。共用canvas绘制了晴天、雨天、台风天三种天气。在此记录供参考。

2023-05-31 11:29:48 244

原创 大屏天气效果

因为可视化大屏的业务需求,需要绘制全屏的天气效果。共用canvas绘制了晴天、雨天、台风天三种天气。在此记录供参考。

2023-05-31 11:15:36 418

原创 子元素在容器内均匀分布,可拉伸(Grid布局)

Grid布局(元素在容器内均匀分布可拉伸)

2022-06-23 15:14:56 1261

原创 React中useRef、forwardRef、useImperativeHandle用法

React中useRef、forwardRef、useImperativeHandle用法

2022-05-12 16:24:33 907

原创 vue(组件、axios)

Vueday5文章目录Vueday5计算属性axiosvue-clivue项目中src目录的构成vue项目的运行流程VUE 组件组件中的父子关系使用组件的三个步骤计算属性通过一系列运算之后,最终得到一个属性值(computed)这个动态计算出来的属性值可以被模板结果或者methods方法使用定义的时候,要被定义为"方法"在使用计算属性的时候,当普通属性使用即可实现代码复用计算属性中依赖的数据源变化了,则计算属性会重新求值axiosaxios是一个网络请求库,用于数据请求调用axio

2021-08-30 14:48:25 351

原创 Vue相关基础知识(指令、过滤器、监听器)

Vueday4文章目录Vueday4Vue特性:MVVM内容渲染指令属性绑定指令事件绑定指令事件对象$event事件修饰符双向绑定指令V-model指令的修饰符条件渲染指令过滤器(2.0版本)私有过滤器和全局过滤器侦听器watch侦听器Vue特性:数据驱动视图当页面数据发生变化时,页面会自动重新渲染数据驱动视图是单向的数据绑定双向数据绑定不需要手动操作DOM元素,来获取表单元素最新的值在网页中form表单负责采集数据,Ajax负责提交数据js数据的变化,会被自动渲染到

2021-08-24 16:07:26 90

原创 Vue(axios与Vue结合、天气查询案例)

Vueday3文章目录Vueday3网络应用axios(网络需求库)axios + Vue==案例1==:天知道天气查询网络应用Vue结合网络数据开发应用axios(网络需求库)导入包:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>axios.get(地址?查询字符串).then(function(response){},function(err){}) //地址即文档提供的接口地址/

2021-08-08 14:01:13 333

原创 Vue指令(续)、小黑记事本案例

Vueday2文章目录Vueday2Vue指令(续)v-showv-ifv-bindv-forv-model==案例1==:小黑记事本Vue指令(续)v-showv-show指令的作用是根据真假切换元素的显示状态原理是修改元素的display,实现显示隐藏指令后面的内容,最终都会解析为布尔值值为true元素显示,值为false元素隐藏v-if作用:根据表达式的真假切换元素的显示状态本质是通过操作dom元素来切换显示状态表达式的值为true,元素存在于dom树中,为fal

2021-08-08 10:42:24 333

原创 Vue(el、data、指令)

Vueday1文章目录Vueday1文档传送门el:挂载点Vue实例的作用范围:是否可以设置其他的DOM元素data:数据对象Vue指令v-textv-htmlv-on文档传送门https://cn.vuejs.orgel:挂载点Vue实例的作用范围:Vue会管理el选项命中的元素及其内部的后代元素。可以使用其他的选择器,但是建议使用ID选择器。是否可以设置其他的DOM元素可以使用其他的双标签,不能使用html和body。el是用来设置Vue实例挂载(管理)的元素data:数据

2021-08-07 11:41:11 296

原创 JavaScript(元素偏移,滚动,可视区系列。淘宝右侧固定栏案例,mouseover与mouseenter的区别)

JSday14文章目录JSday14元素偏移量offset系列元素可视区client系列立即执行函数元素滚动scroll系列==案例1==:仿淘宝固定右侧侧边栏mouseenter与mouseover的区别元素偏移量offset系列参考上一章京东放大镜效果元素可视区client系列通过client系列的相关属性可以动态的得到该元素的边框大小,元素大小等。与offset最大的区别就是不包含边框client系列属性作用element.clientTop返回元素上边框的大小

2021-08-06 14:51:30 303

原创 JavaScript(京东商品放大镜效果)

JSday13案例1:京东商品放大镜效果案例分析:整个案例可以分为三个功能模块;鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开时2个盒子隐藏功能;黄色的遮挡层跟随鼠标移动功能;移动黄色遮挡层,大图片跟随移动功能。<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale

2021-08-06 10:25:05 606

原创 JavaScript(this指向问题、JS执行机制、location,history对象)

JSday12文章目录JSday12this指向问题JS执行队列JS是单线程同步和异步同步异步JS执行机制(事件循环even loop)location对象location对象属性:location对象的方法history对象this指向问题this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象。全局作用域或者普通函数中this指向全局对象window(注意定时器里面的thi指向window)方法调用中谁调用th

2021-08-05 11:18:32 323

原创 JavaScript(BOM浏览器对象模型、定时器(包含京东倒计时效果案例和发送短信案例))

JSday11文章目录JSday11BOM浏览器对象模型BOM概述window对象常见事件窗口加载事件调整窗口大小事件定时器两种定时器停止setTimeout()定时器==案例1==:京东倒计时效果停止setInterval()定时器==案例2==:发送短信BOM浏览器对象模型BOM概述BOM即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心为window。BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape

2021-08-04 17:50:42 419

原创 JavaScript(事件委托、冒泡、事件流、常用鼠标,键盘事件)

JSday10文章目录JSday10事件高级技巧(续)删除事件(解绑事件)传统注册方式方法监听注册方式DOM事件流事件对象事件对象常见属性和方法阻止默认行为阻止事件冒泡事件委托(代理、委派)常用的鼠标事件鼠标事件对象常用的键盘事件键盘事件对象事件高级技巧(续)删除事件(解绑事件)传统注册方式eventTarget.onclick = null;方法监听注册方式eventTarget.removeEventListener(type,listener[,useCapture]);<div

2021-08-02 10:49:59 667

原创 JavaScript(元素创建、事件高级技巧)

JSday9文章目录JSday9==案例1== 动态生成表格三种动态创建元素区别事件高级技巧注册事件(绑定事件)传统注册方式方法监听注册方式案例1 动态生成表格数据是动态的,需要JS动态生成所有的数据都是放到tbody的行里面循环创建多行(对应数据行数)<html> <head> <meta charset="utf-8"> <title></title> <style> *{

2021-07-31 14:44:28 314 4

原创 JavaScript节点操作

JSday8文章目录JSday8DOM-节点操作获取元素的两种方式节点层级父级节点子节点==案例1==:下拉菜单兄弟节点创建节点添加节点删除节点复制节点==案例2==:发布留言DOM-节点操作获取元素的两种方式利用DOM提供的方法获取元素document.getElementById()document.getElementByTagName()document.querySelector等逻辑性不强,繁琐利用节点层级关系获取元素利用父子兄弟节点关系获取元素逻辑性强,但兼

2021-07-31 10:14:45 417 2

原创 JavaScript排他思想、属性操作及案例

JSday7文章目录JSday7操作元素(==排他思想==)==案例1==:表格隔行变色==案例2==:全选和取消全选按钮自定义属性操作获取属性的方式区别设置属性值移除属性==案例3==:tab栏切换(重点)操作元素(排他思想)若有同一组元素,我们想要某一元素实现某种样式,需要用到循环的排他思想所有元素全部清除样式(干掉其他人)给当前元素设置样式(仅留一个)顺序不可颠倒<body> <button>按钮1</button> <but

2021-07-29 11:24:48 1272

原创 JavaScript(数据类型存储小节、API、DOM)

JSday6文章目录JSday6JavaScript简单数据类型、复杂数据类型总结简单数据类型与复杂数据类型堆和栈简单类型的内存分配复杂类型的内存分配简单类型传参复杂类型传参Web APIWeb APIs 和 JS基础关联性API 和 Web APIDOM获取元素事件基础执行事件的步骤操作元素改变元素内容节点操作JavaScript简单数据类型、复杂数据类型总结简单数据类型与复杂数据类型简单数据类型值类型:在存储变量中存存储的值是本身,因此又叫值类型。string,number,boolean,

2021-07-17 14:10:43 299

原创 JavaScript常用内置对象及方法(含案例)

JSday5JavaScript内置对象内置对象JavaScript中的对象分为3中:自定义对象、内置对象、浏览器对象前两种对象是JS基础内容,属于ECMAScript:第三个浏览器对象属于JS独有的。内置对象 就是JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用或是最基本和必要的功能。查阅文档MDNhttps://developer.mozilla.org/zh-CN/W3C学习对象中的方法查阅该方法的功能查看里面参数的意义和类型查看返回值的意义和类型提

2021-07-16 18:58:05 306

原创 JavaScript(函数、预解析、对象)

JSday4函数函数:封装了一段可以被重复调用执行的代码块,通过此代码块可以实现大量代码的重复使用。function getSum(num1,num2){ var sum = 0; for(var i=num1; i<num2; i++){ sum += i; } console.log(sum);}getSum(1,5);函数的使用声明函数、调用函数函数的声明:function 函数名(){ // 函数体}// functio

2021-07-15 16:06:09 135

原创 JavaScript(运算符、数组、冒泡排序)

JSday3JS运算符递增与递减运算符递增(++),递减(–),与变量配合使用注意前置与后置的区别流程控制与分支语句if语句与switch语句if(条件表达式){ //执行语句}else if(表达式2){ //执行语句}else{ //执行语句}三元表达式 ?:由三元运算符组成的式子称为三元表达式语法结构: 条件表达式?表达式1:表达式2如果条件表达式结果为真则返回表达式1 如果结果为假则返回表达式2var num = 10;var result = n

2021-07-15 16:05:03 75

原创 JavaScript(输入输出、变量、语法、数据类型)

JSday2JS的输入输出用户输入prompt()弹出框alter()控制台输出console.log()JS变量变量是程序在内存中申请的一块用来存放数据的空间变量的使用声明变量//变量声明var age;赋值//赋值age = 10;变量初始化var age = 10;//声明并赋值获取输入并显示var username = prompt('你的名字是:');alert(username);变量语法扩展更新变量(尽量不使用na

2021-07-15 16:02:28 211

原创 Bootstrap(文本)

Bootstrap(标题设置)标题bootstrap对h1~h6的标题效果进行了覆盖提供对应样式类名为非标题元素设置样式 .h1~h6副标题 small标签 或(.small)类名例如:hello段落通过.lead 可以突出强调内容(加大,加粗文本字号)例:hello小字号加粗斜体文本强调(实际为提示颜色)提示灰(text-muted)、主要蓝(text-primary)、成功绿(text-success)、信息蓝(text-info)、警告黄(text-warning)、危险

2021-04-06 22:57:31 203

原创 Markdown学习

Markdown学习标题:#+空格+标题名字一级标题:一个#二级标题:两个#以此类推…字体设置hello(粗体两边加**)hello(斜体两边加*)hello(粗体加斜体两边***)hello(划去字符两边加~~)引用第一次使用Markdown (实现方法:> )分割线实现方法:(—/***)图片插入超链接点击跳转百度列表有序列表AB无序列表CD表格右键插入或者通过以下方法名字性别生日李四男1999代

2021-02-04 13:51:36 64

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除