自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 JavaScript基础知识(二)

面向对象是一种编程思想,这种编程思想可以当做一个学科来研究。除了 JavaScript,例如 C++、Java、Python、PHP 等等编程语言都可以使用这种面向对象的编程思想来开发应用程序。DOM:是一套标准编程接口。我们通过 DOM 这套接口来操作HTML元素。

2023-10-23 20:25:11 409

原创 JavaScript基础知识(一)

函数是一个可执行的语句块(通过function关键字声明)。声明的时候不执行语句块,调用函数时执行。优点:声明之后可以反复调用,提高代码的复用能力。//声明函数 function fun() {//语句... } //调用函数 fun();六种数据类型中的一种,对象可以重新设置属性。属性的无序集合。// 创建一个对象 let cat = {name : "miaomiao" , //注意是逗号 age : 2 , };

2023-08-07 17:48:47 853

原创 移动端适配

移动端font-size的适配有的时候,我们在使用font-size和rem来给移动端做适配会遇到这样一个问题,年轻人把字体调小,老年人把字体调大,这样会让我们原本的适配失效,造成页面字体样式错位的问题,下面的方法会根据html的font-size与1px的倍率会页面重新进行适配。代码如下:(function (win, doc) { function createScaleElement() { let scaleDom = document.createElement('div')

2020-07-16 11:51:54 283

原创 vant Dialog组件调用的坑

在做移动端项目时,需要完成一个带有倒计时按钮的弹窗,这就需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。Dialog 是一个函数,不是组件,因此不支持局部注册,正确的注册方法是 Vue.use(Dialog),即使用全局引入的方式。

2025-04-23 18:53:10 351

转载 CSS 使用calc()获取当前可视屏幕高度

我们可以获得当前屏幕的视窗宽度,所以在css中,通过计算这个高度即可使得div的高度自动撑开到屏幕高度,而计算这个高度可以使用css3的。需要注意的是,该方法适用于网页高度等于当前屏幕视窗高度,按实际需求可能还是需要JS的。相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。先了解一下CSS3的相对长度单位。

2025-03-13 11:11:34 213

原创 截取一对中括号里面的内容

/ 小括号和中括号作为正则里的特殊字符,需要使用转义字符\)\)/g;// 小括号)\]/g;// 中括号// 下面这些括号,则不需要,不过加了也没关系)}/g;// 大花括号))/g;// 中文小括号)】/g;// 中文中括号。

2025-03-10 10:29:19 155

原创 vue项目-img 标签的 error 事件

在做vue项目的时候,对img的src动态赋值后,还需要监听下 img 标签的 error 事件,如果这个图片不存在的场景下,需要设置为默认的。

2024-10-23 11:53:33 480

原创 解决页面刷新时白色闪屏问题

在浏览网页时,每次页面刷新都会有一段短暂的白屏,十分影响用户体验。其实有一个最简单的解决方法,就是直接把body元素的background-color直接设定为页面的主色调,我这里是黑色。这样处理完成后就没以后闪白屏的情况了

2024-09-26 17:41:14 607

原创 input输入框支持明文暗文切换

我们通常实现密码框的时候会直接使用 input ,设置它的 type 为 password,如果要实现明文和暗文的切换,实际上就是 type=“text” 和 type="password"的切换。

2024-03-14 11:29:09 642

原创 JavaScript基础知识(三)

以上就是我总结的Javascript所有基本的入门知识。

2024-03-05 18:40:20 1230

转载 给伪元素(::before / ::after) 绑定点击事件

伪元素没有 dom 结构,所以无法直接绑定事件。可以利用事件捕获,把事件处理程序绑定到父元素上,再用css禁掉父元素的点击事件 (点击父元素无法再触发点击事件),同时开启子元素的点击事件。

2024-01-18 11:34:23 986

原创 H5判断当前环境是否为微信小程序

H5需要判断当前环境是否为微信小程序,然后做一些交互调整。

2023-11-13 15:39:36 1806

原创 js字符串支持多个分隔符分割

用户输入内容后,支持多个分隔符(比如:中英文逗号,分号以及换号)对字符串进行分割,之后提交给后台同学解析。

2023-11-02 17:53:33 949

原创 关于对象数组的一些方法总结

很多时候,我们想要复制一个对象数组的值,如果使用 map()或者 lodash中的 _.clone(),会发现对于数组里面的JSON对象,指针还是相同的,改变原数组时,对该复制数组是有影响的。这时候可以使用{...obj}语法对数组里面的Json对象进行值的复制。

2023-09-27 18:23:38 543

原创 JS对象数组去重

以上就是我总结的数组去重和对象数组去重的 全部方法,后续如果想到更好的解决方案,也会记录在这里。

2023-09-27 17:09:36 2257

原创 实现过滤词汇高亮

前端实现查询后,将过滤后数据中的搜索词展现为高亮,利用正则表达式对过滤词添加类名,然后使用v-html*渲染在表格中。

2023-09-20 18:56:57 175

转载 element ui - el-input 实现点击插入关键词功能

el-input文本框,通过点击下方关键词,在文本框中插入该词;光标移动到文本之间,再点击下方关键词,在光标的位置插入该词;插入关键词后,文本框获取焦点,并将光标的位置定位到关键词后点击按钮,在文本框指定位置插入该按钮的关键词。参考链接:输入文本框实现点击插入词功能。

2023-09-15 18:37:54 1061

原创 element ui - el-table 表头筛选

场景:根据表头筛选出表格中符合条件的数据;效果筛选结果。

2023-09-15 18:07:30 2591 2

原创 去掉number输入框末尾的箭头

在很多场景下,输入框是会被要求限制只能输入数字,不能输入文字或者符号的。通常我们会使用input事件 + 正则表达式 去实现这个功能,但今天提供另一种css的方法,将 type=”number” 的数字输入框去掉末尾的箭头,直接实现一个只能输入数字的输入框

2023-07-31 11:27:37 548

原创 element ui - el-button 重新渲染后disabled属性失效

给 el-button 元素添加 key 属性

2023-07-04 11:30:12 607

原创 element ui - el-table 设置表头背景颜色和字体颜色

但是对 thead,thead tr,.el-table__cell 元素进行设置,都是无效的,查询了 elementui官网,发现需要使用。在使用 elementui 中的 el-table 时,由于默认表格样式与设计稿不符,需要将表头的背景色和字体颜色设置为新颜色。

2023-06-21 17:15:01 8709

原创 一个非常好用的轻量的处理时间和日期库 - Day.js

Day.js 是一个轻量的处理时间和日期的 JavaScript 库。平时项目中笔者也常用dayjs,它确实很好用。Day.js有着几乎和Moment.js一样的API,因此如果你用过Moment.js,那么也可以轻松使用Day.js。本文将讲解项目中最常用的时间日期处理方法。此外,Moment.js目前维护升级不太明了,而Day.js始终在维护,并且Day.js只有2KB大小,比Moment.js小很多。我们一般在Vue项目中使用,当然实际它与你用什么框架无关。

2023-06-20 19:07:42 1355

原创 element ui - el-select 手动设置高度

当我们的页面想要手动设置 element ui 中 el-select 的高度时,如果只是通过设置 el-select 的 height 属性时,会发现调整无效。继续对 el-select 中的 input 元素 .el-input__inner 设置。会发现高度生效了,但是右侧的下拉框箭头移位了。如下提供一种可以调整。

2023-06-20 09:46:22 6351 1

原创 Vuex的使用

Vuex是 Vue 的共享状态管理,小型项目使用 store模式 即可,中大型项目需要使用 VueX。mapState, mapGetters :写在computed中;mapMutations, mapActions :写在methods中。state: 变量;getters: state的计算属性;mutations: 同步;actions: 异步。state: 如果在模块中定义,则为局部的state;getters: 如果在模块中定义,则为局部的getters;

2023-06-09 18:04:03 8277 1

原创 前端页面添加水印

为了防止信息泄露或知识产权被侵犯,在web的世界里,对于页面和图片等增加水印处理是十分有必要的。

2023-06-01 11:29:37 562

原创 element ui - el-select获取点击项的整个对象item

在vue2引入elementUI之后,经常会遇到此类需求,el-select获取点击项的整个对象item,而不是默认的v-model 项目。

2023-04-24 18:00:04 5141

转载 element ui - 如何控制el-table某一行数据不显示

业务上可能会有一些场景,表格中的数据根据状态变化展示。例如:有一组数据状态有 is_edit=true 和 is_edit=false;is_edit=true 数据是用户编辑状态中的数据,列表展示并同时提交给后台;is_edit=false数据是已保存的数据,页面不展示但是也要提交到后台。当前后台接口参数就是一个list数组。element-ui 暂时并没有表格渲染前的生命周期函数,目前只能通过定义两个数组 或手动过滤数据。

2023-04-24 11:01:53 2762

原创 自动化添加时间戳版本号

自定义版本号:自定义的版本号简洁明了,能够清楚地知道版本的信息,但是弊端在于,需要手工的去维护版本信息。 自动生成的版本号:将时间戳、动态hash等自动生成的信息作为版本号也是比较常见的方法。

2023-04-24 10:03:57 842

转载 git提交规范

在多人协作项目中,如果代码风格统一、代码提交信息的说明准确,那么在后期协作以及Bug处理时会更加方便。因此,在git push 代码之前检测commit messag。s

2023-04-20 14:46:32 416

原创 vue的路由-vue router(二)

全局守卫:beforeEach: 全局前置守卫;: 路由解析之前;afterEach: 全局后置守卫;单个路由独享守卫::路由进入之前;组件级守卫::路由进入之前;:路由更新之前;:路由离开之前。

2023-04-07 17:38:52 765

原创 vue的路由-vue router(一)

用 Vue + Vue Router 创建单页应用非常简单:通过 Vue.js,我们已经用组件组成了我们的应用。当加入 Vue Router 时,需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们。

2023-03-24 16:50:39 989

原创 7个常用的原生JS数组方法

JavaScript 给我们提供了很多处理数组的不同方法。使用这些方法,可以代替 for 循环,将JS开发技能升级,并使代码库更具可维护性。

2023-03-03 23:06:49 1237

转载 前端二进制相关知识点总结之图片篇(二)

前言一、图片灰度化1. getImageData 方法2. putImageData 方法3. 图片灰度化处理二、图片压缩三、图片上传四、图片相关的知识点总结1. 如何区分图片的类型2. 如何获取图片的尺寸3. 如何实现大文件分片上传4. 如何实现文件下载总结再了解了 Blob、Blob URL、Base64、Data URL、ArrayBuffer、TypedArray、DataView 之间的关系后,我们再来了解一下关于图片灰度化,压缩 和 上传 的知识点。

2023-03-03 16:35:29 1661 2

转载 前端二进制相关知识点总结之Blob/File/ArrayBuffer篇(一)

按照以下的流程来总结前端如何进行图片处理,然后穿插介绍二进制、Data URL、Base64、Blob、Blob URL、ArrayBuffer、TypedArray、DataView 和图片压缩相关的知识点。玩转前端二进制。

2023-03-02 16:42:43 713

原创 URL编码和Base64编码

数据操作过程中,经常涉及到编码与解码等相关操作,如web请求时会对url进行编码,其中的中文等字符会转义为其他内容;中文字符串数据传输时,会将其使用base64编码并在接收后解码,以避免乱码的出现。URL编码和Base64编码Web开发须知:URL编码与解码escape,encodeURI,encodeURIComponent有什么区别?

2023-02-10 18:00:32 5901

原创 vue自定义指令 - v-load

懒加载是一种网页性能优化的方式,它能极大的提升用户体验。图片一直是影响网页性能的主要元凶,现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源,那么可能等图片加载出来用户也早就走了。所以进入页面的时候,只请求可视区域的图片资源。减少资源的加载,页面启动只加载首屏的图片,这样能明显减少了服务器的压力和流量,也能够减小浏览器的负担。

2023-01-12 17:53:20 508

原创 前端性能优化——图片篇

在一些官网或者电商项目中,往往存在大量的图片,如 banner 广告图,菜单导航图,商家列表头图等。图片过多以及图片体积过大往往会影响页面加载速度,造成不良的用户体验,所以对图片进行优化势在必行。请参考:前端性能优化——图片篇。

2022-12-16 18:12:12 2386

原创 text-size-adjust属性

当一个包含文本的元素使用了 100% 的屏幕宽度,该算法会增加文本大小,但是不会修改布局。为了将视窗上的布局映射到原始设备屏幕上,手机浏览器要么只渲染整个页面的一部分,要么将视窗缩放至原始屏幕大小。因为许多网站还没有适配屏幕较小的设备,移动设备的浏览器在渲染网页时可能会有不同。这个属性允许开发者去除或者修改浏览器的这种行为,比如,当网页已经适配了小屏幕之后,就不需要这么做了。注意:对于这个属性,不同浏览器有不同的行为和语法,所以需要在想要应用的浏览器加上属性前缀。

2022-12-15 12:30:11 2424

原创 element ui - el-select 添加可输入功能

vue2 + element ui 的项目中,产品希望 el-select 可以支持输入功能,也就说用户既可以下拉选择,也可以输入任意内容。

2022-11-23 17:55:10 10006 4

原创 vue watch 监听不到数据变化

对父组件传进来的数组进行监听,发现数组的数值改变了,但是watch却没有监听到

2022-11-21 11:59:45 3340

空空如也

空空如也

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

TA关注的人

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