丶扁扁的糖是扁的-CSDN博客

原创 js获取年-月-日格式日期和 00:00:00格式时间

【代码】js获取年-月-日格式日期和 00:00:00格式时间。

2023-04-01 15:01:00 1064

原创 Vue xlsx插件导入导出excel 前端解析excel el-table导出excel

这里示例el-table导出为excel：

2022-12-03 14:58:32 1385

原创 Vue自定义指令——el-select多选框设置默认值并且不可编辑

因为el-select原生就可以实现下拉列表的选项禁用，指定项不可添加。那么想要实现设置默认值并且不可编辑，只要实现默认值不可删除即可。关闭按钮有着它自己的className：el-tag__close。那么只要将默认值的el-tag__close图标全部隐藏掉，就能实现设置默认值不可删除效果。具体指令如下：在el-select中的应用：...

2022-06-17 20:32:55 11473

1、关于 <textarea> 引发的思考因为<textarea>元素是自带缩放功能的，本来想参考它的实现给我要实现缩放的<div>元素添加一个类似的缩放，但是研究了下发现它的缩放好像不是依靠 JS 事件。于是抓了下<textarea>的原生css如下：resize：看到了resize这个关键属性，然后就给我的<div>加上了resize：但是并没有生效。我的<div>没有发生任何改变😟，甚至连鼠...

2022-05-23 20:51:07 1083

原创正则——判断是否质数

具体思路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 262

原创 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 2146

原创 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 2427

原创 el-loading使用指令方式时定义背景色、文字、icon，自定义loading动画

指令方式时定义背景色、文字、icon：<div v-loading.fullscreen.lock="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"/>自定义loading动画：.el-loading-spinner { height: 40px; ..

2022-04-28 19:37:40 2246

原创 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 6497

原创 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 2854

原创 JS 获取当前浏览器版本，验证浏览器版本是否高于谷歌80

原来的在用的方法是直接截取谷歌浏览器版本的前两位版本号，今天突然有用户反馈说报浏览器版本过低，一看发现谷歌浏览器已经发布了100+版本，更换取版本号的逻辑在此记录。获取浏览器版本信息const appVersion = navigator.appVersion //获取浏览器版本信息获取以谷歌浏览器信息开始的字符串const index = appVersion.indexOf('Chrome/') //谷歌浏览器的版本信息位置const ChromeStr = app.

2022-04-07 17:20:04 2583

原创 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 991

原创 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 1011

原创 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 1216 1

原创谷歌浏览器插件——Ajax Interceptor，一个用于修改 ajax 请求响应的 chrome 扩展，可以修改ajax请求返回结果，在浏览器上直接mock数据

如图，开启后会拦截 getData 这个请求，然后将请求数据改为设置的 []。1、安装方式https://github.com/YGYooo/ajax-interceptorgithub的链接如上，我也在csdn资源里上传了，免费下载，但是不知道能不能过审核。谷歌浏览器 => 拓展程序加载完后重启浏览器2、使用方式点击拓展里的Ajax Interceptor整个界面很好操作，没有任何多余的按钮json面板里鼠标悬浮会显示操作按...

2022-03-16 11:14:49 6682

原创 Vue自定义组件——图片放大器，js点击＜img＞触发图片放大，富文本内图片点击实现放大器效果

富文本内图片点击实现放大器效果，要在不改变<img /> 标签且不添加自定义指令的前提下放大图片，找了下没有找到合适的插件，就自己动手写一个图片放大器组件。设计思路：富文本里的图片，最终应该是呈现这样的状态：<div> <img src="……" /> <div class="content">扁扁的糖是扁的</div></div>给富文本标签添加点击事件；<div @click="preview

2022-03-03 09:55:13 2315 1

转载 JS“观察“元素是否可见——记录IntersectionObserver API 使用教程

网页开发时，常常需要了解某个元素是否进入了"视口"（viewport），即用户能不能看到它。上图的绿色方块不断滚动，顶部会提示它的可见性。传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于scroll事件密集发生，计算量很大，容易造成性能问题。目前有一个新的IntersectionObserver API，可以自动"观察"元素是否可见，Chrom.

2022-02-25 11:27:51 2361

原创一些html标签，懒的人不喜欢写CSS

为了做比较，默认的文本我添加了字号和颜色<div class="test-label">  <div>扁扁的糖是扁的</div></div>.test-label { font-size: 16px; color: #fff;}1、超链接 <a><a>扁扁的糖是扁的</a><a> 标签定义超链接，用于从一张页面..

2022-02-24 11:38:30 282

原创 JS算法——猴子分香蕉

一、问题描述5 只猴子分香蕉。第1只猴子，把香蕉均分成5堆，还剩下1个，就吃掉并把自己的一份藏起来。第2只猴子，把香蕉均分成5堆，还剩下2个，就吃掉并把自己的一份藏起来。第3只猴子，把香蕉均分成5堆，还剩下3个，就吃掉并把自己的一份藏起来。第4只猴子，把香蕉均分成5堆，还剩下4个，就吃掉并把自己的一份藏起来。第5只猴子，把香蕉均分成5堆，此时正好不剩。请计算一开始最少有多少个香蕉？二、代码实现计算思路就是每只猴子分完后每堆数量都是整数且第五只猴子分完后每..

2022-02-22 10:03:14 775

原创 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 5069 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 1911

原创正则——国内车牌号挂学警港澳使领蓝牌绿牌

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 1321

原创关于谷歌浏览器更新后无法手动修改cookie，修改cookie报红的解决方式

1、打开谷歌浏览器访问 chrome://flags/2、把 Partitioned cookies 项将设置项改为Enabled3、重启浏览器

2022-02-12 14:41:29 1591

原创 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 2011

原创 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 893

原创 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 1004

原创 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 1327

原创 Vue自定义组件——隐藏的中心线，拖动改变左右元素宽度

所需传参如下：传入中心线左侧元素、右侧元素和外侧元素的className,实现拖拽改变左右元素的宽度* @Props: classNames:{ box String 外侧容器className left String 左侧容器className @right String 右侧容器className } -->这里要确保左右和外侧的元素className唯一，也可以自己改成查找i...

2022-01-13 10:29:58 868

原创 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 785

原创正则——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 1764

原创正则——时间时分秒 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 1073

原创 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 1186

原创 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 4243 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 3318 2

原创正则——用户名和密码校验、数字、大小写字母、数字和字母、小数、中文

【代码】正则——用户名和密码校验、数字、大小写字母、数字和字母、小数。

2021-12-28 15:30:16 5272

原创正则——手机号码（严、宽、松）、电话号码、座机号码

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 1509

ScreenToGif

Snipaste快速截图工具

谷歌浏览器插件—— JSONView

谷歌浏览器插件—— Ajax Interceptor

空空如也