- 博客(96)
- 收藏
- 关注
原创 vue3.0封装一个弹框组件(点击按钮后弹框,弹框里面有表格展示并进行选择表格数据)
组件1:SelectUserDialog。组件2:SelectUser 选择按钮。代码:这块封装了两个子组件。
2025-03-14 10:19:18
206
原创 vue3.0封装eCharts组件(扇形,柱状图,折线+柱状图)
扇形图组件柱状图组件折线+柱状图组件父组件注意:一定必须用reactive,否则不会实现父子组件的响应式效果在onMounted里面进行初始化数据给pieOptions,barLineConfig,barsConfig进行赋值
2025-03-11 10:51:07
219
原创 vue-signature-pad插件实现移动端签字功能(css,js)+将签名照片旋转90度之后的base64码传给后端
【代码】vue-signature-pad插件实现移动端签字功能(css,js)+将签名照片旋转90度之后的base64码传给后端。
2025-02-25 11:36:59
251
原创 vue3.0将后端返回的word文件流转换为pdf并导出+html2pdf.js将页面导出为pdf
利用mammoth.js,html2pdf.js插件,前端vue框架实现将word文件流转换为pdf并导出
2025-02-25 09:44:54
424
原创 ElementUI:el-table 判断某个时间超过当前时间行标红
1.elementUI表格给某一行添加背景颜色 2.如何js判断两个时间大小
2024-11-20 18:28:29
480
原创 elementui的el-table自定义控制展开事件,实现“展开”“收起”的切换(两种效果)【超级完整式代码】
全网代码最全:elementui的el-table自定义控制展开事件,实现“展开”“收起”的切换(两种效果)
2024-01-25 14:50:02
3541
原创 前端异常监控调研总结
前端和后端处于同一个监控系统中,前端有自己的监控方案,后端也有自己的监控方案,但两者并不分离,因为一个用户在操作应用的过程中如果出现异常,有可能是前端引起,也有可能是后端引起,需要有一个机制,将前后端串联起来,使监控本身统一于监控系统。因此,即使只讨论前端异常监控,其实也不能严格区分前后端界限,而要根据实际系统的设计,在最终的报表中体现出监控对开发和业务的帮助。一般而言,一个监控系统,大致可以分为四个阶段:日志采集。日志存储、统计与分析、报告和警告。
2022-10-31 14:32:31
1471
原创 微信小程序之wx.login()与获取手机号getPhoneNumber解密失败问题
小程序报错Given final block not properly padded. 获取手机号的时候解密失败
2022-08-31 09:37:42
4703
1
原创 微信小程序之获取用户信息(流程+2种方法)
获取流程图ui库Vant Weapp:Vant Weapp地址(点击跳转)第一种方法适用于直接点击登录获取在界面添加登录按钮,用户点击按钮调用wx.getUserProfile()函数来提示用户授权登录,授权成功后,把用户头像数据和名称数据保存到缓存区里,并且改变全局变量的值点击登录后" > 下载 ...
2022-03-11 16:20:06
7209
1
转载 nvm安装node时npm安装失败问题
执行nvm install vnode 失败报错截图:如何解决1.下载nvm https://github.com/coreybutler/nvm-windows/releases/download/1.1.6/nvm-setup.zip ,解压并且安装2.打开cmd ,输入nvm -v,如下表示成功3.在nvm安装目录,找到 setting.txt加上如下两行( 设置 node 和 npm 镜像地址,一般在 C:\Users\用户名\AppData\Roaming\nvm):node_mi
2022-02-21 16:40:41
3588
原创 vue下载后端返回的二进制流excel表格文件
返回的二进制流格式 <span class="update" @click="lookRecord">点击下载</span> lookRecord() { integrateRecordsr(this.realAccount).then((res) => { // 调接口拿取二进制流 if (res.size == 0) { // 如果返回是空的 this.$message({ me
2022-02-10 10:03:06
902
原创 vue配置各种环境-环境切换问题-打包自由切换
vue-cli版本是2.0左右的就会有webpack的config目录vue-cli版本是3.0以上的就会有vue.config.js没有config目录我们先来看第一种怎么配置(有webpack的config目录)目录:配置:这里一共展示dev环境和生产环境,其他环境在config目录类似添加第一步: config目录=》index.js dev: { assetsSubDirectory: 'static', assetsPublicPath: '/', p.
2022-01-12 11:01:51
2924
原创 函数提升与变量提升常见面试题
函数提升与变量提升在JavaScript中,变量的定义和函数的定义都会被提升,而且函数的声明优先于变量的声明;在变量中,变量的赋值不会被提升,只是声明被提升了,但是函数的声明有点不一样,如果是函数式声明则函数体也会被一同提升,如果是var式的声明,怎么提升声明,不会提升函数体。例子1:var a=3; function b(){ if(a){ var a=1; }else{ var a=0; } consol
2021-12-29 11:02:06
933
原创 普通函数与箭头函数this输出顺序以及原理
普通函数与箭头函数this输出this是指包含它的函数作为方法被调用 时所属的对象。(谁调用了我,我就是谁的对象,谁最后调用了我,我就是谁的对象。)注意:一定是this所在的函数作为方法被调用,才有可能改变this指向,也就是说这个this外面有个函数,被调用了!箭头函数没有自己的this, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值匿名函数的this指向所在的方法被调用的那个对象作用域对象—看例1let length = 10; function
2021-12-29 11:00:46
275
原创 高级JavaScript - 关于前端面向对象执行顺序面试题
1.下面代码运行的结果//1. 答案: 0 30function fun(){ this.a=0; this.b=function(){ alert(this.a); }}fun.prototype={ b:function(){ this.a=20; alert(this.a); }, c:function(){ this.a=30; alert(this.a)
2021-12-29 10:59:36
521
原创 宏任务与微任务的执行顺序
1.同步任务和异步任务JavaScript是单线程执行的语言,在同一个时间只能做一件事情。这就导致后面的任务需要等到前面的任务完成才能执行,如果前面的任务很耗时就会造成后面的任务一直等待。为了解决这个问题JS中出现了同步任务和异步任务。(1)同步任务在主线程上排队执行的任务只有前一个任务执行完毕,才能执行后一个任务,形成一个执行栈。(2)异步任务不进入主线程,而是进入任务队列,当主线程中的任务执行完毕,就从任务队列中取出任务放进主线程中来进行执行。由于主线程不断重复的获得任务、执行任务、再获取再执
2021-12-29 10:57:38
9622
原创 多种for循环执行顺序问题(案例+解析)
for循环相关for(var i = 1; i <= 5; i ++){ console.log(i) // 1 2 3 4 5}观察以下代码:for(var i = 1; i <= 5; i ++){ setTimeout(function timer(){ console.log(i) //5个 6 }, 0)}问题描述:为什么会全部输出6?如何改进,让它输出1,2,3,4,5?原因:因为setTimeout为宏任务,由
2021-12-29 10:55:44
1069
原创 Vue+ElementUI: 手把手教你做一个audio组件,audio的播放与下载
audio组件:播放功能先看效果图:功能:可进行播放,暂停,刷新,调节播放速度,滚动条拖拽代码<template> <div class="musicPlay" v-if="audioVisible"> <audio ref="audio" @play="playFunc" @pause="pauseFunc" @timeupdate="timeupdateFunc" @canplay="can
2021-12-22 11:01:22
8201
转载 如何将本地项目上传到Github
一、使用git上传文件到GitHub需要git客户端以及注册GitHub账号。git官网:https://git-scm.com/github官网:https://github.com/git的安装以及GitHub的注册这里就不说了。下边就直接从上传开始。第一步:我们需要先创建一个本地的版本库(其实也就是一个文件夹)。 你可以直接在桌面右击新建文件夹,也可以右击打开Git bash命令行窗口通过命令来创建。 现在我通过命令行在桌面新建一个test文件夹(你也可以在其他任何地方创建这个
2021-11-04 15:43:05
329
转载 elementUi重置表单清除校验resetFields()不起作用
当我们清除校验时一般在关闭弹框的时候会使用this.$refs[formData].resetFields(); <el-dialog title="新增xx公司" :visible.sync="addCompanyVisible" width="30%" :modal-append-to-body='false' class="urgecompany-dialog" @close="closeDialog" > <el-form class="
2021-10-21 09:18:49
1262
原创 前端常用到的一些正则验证(数字,邮箱,密码,手机号等)
创建一个js文件//复杂密码验证/** * 字母+数字+特殊符号 * @param {*} password */ export function validatePassword (password) { const reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>,.\/]).{8,16}/ return reg.test(password)}//只能输入数字/** * 数字 *
2021-09-17 16:55:01
589
原创 封装组件:一个可以随便拖拽课程的课程表
思路将课程表想象成一个坐标轴,横坐标为星期,纵坐标为节数,利用HTML5新增拖动事件,通过e.target判断拖拽结束的“坐标”,确认最后拖动的位置<div class="schedule-table"> <table> <thead> <tr> <th colspan="2"></th>
2021-08-23 16:55:33
506
原创 Avue给table的某一列设置样式,点击实现页面跳转或是其他操作
最近写的一个小功能将姓名一例字体换成蓝色,,并且点击实现跳转给某一类添加样式1.在avue-crud组件中添加cell-class-name属性<avue-crud :data="data" :option="option" :page.sync="page" :cell-class-name="addClass" @cell-click="pageto" ></avue-crud> /**
2021-08-13 10:13:27
2917
原创 如何解决谷歌跨域问题
右击谷歌快捷方式=》点击属性在目标后面添加 --disable-web-security --user-data-dir=C:\MyChromeDevUserData点击确定关闭谷歌浏览器重新打开浏览器上会显示 : 您使用的是不受支持的命令行标记:–disable-web-security。稳定性和安全性会有所下降。这个时候,你的浏览器就可以进行跨域访问了。如果还是不行在你的电脑盘里新建一个文件夹,位置随意,名称随意,我这里是在C盘里新建一个ChromeTest的...
2021-08-02 17:33:43
999
转载 elementUI的el-select 默认值显示value不显示label问题
el-select 默认值显示value不显示label问题在做编辑页面时需要取到列表项数据回显默认值在做select回显的时候遇到了这个问题明明拿到的值和value中的值一样但是就是不转换成label这种情况一般出现在value为数字的情况问题原因是返回的数字和el-option选框里value值的类型对应不上一个是 Numer 一个是 String解决后如图解决办法1既然el-option选框需要的value属性是String类型的,可以利用row这个一行数据,拿到el-o
2021-06-18 10:15:00
6113
原创 vue项目启动经常中断,针对node溢出问题的解决
可能出现的报错:1.error Command failed with exit code 134报错2.项目太大以至于项目启动慢,启动之后修改项目立马中止需要重新启动如何解决1.安装两个npm包:npm install increase-memory-limit cross-env -g2.在项目中的package.json里面的scripts里面添加脚本 "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
2021-06-16 09:24:46
4550
原创 iframe父子页面传值(小案例)
iframe.html <button id="send">确认事件</button> <div id="content"></div> window.onload = function() { var btn = document.getElementById("send"); var transObj = { target: "求救事件", content: "有人晕倒了" };
2021-04-27 15:11:00
187
原创 如何更加高效截取当前地址栏url参数
适用场景:但我们进入页面的时候,想要拿到当前地址栏url的某个参数我们可以封装一个js文件作为一个截取地址栏的工具eg:https://smb.cochat.lenovo.com?code=fc7285c5-85eb-447f-a69c-637e2fbd50a5&®isterChannel=111如何截取到code或者registerChannel呢?当前是在vue中(当然js也是没问题的)function getQrCode(params) { var query =
2021-04-09 10:12:56
641
原创 vue项目如何实现复制粘贴剪切板功能–vue-clipboard2
安装npm i vue-clipboard2 -S引入import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)复制一个变量的值<el-button class="copy_" @click="copyed_herf">复制</el-button>jscopyed_herf(){ this.$copyText(this.hrefUrl).then(e=>{ this.$m
2021-03-30 15:16:21
232
原创 (git checkout 某分支)切换分支报错:Please, commit your changes or stash them before you can switch branches.
问题重现:场景:现在是主分支代码,当我要切换到我的分支提交代码时我的目的:将主分支合并我的分支代码并且提交解决办法:1.//存到暂存区git add .git stash 2.git checkout 自己的分支名3.git stash pop //取出刚刚存到暂存区的代码4.git add . git commit -m '提交代码说明'5.git checkout master //切换到主分支6.git merge 自己的分支名7.git pull 8.git
2021-03-08 14:03:08
1071
原创 git commit提交时报错husky > pre-commit (node v10.16.3) ....
报错原因:使用了husky,pre-commit(客户端)钩子,它会在Git键入提交信息前运行做代码风格检查。如果代码不符合相应规则,则报错报错信息:解决办法:使用commit的时候后面加上 --no-verify(规范)git commit -m "备注信息" --no-verify...
2021-03-03 10:14:50
955
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人