- 博客(35)
- 收藏
- 关注
RSS订阅原创 【配置xampp反向代理方法】vue3-element-admin 框架打包时遇到的问题及解决方法记录（引用静态文件js/css爆红404，部署后请求跨域api接口404）
打包部署在xampp上报错： GET http://localhost/js/index.8n3J6cW3.js net::ERR_ABORTED 404 (Not Found) 打包部署在xampp上请求api报错
2024-02-12 20:33:41
807
原创 vue3 keep-alive include失效的原因排查 setup语法糖文件名称name暴露的问题
KeepAlive 默认会缓存内部的所有组件实例会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。如本文案例，将文件名称修改为Flow.vue，keepalive生效。在 3.2.34 或以上的版本中，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明。但实际keepAlive功能失效。当前vue3项目为选项式API时，可以通过以下方式在页面组件中需要添加 name。
2023-06-29 15:31:53
1566
原创 解决vue3 路由切换后，页面不显示内容，刷新后正常显示（路由切换白屏的问题）
正常使用时切换路由都可以正常地切换页面，但是页面长时间无操作就会浮现该问题。使用导航切换路由，路由可以正常跳转，地址栏有变化，但页面不显示。在router-view 中给路由添加key标识。2、切换的各级页面均有根标签节点包裹。
2023-06-13 14:24:45
10733
17
原创 vue禁止浏览器记住密码：使用文本输入框作为密码控件，将输入字符自动转换为*星号，避开浏览器提示保存明文密码的功能，输入框可键入删除复制粘贴替换。Vue、JS
本文针对禁止浏览器记住密码、自动填充的功能使用的方法是： 不使用type为password的输入框，全程使用type=”text“的文本输入框，根据每次输入值替换文本框内容为星号 “*” 或者 小圆点 “·”（中文）。可以复制粘贴密码，可选中替换。
2022-11-01 16:57:52
2820
原创 Vue+ElementUI中修改el-table表格符合条件的某一列/某个属性的单元格样式（背景色、字号等
先看效果图：根据某项属性确定高亮哪一列或几列的单元格。根据elemenUI中 table组件的可修改属性来配置 cell-style <el-table ref="multipleTable" :data="tableData" v-loading="loading" :cell-style="abnormal_columnStyle" :header-cell-style="{'padding':'0 5px'
2022-05-09 14:40:39
3017
1
原创 nodeJS调用grpc域名证书验证及TSL/SSL配置的域名配置写法
调用文档示例const root_cert = fs.readFileSync('path/to/root-cert');const ssl_creds = grpc.credentials.createSsl(root_cert);const stub = new helloworld.Greeter('myservice.example.com', ssl_creds);但这个案例没说域名怎么配置。我的：const a= fs.readFileSync(path.join(__dirnam
2022-03-14 15:51:23
763
原创 修复使用keep-alive缓存使用better-scroll滚动条的页面，导致的页面无法滚动滑动的问题
问题复现：一开始在vue移动端项目中使用的better-scroll滚动条的插件，后面做项目性能优化时，需要对该页面进行缓存。调试过程中发现页面无法滑动，真机测试中则是偶尔能滑动，偶尔不行。问题分析：在使用better-scroll插件中，需要给滚动条设置当前高度，而使用keep-alive缓存页面后，则缺失了刷新滚动条的操作。解决办法：我们可以使用activated生命周期钩子来进行滚动条刷新的操作。关于activated生命周期钩子，在vue.js文档的这个位置：activated生命周期钩子
2022-01-14 15:44:46
1069
原创 elementUI+Vue，使用ref区分不同的el-upload，清除其缓存保证能够多次上传选择文件。（多个el-upload时注意区分
需求：在表格中嵌套使用多个el-upload组件，可能会需要多次选择。问题分析：单独使用el-upload时，想要在隐藏上传列表的条件下实现多次上传，就需要在每次选中文件时清除上次选择的文件缓存。使用this.$refs.[refname].clearFiles();举例： <el-upload ref="picupload" class="avatar-uploader" action="#
2022-01-04 17:16:40
4348
原创 vue+elementUI使用node-xlsx实现选择excel并解析其数据，导入显示在table组件中。
VUE，选择excel文件，去解析和导入数据到表格组件里面。
2021-12-23 16:27:07
1422
2
原创 vue项目使用vue-cli-plugin-electron-builder，打包时的一些坑
vue项目使用vue-cli-plugin-electron-builder，打包时的一些坑
2021-12-21 16:39:42
3874
4
原创 Vue中调用qrcodejs2生成二维码，并将canvas转为图片格式使得移动端使用时可长按识别。（含批量生成二维码时遇到的坑，封装组件
业务需求，需要使用JS将url链接转为二维码图片。查到可以使用qrcodejs2传入内容、大小获得一个画布上的二维码。但是canvas标签在移动端上无法使用长按识别的功能，所以还需要把canvas对象转换为图片img标签。 网上找到的相关资料大多是通过html2canvas来将二维码转为图片的，但通过这种方法，总有一些奇奇怪怪的问题，比如有时候明明转成了base64，但是页面不显示。后来还是选择直接转为image，使用起来也更灵活。首先安装qrcodejs2：npm install qrcodej.
2021-11-26 13:22:13
2302
1
原创 vue项目打包后，浏览器上显示的页面标题前图标不显示，打包之后丢失ico图标丢失
问题描述：vue项目本地运行时，页面标题前的图标可以正常显示：打包之后却变成了：原因分析：图标丢失打包后路径错误解决方式：图标丢失打开打包文件：可以看到图标还在，所以排除。打包后路径错误打开index文件，查看在当前文件夹下，路径指向的位置是不是错了。比如我这里icon和index.html是放在一块的，路径写成了<link rel="icon" href="../test.ico">指向根目录，打包后放在服务器下运行位置就不对了。改成：
2021-10-22 13:53:36
2416
原创 解决npm install 报错 npm ERR! code 128 npm ERR! command failed npm ERR! command git ls-remote ssh://g
想git clone 一下vue-element-admin集成方案下来学习一下，但是在安装依赖npm install这一步总是报错，无法进行下一步，卡了很久：npm ERR! code 128npm ERR! command failednpm ERR! command git ls-remote ssh://git@github.com/nhn/raphael.gitnpm ERR! git@github.com: Permission denied (publickey).npm ERR!
2021-10-20 13:59:15
16012
20
原创 VUE+Axios+ElementUI 分页请求第一页首页展现数据个数比后一页的少一项。limit、offset分页请求
因为设计图就是列表第一项占了位为添加按钮，如图：从第二页开始就没有这个添加项了。原本的思路是第一页设置请求的limit是3，换页时，当前页不是第一页时请求的limit设为4，就可以实现效果。初始代码：<div class="fenye"> <el-pagination background :current-page="taskDataQuery.currentpage" :page-size="taskD
2021-10-18 09:35:57
673
2
原创 vue使用JavaScript的Number方法或正则表达式进行表单验证，判断值是否为数字（包括整数和小数），验证值只能为小数点后一位
var a = "1.56";var b = "asf"var c = Number.parseFloat(a) //1.56var d = Number.parseFloat(b) //NaNvar e = Number.isNaN(c) //falsevar f = Number.isNaN(d) //trueNaN --》not a number，不是一个数，但是属于number类型所以，当使用parseFloat()转化字符串的时候，当值为非数字类型，结果为NaN。那么，我们就可以通
2021-10-13 10:26:32
4814
1
原创 vue+Vant+BetterScroll，使用div包裹组件，操作后产生位移，解决方法记录
代码如图，改变列表长度（也就是ul包裹的列表）后，整一块会向上移动。解决办法：给entrylist加一个css样式：.entrylist { padding: 0.1rem 0.2rem;}
2021-09-23 13:18:39
183
1
转载 Vue更新同名图片不加载问题
问题描述：已有一个表格拥有添加编辑功能，其中有图片上传这一步。更改图片后，表格中的图片没有改变，但是输出路径查看，图片是已经上传的。问题分析：参考（https://www.jianshu.com/p/50d04fee3aed）因为图片是上传到阿里云，上传后的图片路径不变，Vue默认不重新加载的，因为Vue缓存里已经将其识别为’已加载’的状态。解决办法1：在图片的后面加时间戳this.imageSrc = 图片路径地址 + "?" + new Date().getTime(); 解决办法2：在图片
2021-09-17 14:21:55
614
原创 VUE+ElementUI的表单el-from表单验证二选一必填项，并且满足条件后会清除表单验证提示。
效果图：使用Element-UI的自定义验证实现。这里面有个坑是，两个input输入框都点出了提示信息，填写任一输入框之后只有操作的那一项的验证提示消失了，不主动清除另一项的验证提示就会一直存在，观感很不好。如图：所以，在验证成功后要强制清除另一方的验证提示。本来应该分别清除的，我这里懒得写那么长了干脆一起清掉哈哈哈。现在，填入其中一项效果如图：HTML： <el-form ref="form" class="forminfo
2021-09-16 17:54:35
6064
1
原创 VUE+ElementUI图片上传的判断格式、大小、尺寸（即宽高比）完整实现。
需求分析：表单中需要上传图片，并对图片做出限制：1）上传图片大小不能超过 2M；2）上传图片格式只能是jpg或png；3）上传图片的宽高比例为2：1。效果如图所示：利用on-change的钩子写判断方法。HTML： <el-form-item label="LOGO" prop="logo_src"> <el-upload ref="upload" class=
2021-09-16 17:26:22
9901
2
原创 使用单选框实现编辑功能时，elementUI的el-select显示为value而不显示label的问题。
当前效果为：想要的效果为：以前实现编辑功能是通过scope.row来实现数据回显，在下拉框中都可以正常显示label值。这次第一次使用了table的单选选中后实现编辑功能，使用的是选中时回调的参数val，（标记为multipleSelection），猜测是两种方式回调的数据类型不一致，导致el-select没识别到该值为value。html代码： <el-select placeholder="请选择状态"
2021-09-13 16:33:24
1315
原创 使用JS把编号以001、002的形式自增
需求分析，使用场景中，添加新数据时，编号根据现有的编号实现自增。<script> var num = this.setInterval(this.list.length), //编号自增 setInterval(num) { var len = 3 //显示的长度，如果以0001则长度为4 num = parseInt(num, 10) + 1//转数据类型，以十进制自增 num = num.toString()//转为字符串
2021-09-09 14:48:58
5167
原创 Vue中使用better-scroll插件实现移动端字母侧边导航滚动条（包括列表按首字母排序、点击导航跳转位置）完整实现
实现效果如上图所示。首先引入better-scroll的组件：1、npm安装better-scroll插件。npm install–save better-scroll2、在文件中引入better-scroll。import BScroll from ‘better-scroll’;排序使用的是pinyin的包，将字符串转成拼音，就可以通过字符串截取取出拼音首字母，这样就可以进行首字母排序了。1、安装方式：npm install pinyin2、在应用的.vue文件中单独引入var pi.
2021-08-30 16:57:14
1788
1
原创 没有使用keep-alive但mounted不执行解决办法（纯属脑残的小错误）
写了两个mounted，根据vue生命周期可以看出mounted只执行一次，所以把两个合到一起就行了
2021-08-27 10:47:58
305
原创 vue移动端搜索功能的历史搜索（最近搜索）完整功能实现，重复搜索项会更新在最前面。（利用localstorage）
实现效果如上所示。html代码块：<template> <div id="Container" style="min-height: 100%; background-color: #fff"> <searchbox/> <!-- 最近搜索 --> <div class="history" v-show="show"> <p class="histText">最近搜索</p> .
2021-08-24 15:01:12
1269
1
转载 vue router 报错： Uncaught (in promise) NavigationDuplicated {_name:““NavigationDuplicated“... 的解决方法
参考大佬的解决方法：https://blog.csdn.net/weixin_43202608/article/details/98884620在router文件夹下的index中添加如下代码：import Router from 'vue-router'const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this
2021-08-23 11:14:17
743
原创 VUE返回上一页不准确，获取上一页URL，当触发返回操作时强制跳转。（增加中转页从后一页返回时触发返回操作回到前一页的实现方法）
问题：从具有侧边导航栏的列表页进入详情页，但返回操作时可能是任意导航栏内的页面。也就是说没法正常返回真正的上一页。// this.router.replace("/");//this.router.replace("/"); // this.router.replace("/");//this.router.go(-1);//window.history.back();// this.$router.back(-1);都无法解决这个毛病。解决思路：首先获得上一页的URL，再替换路由。参考链接：
2021-08-23 10:34:21
1063
原创 vue-element 内容显示过多隐藏（不仅限于table的列，可应用于div标签）
最简单的实现方法是在隐藏过长的table列，直接在 标签中添加一个属性show-overflow-tooltip即可。但我的表格中，在同一列中不止有一种标签，我只想让这一列的某一部分实现这个效果，所以这种方法很不方便。效果图如上<el-table-column min-width="35%" show-overflow-tooltip> <template slot-scope="scope"> <div style="line-he
2021-07-22 17:57:38
1688
1
原创 VUE+ElementUI实现提交表单模糊查询功能
查询表单提交：<el-form ref="elForm" :model="formData" size="medium" label-width="100px"> <el-row> <el-col :span="6"> <el-form-item label="入库编号" prop="goodinid"> <el-input v-model="formD
2021-07-21 17:12:08
1428
原创 VUE+ElementUI对Table的多选进行批量操作（复选框勾选删除）完整功能实现
ElementUI:选择多行数据时使用 Checkbox。当用户勾选目标信息时，会触发selection-change事件，。<el-button type="warning" @click="deleteSelectItem(sels)">批量删除</el-button><el-table ref="multipleTable" :data="searchlist" tooltip-effect="d
2021-07-21 09:27:11
11797
11
转载 VUE+Element-UI组件的日期时间选择器DateTimePicker，页面显示undifined
这里写自定义目录标题使用Element-UI的日期时间选择器DateTimePicker：https://element.eleme.cn/#/zh-CN/component/datetime-picker<template> <div class="block"> <span class="demonstration">时间</span> <el-date-picker v-model="value"
2021-07-08 12:26:36
944
原创 Chrome网页观看百度云视频加速
第一步、使用Chrome打开要看的视频的页面，Ctrl+Shift+I打开检查页面第二步、在console下输入以下代码，回车即可加速，setPlaybackRate(1.25)中的1.25可自己选择需要的倍速。videojs.getPlayers("video-player").html5player.tech_.setPlaybackRate(1.25)...
2020-12-17 20:22:22
977
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人