JS
Muizai
No code no bug.
幸灾乐祸才是乐,忙里偷闲才是闲。
展开
-
前端vue实现手机号输入框下拉展示历史登录过的手机号码
需求:做一个登录页面,登录过的号码显示在下拉框,下次登录可以选择登录过的号码进行登录无需重新输入。样式就不附上了,记录下逻辑过程吧。因为点击的时候希望同时收起下拉框,如果用click的话,容易触发input的blur事件,会快一步把下拉框收起来以至于点不到我们想点的历史手机号码,这个涉及到click和mousedown的执行顺序。大概就是在输入号码点击登录的时候,localstorage记录下手机号码,每次打开登录页面的时候先取localstorage里面的手机号码作为历史手机号下拉框的内容。原创 2023-03-27 16:25:54 · 700 阅读 · 1 评论 -
CryptoJS 前端加密解密踩坑
然后才发现原来我的加密是用ciphertext 是处理为16进制,而工具默认是加密成base64格式的,所以!诶,为什么加密结果和我的看起来不一样,虽然我是有加key和iv,但是感觉看起来就是不对呀。然后一开始后端还没部署,我就先拿了本地没加密的数据,自己先加密想着看看解密出来对不对。但是很奇怪,一直解密不出来,一开始一直以为是解密的方法有问题,试了很多种方法都不对,摸不到头脑,然后在搜索文章的时候,看到有工具可以直接加密解密出结果,我就试了一下。原创 2022-11-22 15:40:02 · 1578 阅读 · 0 评论 -
项目常用到的代码片段
生成随机数/声明和初始化数组/计算出总和、最小值、最大值/对字符串、数字或对象数组进行排序/从数组中过滤出虚假值/按照一个汉字两个字符计算字符串的长度/element中日期选择器禁止选择今天此刻之前的时间/上传Excel文件并读取文件内容...原创 2022-03-09 16:58:06 · 275 阅读 · 0 评论 -
纯前端实现Excel文件下载
最近有个模板下载的需求,因为考虑到是静态文件,直接前端做不用后端再写接口,就把文件放在前端,前端实现下载了<template> <div> <button @click="downloadTemplate">下载模板</button> </div></template><script>export default{ methods:{ downloadTemplate(){ const ancho原创 2021-11-01 14:14:34 · 1067 阅读 · 2 评论 -
一些常用的正则校验(手机号,电子邮箱,身份证号...)
// 身份证号export function isIdNo (number) { if (!number) return false const regx = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X)$)/ return regx.test(number)}// 电子邮箱export function isEmail (value) { const emailReg = /^([a-zA-Z]|[0-9])(\w)+@[a-zA-Z0-9]+\..原创 2021-07-25 13:07:06 · 220 阅读 · 0 评论 -
JS中switch case,多个case对于同一操作的写法
开头认个错,面向百度开发说的就是我,太久没有用switch了,今天想用它写几个判断,但是有两个不同条件是做一样的操作,但是忘了写法应该是怎么写了,首先就是百度了,果然百度结果没有让我失望。首先有一篇文章告诉我:switch (msg): case "a","b": console.log(msg); break;看着好像还挺有道理的,试试…额…b是有效了,a无效…于是继续度…又看到了一个写法:switch (msg): case "a" || "b": console.log(m原创 2021-03-24 10:35:56 · 6068 阅读 · 0 评论 -
理解JS中的this指向,如何改变this的指向,call、apply、bind的用法
看了一个大佬写的,写得很详细,大家可以直接跳转:仙人跳跳跳跳说说this的指向?有什么方法可以改变this的指向?哈哈哈,这句话熟悉吧,面试官最喜欢的问题,其实说实话,我很少用到call、apply、bind这几个东西,可能我段位太低?特意问了一个段位比我高的前辈:好吧,虽然不常用,但是好歹面试需要,总得弄懂。咸鱼就是这样的,看钱办事,这东西能搞钱,那就学哈哈哈哈哈。this的指向...原创 2021-02-04 18:20:29 · 172 阅读 · 0 评论 -
关于防抖节流的一些理解
防抖?节流?是个啥?如果让我一直封闭开发,估计我不会用到这两个词,而且在我以前的理解里,防抖和节流好像是一件事,没什么区别。但是后来发现,面试官还挺喜欢问的,那就只能认真捋一捋了,毕竟面试嘛,关乎钱的事嘿嘿嘿。...原创 2021-01-30 12:19:48 · 135 阅读 · 0 评论 -
ajax中的请求方式(GET、POST、PUT、DELETE、HEAD)
HTTP METHOD:客户端向服务器端发送请求的方式其实从本质意义上来讲,请求的方式之间是没有任何区别的,不管哪一种方式都可以向服务器传递数据,也可以从服务器获取到数据,而一般提问中问到的区别都是开门人员约定俗成的规范:1.GET:一般应用于从服务器获取数据(给服务器的数据少,从服务器拿的数据多),一般使用URL问号传参的方式向服务器传递内容xhr.open('get','/getList?num=12')2.POST:一般应用于向服务器推送数据(给服务器的多,从服务器拿下来的少),一般使用.原创 2020-07-13 13:51:17 · 724 阅读 · 0 评论 -
前端列表根据数组对象属性值排序
let ary = [ { list_order: 2, name: "车型展示" }, { list_order: 3, name: "售后服务" }, { list_order: 1, name: "公司介绍" }, { list_order: 5, name: "金融" },..原创 2020-05-22 11:57:26 · 886 阅读 · 0 评论 -
Computed property "***" was assigned to but it has no setter.
bug就像是盒子里的巧克力糖,怎么回事,充满想象…你永远不知道当你开心地敲着代码的时候,什么时候bug就会爬出来,于是你开始心烦意乱…我用了element的Tabs 标签页,本来写在data里面是没问题的,但是实际情况是要根据不同页面而改变,所以改到computed了,于是就报错了…好像知道什么意思,又好像不知道什么意思,翻译一下先emm,再找找吧,哦对,看一下vue怎么说简单来...原创 2020-05-08 11:52:30 · 1610 阅读 · 1 评论 -
vue 实现 ctrl + enter 发送信息
<script>export default { created() { document.addEventListener("keydown", this.keyEnter, false); }, methods: { keyEnter(e) { if (e.keyCode == 13 && e.ctrlK...原创 2020-04-22 20:08:44 · 693 阅读 · 0 评论 -
element手动触发表单验证
触发对整个表单的验证:this.$refs.userForm.validate(); 触发对表单部分字段的验证:this.$refs.userForm.validateField("password");原创 2020-04-22 09:43:27 · 13176 阅读 · 2 评论 -
数字转化为指定位数,前面位数不够的补零
// 需求:转为为指定三位数:1=>001 23=>023 999->999<script> function prefixInteger(num,length){ return (Array(length).join('0') + num).slice(-length) } prefixInteger(3,3) //003 prefixI...原创 2020-03-11 16:18:10 · 878 阅读 · 2 评论 -
一个方法库
function dateAdd(days,curDate){ //根据当前日期或者指定日期推算出days天后的日期 curDate = curDate ? new Date(curDate) : new Date(); return new Date(curDate.setDate)}export const util={ dateAdd:dateAdd}...原创 2020-01-14 16:21:55 · 123 阅读 · 0 评论 -
JSON -- 解析与序列化
JSON是一种数据格式,包括简单值,对象,数组三种类型的值。简单值:使用与JavaScript相同的语法,可以在JSON中表示字符串、数值、布尔值和null,但是不支持undefined,还有一点不同,JSON中的字符串必须使用 双引号(单引号会报错)对象:对象作为一种复杂数据类型,表示的是一组无序的键值对儿。而每个键值对儿中的值可以是简单值,也可以是复杂数据类型的值。与 JavaScr...原创 2019-12-14 10:51:59 · 153 阅读 · 0 评论 -
vue项目中实现拖拽 vuedragger
心情有点烦躁,直接上码吧…npm i -S vuedraggable //首先先装一下vuedraggableimport draggable from "vuedraggable"export default{ data(){ return{ materialsList:[] } }, components:{ draggable }, methods:...原创 2019-12-04 16:21:29 · 2360 阅读 · 1 评论 -
数组的基本知识和常用的方法
关于数组的添加、修改、删除(改变原数组)---- push:向数组的末尾添加新内容 ----var ary=[12,23,34,45];console.log(ary.push(100)); //5 返回数组的长度console.log(ary); //[12,23,34,45,100] 原数组改变ary.push("12月","1日"); //[12,...原创 2019-12-01 22:36:15 · 141 阅读 · 0 评论 -
解决element里面el-table中表头和内容错位
哎,element真是一个让人又爱又恨的东西,你用着很爽想华丽丽原地转圈的时候,它就会出来绊你一脚…怎么办,还没怎么办,填坑呗,没办法,就像寄人篱下,你只能忍气吞声…不扯,进主题吧,这个是一个el-table写的限制了宽度的可左右滚动的表格,这样看是挺正常的。但是往右滑的时候,笑容逐渐消失…???怎么回事,本来还为它是个直男而烦恼,但是想想直男总比渣男好,但是现在算什么,说歪(wan...原创 2019-11-25 18:18:50 · 7862 阅读 · 14 评论 -
函数的基本知识 (参数 return arguments 闭包 callee 匿名函数)
function:函数,具备某个功能的一个方法,方法本身是没有什么意义的,只有执行了这个方法实现了对应的功能才有自己的价值,因此,函数由两部分组成:创建函数+执行函数function 方法名(){ //函数体:存放的是实现某个功能的代码}方法名(); //执行函数方法名(); //可重复执行function sum(m){ var n=1; console.log(m) ...原创 2019-11-17 23:08:04 · 224 阅读 · 0 评论 -
element组件table表头\n换行
在项目中,我们有时候需要像上面截图这样,表头需要两行的样式,可能你们不需要,但是我用到了,这里记录一下,当是自己的一个笔记。<el-table :data="list" tooltip-effect="dark"> <el-table-column type="selection"></el-table-column> &l...原创 2019-11-12 10:19:31 · 3930 阅读 · 3 评论 -
eslint警告:定义未使用,** is defined but never used eslint
之前在用cli搭建vue项目的时候,因为手快,直接按了默认装了eslint了,后面觉得也好,有个限制也能规范一点,就没管了,但是写的时候遇到一个很头疼的问题,就是比如我知道后面可能会用到某个变量,我先定义好,后面直接拿来用,但是eslint打了我一巴掌,不行,你定义了就必须用!!! 如下图:当然,我也不是好欺负的,不行,我不用我也要先占着!!!哈哈哈,原来可以关掉这个规则验证的,只要在pac...原创 2019-10-29 16:49:20 · 16443 阅读 · 8 评论 -
some()方法检测数组中的元素是否满足指定条件
some()方法检测数组中的元素是否满足指定条件如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。some() 不会对空数组进行检测。注意: some() 不会改变原始数组。var arr=[0,1,2,3,4];console.log(arr.some(item=>item===2)); //true...原创 2019-10-25 10:58:39 · 904 阅读 · 0 评论 -
简单的移动端自适应适配rem
<style>html{ font-size:100px;}</style><html> <div class="wrapper"> <div></div> </div></html><script> var designWidth=750,//设计稿宽度 wi...原创 2019-10-16 14:56:15 · 268 阅读 · 1 评论