前端开发
关注
分享
扫一扫
得知此事须躬行
心善则心安，知足必常乐！
展开
-
前端内存泄露案例与解决方案
关于前端内存泄露的案例与解决方案原创 2024-08-30 15:54:55 · 837 阅读 · 0 评论 -
谷歌浏览器无法调用电脑摄像头或无法使用拍摄仪的原因及最快速的解决办法
谷歌浏览器只支持https, 127.0.0.1,localhost三种地址方式调用摄像头，http方式不支持直接调用。原创 2024-04-08 10:40:56 · 4074 阅读 · 0 评论 -
如何在vue中使用拖动排序组件sortablejs
/ dragClass: "dragClass", // 正在被拖拽中的css类名。// 把被移动的那条数据赋值给结果数组。// 遍历结果数组，让sort重新排序。// 先把被移动的那条数据单独取出来。// 把剩下的数据复制给结果数组。// 被选中项的css 类名。/* // 拖拽 *//* // 停靠 *//* // 选择 */原创 2024-02-08 15:15:22 · 2561 阅读 · 2 评论 -
用js写一个函数，判定一个值是否为空
判定一个值是否为空的函数原创 2023-09-23 19:25:18 · 691 阅读 · 0 评论 -
用 CSS 自定义滚动条
简介首先需要介绍一下滚动条的组成部分。滚动条包含 track 和 thumb，如下图所示：track是滚动条的基础，其中的 thumb是用户拖动支页面或章节内的滚动。原创 2023-05-18 17:22:49 · 1550 阅读 · 0 评论 -
Vue中对watch中immediate和deep属性的理解
immediate设为true后，则监听的这个对象会立即输出，也就是说一刷新页面就会在控制台输出，当然此时页面上的数据我们还没来得及手动让其发生变化，所以在控制台输出的newValue为我们在代码中默认设置的值，oldValue输出为“undefined”。第二个是deep：其值是true或false；（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。确认是否以当前的初始值执行handler的函数。简单点说，就是可以监听到对象里面的值的变化了。即监听到变化时应该执行的函数。原创 2023-01-12 15:10:36 · 480 阅读 · 0 评论 -
uni-app实现复制文本
而 uni-app官方提供的uni.setClipboardData(OBJECT)复制功能并不兼容H5端，在做项目的过程中，为了完善用户体验，尝尝需要做复制文本的功能。原创 2022-11-03 14:35:57 · 6441 阅读 · 0 评论 -
Vue3中按需引入ECharts(一看就会)
使用背景：比如做一个工程化项目，且只使用到柱状图和折线图，如果把所有的echarts组件都引入到项目中的话，会影响用户打开页面的速度和项目的性能。所以对于做一个高逼格的程序工程师，我们需要按需引入。原创 2022-10-20 01:00:58 · 14455 阅读 · 8 评论 -
web端大屏适配解决方案
仅能满足一些特定的小场景，大屏中的实施非常不友好，例如我们覆盖element表格中的为font-size：0.5rem。如line-height的设置为22px，此时覆盖样式后的字体过大，并不能适应行高，就会出现文字重叠等错乱问题。即使不全屏也可以得到正确的结果。上图案例中采用了css3的缩放transform: scale(X)属性，对比两个图，我们不难发现本人改变分辨率时，scale的值是变化的。按照上述步骤操作，即可完全按照美工的设计在大屏中进行等比例输出放大，趋于完美的解决了大屏适配问题。转载 2022-10-19 15:50:01 · 2609 阅读 · 2 评论 -
js如何获取URL链接中的参数
网络上搜索了好些方法，竟然都不行，于是，我自己写了一个，经过测试，绝对靠谱。原创 2022-10-13 14:12:14 · 444 阅读 · 0 评论 -
阿里云 图片压缩后展示
后台用户上传的图片往往很大，并且现在iphone手机的图片质量大的都高达几M，而在移动端展示时，即便做了懒加载，如vue-lazyLoad,也会很影响性能。图片处理的URL为http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?图片处理的URL为http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?需求及处理参数为：图片缩放为长边100 px，即resize,l_100。原创 2022-09-04 14:18:45 · 1118 阅读 · 0 评论 -
HTML常用标签之表格标签(合并单元格)
html table 合并单元格原创 2022-08-14 13:42:15 · 569 阅读 · 0 评论 -
CSS样式覆盖
CSS样式覆盖的方法原创 2022-07-24 18:47:19 · 1991 阅读 · 0 评论 -
前端：屏蔽F12审查元素，禁止修改页面代码
web端禁止用户审查元素、禁止剪切复制粘贴、禁止选中等操作原创 2022-07-21 09:49:50 · 1922 阅读 · 0 评论 -
git 命令删除分支
git命令删除分支原创 2022-07-12 22:58:22 · 3520 阅读 · 0 评论 -
css如何设置input的placeholder样式
如何设置input元素placeholder的样式原创 2022-06-18 17:20:23 · 10231 阅读 · 1 评论 -
nodemon报错解决方案
nodemon报错解决方案原创 2022-06-15 20:55:37 · 725 阅读 · 0 评论 -
dcloud云函数中如何使用事务
官方文档：https://uniapp.dcloud.io/uniCloud/cf-database?id=transaction事务通常用来在某个数据库操作失败之后进行回滚。限制事务操作时为保障效率和并发性，只允许进行单记录操作，不允许进行批量操作，但可以在一个事务进行多次数据库操作。对于修改和删除仅支持使用doc方法，不支持使用where方法。新增时使用add方法一次只可以新增单条，不可新增多条，即不支持在add方法内传入数组腾讯云没有限制where的使用，但是使用where修改或删除原创 2022-02-11 15:30:07 · 1572 阅读 · 0 评论 -
通过vue来添加动画和修改@keyframes属性值
CSS3中增加了@keyframes规则用于创建动画，创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。也就是说通过改变CSS样式而达到动画的效果，所以，要动态去改变动画，只有修改样式。你可以打印一下document.styleSheets，console.log(document.styleSheets)，会发现document.styleSheets是一个对象数组。拿到样式表后就可以操作样式啦~insertRule方法用来给当前样式表插入新的样式规则。举个栗子：var style =原创 2022-01-04 17:02:51 · 4170 阅读 · 4 评论 -
通过 js 解决滑动浮动按钮时候页面被跟着滚动的尴尬问题
通过js阻止弹窗下面的页面被滚动，或者滑动页面上的元素时页面被跟着滑动的尴尬问题原创 2022-01-04 15:29:28 · 2153 阅读 · 0 评论 -
js实现图片资源转化成base64的各种场景
网络上有很多片介绍通过js将图片转换成base64的文章，之所以再写这篇文章的原因时发现没有找到系统的介绍的文章，有的介绍如何实现本地项目的图片转码，有的介绍如何实现网络资源的图片转化，但是系统介绍的少之又少，所以我就在这里将各种场景系统的介绍一下：场景一：将用户本地上传的资源转化，即用户通过浏览器点击文件上传时，将图片资源转化成base64：<input type="file" id="image"><br/>var reader = new FileReader();v转载 2021-12-30 09:38:10 · 463 阅读 · 0 评论 -
js 模拟触发点击事件
1.vue版本<el-button size="small" type="primary" ref="import">导入</el-button>this.$refs.import.$el.click()jQuery $("#a").click(function(){ $("#b").trigger('click'); })javascriptdocument.getElementById('a').click();原创 2021-10-27 18:32:57 · 5494 阅读 · 0 评论 -
CSS3自定义滚动条样式
直接上demo,请在查看元素中复制源代码:https://www.xuanfengge.com/demo/201311/scroll/css3-scroll.html原创 2021-10-18 19:07:36 · 114 阅读 · 0 评论 -
ES6 Object.assign()的用法
1.Object.assign()基本用法：原创 2021-09-07 18:08:37 · 212 阅读 · 0 评论 -
Vue中jsconfig.json的配置和在路由守卫中动态修改页面title
在jsconfig.json中配置，import的时候使用@代表src起始路径的时候，能动态提示子路径：{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, "exclude": ["node_modules", "dist"] }路由发生变化修改页面title:router.beforeEach((to, from, next原创 2021-06-29 11:22:44 · 704 阅读 · 0 评论 -
css 让页面元素无限转动
css:.xuanzhun{ animation: rotate 3s linear infinite;}@keyframes rotate{ from{transform: rotate(0deg)} to{transform: rotate(359deg)}}html:然后一下这个图标就会无限转动了：原创 2021-05-01 12:56:34 · 509 阅读 · 0 评论 -
js/css实现禁止微信浏览器下拉回弹效果
由于项目需求，需要禁止微信浏览器默认的下拉回弹效果。然而，我在百度上搜了大半天，用了N多他人的代码，最后都以失败告终。但是呢，经过误打误撞，我竟然通过一句代码给解决了，而解决方法不是通过js，而是通过css，真的是感谢上天！！！就是把body的样式属性中overflow属性设置成hidden就可以了overflow:hidden; 然后下拉的时候微信浏览器就不会跟着被下拉与回弹了。你说有意思不，一句样式就把事情给办妥了。...原创 2021-04-27 12:16:38 · 1214 阅读 · 0 评论 -
前端如何使用qrcode插件生成二维码
首先，我们要先安装并引入qrcode:import QRCode from 'qrcode'其次在页面中声明canvas画布:<canvas class="qrcode" id="qrCode-canvas"></canvas>然后封装生成二维码的方法：createQrcode(){ let canvas = document.getElementById('qrCode-canvas') QRCode.toCanvas(canvas, href, (error原创 2021-04-26 13:05:20 · 613 阅读 · 0 评论 -
css 如何让图片自动适应所定义的长宽且不变形
HTML<div class="img-box"> <img :src="item.cover" :alt="item.title"></div>CSS.img-box{ display: flex; align-items: center; width:34%; height: 100px; overflow: hidden; background-color: #c7c7c7; border-radius: 8px; img原创 2021-04-15 13:38:16 · 1380 阅读 · 1 评论 -
git常用命令
更改用户名和邮箱git config --global user.name “Your Name”git config --global user.email “email@example.com”git实战（把本地的代码发布到git上去）：git clone 仓库地址 //克隆git fetch //获取远程仓库中的最新内容未合并git status //查看状态如果有冲突先解决冲突git diffgit pull origin 分支名 //拉取并合并最新内容git add . //在远程原创 2021-04-14 09:36:51 · 96 阅读 · 0 评论 -
css 圣杯布局和双飞翼布局
圣杯布局和双飞翼布局的目的：三栏布局，中间一栏最先加载和渲染（内容最重要）两侧内容固定，中间随着宽度自适应一般用于PC端先来看看圣杯布局：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-.原创 2021-04-02 15:11:50 · 135 阅读 · 0 评论 -
响应式布局之vw和vh
css中 一个单位的vw代表屏幕宽度的1/100，一个单位的vh代表屏幕高度的1/100。直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vw vh test<原创 2021-04-02 11:10:42 · 508 阅读 · 0 评论 -
通过rem响应式设置字体大小
应用场景:父节点html的基础font-size设置为100px,iphone5的屏幕宽度基础文字大小设置为font-size: 0.12rem，等于12px，然后随着其他类型的手机屏幕宽度的变大而动态调整页面上的基础文字大小.<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in原创 2021-04-02 10:30:04 · 1379 阅读 · 0 评论 -
js防抖和节流
之前做项目，遇到了有黑客恶意攻击网站，比如黑客弄了一堆肉机过来，不断得请求接口函数或不断得刷新页面，一旦肉机的量达到一定的数目，网站就会变卡，数据库CPU也会达到100%，导致项目无法正常工作，从而进行敲诈勒索。还有人会得以连续非常快得点击一个按钮，导致一个动作被同时触发了多次，出引出问题。比如用10个积分可以购买一只鸡，而有人就使用了快速点击的方式，用10个积分买了2只或者多只鸡。这种就可以利用防抖或节流的方式去加层防御，避免资源的浪费。那么什么是防抖呢？防抖的意思是，当用户在一段时间内连续频繁的.转载 2021-04-01 22:16:17 · 95 阅读 · 0 评论 -
JS中map和foreach的区别以及some和every的用法
map() 方法会将数组中元素依次传入方法中，并将方法的返回结果组成新数组返回。传入的function可以有自己的三个形参，currentValue,index,arr分别代表当前元素，元素索引，元素所属数组对象；其中currentValue是必须的。注意：map不会改变原数组，map不会检查空数组原创 2021-03-29 20:28:49 · 452 阅读 · 0 评论 -
vs code 之 好用的插件
1.Import Cost计算并显示引入依赖的体积/大小2.原创 2021-03-27 15:28:54 · 224 阅读 · 0 评论 -
vue3中如何通过emit自定义事件
在组件内自定义事件：<template> <form class="validate-form-container"> <slot name="default"></slot> <div class="submit-area" @click.prevent="submitForm"> <slot name="submit"> <button type="原创 2021-03-27 11:31:14 · 4124 阅读 · 1 评论 -
http协议 网页url组成部分解析(剖析)
// http://127.0.0.1:8881/01-hash/html?a=100&b=20#/aaa/bbblocation.protocol // 'http:'location.hostname // '127.0.0.1'location.host // '127.0.0.1:8881'location.port // '8881'location.pathname // '/01-hash.html'location.search // '?a=100&b=20'原创 2021-03-23 20:50:55 · 342 阅读 · 0 评论 -
vue基于路由的动态过渡
还可以基于当前路由与目标路由的变化关系，动态设置过渡效果：<!-- 使用动态的 transition name --><transition :name="transitionName"> <router-view></router-view></transition>// 接着在父组件内// watch $route 决定使用哪种过渡watch: { '$route' (to, from) { const toDep转载 2021-03-22 15:45:09 · 300 阅读 · 0 评论 -
vue中什么时候使用$nextTick
vue的dom元素渲染是异步的，有的场景中在页面元素还没渲染就执行了需渲染后才执行的代码，就会报错，那么只要在this.$nextTick中执行该代码即可解决报错的问题。this.$nextTick(()=>{ // 要执行的代码})...原创 2021-03-22 13:08:48 · 432 阅读 · 0 评论