- 博客(71)
- 收藏
- 关注
RSS订阅原创 重新安装依赖后，sass报警告Sass‘s behavior for declarations that appear after nested rules will be changing
今天拉取代码，重新执行pnpm i安装依赖后。发现终端出来了一堆sass的警告，& {}│。
2024-07-12 14:13:53
2718
8
原创 LuckySheet导入报错file.match is not a function解决方法
luckysheet导入报错file.match is not a function
2024-06-19 12:22:43
315
原创 复制内容显示navigator.clipboard undefined的问题与解决
好久没写博客，太忙了。今天因为遇到复制文本的bug，在这里记录一下~
2024-04-30 10:32:15
2135
原创 centos服务器使用1PANEL安装部署Halo
接上文，我们购买好了服务器并登录成功后。就可以进行建站操作啦。博主这里主要是想试一下Halo的搭建。Halo是类似于WordPress的CMS博客内容系统，不过Halo是国内开源的，技术和界面都比较新颖。主要是我觉得Wordpress在写博客文档方便，太难操作了，要一张张上传图片再插入。我希望的是像CSDN这样支持复制粘贴的，写起博客来才丝滑。Halo文档。
2024-02-20 16:33:31
1033
原创 中文输入法与上下左右键盘事件冲突问题解决
因为我们在做一些键盘处理时，可能会用到上下左右按键进行其他处理。比如表单输入框的跳转，这时候就会出现一个bug。如果我是正常使用中文输入法在打字，正常情况按上下左右键是可以进行选字操作的。因为我这里键盘事件的缘故，按键会导致跳到下一个输入框了，无法正常选字。
2024-01-22 14:45:32
530
原创 element-plus让el-dropdown-item元素获得焦点
因为我们的el-dropdown-item下拉项是设计为插槽，在页面里传给这个控件的。后面我打印dropdown的实例ref出来时发现，element有抛出一个contentRef的属性，这个是下拉面板的dom。官方文档里看了，el-dropdown是没有提供任何focus行为的，只提供了打开，关闭面板的操作。现在我们要在输入框里绑定F9事件，去打开弹出层，并且自动定位到一个item元素，方便用户操作。我们有一个速查框控件，点击搜索按钮会弹出一个下拉列表。，否则是不生效的，用nextTick也是不行的。
2024-01-04 11:40:33
786
原创 echarts柱状图设置滚动条，去掉下面的区域只要滑动条，并弄粗滚动条
echarts在使用柱状图时，横向元素过多，会一直缩小，不利于查看内容。这时候我们一般会设置横向滚动条。
2023-12-29 10:25:16
2008
原创 el-checkbox和el-switch绑定一个Number值
因为我们对状态这种字段，后端一般返回的是Number值。0为正常，1为停用。el-switch，el-checkbox这种控件呢，一般是绑定布尔值的。原来我的做法是使用value和change事件来做转换，而不是v-model。但是后来发现，el-checkbox对于这种做法并没有效果。后来看文档才发现，是可以使用v-model来绑定Number，String类型的。只需要传入参数，指定他的true值和false值即可。
2023-07-14 14:19:53
1931
4
原创 新版本vscode使用配置文件功能，解决不同项目使用不同的插件
如果你同时有vue2,vue3的项目。一定会遇到插件的问题。因为vue2项目插件是使用vetur的，vue3是使用volar的。以前vscode为了在不同项目中能使用不同的配置文件，是使用工作区的概念去解决的，但是比较复杂而且不好用。现在新版本的vscode（我现在下的是1.79 version的），新增了配置文件功能可以很方便的解决这个问题。
2023-07-04 15:26:55
3459
原创 使用nvm安装node16后，npm执行命令报错Unexpected token ‘.‘
如题，因为需要，使用nvm安装了16.18.0版本的node。安装完成并切换当前node版本后。去使用npm，执行任何 npm install , npm init等命令都直接报错 npm ERR!
2022-10-26 12:15:36
3344
1
原创 微信小程序开发踩坑--pc微信小程序请求头的content-language传的是英文
今天在使用pc端微信去打开我们开发的小程序，发现界面的内容是英文，但我的微信设置是简体中文。当然，内容是后端返回的。
2022-09-06 10:35:43
1001
原创 本地修改文件名大小写后，提交到Git仓库没有改变
记录一下，因为一开始新建文件的时候，是用小写开头的 accImportPicker。在修改为大写后提交到仓库，在仓库看到的发现还是小写的文件名，导致项目运行找不到文件。
2022-08-08 09:24:51
2237
1
原创 uview的collapse组件实现一键展开，收回功能（修改value，组件展开功能不生效问题踩坑）
uview使用collapse修改value，展开收回效果不生效
2022-07-27 11:41:12
4649
1
原创 uniapp项目，使用HbuilderX建立eslint规范
社区说明：https://ask.dcloud.net.cn/article/37070目前HbuilderX的插件市场，要做eslint校验，只有这种方法。安装 eslint-js和eslint-plugin-vue插件默认是不打开实时校验的，我这里勾上了注意：实时校验毛病挺多，很容易卡死~在安装完插件后，已经内置了一个比较基础的配置文件。但是太过简单，像我们需要团队协作的，还是要自行配置，做好规范。而且内置的eslintrc.js文件是在本地目录的。我们通常是放在项目根目录下的。1.在项目根目录，
2022-06-22 10:34:18
4151
4
原创 el-tag之间为什么会有间距？
在项目里使用多个el-tag，两两之间会有一个小间距。但是el-tag源码，是没有用 .el-tag + .el-tag兄弟选择器来作用margin的。也就是，他本身，是没有间距作用的。所以怀疑，是不是我项目里的其他css代码作用到了el-tag。但是全局搜索了.el-tag。也并没有找到这个css样式。后来查了半天，发现是lnline-block的特性。查看element-ui文档的官网，发现也是有间距的。即使把他作用的margin-left：10px去掉后，也还是有个小间距。原因就是因为，spa
2022-05-26 11:15:20
2111
原创 eslint校验忽略 ‘v-html‘ directive can lead to XSS attack的warning警告
eslint校验忽略 v-html Xss attack警告
2022-05-16 16:48:17
3333
原创 el-autocomplete扩展使用-底部增加固定操作行
修改el-autocomplete下拉列表的样式继上一篇文章，需求需要修改下拉列表的宽度后。又来新活了，这次需要在下拉列表底部增加一个快捷新增按钮，如图所示。看了一遍文档，el-autocomplete并没有提供这样的底部插槽。只有一个item的插槽，可以自定义模板。但这只能控制每一项的内容，并不能在底部添加一个自定义内容，除非通过操作dom的方式去动态添加。在准备放弃使用el-autocomplete,改用el-select来实现需求的时候。我在element-ui的官网发现了他的搜索框，使
2022-04-15 09:46:20
2509
3
原创 nvm安装手把手教学
nvm 安装下载地址https://github.com/coreybutler/nvm-windows/releases下载nvm-setup.zip。解压下来只有一个nvm-setup.exe安装包，选择要安装到的位置，无脑下一步即可完成安装。如果你电脑已经安装了node，会提示你，是否使用nvm进行管理，点击是即可。该版本就会作为默认的node版本。验证安装是否成功 nvm-vnvm基本命令nvm -v // 查看nvm版本nvm ls // 查看已安装的node版本nv
2022-04-09 13:53:22
2241
原创 修改el-autocomplete下拉列表的样式
碰到一个需求，我这里使用el-autocomplete，因为列表的内容可能很长，导致显示不全，影响阅读。所以需要修改一下下拉列表的宽度为auto，使得其适应内容宽度，而不是继承父元素宽度。一开始使用深度作用选择器，发现作用样式不生效，查看dom结构发现是因为下拉列表的class是插入至body下的，而不是vue app 下。所以无法作用到。解决方法：将popper-append-to-body设为false，然后再使用深度作用选择器。上代码 <temp.
2022-04-08 15:27:55
6384
8
原创 使用a标签的href来实现点击手机号拨打电话
绝绝子，原来a标签还有这功能。在移动端页面，使用起来很方便。href = tel: + 电话号码 即可 <a :href="'tel:'+ '110' ">call police</a>
2022-03-08 17:18:40
5698
1
原创 分页下拉框被el-tabs遮挡
在看同事写的页面时，发现点击分页时，弹出的下拉框会被 el-tabs头部遮挡。第一时间想到的是，vxe-table与element-ui的z-index设置冲突。通过审查元素可以知道，这里下拉框的z-index为102。element-ui的z-index默认为2000。但我无论是提高下拉框的z-index还是降低element-ui的z-index都没有效果。最后发现是.el-tabs__content设置了overflow:hidden导致的隐藏，而不是遮挡。解..
2022-02-14 12:04:41
1800
1
原创 使用plop自动生成文件
官方文档plopplop简介就是一款通过命令行能让你快速生成预设文件的工具。 能让你的项目，不同开发者在创建页面/组件等文件时，保持一致性。安装npm install -D plop使用创建plopfile.js入口文件在项目的根目录下，创建plopfile.js文件// plop 的入口文件// 需要导出一个函数，函数接收一个plop对象，用于创建生成器任务const path = require('path')const fs = require('fs')
2022-01-28 16:43:28
2265
1
原创 chrome浏览器debug vue项目，跳过vue源码
在就发vue-cli的项目，也会用到webpack，npm等工具。在debug的时候，只是想看当前代码的执行情况。但是调试就会经常进入到vue.esm.js等一些源码文件。一进去就很跳出来了，十分麻烦。Chrome调试也是才知道，谷歌浏览器其实有一个黑盒功能，可以设置忽略的文件。设置后，debug就不会进入到这些文件。F12 点击设置按钮在 Ignor List 里添加要忽略的文件名称即可。Debugger for Chrome 调试1.安装插件2.添加launch.json配置文件.
2021-12-31 16:32:38
2450
3
原创 vue-router使用query传对象、数组，刷新后参数丢失
在页面之间跳转，需要携带参数。正常传参的话就vue-router的params，query两种，或者使用localStorage本地持久化存储。为了刷新不丢失数据， 我使用query进行传参，但是我传的是一个对象。发现刷新后，即使url里还有object的相关信息，但是数据还是丢失了。原因：第一次跳转，是没有问题的。刷新页面后，url里的object就会变成字符串，数据就丢失了。解决方法：使用JSON.stringify将对象数据包裹，转换为字符串。在接收时使用JSON.parse解析回对象.
2021-12-14 14:15:08
5559
1
原创 vxe-table的表单代理获取不到默认值
在用vxe-table做表格，用到了表单代理。是一个下拉选择，但是发现获取不到他的默认值。仔细对比了插槽，字段field名称，都没有错。tableProxy也开启了表单代理。data里设置了category默认为1，但是在进入页面的时候并没有给你选中。因为之前做表单代理都是些输入框，所以并没有发现问题。在官网文档仔细看后发现，使用了下拉框的表单代理，都是不会赋初始值的。解决办法就是在tableProxy里自己给form赋初始值。否则直接绑定this.tableForm.data的数据也可以.
2021-11-26 10:22:45
2019
原创 el-form表单对象内还嵌套对象，绑定的prop规则校验会失效
继续踩坑~。因为受限于后端返回的数据格式，整个表单是个对象，但是里面还会嵌套对象。而我们在绑定字段时，自然而然是去绑定最里层的字段。el-form的model是去绑定大的表单对象。而我这里的表单项则是绑定final_transfer.acc_profit_name。但我这里prop写的是acc_profit_name。对应规则里面的prop。按官方文档的，如果表单对象不涉及嵌套，这样绑定是没问题的。但如果涉及到了嵌套。我们这里这样绑定prop，即使表单的值改变了，校验也还是会存在。解决.
2021-11-25 10:43:46
5898
6
原创 element-ui的表单，使用v-if进行显隐表单项时，有时不触发规则校验
又双叒踩到坑了。在写一个表单时，因为区分多个类型，切换不同的类型，表单项要进行显隐。那就一股脑用v-if根据类型去显隐，这时候发现在切换类型之后，有的表单项规则校验不生效了， 就纳闷了。然后猜测是不是因为用了v-if，dom重新渲染导致表单的prop规则校验不重新触发。去掉v-if后，果然可以了。解决方法：v-if换成v-showel-form-item添加唯一key因为我需要切换类型时，对应所需的表单项，所以第一种方式不符合我需求，采用第二种。...
2021-11-22 17:05:52
3214
原创 JS浮点数做乘法运算导致精度丢失的问题
项目两年前老同事开发好的东西，今天发现了问题。我就去看了看他的代码。现在是有个数字，我需要四舍五入，并且保留两位小数位。我输入1.355 那么返回的是1.36。这里没有问题，而我输入1.255返回的确实1.25而不是1.26。下面是原来的代码 toPrecision(num, precision) { if (precision === undefined) precision = this.numPrecision return parseFloat(Math.rou.
2021-11-22 15:24:09
5961
1
原创 关于localStorage的getItem方法获取到的是字符串的问题
今天遇到了一个bug。因为有个地区数据是要存在本地的。但要作判断，如果数据为空的话，要发起请求获取数据。首先我这里的localStorage.getItem(‘AreaList’)是个空数组。按我的if逻辑来说， [ ] === null 为false，然后就会去判断后面的[ ].length = 0 这里应该是true，那么就会去执行if下面的代码。问题就出现在这里，代码没用执行到。也就是说明 if 的整个判断是 false、我就把获取到的数据，看看它的typeof ，打印出来发现是stri.
2021-11-15 15:43:26
3900
原创 使用element-ui的el-input，谷歌浏览器忽视autocomplete:off的问题
今天碰到个bug，在选地区级联的时候，浏览器会把已有的地址带出来。如下图，这样的话，地址框就会挡住el-cascader的选择。但其实，element-ui的组件，input都是把autocomplete属性默认设置为off的。不应该有自动补全才对。然后去查了一下，发现是谷歌浏览器直接忽视了autocomplete属性参考这里的描述https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off解决办.
2021-11-09 11:44:42
3034
原创 vue实现在线预览office文件
最近在做电子档案，后端提供了文件的华为云的oss链接。已经实现了点击下载文件的功能。但是呢，他们又希望常规的文件，可以直接点击预览，不需要下载。按道理说，做文件的在线预览，买个第三方服务什么的，后端部署一下服务，前端对接一下，就通通搞定。顶不住第三方基本上是要money的。那不想掏money，还有什么解决方法呢。方法一用微软的office online进行在线预览https://view.officeapps.live.com/op/view.aspx?src=文件地址例：https://v.
2021-10-20 17:03:19
11952
13
原创 前端生成uuid
有时候需要前端自己生成一个uuid作为唯一值传给后端。直接上代码/** * * * 获取请求的UUID，指定长度和进制,如 * getUUID(8, 2) //"01001010" 8 character (base=2) * getUUID(8, 10) // "47473046" 8 character ID (base=10) * getUUID(8, 16) // "098F4D35"。 8 character ID (base=16) * */export functi.
2021-10-19 16:57:22
8836
原创 VSCODE插件Comment Translate突然翻译不了的问题
因为项目用了vue-i18n，为了方便快速翻译，所以装了Comment Translate插件之前一直都可以使用，现在突然就不行了。试了卸载重装插件后也不行，最后在该插件的扩展设置里，将Google换成Baidu才解决，不确定是不是墙的原因。...
2021-10-18 09:35:11
7910
2
原创 vue中通过在线链接使用iconfont阿里图标库FontClass
看项目原来的都是将图标下载到本地，然后引入css文件。查了些文章也都是介绍的，先将图标下载到本地再导入。那么在项目开发中，时不时就会需要加入新的图标。这时候每次都要重新将图标下载到本地再导入。觉得十分麻烦。这里介绍用在线链接来引入。更新图标后只需要替换iconfont生成的链接。加图标加入导项目后，选择font class 。 生成链接，复制这个链接。2.在assets下新建一个icons文件夹，并新建一个css文件。3.在css文件里，通过@import 刚刚复制的链接在mai.
2021-10-15 10:40:16
2443
原创 ElementUi el-autocomplete 踩坑 （使用clearable清除,点击输入框下拉条件不再显示）
今天在写组件的时候，用到了el-autocomplete来做模糊搜索。因为要可以清除条件，所以加了clearable属性，然后遇到了个bug。点击清除图标后，如果你已经是聚焦状态了，你在点击输入框，下拉框不会再显示了查了一下，是因为有element-ui源码有bug，主要原因是参考该博客autocomplete组件在执行清除事件时，将activated置为false。这时候下拉框不会显示了，而在querySearch执行成功后又没有将activated置为true。所以导致了该bug。解决的核心.
2021-10-14 17:34:26
9520
13
原创 proxyTable代理，使用onProxyReq函数查看真实的代理路径
vue项目用到了proxyTable代理，有时候请求不到。F12看network的url是没问题的，这时候想查看一下真实的代理路径。直接上代码proxyTable:{ "/arc": { target: targetUrl, changeOrigin: true, pathRewrite: { "^/arc": "/arc" }, onProxyReq:function(proxyReq,.
2021-10-13 10:24:50
3248
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人