![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Js
丶扁扁的糖是扁的
一个喜欢记录的小白写的博客,用来拯救他那不大好的记性。有的是记录,有的是随笔,反正都是用心写的点点滴滴。
展开
-
js获取 年-月-日 格式日期和 00:00:00格式时间
【代码】js获取 年-月-日 格式日期和 00:00:00格式时间。原创 2023-04-01 15:01:00 · 1106 阅读 · 0 评论 -
js复制内容到剪切板
js复制内容到剪切板原创 2022-12-03 15:05:55 · 466 阅读 · 0 评论 -
Vue xlsx插件导入导出excel 前端解析excel el-table导出excel
这里示例el-table导出为excel:原创 2022-12-03 14:58:32 · 1423 阅读 · 0 评论 -
Vue自定义指令——el-select多选框 设置默认值并且不可编辑
因为el-select原生就可以实现下拉列表的选项禁用,指定项不可添加。那么想要实现设置默认值并且不可编辑,只要实现默认值不可删除即可。关闭按钮有着它自己的className:el-tag__close。那么只要将默认值的el-tag__close图标全部隐藏掉,就能实现设置默认值不可删除效果。具体指令如下: 在el-select中的应用:...原创 2022-06-17 20:32:55 · 11670 阅读 · 0 评论 -
正则——判断是否质数
具体思路1、将数字转化为相应长度的1const num = 9 //数字9const _num = "1".repeat(9) //转化为相应长度的12、匹配数字1/^1?$ //匹配0或者1个 "1"3、 穷举验证是否可以被比自己小的数整除^(11+?)\1+?$/4、最终结果取反const reg = /^1?$|^(11+?)\1+?$/ //正则表达式const num = 9 //要检测的数字const format = !reg.t.原创 2022-05-23 19:22:58 · 281 阅读 · 0 评论 -
JS解构(es6解构赋值)——基础用法、默认值、别名解构、REST
基础用法let [a, b, c] = [1, 2, 3];let [a, [[b], c]] = [1, [[2], 3]];注意:数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值:let { a, b } = { a: 'aaa', b: 'bbb' };a // "aaa"b // "bbb" let { c } = { a: 'aaa', b: 'bbb' };c // undefined默认值上面原创 2022-05-16 20:41:03 · 2450 阅读 · 0 评论 -
Vue——router跳转以及传参方式
跳转的方式Vue因为由vue-router的关系,提供了页面携带参数跳转的方式1、提供 <router-link> 元素,点击直接跳转<router-link :to="{ path: 'path', query: { key: '扁扁的糖是扁的' } }"> 跳转页面</router-link>2、提供 this.$router.push 方法跳转this.$router.push({ name: 'name',原创 2022-05-13 17:08:36 · 2443 阅读 · 0 评论 -
JS 创建iframe,移除iframe中所不需要的元素
创建iframe 设置基础属性,并添加onload事件,捕获iframe的加载完成进行回调。/** * @description: 配置及引入iframe * @return void */setNewIframe() { let iframe = document.createElement('iframe') iframe.src = '' iframe.height = 500 iframe.width = '100%' iframe.id = 'doc_if..原创 2022-04-19 20:39:19 · 6657 阅读 · 0 评论 -
el-tree重写勾选逻辑,实现父子节点勾选不互相关联,选中父级自动勾选子集,选中子集不勾选父级
<el-tree ref="leftTree" :check-strictly="true" @check-change="checkChange"/>/** * @description: 重写勾选逻辑 * @param node 选中的数据 * @param checked 是否选中 * @return void */checkChange(node, checked) { //全部取消/选择 const setChecked = (arr, i...原创 2022-04-19 19:21:09 · 2957 阅读 · 0 评论 -
JS 获取当前浏览器版本,验证浏览器版本是否高于谷歌80
原来的在用的方法是直接截取谷歌浏览器版本的前两位版本号,今天突然有用户反馈说报浏览器版本过低,一看发现谷歌浏览器已经发布了100+版本,更换取版本号的逻辑在此记录。获取浏览器版本信息const appVersion = navigator.appVersion //获取浏览器版本信息获取以谷歌浏览器信息开始的字符串const index = appVersion.indexOf('Chrome/') //谷歌浏览器的版本信息位置const ChromeStr = app.原创 2022-04-07 17:20:04 · 2710 阅读 · 0 评论 -
JS算法——数组扁平化去重排序
一、问题描述已知如下数组:var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10],编写一个程序将数组扁平化去并除其中重复部分数据,最终得到一个升序且不重复的数组二、代码实现不管用什么方式,都是将数组拍平,去重,排序。非ES6实现方式数组拍平let flatArr = arr.toString().split(",");数组去重const ar...原创 2022-04-01 15:58:38 · 1036 阅读 · 0 评论 -
JS算法——括号是否成对合法
一、问题描述验证字符串里的括号是否成对合法二、代码实现用reduce赋予初始值0。每次匹配到左括号则初始值加一,匹配到右括号就初始值减一,最终返回0的话就是字符串中的括号成对。const bracketStr = '(())()(()())' //需要验证的字符串const ifLegal = [...bracketStr].reduce( (a, i) => i === '(' ? a + 1 : a - 1, 0); //初始值为0,找到左括号加一右括...原创 2022-03-31 18:56:50 · 1027 阅读 · 0 评论 -
JS快捷生成一个uuid(依靠URL.createObjectURL(),URL.revokeObjectURL(),Blob())
URL.createObjectURL用法:URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.const objectURL = URL.createObjectURL(blob || file);参数:File对象或者Blob对象注意点:调用createObjectURL的时候会创建一个新的URL对象。 如果你不再需要它就要使用原创 2022-03-30 10:00:43 · 1255 阅读 · 1 评论 -
Vue自定义组件——图片放大器,js点击<img>触发图片放大,富文本内图片点击实现放大器效果
富文本内图片点击实现放大器效果,要在不改变<img /> 标签且不添加自定义指令的前提下放大图片,找了下没有找到合适的插件,就自己动手写一个图片放大器组件。设计思路:富文本里的图片,最终应该是呈现这样的状态:<div> <img src="……" /> <div class="content">扁扁的糖是扁的</div></div>给富文本标签添加点击事件;<div @click="preview原创 2022-03-03 09:55:13 · 2407 阅读 · 1 评论 -
JS“观察“元素是否可见——记录IntersectionObserver API 使用教程
网页开发时,常常需要了解某个元素是否进入了"视口"(viewport),即用户能不能看到它。上图的绿色方块不断滚动,顶部会提示它的可见性。传统的实现方法是,监听到scroll事件后,调用目标元素(绿色方块)的getBoundingClientRect()方法,得到它对应于视口左上角的坐标,再判断是否在视口之内。这种方法的缺点是,由于scroll事件密集发生,计算量很大,容易造成性能问题。目前有一个新的IntersectionObserver API,可以自动"观察"元素是否可见,Chrom.转载 2022-02-25 11:27:51 · 2551 阅读 · 0 评论 -
async/await 捕获错误 捕获catch
async/await出现后,它可以 用同步的方式执行异步操作,解决了Promise的嵌套问题。但是,promise有 catch 方法用于指定发生错误时的回调。promise.then((value) => { console.log(value); }.catch((error)=>{ console.log(error)});那 async/await 如何捕获 catch?直接在后面接 .catch()const getData = async (.原创 2022-02-18 10:41:01 · 5262 阅读 · 1 评论 -
JS 选中文字时不触发点击事件
JS获取当前选中文字:/** * @description: 获取当前选择的文字 * @return String */getSelected() { if (window.getSelection) { //ie9以上及其他主流浏览器 return window.getSelection().toString() } else { //ie9以下 const selection = document.selection?.createRange()原创 2022-02-14 18:35:43 · 1991 阅读 · 0 评论 -
正则——国内车牌号 挂学警港澳使领 蓝牌 绿牌
const reg = /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/ //正则表达式const num = '浙B88888' //要检测的牌照const format = reg.test(num.原创 2022-02-12 15:03:20 · 1381 阅读 · 0 评论 -
JS CSS 超出字符省略号,获取字符串实际所占长度,显示文字提示tooltip
CSS 超出字符省略号.a{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}JS获取字符串实际所占长度computed: { //计算字符串所占宽度 stringWidth() { return function (string) { const dom = document.createElement('span') //创建一个span dom.st..原创 2022-01-25 14:23:26 · 2068 阅读 · 0 评论 -
JS 隐藏、还原 HTML标签 父元素下的某个子元素 特定操作时隐藏指定元素
该图是配合自定义 中心线组件 实现的拖拽时隐藏右侧表格功能,解决表格数据量大拖拽时不流畅的问题let box = document.getElementsByClassName(classNames.box)?.[0] //获取父元素//暂时移除元素Array.from(box.children).map((node) => { node.id === 'right-view' && (node.style.display = 'none')})//还原刚...原创 2022-01-21 10:03:03 · 914 阅读 · 0 评论 -
JS html标签字符串文本 去除 html标签 元素操作法
/** * @description: html字符串去除标签 * @param content * @return simContent */getSim(content) { let simContent const dom = document.createElement('div') //创建一个新的div dom.innerHTML = content //把html字符串塞进div里面 simContent = dom.innerText //获取div里的纯文本 .原创 2022-01-20 19:20:04 · 1016 阅读 · 0 评论 -
JS判空——双感叹号 极简空、异常数据判断, false、null、‘‘、undefined、0、NaN的判断
直接抛出 !! 这个方法可能不怎么好理解,首先我们先来看!关于!:js中,false、null、''、undefined、0、NaN取反会得到什么呢?因为js中,false、null、''、undefined、0、NaN都会 被判 为false,所以取反之后,全部都会得到true而基础的数据类型,取反后都会得到false关于 !!:那么给刚才取反的false、null、''、undefined、0、NaN再次取反会发生什么呢?它们都输出了被判 的false..原创 2022-01-13 11:10:31 · 1389 阅读 · 0 评论 -
Vue自定义组件——隐藏的中心线,拖动改变左右元素宽度
所需传参如下:传入中心线左侧元素、右侧元素和外侧元素的className,实现拖拽改变左右元素的宽度* @Props: classNames:{ box String 外侧容器className left String 左侧容器className @right String 右侧容器className } -->这里要确保左右和外侧的元素className唯一,也可以自己改成查找i...原创 2022-01-13 10:29:58 · 883 阅读 · 0 评论 -
JS取消冒泡(兼容模式)
用于取消各种冒泡事件,如下面的点击事件冒泡:<button @click="cancelBubbling">按钮</button>function cancelBubbling(e) { if (!!e?.stopPropagation) { e.stopPropagation(); //有stopPropagation属性的直接掉用 } else { window.event.cancelBubble = true; //没有stopPropag原创 2022-01-07 20:26:58 · 791 阅读 · 0 评论 -
正则——16进制颜色
const reg = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/ //正则表达式const num = '#e1e5ea' //要检测的颜色const format = reg.test(num) //正则.test(颜色),返回 true || falseconsole.log(format);16进制颜色const reg = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/...原创 2022-01-07 20:16:00 · 1832 阅读 · 0 评论 -
正则——时间 时分秒 12小时制 24小时制 moment可以转化的时间 HH:mm:ss hh:mm:ss
const reg = /^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/ //正则表达式const num = 13333333333 //要检测的号码const format = reg.test(num) //正则.test(号码),返回 true || falseconsole.log(format);24小时制时间(HH:mm:ss)const reg = /^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/12小时制时间(hh:.原创 2022-01-07 20:09:48 · 1110 阅读 · 0 评论 -
wangeditor富文本编辑器拓展菜单——橡皮擦
参考快速扩展一个菜单 · wangEditor 用户文档继承 按钮 菜单样式自定义拓展 橡皮擦菜单按钮const _this = thisconst { $, BtnMenu } = E // 自定义 清除格式 菜单继F承 BtnMenu classclass Wipe extends BtnMenu { constructor(editor) { // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述 const $elem = E.$(...原创 2022-01-05 20:33:12 · 1204 阅读 · 0 评论 -
wangeditor富文本编辑器拓展菜单——格式刷
参考快速扩展一个菜单 · wangEditor 用户文档继承 按钮 菜单样式自定义拓展 格式刷功能菜单按钮const _this = thisconst { $, BtnMenu } = E// 自定义 格式刷 菜单继F承 BtnMenu classclass FormatPainter extends BtnMenu { constructor(editor) { // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述 const $ele...原创 2022-01-05 20:30:06 · 4407 阅读 · 3 评论 -
wangeditor富文本编辑器拓展菜单——全屏
参考快速扩展一个菜单 · wangEditor 用户文档继承 按钮 菜单样式自定义拓展 全屏功能菜单按钮const _this = thisconst { $, BtnMenu } = E// 自定义 全屏 菜单继承 BtnMenu classclass FullScreen extends BtnMenu { constructor(editor) { // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述 const $elem = E.$..原创 2022-01-05 20:22:35 · 3480 阅读 · 2 评论 -
正则——用户名和密码校验、数字、大小写字母、数字和字母、小数、中文
【代码】正则——用户名和密码校验、数字、大小写字母、数字和字母、小数。原创 2021-12-28 15:30:16 · 5454 阅读 · 0 评论 -
正则——手机号码(严、宽、松)、电话号码、座机号码
const reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/ //正则表达式const num = 13333333333 //要检测的号码const format = reg.test(num) //正则.test(号码),返回 true || falseconsole.log(format);手机号(严谨), 根据.原创 2021-12-24 10:59:15 · 1563 阅读 · 0 评论 -
借场雪吧~ js下雪动画 canvas画布实现下雪特效
js下雪动画 canvas画布实现下雪特效原创 2021-12-21 20:16:25 · 678 阅读 · 0 评论 -
webpack5 配置热更新失效问题
这是关于webpack的版本信息:"webpack": "^5.37.0","webpack-bundle-analyzer": "^4.5.0","webpack-cli": "^4.9.0","webpack-dev-server": "^3.11.2","webpack-merge": "^5.7.3","webpackbar": "^5.0.0-3"在webpack.dev.conf.js已经配置了 hot:true,但是热更新依旧无效:devServer: { .原创 2021-12-20 17:20:38 · 3499 阅读 · 3 评论 -
关于 标签模板 函数模板 标签函数 function``
es6中新增模板字符串,也带来了新的函数实现方式。将模板字符串紧跟在一个函数名后面,那么这个函数将被调用来处理这个模板字符串。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。标签模板的第一个参数是一个数组,里面是 由变量隔开的 没有变量替换 的部分:`Hello ${N} world ${G}`//由变量分隔开后===>//${N}的前后:'Hello ',' world '//${G}的前后:' world ',''//需要注意的是,前后没有的会补上一个空原创 2021-12-15 10:57:18 · 410 阅读 · 0 评论 -
el-table 定位 跳转 至指定 行 位置,保证数据更新后位置不变
el-table数据刷新后会重新定位至表格头的位置,想要更新数据后任处于之前操作的位置,就要在操作时记录下当前表格滚动条的位置,数据更新后设置表格位置为刚才记忆的位置。记忆上次位置: /** * @description: 获取表格滚动条位置 * @param ifMemory 有没有ifMemory决定了该函数是保存位置还是跳转位置 * @return void */ getTableScrollTop( ifMemory = false原创 2021-12-09 14:56:32 · 7133 阅读 · 3 评论 -
localStorage 和 sessionStorage 及其用法 对象属性操作方式
sessionStorage存在当前会话,但是并不是浏览器关闭。当前页面的sessionStorage在新建一个相同页面时,这个sessionStorage是不存在的。它传递的条件是页面间的跳转,要通过超链接或者location.href或者window.open来打开另一个同域页面才能访问到这个sessionStorage。localStorage支持跨域隔离的最大5M的存储对象,满了报错。用法是不是用烂了这两个方法:localStorage.getItem('lastname原创 2021-11-29 18:49:10 · 1107 阅读 · 0 评论 -
关于 Symbol() 能不能当作 key值使用
看了很多文章,有说 Symbol() 能当作 key值使用的,也有说不行的,个人觉得不行(可以的话还有 uuid 什么事),但是不知道为什么。大佬的权威解释如下:原创 2021-11-19 10:19:00 · 2169 阅读 · 7 评论 -
关于 scrollIntoView() 锚点 元素滚动到指定位置 平滑
很简单好用的方法,直接上代码:document.getElementById(50).scrollIntoView({ behavior: 'smooth', //顺滑的滚动 block: 'center', //容器上下的中间 inline: 'start', //容器左右的左边})上述代码的运行结果:scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域,但是前提是它的容器可滚动浏览器支持如下:特征 Chrome...原创 2021-11-18 10:40:26 · 2979 阅读 · 0 评论 -
空值判断运算符 ? ?
空值判断运算符 ??原创 2021-11-17 19:11:42 · 528 阅读 · 0 评论 -
链判断运算符 ?.
在这之前,如果读取对象内部的某个属性,往往需要判断一下,属性的上层对象是否存在。否则跨级的对象会报错。多层级的 && 看起来会非常臃肿,es6在引入 链判断运算符 ?. 后 极大的简化了判断方法:?.直接在链式调用的时候判断,相当于一种短路机制,左侧的对象是否为null或undefined就不再往下运算,直接返回undefined。判断上层对象是否存在a?.b?.c?.d 等同于 a && a.b && a.b.c...原创 2021-11-17 18:56:07 · 561 阅读 · 0 评论