
js
前端小蜜蜂
这个作者很懒,什么都没留下…
展开
-
模仿ProTable创建ProTable组件
代码就这么多,基本上都写了,备注也有,大家自己看吧。不多说废话直接上代码。原创 2024-01-18 15:44:56 · 617 阅读 · 0 评论 -
element select 多选内容过多内容没有去除问题
Element Select 多选内容过多DOM更新问题原创 2022-06-09 18:14:34 · 679 阅读 · 0 评论 -
init(dom: HTMLElement, theme?: string | object | undefined, opts?: EChartsInitOpts | undefined)
这个主要是typescript的语法检测,只需要加上HTMLElementdocument.querySelector("#main") as HTMLElement原创 2022-01-30 12:22:28 · 939 阅读 · 0 评论 -
js禁止控制台
这几天写了一个禁止控制台打开,简单记录一下控制台禁止打开document.οncοntextmenu=function(){return false;}; document.onselectstart=function(){return false;}; document.oncontextmenu = function () { return false; }; //在本网页的任何键盘敲击事件都是无效操作 (防止F12和shift+ctrl+i调起开发者工具) w原创 2021-11-24 11:06:10 · 2104 阅读 · 0 评论 -
vue excel导出
好久没有写过文章了,今天简单写一下几个方法首先是对,vue excel导出,简单利用Export2Excel进行二次封装。废话不多说直接上代码export function excel(columns, list, excelName) { console.log(list) import("@/vendor/Export2Excel").then((excel) => { let tHeader = [], filterVal = []; columns?.f原创 2021-10-23 16:32:58 · 372 阅读 · 0 评论 -
Error in mounted hook: “Error: please transfer a valid prop
今天在写form_item循环的时候遇到了这样的错误记录了一下;自己大概写的是这样测一个页面那么就要用到form循环,最开始是在form_item中直接写的,最后重置表单时发现重置不了,然后就是在el-input外加了一层form-item,自己也是在网上查询相关错误,发现大致都是:prop="‘item.’+index+’.index2’"等等,但是没有解决我的问题报错依然在,同时还是重置不了表单。这个时候慢慢考虑,其实着就是一个数组循环,那么我们就拿到准确的值,去消除这个错误<el-fo原创 2021-09-10 16:08:45 · 1077 阅读 · 0 评论 -
webpack proxy记录
简单记录一下proxy的使用都是知道这是一段代理,在接口请求的时候利用代理还是有很大帮助的,在针对不同的接口进行访问export default { dev: { '*/': { target: 'http://localhost:9097', changeOrigin: true, pathRewrite: { '^': '' }, }, }, test: { '/api/': { target: 'http://lo原创 2021-08-18 16:24:04 · 288 阅读 · 0 评论 -
正则表达式使用记录
是否带有小数/^\d+\.\d+$/.test()保留几位小数// 这里将数字转为字符串类型 let val_string: string = val?.toString() // 清除数字和 “.” 以外的字符 val_string = val_string?.replace(/[^\d.]/g, "") // 将开始增入变量,需要保留的小数位 let regexp = new RegExp("\\.{" + index + ",}", 'g') // 只保留第一个清除多余原创 2021-08-09 16:33:33 · 94 阅读 · 0 评论 -
js ,保留小数点后几位
简单记录一下,以前使用的小数点保留的问题,封装好的函数// 传值,保留小数点后几位export function decimal(val: number, index: number): string { // 这里将数字转为字符串类型 let val_string: string = val?.toString() // 清除数字和 “.” 以外的字符 val_string = val_string?.replace(/[^\d.]/g, "") // 将开始增入变量,需要保留的小原创 2021-08-09 14:32:10 · 531 阅读 · 0 评论 -
fetch 简单封装,并使用
几天才想起来前一段时间fetch的简单封装,今天简单记一下,话不多说直接上代码(结合了typescript不过不需要直接去除类型就行)const url_base: string = "http://127.0.0.1:9097"export async function request(params: API.RequestAPI) { let url: string = url_base + params?.url const method: string = params?.metho原创 2021-08-06 12:22:07 · 1155 阅读 · 0 评论 -
element-ui 样式重置
原来没有记录过,今天简单记录element-ui 样式重置过程(自己遇到的)menu菜单悬浮背景,根据自己所需更改.el-menu-item:hover { background-color: transparent !important;}菜单背景.el-menu{background-color:transparent !important;}菜单下划线,选中,选中之前的下划线在.el-menuclass中重置.el-menu--horizontal>.el-m原创 2021-08-02 18:26:12 · 1232 阅读 · 0 评论 -
braft-editor上传图片功能
由于自己使用的是纯函数,所以这里不多说,直接开始在form表单中使用,首先去掉form.item的name属性,在利用useState去赋值 <ProForm.Item label="文章内容" > <BraftEditor value={content} controls={controls} onChange={(editorSta原创 2021-07-20 18:01:49 · 2265 阅读 · 8 评论 -
BraftEditor的使用
因为自己使用的是存函数所以简单记录一下,因为官网上没有对存函数的试用,所以还是要用到onchange或者onBlur都可以来获取文本框中的值,但是又因为文本框返回的是函数,所以要转成标签格式<BraftEditor value={content} onChange={async (val) => setContent(val.toHTML())} ></BraftEditor>在利用useState来赋值const [content, setContent] = use原创 2021-07-14 15:15:29 · 3322 阅读 · 6 评论 -
type check failed for prop “columns“. Expected Object, got Array
基本上出现类似提示的时候就是在子组件接收参数的时候类型的不对,这里是父组件传的数组,然后接收的时候定义的不是数组。columns: { type: Array, default: () => [], },改一下接收就可以了本文链接:点击博主的个人小博客:嘿嘿...原创 2021-07-02 11:21:25 · 871 阅读 · 0 评论 -
vue filters获取data中的值
在vue中如果获取data中的数据就需要在全局定义一个变量,然后利用beforeCreate将this赋值给这个变量,就可以在filters中获取data中的值具体操作:<script>let that = this;export defaut { filters:{ append(){ console.log(that.arr) } }, data(){ return{ arr:[] } }}</script>这个时候要注意全局变原创 2021-06-24 18:13:26 · 699 阅读 · 0 评论 -
element-ui 图片预览切换查看
好久没记录问题了,今天记录一下在element-ui现在版本中如果需要查看的话,根据api的要求写的太多处理起来相对麻烦,所以在这里就不写处理结果,可以直接看element-ui-plus给出组件el-image-viewer但是因为这只是vue3.0适配的,但是vue现阶段比较稳定的是2.6几版本,所以用element-ui-plus并不能使用,但是也在element-ui中添加了这一组件是需要单独引入import ElImageViewer from "element-ui/packages/i原创 2021-06-21 15:57:51 · 2292 阅读 · 1 评论 -
js时间戳和时间格式化之间的相互转换
记录一下时间转换的格式时间格式转换为时间戳时间格式为Mon May 10 2021 00:00:00 GMT+0800 (GMT+08:00)时间转换为时间戳只需要用到getTime()方法就可以和(Mon May 10 2021 00:00:00 GMT+0800 (GMT+08:00)).getTime()时间格式为2021-05-11 00:00:00转换为时间戳// 方法一(new Date('2021-05-11 00:00:00')).getTime()// 方法二(new原创 2021-05-28 11:13:47 · 2146 阅读 · 0 评论 -
MongoDB模糊查询,Next.js查询操作
今天在维护自己博客的时候,在前面增加了博客的搜索,记录一下。MongoDB模糊查询主要是晕倒的正则表达式new RegExp这个属性,可用模糊查询也可以是关键字查询多条件模糊查询async findArticle() { const queryData = this.ctx.query; let reg = new RegExp(queryData) let filter = {$or:[ {title:{$regex:reg}}, {name:{$regex:reg}},原创 2021-05-25 18:55:43 · 499 阅读 · 0 评论 -
vue中data获取props内容,element时间限制选择
好久没有更新了,太忙了,遇到的问题解决了,但是也忘记的差不多是那些问题了,先说说今天的。今天在二次封装element-ui的时间选择框的组件的时候遇到了这样的一个问题就是,在利用DateTimePicker组件的时候用到disabledDate属性,限制选择的时间长度,以及到哪一天,这父组件传入的值是time:{ title: '日期', type: 'RestrictDateTimePicker', hide: true,原创 2021-05-24 18:07:05 · 1575 阅读 · 1 评论 -
next.js管道函数getServerSideProps配合antd完成分页
在页面请求的时候我们都知道先去的时候就会先执行管道函数,来请求数据,当然它是由页面跳转才会执行的,也就是你访问某个路由的时候执行。那么这个时候就会渠道问题,开始的时候自己也是比较愚笨没有仔细看官方文档,想着在页面中用onChange和axios直接搭配使用请求数据,但是也是不知道为什么在server层就是接收不到传来的参数,也是奇怪。自己的server使用的是egg.js利用this.ctx来获取,也是详细查看了相关的api,但是获取不到,求告知。后面就去研究next.js的官网,其中就是这样一段话但原创 2021-04-19 16:54:41 · 2438 阅读 · 0 评论 -
element-ui中table,tag列显示隐藏复选框等
先说业务需求,是在一个用tag切换table内容,其中一个是有全部内容的,其他没有,也不让用复选框,要求就是只有要用复选的这个能用,起他不能,并且一开始复选框原来是隐藏的,点击按钮后才显示,不选点击在隐藏,到其他tag也是隐藏。这几个tag页面大致内容都是相同的所以是根据v-if判断是否在那个tag页面显示所以用的是一套代码。在点击按钮后显示复选框最开始的原代码就是用v-if判断是不是这个tag同时判断是否显示,发现到其他tag页面时,复选框还是显示,同时呢tag页面也是标题循序,以及内容乱掉了。原创 2021-04-10 19:29:46 · 1619 阅读 · 0 评论 -
element-ui cascader的使用
简单记录一些今天踩得坑,只是自己遇到的问题在初次使用的cascader这个组件的时候,碰到的是后台穿的字段名称和要求的不一样(这个时候也是自己没有好好读api)然后自己用递归回调的方法,往里面插入value,和label字段getTreeData(data) { // 循环遍历json数据 if (!data || !data.length) return for (var i = 0; i < data.length; i++) { data[原创 2021-03-31 16:07:55 · 456 阅读 · 1 评论 -
vue 自定义指令,vue中使用拖拽事件
记录一下自己学习vue中书写项目中遇到的问题。由于项目需求需要写拖拽事件(需求,是一个按钮,可以在页面上自由拖拽点击),自己定义后,最开始想到的是利用ref获取div标签,在对其进行dom操作,发现不行。在查看官方文档发现了自定义指令(自己学习的时候漏掉的知识点),但是一直有个问题,就是拖拽后点击事件也触发了。这是因为两个原因:拖拽事件放在了点击事件外//最初的代码<div v-drag> <el-button @click="clickButton">点击</原创 2021-03-23 17:14:25 · 888 阅读 · 0 评论 -
js谷歌插件编写
今天由于老板要求写了一个现学一个谷歌插件的用法,记录一下;首先最主要的就是manifest.json文件;看一下我这个简单的配置:manifest.json { // 插件名称 "name": "美丽的插件", // 版本号 "version": "1.0", "manifest_version": 2, "content_scripts": [ { // 在什么url中执行js的内容 "matc原创 2021-02-19 10:16:23 · 757 阅读 · 0 评论 -
js自动打开关闭多个页面
自动打开多个页面,并且在关闭前一个页面的同时打开后面的页面;是通过定时器和异步操作完成,直接使用for是不行的,所以要指定一个等待过程,来完成各个页面的打开和关闭功能。<a href="http://www.baidu.com">百度</a> <a href="http://www.google.com/">谷歌</a> <a href="https://cn.bing.com/">bing</a> <a原创 2021-02-18 15:00:49 · 951 阅读 · 0 评论 -
js自动打开,关闭a标签
打开自动打开页面中的a标签主要就是利用的window的属性open,close; <a href="http://www.baidu.com">百度</a> <script> let a = document.querySelector('a'); window.open(a.href); // 如果直接这样写的话关闭的是原来的页面,并不是新打开的页面 setTimeout(() => {原创 2021-02-18 14:49:13 · 1409 阅读 · 0 评论 -
js扩展运算符,结构赋值
复制数组数组是符合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组,扩展运算符简洁了这一过程。const array1 = [1,2,3];const array2 = array1;console.log(array2);// [1,2,3]array2[0] = 2;console.log(array1); // [2,2,3];// Es5如果不影响第一个数组的方法用concatconst array3 = array1.concat();ar.原创 2021-02-18 14:38:14 · 574 阅读 · 0 评论 -
数组的转换
数组转换成字符串数组转换成字符串的方法很多,其中用到最多的两种:join,toSpringjoinjoin是拼接,是可以用符号来拼接,一般根据场景需要拼接 let array = [1,2,3]; let newArray = array.join('-'); console.log(newArray); // 1-2-3``toSpring let array = [1,2,3,4]; let newArray = array.spring(); cons原创 2021-02-18 11:00:59 · 860 阅读 · 0 评论 -
js 中的Set,Map
MapMap(映射)是一种可迭代的键值对(key/value)结构。所有的值都可以通过键来获取。Map 中的键都是唯一的。let map = new Map(); map.set("title", "understaing"); //'title'是Map的键名,‘understaing是值 map.set("data", "5"); console.log(map); console.log(map.get("title")); //get()方法原创 2021-02-06 14:25:59 · 1516 阅读 · 0 评论 -
js forEach的使用
forEach用的也是相对较多的,基本上也是遍历数组.也是最符合基础的for循环的let array=[1,2,3,4,5];let newArray = [];// forfor(let i=0;i<array.length;i++){ if(array[i]>3){ newArray.push(array[i]) }}console.log(newArray)// [4, 5]// forEacharray.forEach(item=>{ if原创 2021-02-05 18:43:29 · 1288 阅读 · 0 评论 -
js中every,some
every,someevery是和some相对应的,every是如果every遍历的对象都返回true才会返回true,有一项返回false就会停止遍历,返回false,而some,则是在遍历的对象中只要有一项返回true就会返回true。let array = [1,2,4,6,7];let respone = array.every(item=>{ if(item<4){ return true; }else{ return false;原创 2021-02-05 16:24:20 · 136 阅读 · 0 评论 -
js数组的map,filter...方法
在项目中经常用到的就是这几个,个人频繁用到最多的就是map。mapmap也就是映射,是一一对应的关系,返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。 let arr = [54,66,34,99,60]; let arr2 = arr.map(item =>{return item>=60 ?'及格' : '不及格'; })console.log(arr2); // ["不及格", "及格", "不及格", "及格", "及格"]我一般是结合遍历输出一个选择框原创 2021-02-04 14:33:40 · 1987 阅读 · 2 评论 -
js 数组的增,删,插,查,排序,连接,拷贝
数组中常用的也就是增``````删``````插``````查``````排序``````连接``````拷贝增从尾部添加元素let array = [1,2,4];array.push(5);console.log(array); // 1,2,4,5;从头部添加元素let array = [1,2,4];array.unshift(5);console.log(array); // 5,1,2,4利用splice来增加数组中的元素let array = [1, 2, 3,原创 2021-02-03 15:36:05 · 164 阅读 · 0 评论 -
前端 js中const,let,var
在学习js的时候经常看到这个三个定义变量,其实也就是const(可以理解为固定变量,且需要进行初始化),let(理解为块级变量,出了这个区间就没有其他影响),var(这个定义的变量是可以修改的,但同时可能会污染window下全局)const这个一般在面试的时候面试官也不会问这个问题,一般问的就是let和var的区别同时大概会给你的面试题中这样的代码for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1);}/原创 2020-07-17 16:06:18 · 2999 阅读 · 0 评论