夏微微的博客

原创 提高开发效率的实用工具库VueUse

useEyeDropper 使用吸管工具吸取颜色。单页面使用（useThrottleFn举例）1.useFullscreen 全屏显示。useColorMode 主题颜色切换。感兴趣或想使用其他具体的方法可以看文档。规定时间内重复点击 限制函数执行一次。useFileDialog 文件选择。useClipboard 复制粘贴。useThrottleFn 节流。举例我在项目中经常会用到的一些。

原创 vue3 前端实现pdf打印预览 printjs

注意：在主页面打印 需要给#printApply设置隐藏 设置打印的时候，再显示，即。

原创 vue3 json格式化显示数据（vue3-json-viewer） 对比修改前后数据

需求：对比变更前后数据。

原创 vue3 行点击事件 table 树 点击行展开

注意：可以打印tableDeptRef.value看看；我的table封装了公共组件，所以toggleRowExpansion方法在getTableRef方法里，即。需求：每次需要点击左侧小按钮才可以展开不方便，提出点击行就展开。el-table 添加。

原创 vue3 自定义指令 按钮权限 角色权限

先在公共components中建立一个这样的文件夹。然后在main.ts中引用 注册。

原创 vue3 兼容低版本浏览器 @vite/plugin-legacy

测试谷歌版本79.0.3945.79 出现如下报错 且页面打不开。再配置 vite.config.ts。

原创 vue3 el-table 复选框selection 条件勾选 禁止勾选

status是列属性。

原创 导入vue3-引入富文本框编辑器-@wangeditor/editor库

【代码】导入vue3-引入富文本框编辑器-@wangeditor/editor库。

原创 vue2转vue3初步下载pnpm遇到的问题 pnpm : 无法加载文件 D:\nodejs\pnpm.ps1

解决：管理员运行Windows PowerShell；输入set-executionpolicy remotesigned 后按y；解决：nvm install 18.18.0 下载最稳定版本的nodejs。在vscode使用pnpm报错。然后注意重新下载删除pnpm。

原创 elementUI type=“selection“多选框选中 删除 回显 赋值问题 回显数组改变选中状态未改变

注意：:reserve-selection="true"会记录保存上一次选中的状态，所以每次赋值前要先清空选中状态。解决：@row-click配合:reserve-selection="true"使用。遇到的问题：删除之后查询列表selection回显问题。表格data赋值的地方添加。可删除可重新查询列表添加。

原创 el-table 多级表头 列添加fixed=left 列错乱

添加 this.$refs.tableList.doLayout();

原创 git 删除远程分支 git branch -r查看分支还存在

git fetch -p origin 清除缓存。git branch -r 再次查看。

转载 element Tooltip文字提示 三角形颜色修改

.el-tooltip__popper[x-placement^=“方向”] .popper__arrow:afterborder-方向-color: #747574.el-tooltip__popper[x-placement^=“方向”] .popper__arrowborder-方向-color: #747574例如:.el-tooltip__popper[x-placement^=“bottom”] .popper__arrow:afterborder-bottom-color: #74

原创 前端利用pdfjs获取上传多个pdf文件的页数和渲染pdf文件的缩略图，多文件之间进行拖拽（包括处理在拖拽事件中无法操作点击事件）

1、下载pdfjs：pdfjs官网2、在需要引用的页面引用pdf.js和pdf.worker.js

原创 系统启动loading动画（css3），圆形水波图（css3）

1、系统启动loading <div class="loadEffect"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span>

原创 圆环百分比， 圆环等待中（css3）

圆环百分比 <div class="div3"> <div class="circle"> <div class="pie-left"> <div class="left"></div> </div> <div class="pie-right"> <div

原创 仓库搬家，修改远程仓库地址

查看远程仓库地址git remote -v修改远程仓库地址git remote set-url origin [ url ]

原创 正则判断的公共方法包括（手机号，邮箱，密码，ip等）

话不多说直接上代码，欢迎大家的随时补充function checkType(str, type) { switch (type) { case 'email': return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str); case 'phone': return /^1[3|4|5|7|8|9|6][0-9]{9}$/.test(str); case 'tel': return /^(0\d{2,3}-\d{7,8})

原创 时间的几种格式以及它们之间的相互转换 （js）

时间的几种格式介绍Date 对象用于处理日期和时间有四种方式初始化日期1、new Date();2、new Date(value);3、new Date(dateString);4、new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);简单解释一下这四种方式不传参，获取的是当前时间；及也为中国标准时间格式Wed Mar 17 2019 09:54:21 GMT+0800

原创 Element UI+Vue开发中遇到的一些问题

1、表头时间排序（根据传参后端返回）在el-table标签输入@sort-change=“handleCommand”handleCommand(column) { let sortingType = column.order if(sortingType == "ascending") { this.$set(this.query, 'sort', 'asc')//传参 this.getData()//重新获取数据 }else {

原创 实现多个元素遍历点击显示隐藏 jquery

jq实现如下图效果，点击列表显示该条描述利用jq的each()方法遍历，toggle（）方法显示隐藏toggle() 方法切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。具体js代码如下 $("dt[id='service21']").each(function (i) { $(this).click(function () { $(

原创 查看创建切换分支以及会遇到一些的问题（There is no tracking information for the current branch.）

1、创建加切换分支git checkout -b [branch name]git checkout -b [branch name]相当于两步操作git branch [branch name]git checkout [branch name]2、将新分支推送到githubgit push origin [branch name]3、删除本地分支git branch -d [branch name]4、删除github远程分支git push origin :[br

原创 VsCode好用插件必装插件推荐

1.Auto Close Tag自动闭合标签所用2.Auto Rename Tag自动修改重命名配对的标签3.BeautifyBeautify 插件可以快速格式化你的代码格式，让你在编写代码时杂乱的代码结构瞬间变得非常规整，代码强迫症必备，较好的代码格式在后期维护以及他人阅读时都会有很多的便利。简单使用方法：安装完成后，打开html文件，按F1，选择Beautiful selection，如图：这样就可以看到内容已经对齐啦。4. Bracket Pair Colorizer为代码中的

原创 webpack项目搭建以及编译时遇到Error: Cannot find module ‘webpack-cli/bin/config-yargs‘的问题

1、webpack项目搭建新建一个文件夹，命令行进入文件夹目录，运行npm init命令，根据需要填写项目信息，入口文件为index.js -->如下图所示在进入项目目录安装webpack和webpack-cli命令行输入npm install webpack webpack-cli --save-dev，如下图编写项目代码添加index.html、index.js、add-content.js，如图add-content.js有一个write方法向页面输出HelloWorld，内

原创 jquery判断字符串/对象数组中是否包含某项

1、字符串：推荐使用indexOf() 方法var Cts = "bblText"; if(Cts.indexOf("Text") >= 0 ) { alert('Cts中包含Text字符串'); } 如果要检索的字符串值没有出现，则该方法返回 -1。2、对象数组：var arr=[{'name': '张三'},{'name': '李四'}]var result = arr.some(item=>{ if(item.name=='张三'){ return true

原创 谈一谈localStorage、sessionStorage、Cookie的区别及用法

1、区别特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 除非被清除，否则永远保存 仅在当前会话下有效，关闭页面或浏览器后被清除 存放数据大小 4k左右 一般为5MB 与服务器端通信 每次都会携带在HTTP头中，如果使用Cookie保存过多数据会存在性能问题 仅在客户端（即浏览器）中保存，不参与和服务器的

原创 解决点击按钮弹出弹框时背景页面会滚动的场景

// 弹框是否显示影响背景滚动 toggleModel: function(isModel) { if (isModel) { document.body.style.height = '100%'; document.body.style.overflow = 'hidden'; }else { document.body.style.height = 'auto'; ...

原创 删除文件夹需要xxx权限才能对此文件夹进行更改

当遇到下列图片问题时：只需：1、右键此文件夹点击属性，出现一个弹框，然后相继点击安全-》高级2、上一步点击确定之后，出现弹框，点击图中的更改，出现弹框，输入图中的e，然后点击检查名称3、上一步点击确定之后，出现弹框，勾选图中的替换子容器和对象的所有者，点击应用4、上一步点击确定之后，关闭所有弹窗，重新点击文件夹属性-》安全-》高级，出现弹框，点击添加，再出现弹框，点击选择主体如图，输入e，点击检查名称5、上一步点击确定之后，勾选图中的地方6、上一步点击确定之后，点击启用继承，勾选

原创 修改桔梗网导航，修改浏览器属性需要管理员权限

1、右键点击找到浏览器的属性2、找到常规，把只读的勾勾去掉3、找到快捷方式的目标，把目标.exe后面的桔梗网链接删除4、这时候如果会提示需要管理员权限才能修改的话，继续下面的操作，如果没有提示，上面的就完成了5、使用电脑的win+R键，打开命令行输入gpupdate，提示用户策略更新完成，再继续上面的操作就ok啦...

原创 jquery判断页面元素是否存在

一开始，根据以往的js思想，我直接这么写的 if($(".alert-bar")) { $(".navbar-fixed-top .container").css("margin-top", "63px") }发现这样是不对的，因为jQuery对象永远都有返回值，所以$(".alert-bar")总是TRUE ，IF语句没有起到任何判断作用。正确的写法应该是： if($(".alert-bar").length > 0) { $(".navb

原创 form表单提交时传递额外的参数

使用hidden的input，将参数放在里面，例如：点击提交url后面拼上字符串‘parmas1=19&parmas2=&parmas3=hh&parmas4=1&parmas5=tt’<div class="hiddenFields"><input type="hidden" name="parmas1" value="19"><input type="hidden" name="parmas2" value=""><in

原创 vscode提示‘Vetur find `tsconfig.json`/`jsconfig.json`

原创 使用yarn安装时 报错node_modules\node sass:Command failed.

如图：解决方案：npm install -g mirror-config-china --registry=http://registry.npm.taobao.orgnpm install node-sassyarn install

原创 html--给表格table添加边框

1、这样似的table border=“1”<html><body><table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr>

原创 去除数组中的空字符串，并且获取有值的字符串的索引

function removeEmpty(arr){ for(var i = 0; i < arr.length; i++) { if(arr[i] == "" || typeof(arr[i]) == "undefined") { arr.splice(i,1); i = i - 1; }else { return i; } ...

原创 vscode的一些扩展以及快捷键

1、Material Theme你是否厌倦了每天看到相同的 tabs 底部颜色?可以使用 Material Theme 来扩展 VsCode 的主题，这样就可以为 tabs 设置不同的颜色。安装使用：在扩展中搜索，找到按钮install下载然后打开的命令面板(Ctrl + Shift + P)，选择Material Theme: Set accent color并从列表中选择一个颜色，它将更改选项卡的下划线颜色，如下所示2、重新打开 关闭的编辑页面Windows: Ctrl

原创 jquery获取同级元素

next()相邻下一个同级元素prev()相邻上一个同级元素siblings()所有同级元素$("#id").next();$("#id").prev();$("#id").siblings();获取相邻同级元素的下一个元素，例如想获取下面代码中的的第一个form$(".h1").next().next();即可，以此内推<div> <h1 class='h1'>title</h1> <table></table>

原创 javascript 中 “ ！function(){}() ” 是什么意思？

自执行函数javascript中，这种写法function(){//所需要执行的代zhi码}()被称为"自执行函数"，好处是把所有变量都运行在函数内部，可以避免产生全局变量。!隔绝上面代码的影响而"!"的作用是使它和上面的代码隔绝，不会受到其影响。例如这2行代码var a=1function(){}()在浏览器执行会产生语法错误，因为浏览器解析代码的时候，把2行看做一个语句或表达式。而加上感叹号就能正常执行var a=1!function(){}()...

原创 如何设置使用电脑默认浏览器打开微信中发的链接

1、打开微信电脑版，看着下面的链接，直接点开是在微信内部打开的，还需要复制粘贴到浏览器打开，很麻烦2、点击微信左下方的更多3、点击设置4、点击通用设置，勾选上使用系统默认浏览器打开网页，然后点击链接就可以跳到默认浏览器打开啦...

原创 怎么把字符串中间的特殊字符后面的字母变成大写，例如‘a-b’--》‘aB’

var f = function(s) { return s.replace(/-\w/g, function(x) { return x.slice(1).toUpperCase(); }) }