自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 如何在rust中解析 windows 的 lnk文件(快捷方式)

这些天在使用rust写一个pc端应用程序,需要解析`nk文件获取lnk的图标以及原程序地址,之前并没有过pc端应用程序开发的经验, 所以在广大的互联网上游荡了两天。额🥺今天找到找到了这个库很好的解决标题的这个问题。

2025-03-07 22:47:25 610

原创 一个基于vue3的图片瀑布流组件

基于vue3的瀑布流组件演示地址如果在使用过程中有任何问题, 欢迎联系我!!!

2025-02-28 17:49:49 556

原创 封装一个vue3控制并行任务数量的组合式函数

使用环境: vue3当需要处理多个异步任务时,想要控制并行异步任务的数量,不想所有任务同时执行导致产生性能上的问题,比如当需要同时发起多个网络请求,但又不想一次性发出过多请求导致服务器压力过大或者浏览器资源耗尽时,这个钩子就可以派上用场。

2025-02-18 07:34:03 309

原创 JavaScript的作用域与闭包

存储变量的值,并且之后可以对这个值进行访问或修改, 是几乎所有变成语言最基本的功能之一. 但是这些变量存在哪里, 如何快速找到他们, 这需要设计一套良好的规则来存储变量, 这套规则被称为作用域。(— 《你所不知道的JavaScript(上卷) 》)在MDN作用域是当前的执行上下文,在其中的值和表达式“可见”(可被访问)。如果一个变量或表达式不在当前的作用域中,那么它是不可用的。作用域也可以堆叠成层次结构,子作用域可以访问父作用域,反过来则不行。简单来说: js 的作用域是变量或表达式的作用范围。

2024-12-04 20:46:36 881

原创 利用vue-capper封装一个可以函数式调用图片裁剪组件

使用该组件需要可以使用这里用到是版本本组件用到了element-ui的dialog, 这里也可以使用其他的dialog组件函数传入的参数, 参照type.ts中的如果组件封住有不合理的地方, 或者哪里有问题, 欢迎评论与私信。

2024-09-30 12:22:01 724 1

原创 vue3 实现文本内容超过N行折叠并显示“...展开”组件

> 组件内文字样式取决与外侧定义> 组件大小发生变化时,文本仍可以省略到指定行数> 文本不超过时, 无展开,收起按钮> 传入文本发生改变后, 组件展示新的文本

2024-09-28 20:39:29 2074 1

原创 关于el-card的height设置100%后, el-card内容超出高度后,内容被隐藏这件事

所以`el-card__body`的宽高, 由内容决定, 当内容超过了`el-card`设置的高度后就会出现内容被隐藏的问题,所以给`el-card__body`一个不超过`el-card`的宽高问题就可以解决

2024-09-27 11:58:07 932

原创 封装一个vue3的文件上传组件(拖拽或点击选择文件)

封装一个vue3的文件上传组件(拖拽或点击选择文件)选择文件后:

2024-09-25 23:58:00 1468

原创 vue3 自定义指令 自动获取节点的width 和 height

想写一个依赖库, 但是需要监听组件的width和height这些数据, 就找到了这个方法,不想每次使用的时候都要创建和销毁, 索性就直接封装成为一个指令用来获取想要的信息,对象上能够获取的信息还是非常多的, 除了还有等, 需要使用到这些可以到MDN去查看他的使用方法实现效果当元素大小发生改变时,会自动更新width 和height 的值。

2024-08-01 00:54:31 1551

原创 ElMessage自动引入,样式缺失和ts esline 报错问题解决

在配置了自动引用, 这样去使用显然不是优雅的, 而且每次时候都需要进行引入。这个会产生esline报错,和ts报错, 后面有解决方法。中进行全局引用, 当然这还是不优雅的 (所以看下面 ↓)如果按照这个过程没有配置成功, 可以找项目引入。的Readme文件, 按照提供的方法去搞。文件, 这时我们需要更新我们的。看到了英文, 嘿嘿打开翻译。

2024-07-22 00:34:41 719 2

原创 使用vue3模拟element-ui中el-tabs的实现

组件没有背景颜色, 为了凸显组件文字,才设置了背景颜色。

2024-07-18 03:25:49 1343

原创 关于我在vue3中使用swiper的使用碰到swiper-slide的width特别大的这件事儿

在加上其他的一些样式会将swiper撑开,swiper大小变化后影响后面slide的width的计算.swiper大小可变, 内部的slides的width是根据swiper的大小进行计算的,因为内部的。还要注意swiper可变的情况,要么对slide大小进行控制,要么对swiper进行控制, 可以使用。非常大, 奇怪的是我没有设置任何的行内样式啊。所以在使用swiper的时候除了注意。自己在写样式的时候设置为。属性对最大宽度进行限制。

2024-07-17 01:05:54 1579 2

原创 vue3 实现一个tab切换组件

3, 将bg大小进行调整 并移动到相应的位置。* 2. 获取元素的当前位置以及大小。// 没有找到值的时候找default。* 1. 找到相应的元素。文件: wqTabType。// wqTabs 元素。// 若没有找到tab。

2024-03-12 16:34:29 1846

原创 manjaro 安装 wps 教程

1. 安装wps主体```yay -S wps-office ```2. 安装wps字体 (如果下载未成功看下面的方法)```yay -S ttf-waps-fonts```3. 安装wps中文语言```yay -S wps-office-mui-zh-cn```

2024-03-06 08:19:27 1638

原创 vue3 + vite + ts 封装 SvgIcon组件

> 备注: SvgIcon组件的, 按照自己的喜好与需求去封装, > 还有很多使用其他插件的教程, 大家根据自己的需求去下载使用, > 但对于每篇教程都要保留一定的思考性, 如果能找到对应的版本就很棒了, > 没有得话就找一下相似版本的教程作为参考,

2023-08-11 23:27:08 706

原创 Object.assign()的使用以及模拟实现

Object.assign()是JavaScript中的一个内置方法用于一个或多个源对象属性复制到目标对象中语法如下多个源对象可以通过逗号分隔或作为一个数组传递该方法将返回目标对象, 其中包含源对象的属性, 如果目标对象中的属性与源对象的属性相同, 则源对象中的属性将覆盖到目标对象中的属性。

2023-08-04 15:16:20 396

原创 Element-plus将默认语言设置为中文

【代码】Element-plus将默认语言设置为中文。

2023-07-31 23:18:37 3038

原创 如何在vue3中使用swiper插件(教程)

/pagination 就是指示器, 在效果中为小圆点...一定要下载正确的版本, 每个版本的使用差异还是有一些的。我的项目环境Vue3+vite+ts+scss,// 他有很多的模块, 具体看官方文档。// 这里需要引入样式,2.使用以下代码进行测试。// 这里需要引入模块。// 这里需要引入组件。

2023-07-26 15:11:32 2318 6

原创 js判断数据类型的几种方法及其局限性(typeof, instanceof, Object.prototype.toString.call())

​js中判断了类型的方法有很多, 这篇文章主要来说一下常用的几种判断类型的方法,以及使用:每个方法都各有优缺点,在日常使用的时候请结合这些优缺点进行斟酌:javaScript中typeof可以判断以下类型:undefined: 未定义的变量或者值boolean: 布尔类型, true 或falsenumber: 数值类型, 包括整数,浮点数, NaN, 和Infinity (无穷大)string: 字符串类星星, 表示文本symbol:符号类型,ES6中新增的基本数据类型function: 函数类型,可以

2023-06-08 11:21:04 1648 2

原创 CSS中flex属性的的使用以及应用场景有哪些

表示默认的状态,无需设置,适合小控件元素的分布布局,或者某一项内容动态变化的布局flex:0适用场景较少,适合设置在替换元素的父元素上,flex:none适用于不换行的呢绒固定或者较少的小控件元素上,如按钮flex:1适合等分布局flex:auto适合基于内容动态适配的布局。

2023-04-17 22:54:44 680

原创 js使用正则完成字符串去除空格(前后空格, 前空格, 后空格, 全部空格,中间空格)

去除字符串1) 前后空格2) 前空格3) 后空格4) 中间空格5) 去除中间空格(这个方法值得讨论)

2023-04-12 10:32:24 1876 3

原创 使用CSS实现书籍的翻页效果(使用了animation)

要注意的是父盒子要开启3d, 并且要调整视距;还要注意旋转的角度以及起始位置;定义动画的起始状态和结束状态;让翻转到反面的元素不显示。来实现中间的动画效果;废话不多说,直接上代码。

2023-04-11 19:35:13 2751

原创 js对字符串进行字符计数,并将结果按照顺序输出

根据排好序的数组,对数组进行遍历,根据数组中元素取出Map容器中的存储的数据。使用Set容器进行去重,将set转换为Array并进行排序,采用Map容器进行计数,

2023-04-11 08:48:52 393

原创 HTTPS的加密原理(工作机制)

对称加密, 非对称加密, CA证书, 数字签证,https加密机制,http协议与https协议的区别, https的安全性,http为什么不安全, 数字证数是一种权威性的电子文档,它提供了一种在Internet上验证身份的方式;其作用类似于司机的驾驶证或日常生活中的凭证;它是由一个权威机构--CA证数授权(Certificate Authority)中心发行的,人们可以在互联网交往中用它来识别对方的身份。

2023-03-13 12:49:37 3151 1

原创 2. 事件捕获 及 如何阻止冒泡

DOM事件流机制 / 事件捕获什么是DOM?DOM 是描述 HTML 的内部数据结构,它会将 Web 页面和 JavaScript 脚本连接起来, 并过滤一些不安全的内容;HTML 解析器会把字节转换成DOM一个事件在发生的时候会在子元素和父元素之间传播,这会分成三个阶段:1. window 传到目标节点 ---- 捕获阶段(上层传到底层)2. 目标节点触发 ---- 目标阶段3. 目标节点传到window ---- 冒泡阶段(底层传到上层)

2023-03-06 20:59:45 310

原创 5.flex布局

1)flex-direction: row(默认值,主轴未水平方向,起点在左端) | row-reverse(主轴为水平方向,起点在右端) | colunm(主轴为垂直方向,起始点在上沿) | column-reverse(主轴方向为垂直方向,起始点在下沿)决定主轴的方向2)flex-wrap: nowrap(默认值,不换行) | wrap(换行,第一行在上方) | wrap-reverse(换行,第一行在下方)如果一条轴线排不下,如何换行3)

2023-03-05 14:47:02 363

原创 如何使用markdown写目录

今天找到这样的一种方法,分享给大家, 希望在给使用markdown的你提供一些帮助。虽然是一个简单的笔记, 但如果有目录结构的化,就是快速定位到要看的位置,遇到了这样一个问题, 就是如何使用markdown写目录,链接部分使用 ` ` 标签的id值,这样点击链接的时候就可以快读定位到你想看的内容。今天在使用markdown记录笔记的时候,

2023-03-04 21:05:01 1475

原创 3. 清除浮动的几种方式,及其使用

使用before和after伪元素清除浮动(推荐使用): 这种方式也是使用额外标签方式达到效果,只是变相的使用了伪元素after/before,使得页面结构更简介,也是常用的清除浮动的方式。一个新的 display 属性的值,它可以创建无副作用的 BFC。给 元素设置 display: flow-root 属性后, 中的所有内容都会参与 BFC,浮动的内容不会从底部溢出。清除浮动: 清除浮动后造成的影响-->清除浮动主要为了解决父级元素因为浮动引起内部高度为0的问题。

2023-03-04 13:29:09 547

原创 ES6解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值,可以将属性/值从对象/数组中取出,赋值给其他变量。

2022-10-12 22:33:28 237

原创 前端发送请求的几种方式

Asynchronous JavaScript + XML(异步 JavaScript 和 XML), 其本身不是一种新技术,而是一个在 2005 年被 Jesse James Garrett 提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括:HTML 或 XHTML, CSS, JavaScript, DOM, XML (en-US), XSLT, 以及最重要的 XMLHttpRequest。

2022-10-09 00:11:33 3801

原创 事件流 & 事件的执行过程

事件流描述的就是从页面中接受事件的顺序,而早期的IE和Netspace提出了完全相反的事件流的概念,IE事件流是事件冒泡,而Netspace的事件流就是事件捕获。IE提出的事件流就是事件冒泡,几从下至上,从目标触发的元素逐级向上传播,直到window对象。2)处于目标阶段:事件目标阶段(对真正用户发生交互的标签进行触发事件),事件目标就指的该标签。而Netspace的事件流就是事件捕获,即从document逐级向下传播到目标元素,3)事件冒泡阶段冒泡阶段(执行一次完整的冒泡)二.事件冒泡事件捕获。

2022-10-05 10:55:01 427

原创 如何根据地理位置获取城市编码 / (高德地图) 获取城市编码API / 经纬度获取城市or城市编码

2022年9月29日,今天在做搜索天气的页面的时候遇到了这个问题,刚开始想用导入json文件的方法来去弄这个,有些json文件并没有做到那个精确,假如用到的地理位置是某个县,有可能就无法获取到城市编码.还需要自己去写方法,来截取存取地理位置的字符串.这里提供一个简单的方法,我们可以去使用某些地图平台的API(当然需要联网的情况下),去获取城市编码,比如百度地图或者高德地图.这里我使用的是高德地图.在文章的结尾我会附上原平台链接.代表的参数包括必填参数和可选参数。下面的列表枚举了这些参数及其使用规则。

2022-09-29 14:51:06 9558 1

原创 css中@font-face的使用

format]定义字体的格式,用来帮助浏览器识别字体,主要有以下这些格式:[truetype(.ttf)、opentype(.otf)、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)]font-face是css3中允许使用自定义字体的一个模块,它主要是把自己定义的web字体嵌入网页中。src:[url]加载字体可以是相对路径,可以是绝对路径,也可以是网络地址。font-weight:定义加粗样式。font-style:定义字体样式。

2022-09-26 22:22:35 1766 1

原创 JavaScript动画和CSS3动画的区别

如果动画只是简单的状态切换,不需要中间过程控制,这种情况下,CSS动画是优选方案,它可以让你将动画逻辑放在样式文件里,而不会让你的页面充斥JavaScript库,然而如果你在设计很复杂的客户端界面或者开发一个有着复杂UI状态的APP,那么你应该使用JS动画,这样你的动画可以保持高效,并且你的工作流也更可控,所以再实现一些小的交互动画的时候,就多考虑CSS动画,对于一些复杂控制的动画,使用JavaScript比较可靠。

2022-09-24 15:14:03 391 1

原创 JS判断一个值是什么类型

判断js数据类型有很多方法,我这里介绍以下三种常见的方法1.typeof运算符typeod是最常见的,使用它会返回一个字符串,设置函数对象和基本类型(js中的基本类型:number,string,boolean,null,undefined,object 还有ES6新增 symbol)的判断2.instanceof操作符(基于原型链)obj instanceof Object实质就是:instanceof操作符判断做操作数对象的圆形链上是否有右边这个构造函数的prototype属性,也就是说

2022-09-24 14:36:37 355

原创 JavaScript 中的作用域、预解析与变量声明提升

ES6之前 JavaScript 采用的是函数作用域 + 词法作用域 ES6 js采用的是块级作用域+词法作用域。局部作用域一般只在固定的代码片段内可以访问到,而对于函数外部都是无法访问的,最常见的例如函数内部,变量提升:定义变量的时候,变量的声明会被提升到作用域的最上面,变量的赋值不会提升。在ES6之前,只有函数可以划分变量的作用域,所以在函数外面无法访问函数内的变量。凡是代码块就可以划分变量的作用域,这种作用域的规则就叫块级作用域,块级作用域和函数作用域描述的是,什么东西可以划分变量的作用域。

2022-09-23 20:07:48 320

原创 js如何遍历对象的属性

了解如何遍历对象属性之前,先知道什么可枚举属性 与 不可枚举属性在JavaScript中,对象的属性由可枚举和不可枚举之分,它是由对象属性描述符enumerable决定的,如果该属性是可枚举的那么这个属性就能被for...in遍历到在JavaScript中可以通过Object.defineProperty()来为对象设置属性描述符从ES5开始,添加对象属性描述符的支持,现在JavaScript中支持6中属性描述符:configurable:设置为true时,该属性的藐视符才能够被改变,同时该属性也能从对应的

2022-09-23 16:51:02 700

原创 浅谈数组与伪数组的区别

数组相信大家已经很熟悉了,那么这篇文章讲讲什么是伪数组以及数组与伪数组的区别伪数组的定义拥有length属性,其他属性(索引)为非负整数不具有数组所具有的方法常见的伪数组有:函数参数arguments,DOM对象列表;jQuery中的$(' ')等伪数组与数组的区别索引(index)和长度(length)伪数组的索引,就是那些键值对的key,没有真正的顺序,长度是手动设置的属性数组的索引和长度是内置属性Array.prototype伪数组没有Array.prototype,它只是

2022-09-23 11:06:13 255

原创 雪碧图 or 精灵图 ?

就是把网站上用到的一些图片整合到一张单独的图片中,从而减少网站的HTTP请求次数,该图片使用css background和background-position属性渲染,这也就意为着你的标签变得更复杂了,图片是在css中定义,并非在标签中。4.精灵图不能随意改变大小和颜色,改变大小会失真模糊,降低用户体验,css新属性可以改变精灵图颜色,但是比较麻烦,并且新属性有兼容为题,现在一般用字体图标代替精灵图。4.更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。

2022-09-22 18:30:47 521

原创 浅谈flex布局

CSS flel布局(弹性布局/弹性盒子)1.基本概念Flex是Flexible Box的缩写,意为"弹性布局"或者"弹性盒子",是CSS3中的一种新的布局模式,可以简便 完整 响应式地实现各种页面布局,当页面需要适配不同的屏幕大小以及设备类型时非常使用,目前,几乎所有的浏览器都支持Flex布局可以通过将元素的display属性设置为flex(生成块级flex容器)或inline-flex(生成类似inline-block的行内快级flex容器),当一个元素设置flex布局以后,其子元素的float

2022-09-22 18:16:07 299

空空如也

空空如也

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

TA关注的人

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