- 博客(37)
- 收藏
- 关注
RSS订阅原创 input标签file类型的accept常见属性值
若设置接受某类型所有格式文件时，使用/*进行设置，例如image/*为匹配所有格式的图像文件（使用通配符/*可能会导致上传弹框响应有延迟）。accept未设置属性值或者属性值设置错误时，默认可以选择任意类型文件。兼容性：IE9及其以前的版本不支持该属性。
2025-09-23 15:31:25
427
原创 css设置文字两端对齐text-align:justify不起作用的解决方法
当使用text-align给元素设置对齐方式时，可以配置left、right、center使其居左、居右、居中对齐，如果想要两端对齐，设置属性为justify。但会发现，只有一行文字的时候，justify并没有生效，而多行文字时最后一行也还是居左显示。这样就可以实现元素中每一行都可以两端对齐显示。
2025-05-14 17:39:51
996
原创 前端获取流式数据并输出
在一些实时对话、日志推送等场景下，如果使用传统一次性加载数据的方式，可能会出现等待时间较长的不友好交互，这个时候我们需要使用流式布局分段获取数据，渐进式加载，减少等待焦虑。getReader()获取流数据，new TextDecoder()转换二进制数据，循环读取分段数据，直到done结束。原生js上，我们使用fetchAPI进行流式处理。
2025-05-08 11:06:59
444
原创 css实现一键换肤
第二种方式较第一种的优势是，不需要在js中修改那么多的变量，如果主题样式也特别多的话，js的方式比较麻烦，而且第二种更方便存储到缓存中，以便后续直接应用。另一种方式是在css中将每一套变量的值罗列出来，在:root上添加自定义属性，js通过修改自定义属性的值修改css的引用值。实现一键换肤的时候，我们除了动态替换引用的css文件，还可以通过使用css变量的方式，达到所需效果。:root指向文档根元素，可用来配置全局变量，而我们可以通过修改变量的值，来实现修改样式。
2025-04-14 15:19:18
426
原创 vue2项目eslint提示＜template v-for＞ key should be placed on the ＜template＞ tag
在template标签上使用v-for时，vue2会提示key不可放在template标签上，必须放在子元素上。vue3会提示key必须放在template标签上。这时候可能我们怎么写都会触发eslint校验提醒。不影响使用，但看着难受。我们可以在根目录上新建jsconfig.json文件，在文件中添加以下内容，即可解决。
2025-03-25 10:01:42
682
原创 npm install 报错ERESOLVE
2.npm install --legacy-peer-deps 不会自动安装 peerDependencies，而是只会安装你明确指定的依赖（在 npm v7 及以后的版本中，npm 会自动安装 peerDependencies，如果它们与其他依赖版本冲突，会导致安装失败。--legacy-peer-deps 会恢复到 npm v6 的行为）1.npm install --force 忽略所有冲突和警告强制安装。不确定冲突解决方式时，--legacy-peer-deps更安全。
2025-03-06 14:41:36
706
原创 iview的tree组件动态更新数据时，组件没有同步更新渲染
当使用iview的tree组件，在组件已经创建之后动态修改相关数据，树结构及相关状态并没有同步修改，只有展开/收起父节点的时候，才会更新。这个时候我们可以给组件绑定key，修改数据后修改key值，使组件重新渲染，这样可以实现同步渲染。
2024-09-26 10:56:33
399
原创 vue axios运行时报错You may need an appropriate loader to handle this file type
根据报错的路径发现，安装的时候axios没有指定版本，直接安装为了最新版，只要将原来的的删掉，然后指定版本为1.5.0：npm install axios@1.5.0 --save，安装后重新运行就好啦。如果项目install后运行报错，并且报错如下图所示。
2024-09-24 16:33:28
677
原创 iview的InputNumber组件有值的情况下校验失败
iveiw表单在使用InputNumber组件的时候设置必填校验，输入框中有值却提示校验失败。这时候，我们可以在rules规则中添加类型属性type，即可正确触发校验。
2024-09-14 15:09:44
663
原创 表单input浏览器自动填充autocomplete=“off“不生效的解决办法
我们在需要填写账号密码的地方使用表单input时，常常会出现表单的自动填充，将浏览器已经保存的用户名密码填充到表单中，但有时我们是不需要这个填充的，就会给input设置属性autocomplete="off"。在某些情况下设置off并没有生效，还是会触发自动填充，这时候，我们可以设置autocomplete的属性为"new-password"，就可以取消表单的自动填充。
2024-09-13 15:34:06
1172
1
原创 vue使用less、sass等时，运行报错To install it, you can run: npm install --save !!vue-style-loader!css-loader?
css：卸载当前版本npm uninstall css-loader，安装低版本npm install css-loader@3.0.0 --save-dev。less：卸载当前版本npm uninstall less-loader，安装低版本npm install less-loader@5.0.0。sass：卸载当前版本npm uninstall sass-loader，安装低版本npm install sass-loader@5.0.0。
2024-08-23 13:27:29
624
原创 在同一设备上同时存在vue-cli2和vue-cli3项目
然后创建vue-cli2和vue-cli3的存放文件夹，在vue-cli2文件夹指令安装vue-cli2：npm install vue-cli，在vue-cli3文件夹指令安装vue-cli3：npm install @vue/cli。之后在vue-cli2和vue-cli3的文件夹中分别找到vue和vue.cmd，分别改名为vue2、vue2.cmd和vue3、vue3.cmd，然后配置环境变量-系统变量。如果设备上已经全局安装过vue-cli2或vue-cli3，先将已经安装的卸载。
2024-08-23 09:28:55
569
原创 npm搭建vue环境
回车后根据个人需求进行选择配置，初始化成功后cd 项目名，进入到目录下，然后npm install安装项目依赖，再根据个人需求安装其他依赖，之后就可以npm run dev启动项目了。回车后根据个人需求进行选择配置，初始化成功后cd 项目名，进入到目录下，再根据个人需求安装其他依赖，之后就可以npm run serve启动项目了。vue init webpack 项目名。vue create 项目名。
2024-08-22 14:38:09
364
原创 vue引用tinymce时，报错UncaughtSyntaxError:Unexpected token
这是由于tinymce没有正确解析所致，在安装tinymce后，将node_modules目录下的tinymce内容复制到static文件夹下，然后在引用tinymce地方根据报错位置引用配置项文件，如果是plugins.js报错，将tinymce.init中plugins对应的文件引用上。如果引用文件配置完成后，没有报错，但是不显示内容，查看一下是不是样式没有正确引用进来，如果是，在js中引用对应的样式文件。
2024-08-20 18:38:10
1427
原创 解决better Comments插件在.vue文件中不显示对应颜色
安装better Comments插件后，发现同样的书写方式，在.js文件中会显示不同颜色的注释，在.vue文件中却没有生效，表现如图。保存并重启编辑器就好啦！
2024-08-19 14:18:57
531
2
原创 下载文件重命名时a.download不生效
如果当前页面地址和预下载的文件所处服务器不在同一域名下时，由于跨域访问限制，download配置会不生效，我们可以使用blob方式将文件转为同源文件，进行配置名称并下载。
2024-08-16 17:36:48
534
原创 async/await报错SyntaxError: await is a reserved word
await需要在async函数中使用，并且在同一作用域上。
2024-08-16 16:02:03
463
原创 vue启动项目时报错Module build failed:TypeError:Can not read property “range“ of null
通过git拉取的项目，npm run dev启动时报错TypeError:Can not read property "range" of null，主要是因为eslint包的问题，可以将babel-eslint包换成7.2.3版本，npm install babel-eslint@7.2.3，然后删除node_modules文件夹，重新install，再运行，就好了。或者将.eslintrc.js文件中的内容注释掉再运行。
2024-08-15 09:29:57
1715
原创 vue修改node-modules文件并应用到后续打包中，不用重复修改
在vue中使用一些第三方插件时，可能会有部分bug或者希望定制化修改源码，如果只在node-modules中进行修改，下次进行打包或者同步到其他地方的代码并不生效，还要进行再次修改，这时候可以用到patch-package进行依赖补丁。然后进行手动修改node-modules下的文件，修改后执行npx patch-package package-name（package-name为你修改的组件包的名字，不是文件名称）；错误，切换npm的版本，本人使用16以上的版本是成功了的，12的就会出现报错如下图。
2024-08-14 13:25:35
1043
原创 git相关命令操作
git reset --hard HEAD^ // 重置到cherry-pick/commit之前的状态（做出的修改都会消失）git cherry-pick 分支名（commit ID） // 将其他分支指定提交应用到当前分支，并创建一个新的提交。git checkout -b 新分支名 // 创建一个新的本地分支并切换到该分支上。git merge 分支名 // 合并指定分支到当前分支。git stash list // 暂存记录。
2024-08-13 15:15:16
330
原创 git忽略文件提交
当忽略文件不生效时，先命令行清除本地缓存 git rm -r --cached，然后将本地代码重新加入git add,并让.gitignore文件生效 git commit -m 'update .gitignore'1.在仓库目录下创建.gitignore文件，用编辑器打开输入node_nodules，之后git push的时候就会忽略。方法一：直接在仓库根目录执行 echo 'node_modules'>>.gitignore。以node_modules文件夹为例。
2024-08-12 18:24:17
1392
原创 js获取元素尺寸及位置信息（getBoundingClientRect）
js的getBoundingClientRect用来返回元素的大小及相对于浏览器窗口的位置信息。一般可用来计算元素尺寸、滚动事件时判断元素是否滚动到特定位置等……buttom: 元素底部距离窗口顶部的距离。right: 元素右侧距离窗口左侧的距离。left: 元素左侧距离窗口左侧的距离。top: 元素顶部距离窗口顶部的距离。x: 元素左上角相对于窗口的横坐标。y: 元素左上角相对于窗口的纵坐标。height: 元素的高度。width: 元素的宽度。
2024-08-12 15:18:18
352
原创 vue3页面跳转传值时获取不到params值
路由跳转时，将this.$router.push({path: '/index',params: {}})改为this.$router.push({name: 'index',params: {}})，即用name进行跳转时，就可以获取到params传递的参数了。控制台警告Path "/index" was passed with params but they will be ignored. Use a named route alongside params instead.
2024-08-12 14:11:39
1425
原创 解决Chrome不支持ajax获取本地file的问题
一般在写前端页面数据时，在与后台对接之前，会使用本地json数据渲染。在控制台上输入chrome.exe路径，后加“ --allow-file-access-from-files”（注意空格），这时就会启动Chrome浏览器，然后再该页面上打开要获取数据的页面，就可以了。右键点击桌面上Chrome快捷方式，选择“属性”，在“目标”输入框中“chrome.exe”后增加“ --allow-file-access-from-files”（注意--前有个空格），然后确定。重启浏览器，一般来说就可以了。
2024-08-12 14:08:52
730
原创 js关于日期的操作
var weekEndDate = formatDate(new Date(year, month - 1, date+ ( 7 - day))) //本周周日日期。var weekBeginDate = formatDate(new Date(year, month - 1, date - day + 1)) //本周周一日期。var allWeek = Math.ceil((allDates + (firstDay - 1)) / 7) //当月一共有多少周。
2024-08-11 19:06:36
273
原创 sublime无法正常安装packagecontrol的解决办法
下载手动安装时的package control安装包，解压后将channel_v3.json文件放在某盘根目录（方便后续操作）下，点击编辑器preference -> package setting -> settings user进入，在文件中添加如下标注出的代码（channels中的值为channel_v3.json文件目录），保存，重启编辑器即可（多个配置内容时，需要用逗号隔开）。如果控制台安装和手动安装都无法正常使用package工具，并提示如图错误，
2024-08-11 18:59:29
1210
原创 mysql安装与启动
在8.0版本中，mysql -skip-grant-tables可能无效，使用mysqld --console --skip-grant-tables --shared-memory进行该步操作。打开我的电脑-属性-高级系统设置-环境变量，在系统变量中找到PATH变量，在其值后追加mysql文件夹下bin文件夹路径（例D:\mysql-8.0.15-winx64\bin），然后确定。然后输入mysqld --initialize-insecure --user=mysql回车。回车就可以看到数据库啦！
2024-08-11 18:51:44
547
原创 颜色值十六进制转为rgb
有时候在颜色表示上可能需要数值转化，十六进制向rgb转化时，rgb中的数值是十进制，所以根本上的问题就是十六进制向十进制转化。这时候我们就注意到一个函数parseInt(),他不仅可以做数值取整，还可以进行其它进制向十进制转化。如果被处理数值是以‘0x’开头，那么parseInt()会默认为其后数值是十六进制。如果被处理数值是以‘0’开头，那么parseInt()会默认为其后数值是八进制。这时候我们就可以对十六进制颜色值进行转化了。
2024-08-10 22:56:59
1025
原创 英文字母（大写）转阿拉伯数字
这时候我们就可以用到charCodeAt()方法，其作用就是传入一个字符返回对应的Unicode值。A、B、C、D...是从65开始计算的，所以将获得的数值-64就好了。而对于排序大于Z的序号要怎么拿到数值呢?将序号切成一个一个的，一级一级计算对应的数值然后相加就好啦。如果想要计算小写字母所代表的的数字，先将字符串toUpperCase()，然后再获取数值就好啦！
2024-08-10 22:53:35
645
原创 阿拉伯数字转英文字母（大写）
我们可以利用到一个方法是“String.fromCharCode()”，传入一个Unicode值，返回对应的字符串。而A、B、C、D...是从65开始算起，这时候我们就可以根据我们传入的数字获得对应的字母了。String.fromCharCode(64 + 1) // A为字母排序中第一个，所以得到的值是A。而对于大于26的排序值要怎么对应字母呢？我们可以通过除以26然后取余，拿到的值再拼接就好啦。想要拿到小写英文字母，直接在拿到的值上toLowerCase()就可以啦！
2024-08-10 22:50:15
518
原创 区分patch、put、post
而patch是对数据部分修改，例如一条数据中有username、userage、useraddress等字段，利用patch提交username字段，就是对该数据中username进行修改，其他字段值不变。例如向后台创建一条叫做test的数据，使用post的时候，如果数据库中没有该条数据，就会创建一条新的，如果有，就会创建另一条新的，执行多少次就有多少条数据。但使用put方法时，如果数据库中没有该条数据，就创建一条新的，如果已存在，就将原本的数据替换掉，数据个数还是一个。
2024-08-10 22:39:08
623
原创 在伪元素上添加点击事件
在页面上我们无法通过jQuery获取到元素中的伪元素进行事件绑定，所以我们利用pointer-events属性屏蔽元素操作事件，将事件绑定到伪元素上。console.log(this) //该事件实际绑定元素是after伪元素。
2024-08-10 22:36:16
397
原创 js判断数据类型
一般在js判断数据类型时，主要有以下几种方法：typeof、instanceof、constructor、prototype、$.type/jQuery.type。对于instanceof，一般是在我们已知数据类型时进行判断，但一定要注意类型名的大小写。而$.type则是比较万能的方法了，可以判断布尔、error、正则等等。a.prototype = new b() //a继承b。使用prototype时同样要注意大小写的问题。接下来我们来比较下各种方法的异同。
2024-08-10 22:29:19
458
原创 vue项目的按需加载
而对于vue模块引用来说，我们没必要在一开始就将所有模块js都引入进来，所以我们要将‘src/router/index.js’中引入模块的代码进行修改。使用 vue-cli构建的项目,在默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体，而这个文件一般会比较大，可能几兆甚至几十兆，结果导致页面加载时间过长，对于用户来说这是一个极不友好的体验，所以有些时候我们就需要用到‘按需加载’。这样就可以将一个大的js文件拆分为一个个小的文件，根据用户触发事件进行按需加载了。
2024-08-10 22:22:29
487
原创 vue项目打包后出现图片引用路径错误的问题
根据‘build/webpack.base.conf.js’与‘config/index.js’对应关系，可知大于10000B的图片被打包到了‘static/img’目录，所以引用路径就变成了‘static/img/+文件名’。修改‘config/index.js’下assetsPublicPath的‘/’为‘./’，在‘build/utils.js’中ExtractTextPlugin.extract下添加‘publicPath: '../../'’
2024-08-10 22:18:52
1252
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人