笔记
文章平均质量分 58
庸懒
搬砖小子
展开
-
关于使用鼠标时间mouseMove拖拽元素及元素抖动的解决方案
最近在做一个画布相关的项目时有一个场景是移动画布,最先开始想到的是拖拽事件,但是用户希望元素是实时的变化,所以决定使用mouseMove事件来做。原创 2022-11-26 17:43:47 · 2742 阅读 · 0 评论 -
一个Vue3数字框区间指令及其衍生的一个知识点
一个Vue3封装的限制数字输入框取值范围的指令原创 2022-11-08 16:18:52 · 1483 阅读 · 0 评论 -
微信开发者工具设置制表符大小为2
平时我们开发的时候一般的时候都是使用的VSCode,但是开发微信小程序的时候使用的是微信开发者工具,我们使用VSCode去开发的时候一般使用的是缩进为2的格式,但是在微信开发者工具默认的制表符大小是4,所以为了符合我们平时的开发习惯我们需要将微信小程序的制表符大小更改为4。...原创 2022-07-24 21:44:23 · 1687 阅读 · 0 评论 -
iview更改主题色及解决.bezierEasingMixin(); ^ Inline JavaScript is not enabled. Is it set in your options?
更改iview项目主题色现在公司用的是iview,最近有个需求就是想更改一下主题色,iview的官网也是给出了解决方案,官网给出的两种方案第一种肯定是最合适的,但是也踩了个坑,这里记录一下。更改方法根据官网的步骤首先就是在项目中新建一个文件夹,例如theme文件夹,然后再theme文件夹中创建一个index.less文件。然后在文件中写入以下代码:@import '~view-design/src/styles/index.less';@primary-color: #31BA5E;接着原创 2022-05-07 14:14:44 · 1918 阅读 · 0 评论 -
避免Vue中data数据的响应式
对于Vue的响应式大家应该都有所了解,通过getter和setter来实现数据的订阅和分发。我们在实际使用中可能会遇到这样一个场景,就是Vue组件的data部分的数据会非常多,可能数据来到了数千上万条甚至是十来万,这时页面会变得非常卡顿。关于Vue的性能优化中有这样一条:复杂(数据庞大或结构复杂)的对象数据不要放在Data中,这是因为Vue对深度遍历data独享的属性并依次添加getter和setter,以此达到响应式的目的。既然知道原因就好做了,我们可以根据这个问题给出三种解决方案:将数据不在dat原创 2022-03-21 10:34:38 · 3272 阅读 · 0 评论 -
一个无缝衔接的css动画
最近写页面的时候有个动画,要求就是表格固定高度,如果数据超出就往上滑动,然后需要无缝衔接,刚开始以为很简单,但是太久没做人整的有点晕,足足花了大半天的时间才弄出来,所以这里记录一下吧。首先来看下效果吧。下面就分享一些我自己的思路。template部分 <table class="table"> <thead> <tr> <th>a</th>原创 2022-02-24 16:47:22 · 2202 阅读 · 4 评论 -
一些js和css的注意事项和小技巧(持续更新)
一、css部分1.1.文字排列方向有点时候我们不希望文字从左往右进行排列如下所示:这个时候我们就需要使用css的writing-mode属性了,该属性的属性值如下。horizontal-tb对于左对齐(ltr)脚本,内容从左到右水平流动。对于右对齐(rtr)脚本,内容从右到左水平流动。下一水平行位于上一行下方。vertical-rl对于左对齐(ltr)脚本,内容从上到下垂直流动,下一垂直行位于上一行左侧。对于右对齐(rtr)脚本,内容从下到上垂直流动,下一垂直行位于上一行右侧。verti原创 2022-02-10 13:52:25 · 795 阅读 · 0 评论 -
vue项目中在scss中使用js的值
最近写项目的时候用到了动画,创建动画的过程中需要根据数据量的多少来进行位移,这个时候就需要在scss中用到js中的值,我们固然可以在template中使用行内样式去设置属性,如下所示:<div class="test" :style="{ margin: offset}">这里的offset毫无疑问就是js中的一个变量了。这种方式固然不错,但是很明显不能满足我的效果,因为定义动画并不是给元素设置样式,我需要通过js的值来判断我正在定义动画时到底应该设置多少值才能达到我想要的效果。很明显这里原创 2021-12-12 20:56:23 · 2216 阅读 · 1 评论 -
Google Chrome禁用触摸板滑动前进后退
今天给大家分享一下如何然让Google Chrome禁用触摸板滑动前进后退。本来这个是一个不错的功能,但是甲方在使用触摸屏的电脑浏览页面的时候准备用滑动去切换轮播,但是出现了退出了当前页面回到首页的现象。排查后发现是浏览器的默认行为,接下来当然是屏蔽该功能了。一、window环境因为Chrome关闭了该项设置,虽然某些国产浏览器上会有相关设置,但是并不打算用,所以就查到了可以使用实验模式来关闭。直接在Chrome中输入chrome://flags/#overscroll-history-navigat原创 2021-12-02 20:12:45 · 11041 阅读 · 0 评论 -
浏览器拍照功能(Vue+ElementUI组件)
最近项目上比较忙额没有时间写些东西分享出来,今天忙里偷闲决定把我封装的拍照组件分享出来。如果有兴趣的话看我之前写的文章应该能看到我有说过如何通过API来获取媒体设备,这次就将完整代码跟大家分享一下,代码我会贴在最后面。一、实现原理这个组件是web端的组件,使用的也是webAPI,我们最主要的API是navigator,这个API给了我们调用媒体设备的能力。在我们通过API获取到媒体数据后我们可以通过转换的形式将得到的流数据用video展示出来,具体操作可以看我之前的文章。接下来我们会用到画布,画布的强大原创 2021-11-25 13:42:09 · 2226 阅读 · 5 评论 -
IntersectionObserver API
最近看到一个手写图片懒加载的文章,里面用了两种方法,一种是大家都很熟悉的onScroll事件,另一种就是IntersectionObserver这个API,然后我查了一下感觉还是很有用的,所以记录一下。Intersection Observer APIIntersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。简单来说,这个API就是用来检测目标元素与其父级或祖先元素或者视口是否接触。在以前我们需要监听元素的OnScroll事件然后在原创 2021-10-21 11:56:35 · 278 阅读 · 0 评论 -
??和?.
朋友最近准备跳槽了,和我分享了不少东西,其中昨天他面试的时候面试官就问到了ESNext,然后他一时间就想到了一种??和?.。其实说到ESNext除了这个我脑海中还有一个async和await这里暂且不提,话不多说步入正题。一、??空值合并运算符空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。与逻辑或操作符(||)不同,逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说,如果使用 || 来为某些变量设置默认值原创 2021-10-09 14:16:35 · 119 阅读 · 0 评论 -
js的编码及转码
其实算下来,工作中用到的编码转换还真不少,不过每次用起来都是到处查,所以这里整理一下当个笔记本,先写一点,后面的再陆续补充。一、escape和unescape函数escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。返回已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ - _ + . /。其他所有的字符都会被转义序列替换unescap原创 2021-09-03 15:15:33 · 9915 阅读 · 0 评论 -
elementUI表格table边框不对齐
最近在使用elementUI的表格的时候出现一个问题,表格我给的是百分百宽度,但是有几列的宽度是固定的,这样就会导致表格的边框错位。当然了,表格边框的错位原因不止这一个,可能还有其他原因。说到底就是因为elementUI的表格组件使用了两个表格,这样再使用或者数据动态变化时就很容易出现问题,下面我给出两个建议供大家参考。一、使用doLayout方法这个方法是elementUI提供的,使用的方式是this.$refs.xxx.doLayout()这个方法我不是很了解,感兴趣的可以看看官方文档,不原创 2021-09-01 20:51:51 · 3733 阅读 · 0 评论 -
js获取当前设备的媒体相关设备并选择当前使用设备(摄像头、麦克风、扬声器)
我在很早之前就写过一个文章,是关于如何使用js来获取当前摄像头的权限的。但是最近公司出现一个场景,就是笔记本外接一个摄像头该如何让用户去选择自己想要的摄像头呢?查阅资料后我找到了解决方案,在这里给大家分享一下。1.获取所有设备之前我提过,js操作媒体输入设备的能力来源于navigator对象下的getUserMedia方法,不清楚的可以移步这里查看如何通过navigtor来获取媒体设备并进行操作。通过查询我得到了一个新的API,那就是navigator对象下的mediaDevices对象,该对象有一个原创 2021-08-23 10:05:30 · 4074 阅读 · 0 评论 -
父元素flex:1,子元素设置高度百分百无效
有的时候我们写页面布局会出现,父级的高度是通过flex为1来设置的,然后子级想保持和父级一样的高度,很多人都会想到设置高度百分百。不过由于这里的父元素是缺省的,所以你设置了高度百分百是无效的。我之前是通过计算属性来设置的,不过今天发现一个很神奇的方法,所以给大家分享一下,那就是设置父级高度为0..content { flex: 1; height: 0; .left, .right { width: 50%; height: 100%; .原创 2021-08-16 10:17:37 · 6066 阅读 · 1 评论 -
js获取摄像头权限实现拍照功能
首先说一下js打开摄像头的流程:使用getUserMedia打开摄像头然后将获取到的流媒体转成url放在video标签中的src中;使用canvas的drawImage方法将video的内容绘至canvas中,这样就形成了截图的效果;使用stream.getTracks()[0].stop()关闭摄像头。1.开启摄像头开启摄像头主要有两种方法,一个是旧方法window.navigator.getUserMedia()方法,还有一个就是新方法navigator.mediaDevices.get原创 2020-12-11 11:26:09 · 5832 阅读 · 2 评论 -
关于mounted中拿不到elementUI组件的DOM元素问题
最近发现了一个ElementUI的小问题,就是会出现mounted中拿不到elementUI组件的DOM元素的情况出现。我的情景如下: 在使用el-table组件时有一个需求就是有一列是一个输入框,所以我使用了插槽。后来有一个操作是需要操作输入框的DOM的,所以我就在原生事件中获取了一下,这个时候是没问题的,后来我想到获取的值可能复用所以想拿到mounted里赋值,不过拿到的结果是一个空数组。 我还是感觉挺不可原创 2021-08-04 10:55:18 · 1347 阅读 · 0 评论 -
Vue事件除默认参数外手动再注入其他参数
情景是在使用vuetify时有个单选框组件自带的change事件,这个事件会默认注入一个参数就是改变的值,但是我是用v-for生成的多个radio组件,所以需要手动传递一个index参数来判断是哪个值需要改变。情景就是如上所说,相信很多人都会很困扰这个问题,因为你只要一手动传参那么默认参数也会拿不到,同时我们使用的是组件库,不可能去更改他们的代码,所以这里会推荐大家使用下列这种方式 @change="(v) => changeRadio(v, index)"这里的v就是默认传递的value.原创 2021-07-26 10:35:00 · 830 阅读 · 0 评论 -
base64,file,Blob和ArrayBuffer以及src之间的转换
本文转载仅做学习用途,具体可移步至博客。一、base64转换为Blobfunction dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.c原创 2021-07-09 11:00:32 · 3326 阅读 · 0 评论 -
js中的export、import、export default等导入导出全解
前端因为规范不同,所以不同的环境会有不同的导入导出方法,因为经常弄混所以特地记一下方便以后查阅记忆,本笔记都是自己总结或查阅资料得出,如有错误请帮忙指出。因为前端的导入导出主要分为commonjs和ES6modules两种标准,其中commonjs主要用于node环境,而ES6modules主要用于浏览器环境,但是ES6modules是兼容commonjs标准的,所以这就很容易让人弄混,本文也将从两个标准来进行讲解一、commonJS学过node的我相信对commonJS规范一定不陌生,在这里不多原创 2021-07-07 11:16:37 · 32475 阅读 · 5 评论 -
Echarts重绘
最近有个项目需要使用到echarts,但是这个项目是一个响应式,因为echarts使用的是canvas,所以在初始化以后,画布的大小是没办法改变的,只能清除掉重绘。 echarts.init(this.$refs.myChart1).dispose();//删除之前绘画的实例 echarts.init(this.$refs.myChart2).dispose(); this.drawLine();//再次调用绘画方法这里为了帮助理解再截取部分绘画方法 drawLine() { //原创 2021-07-01 10:56:14 · 7572 阅读 · 3 评论 -
在electron应用中检测网络
在创建窗口的webPreferences的配置项中开放node的api在渲染进程导入node的child_process,关于child_process的信息请移步官网.然后为了显示运行结果我们还需要进行转码,这里用到的是iconv-lite包,下载完毕后按如下设置即可const child_process = require("child_process");const iconv = require("iconv-lite");iconv.skipDecodeWarning = true;.原创 2021-06-30 16:57:53 · 4272 阅读 · 0 评论 -
使用electron-update实现electron应用的自动更新
因为我也是从零开始接触electron,所以许多不足之处可以提出来多多交流,如有补充万分感谢。一、项目环境我这边的框架使用的是electron和vue,因为vue的脚手架插件时有electron编译的,所以不需要自己去写build,非常方便,随便说一句希望以后这种官方合作越来越多。我这里使用的electron版本是13.0.1,vue的版本还是2.6.11,electron-update的版本是4.3.9$ npm i electron$ npm i electron-updater二、设置原创 2021-06-30 16:18:40 · 4987 阅读 · 0 评论 -
更改C盘用户目录下的文件夹名称
最近公司在做PC端项目,在使用electron编译的时候报错了,看了下是中文路径的问题,所以这里记录一下如何更改自己的用户文件夹名称一、进到管理员账号有的人的管理员账号是Administrator,这个是默认的管理员账户,我的系统版本不一样可以直接在win10的射虎设置中添加一个新的管理员账户如果不支持该方式的课可自行百度如何开始Administrator账户。二、注销当前账户改为管理员账户登录在你当前账户上你是没办法对用户目录下的用户文件夹进行重命名的,哪怕你的账户是管理员账户,所以你需要原创 2021-06-22 12:49:34 · 11668 阅读 · 10 评论 -
关于element-ui表单验证的一个注意事项
表单验证的prop名字一定要和绑定的值的名字一样,否则验证的时候值是undefined这就是修改过的,因为是就项目所以之前的名称是password,后来我写的验证规则用的驼峰结果值一直是undefined,所以prop和v-model的值一定要一样,切记切记。...原创 2021-06-21 17:20:11 · 531 阅读 · 0 评论 -
Echarts饼状图设置
最近公司在做一个PC端的项目,其中有一个统计的页面,说是统计其实就是几个图表放上去好看的,因为数据需要甲方传过来太麻烦,甲方也不会弄这玩意,所以我随便在官网找了几个demo放上去了。但是其中的一个饼状图,因为容器大小的原因导致它的饼状图和标题重合了,这肯定不行的,但是我发现使用grid设置无效,所以我查了一下,发现饼状图不能设置grid,而是center option1: { legend: {}, tooltip: { trigger:.原创 2021-06-21 13:55:04 · 3330 阅读 · 0 评论 -
PC端设置滚动条
在设置了overflow:auto的元素上使用伪元素选择器::-webkit-scrollbar,具体使用可看下面案例 <style type="text/css"> .li-group { width: 500px; height: 300px; border: 1px solid red; overflow-y: auto; } .li-group::-webkit-scrollbar { display: none }原创 2021-04-16 15:22:47 · 1079 阅读 · 1 评论 -
安装nrm后,使用nrm命令报错internal/validators.js:124 throw new ERR_INVALID_ARG_TYPE(name, ‘string‘, value)
最近需要切换不同的npm源,因为有私有的,如果重新配就很麻烦,然后我安装了一个nrm,但是在安装完毕运行的时候报错了。错误如图所示:这个时候得先检查node、npm有没有问题,如果没有问题的话再看这一行错误at Object.<anonymous> (D:\Node.js\node_global\node_modules\nrm\cli.js:17:20)然后根据这个路径打开cli.js文件,就是下面第三行的js文件根据报错可以知道是第17行出了问题,这时候需要将17行的代码换成下面的原创 2021-04-15 09:09:48 · 427 阅读 · 0 评论 -
npm清理缓存
npm清理缓存最近在做项目的时候网很差,下大型插件的时候会安装失败,所以清缓存是必须的,因为不是很常用但是有得用就很麻烦,所以记个笔记。$ npm cache clean --force如果要查看npm缓存的位置可以用下面的命令$ npm cache dir有人的npm可能没有这个命令,可以改用这个命令去查看$ npm config list --json上面的命令可以看到npm的相关信息当然也有人可能使用的是yarn如果是yarn就可以用下面的命令查看缓存位置$ yarn ca原创 2021-03-19 14:10:43 · 72126 阅读 · 1 评论 -
node.js设置允许跨域访问
设置ajax的跨域请求解决跨域的方式有很多,本次解决跨域的方案是跨域资源共享(CORS)这里我们以node.js为例设置允许跨域请求。因为我使用node.js主要使用的是express框架,所以这里也以express框架为例。// 配置跨域请求中间件(服务端允许跨域请求)app.use((req, res, next)=> { res.header("Access-Control-Allow-Origin", req.headers.origin); // 设置允许来自哪里的跨域请原创 2021-03-17 21:02:30 · 3607 阅读 · 0 评论 -
js运算符的优先级
js运算符的优先级因为最近被js的一个typeof的优先级搞得头皮发麻,所以记录一下完整的js运算符优先级优先级运算类型关联性运算符21圆括号n/a(不相关)()20成员访问从左到右).20需计算的成员访问从左到右)[]20new (带参数列表)n/anew … ( … )20函数调用从左到右)… ( … )20可选链(Optional chaining)从左到右)?.19new (无参数列表原创 2021-01-17 13:37:49 · 630 阅读 · 0 评论 -
关于在cmd中MySQL不能插中文数据的原因
下面是本人参考的博客的链接,本文只是当作笔记记载,如果需要看详细过程建议移步原博客哦https://www.cnblogs.com/1102whw/p/7815466.htmlhttps://www.iteye.com/blog/lwjlaser-1013071最近在学习数据库,但是用cmd操作的时候碰见一个问题,就是我使用插入语句的时候一直报错,其他语句没有任何问题,而且错误就出在中文数据上。这是在power shell上运行的结果,很明显是中文的问题,所以我就查了下发现是命令行编码格式的问原创 2021-01-05 15:18:01 · 457 阅读 · 2 评论 -
设置cmd的编码为utf-8
最近初学数据库,发现不管是插数据还是查数据只要是用到中文的都是乱码,刚开始是很疑惑的因为我的数据库已经设置格式为utf-8,查了半天才知道是因为cmd的编码没改过来,下面我就说一下设置cmd默认格式为utf-8一、非默认形式首先在控制台输入chcp可以查看当前代码页为936,也可以右键cmd然后点击属性中的选项中查看到。这里因为我已经设置过了所以我用mysql的窗口做演示。直接在cmd输入chcp 65001即可,这时的cmd就设置为utf-8的形式了。但是这种更改仅限本次cmd窗口,如果关闭.原创 2021-01-05 10:55:03 · 11834 阅读 · 7 评论 -
css文字多行溢出省略
文字的单行省略一般来说我们将文字溢出隐藏都是单行文字隐藏,使用的是下面的方式: white-space: nowrap; overflow: hidden; text-overflow: ellipsis;在对文字设置改样式后文字会强制不换行,然后被隐藏的部分会被省略号代替,但是如果是文字换行之后再隐藏呢?例如下面的效果可以在不使用js的前提下将文字隐藏吗?答案是可以的。多行文字的溢出隐藏多行文字的溢出隐藏用的是下面的样式 display: -webkit-box;原创 2020-12-29 20:13:05 · 493 阅读 · 0 评论 -
js取整的小技巧
js取整其实是一个很小的知识点但感觉很有用的所以在这里记录一下。我们一般js取整都是使用的parseInt来取整,例如下面的情况:但是其实还可以使用下面的方法这种运算符是按位非运算符,这是一个二进制运算符,他的原理我简单表述一下。按位非的运算规则是首先将数字转换成二进制,然后按位取反。第一位是符号位,如果为1则表示负数,除了第一位的符号位其余都再次取反然后+1,如果想更细致的了解js位运算符可以参考这里的W3C。因为是在以二进制的形式操作数字所以效率会更高而且看起来也更有逼格,所以这么好的东西为原创 2020-12-28 12:38:23 · 770 阅读 · 0 评论 -
块级元素上下左右居中的两个小技巧
块级元素的居中之前写居中一般都是margin:atuto要么就是弹性盒子,不得不说弹性盒子确实好用。不过今天就记录一下另外两种的居中方式。第一种我们都知道元素居中有一种方式就是设置定位后left:50%然后transform:translateX(-50%),这种方法也是比较常用的一种。但是今天讲的居中方式和这个有点出入但是更简单。<style> .big{ width: 300px; height: 300px; border: 1px s原创 2020-12-28 12:21:56 · 2028 阅读 · 1 评论 -
关于css媒体查询中的选择器权重的问题
@media中的选择器的优先级今天写响应式页面的时候发现了个问题在这里记录一下.content .right-box { width: 240px; float: right;}我写的页面是三栏式布局.在内容盒子里面我分成了左右两个盒子,上面的代码是我对内容盒子的右盒子设置的样式,我想的是做成响应式后左后盒子不再左右分布而是上下分布,所以我的媒体查询代码如下:@media screen and (max-width:980px) { .right-box{ float: none;原创 2020-11-28 17:40:52 · 1053 阅读 · 1 评论 -
关于css中的BFC现象
BFC前言本文主要说明了BFC的现象产生的方式以及BFC的用途一、BFC是什么?BFC是一个块格式化上下文(block formatting context) 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域,也是浮动层元素进行交互的区域。———以上的内容摘至MDN其实我个人不太愿意去解释BFC,因为我觉得这是一种现象而不是一个定义,并且官方定义是非常绕脑的,所以我更愿意用实例去解释BFC。二、形成BFC的条件具有overflow且值不是 visible 的元素原创 2020-11-23 18:57:25 · 290 阅读 · 0 评论