JavaScript
关注
分享
扫一扫
Eli-sun
不断学习
展开
-
用axios封装一个直接通过url地址请求的方法
请注意，上述代码中的 method 和 data 参数是可选的，你可以根据需要自定义请求方法和请求数据。此外，你可能还需要处理错误和异常情况，以确保请求的可靠性。你可以将上述代码保存为一个单独的文件，例如 api.js。然后在你的项目中导入并使用该方法来发送请求。你可以使用 Axios 来封装一个直接通过 URL 地址请求的方法。原创 2024-06-03 17:21:45 · 396 阅读 · 0 评论 -
vue封装一个查询URL参数方法
在上述示例中，getQueryParam 方法接受一个参数 param，它表示要查询的参数名称。然后，它使用 URLSearchParams 对象来解析当前 URL 的查询参数，并返回指定参数的值。请注意，上述代码中的 paramName 是要查询的参数名称，你需要将其替换为实际的参数名称。此外，你可以在其他组件中重复使用该方法来获取不同的 URL 参数。然后在你的 Vue 组件中导入并使用该方法来获取 URL 参数。在 Vue 中，你可以封装一个查询 URL 参数的方法来获取 URL 中的查询参数。原创 2024-06-03 17:19:17 · 448 阅读 · 0 评论 -
封装一个页面自适应方法
在上述示例中，getPageSize 方法返回一个对象，包含了页面的宽度、高度、宽高比、以及是否为移动端、平板端或桌面端的标识。你可以根据这些信息在组件中动态调整页面的布局和样式。你可以将上述代码保存为一个单独的文件，例如 utils.js。然后在你的 Vue 组件中导入并使用该方法来获取页面的自适应信息。在 Vue 中，你可以封装一个页面自适应的方法来根据屏幕大小动态调整页面的布局和样式。原创 2024-06-03 17:17:26 · 354 阅读 · 0 评论 -
vue封装url验证方法
在上述示例中，validateUrl 方法接受一个 URL 参数，并使用正则表达式来验证 URL 的格式是否有效。你可以在组件中调用该方法来验证用户输入的 URL。请注意，上述代码中的正则表达式是一个简单的示例，可能不能完全涵盖所有的 URL 格式。你可以根据需要调整正则表达式的规则。你可以将上述代码保存为一个单独的文件，例如 utils.js。然后在你的 Vue 组件中导入并使用该方法来验证 URL。在 Vue 中，你可以封装一个 URL 验证的方法来验证给定的 URL 是否有效。原创 2024-06-03 17:08:19 · 420 阅读 · 0 评论 -
js通过音频链接获取音频时长
当loaddmetadata事件被触发时，它会解析带有音频持续时间的Promise，如果有错误，它会用错误拒绝Promise。要在JavaScript中从音频链接获取音频文件的持续时间，您可以使用fetch API来检索音频文件，然后使用audio API来获取持续时间。与视频示例一样，Audio元素的duration属性以秒为单位，因此如果需要，您可能希望将其转换为更易于阅读的格式。原创 2024-05-13 11:08:15 · 1104 阅读 · 0 评论 -
js通过视频链接获取视频时长
这个函数用提供的URL创建一个新的Video元素，并在loadedmetadata事件被触发时解析一个带有视频持续时间的Promise。它还处理可能发生的任何错误。注意，Video元素的duration属性是以秒为单位的，因此如果需要，您可能希望将其转换为更易于阅读的格式。原创 2024-05-13 10:55:53 · 659 阅读 · 0 评论 -
封装axios方法传入参数调用
promise原创 2022-06-21 19:40:21 · 419 阅读 · 0 评论 -
element-plus中el-table按照中文名字排序sort-method
sort-method原创 2022-06-21 18:00:50 · 1444 阅读 · 0 评论 -
js获取n天前或n天后的日期
js获取n天前或n天后的日期原创 2022-06-18 14:31:18 · 1457 阅读 · 3 评论 -
typescript基本数据类型01（笔记）
typescript笔记原创 2022-06-09 17:09:01 · 180 阅读 · 0 评论 -
vue3指令重复点击只发送一次请求
vue3写法指令在main.js中在app上挂载该方法app.directive( 'preventReClick', { mounted: function (el, binding) { el.addEventListener('click', () => { const events = el.style.pointerEvents if (events原创 2022-05-29 02:56:05 · 944 阅读 · 0 评论 -
vue3 在setup中使用mapSate以及对mapState的封装
在setup中使用mapSateimport { mapState, useStore } from 'vuex'import { computed } from 'vue'export default { name: 'App', components: { }, setup() { const store = useStore() // 用法1 const sCounter = computed(() => store.state.counter)原创 2022-05-26 15:30:36 · 482 阅读 · 0 评论 -
vuex-state展示的mapSate辅助函数
import { mapState } from 'vuex// 其他计算属性， 从store中获取computed:{ //写法1 mapState(["counter", "name", "age", "height"]) // 这里的mapSate是返回的一个对象 //写法2 // 可以这样写, 就把对象里面的展开了 ， 这是数组的写法 ...mapState(["counter", "name", "age", "height"]) // 写法3 // 还可以传入对象的形式， 传入原创 2022-05-26 14:46:58 · 180 阅读 · 0 评论 -
FormData表单的问题
1.首先创建一个formdata实例const data = new FormData()const list = { a: '1', b: '2', c: '3'}2.将list放入formdata表单Object.keys(list).forEach(item => { data.append(item, list[item])})这就完成了formData的赋值了formData里面还可以放文件，想要打印文件可以这样：list[item].get('file')原创 2022-05-26 11:16:05 · 279 阅读 · 0 评论 -
计算一天之内的时间差
const getkssj = (val) => { list.kssj = val form.zqsc = getHour(list.kssj, list.jssj) } const getjssj = (val) => { list.jssj = val form.zqsc = getHour(list.kssj, list.jssj) } // 计算时间间隔方法 const getHour = (s1.原创 2022-05-13 09:40:27 · 314 阅读 · 0 评论 -
input文件上传
<div class="uploadexcel"> <label for="fileInput"> <span class="importBtn">导入</span> <!-- <el-button type="primary">上传文件</el-button> --> </label> <input .原创 2022-04-22 16:45:16 · 949 阅读 · 0 评论 -
js查找字符串中出现了三次的字符
let str = 'abvfFiioipuipplljlnnyfsaa' let arr = str.split('') console.log('111',arr); arr = arr.sort() console.log('222',arr); let temp = [] for(var i=0;i<arr.length;i++){ let sum = 0 for(var j=0;j<arr.length;j原创 2022-02-15 13:52:13 · 978 阅读 · 0 评论 -
js中entries()，keys()，values() , some(), Object.assign()遍历数组用法
js中entries()，keys()，values() , some(), Object.assign()遍历数组用法ES6提供了entries()，keys()，values()方法返回数组的遍历器，对于遍历器（Iterator）可以使用for…of进行便利，也可是使用entries（）返回的遍历器Iterator.next()方法进行遍历。1.使用keys()遍历。keys()返回的是数组元素索引号的遍历器。const arr1 = ['a', 'b', 'c', 'd', 'e', 'f',原创 2022-01-14 15:49:11 · 946 阅读 · 0 评论 -
百度地图3D旋转和倾斜角度的调整
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title&原创 2021-12-09 12:48:26 · 5834 阅读 · 0 评论 -
数据可视化百度地图进一步优化
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<原创 2021-12-09 11:24:28 · 283 阅读 · 0 评论 -
百度地图基础案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<原创 2021-12-09 10:08:45 · 327 阅读 · 0 评论 -
数据结构二叉搜索树02
二叉搜素树, BST, binary search tree。二叉查找树、二叉排序树。二叉搜索树其实就是普通的二叉树上加了—些限制二叉树对于结点是没有任何的限制，但是在二叉搜索树中在插入子结点的有一些特殊的要求:1、非空左子树的所有的键值都小于其根结点的键值2、非空右子树的所有键值都大于其根结点的键值3、左右子树本身也都是二叉搜索树二叉搜索树的特点:相对较小的值总是保存在左子结点上，相对较大的值总是保存在右子结点上二叉搜索树// 结点类class Node{ constructor(va原创 2021-12-06 17:12:37 · 440 阅读 · 0 评论 -
案列：图片压缩 canvas高级应用：图片压缩算法实现
案列：图片压缩 canvas高级应用：图片压缩算法实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1原创 2021-12-05 00:06:57 · 342 阅读 · 0 评论 -
数据可视化基础了解
Highcharts、ECharts、AntV用来做一些图标的绘制three.js、zrender（其实是对Canvas做了底层封装，它也是ECharts的底层框架）、d3（它可以做一些矢量图的绘制）可以用来做一些更底层的绘制Canvas、Svg、WebGL、HTML更底层，其实是浏览器为我们提供的默认的绘图能力Skia（是Chrome和Android的底层2D绘图引擎）,OpenGL（是2D、3D图形渲染库，常用于CAD、VR、数据可视化和游戏）绘图引擎，其实适用C++结合硬件进行通讯实现的can原创 2021-12-05 00:05:14 · 256 阅读 · 0 评论 -
数据结构与算法第一天（了解）
数据结构与算法第一天（了解什么是数据结构和算法）客服系统：用户排队模块方案一：数据库（不太合适）排队列表：实时排队模块、内存中完成方案二：数组去实现要考虑数组的长度方案三：队列队列是一种受限制的线性表，它遵循一个原则：FIFO只允许在表的前端进行删除操作，在表的后端进行插入（新增）操作数据结构：时空复杂度的意识程序设计 = 数据结构 + 算法四种逻辑结构：集合结构、线性结构、树形结构、图形结构集合结构：同属于一个集合，没有其他关系了线性结构：最典型的数据关系一对一，线性结构是一种原创 2021-12-02 16:37:27 · 437 阅读 · 0 评论 -
Vue深度优先遍历多层数组对象（相当于多棵树、三级树）
这个方法如果是对于下面的三级树的话可以拿到爷爷Id，自己Id，父亲Id；其实如果想要拿到label的话就把data.id换成data.label就行了function treeFindPath(tree, func, path = []) { if (!tree) return [] for (const data of tree) { path.push(data.id) if (func(data)) return path原创 2021-11-23 08:48:15 · 3056 阅读 · 1 评论 -
最近编程中遇到的一些问题2021/9/8
1首先是el-autocomplete这个组件进行模糊查询时，要限制输入的是数字，并且限制输入的长度 <el-autocomplete v-model="phoneNumber" :fetch-suggestions="querySearch" :maxlength="length" placeholder="请输入联系电话" oni原创 2021-09-08 09:20:22 · 618 阅读 · 0 评论 -
块级作用域-let和var
块级作用域-let和var事实上var的设计可以看成JavaScript语言设计上的错误，但是这种错误多半不能修复和移除，因为需要向后兼容。1.大概十年前，Brendan Eich就决定修复这个问题，于是他添加了一个新的关键字：let。2.我们将let看成更完美的var.块级作用域：1.JS中使用var来声明一个变量时，变量的作用域主要是和函数的定义有关。2.针对于其他块定义来说是没有作用域的，比如if或者是for等，这在我们开发中往往会引起一些问题。之前es5因为if和for都没有块级作用域原创 2020-06-06 14:15:29 · 208 阅读 · 0 评论 -
const的使用和注意点
const的使用const关键字1.在很多语言中已经存在，比如C/C++中，主要的作用是将某个变量修饰为常量。2.在JavaScript中也是如此，使用const修饰的标识符为常量，不可以再次赋值。什么时候使用const呢？当我们修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性。const的注意：const注意一：const a = 20;a = 30; // 错误：不可以修改const注意二：const name; // 错误：const修饰的标识符必须赋值原创 2020-06-06 13:10:02 · 297 阅读 · 0 评论 -
深入理解Es6箭头函数
最近在写Vue项目时用箭头函数时遇到了一点问题；this的实例总是不在当前的Vue对象上，发现特别是ajax异步请求数据，或者钩子函数中使用的时候，就会报错。最本溯源：箭头函数的this的锅，如果我们使用function（）{},或者Es6 方法的写法就不会出现这类问题。今天就主要探讨一下Es6箭头函数定义：JavaScript ECMAScript6箭头函数表达式的语法比函数表达式短，并且不绑定自己的this，arguments，super或new.target。此外，箭头函数最好在非方法函数中使用，原创 2020-06-03 18:23:22 · 359 阅读 · 0 评论 -
ES5中的新增方法
ES5中的新增方法3.1 ES5新增方法概述ES5中给我们新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括：数组方法字符串方法对象方法数组方法：迭代（遍历）方法：forEach(), map(), filter(), some(), every()filter（）返回的是一个数组，查找的是所有满足条件的元素some（）如果在查找时只要查找到第一个满足要求的元素就不会再循环了，它返回的是bool值，它查找的是元素是否存在map() 方法返回一个新数组，数组中的原创 2020-06-01 20:04:25 · 137 阅读 · 0 评论 -
构造函数和原型
构造函数和原型1.概述在典型的OOP的语言中（如Java），都存在类的概念，类就是对象的模板，对象就是类的实例，但在ES6之前，JS中并没有引入类的概念。创建对象可以通过以下三种方式：1.对象字面量2.new Object()3.自定义构造函数栗子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co原创 2020-06-01 19:04:32 · 126 阅读 · 0 评论 -
给下面的这个字符串变成科学计数法，每隔三位打一个点，方法不限
给下面的这个字符串变成科学计数法，每隔三位打一个点，方法不限(\d{3})+)：3的倍数位个数值的空并且以)：3的倍数位个数值的空并且以)：3的倍数位个数值的空并且以结尾（\B）非单词边界 var str = '100000000000'; var reg = /(?=(\B)(\d{3})+$)/g; // str.replace(str, '.'); con...原创 2020-03-29 18:16:13 · 266 阅读 · 1 评论 -
正则表达式（2）
选择在 a 后面跟着 b 的 a, a 的后面跟的是 b ,但是 b 不参与选择，b 只参与修饰正向预查 正向断言 var str = 'abaaaaaaa'; var reg = /a(?=b)/g;将 a 的后面不是 b 的匹配出来 var str = 'abaaaaaaa'; var reg = /a(?!b)/g;贪婪原则： var str = '...原创 2020-03-29 18:12:13 · 106 阅读 · 0 评论 -
将the-first-name经过处理之后变成小驼峰式写法theFirstName
// 将the-first-name经过处理之后变成小驼峰式写法theFirstName var reg = /-(\w)/g; var str = 'the-first-name'; console.log(str.replace(reg, function($, $1) { return $1.toUpperCase(); }));...原创 2020-03-29 15:51:30 · 719 阅读 · 0 评论 -
RegExp对象方法
方法compile 编译正则表达式exec 检索字符串中指定的值。返回找到的值，并确定其位置test 检索字符串中指定的值。返回true或false var reg = /ab/g; var str = 'ababab'; console.log(reg.lastIndex); console.log(reg.exec(str...原创 2020-03-27 22:37:36 · 266 阅读 · 0 评论 -
RegExp对象属性
属性描述globalRegExp对象是否具有标志 gignoreCaseRegExp是否具有标志 ilastIndex一个整数，标示开始下一次匹配的字符位置multilineRegExp对象是否具有标志 msource正则表达式的源文本...原创 2020-03-27 22:14:54 · 246 阅读 · 0 评论 -
量词
n+ {1, }n* {0, }n? {0,1}n{X} {x}n{x,y} {x,y}n{x, } {x, }//一到正无穷贪婪匹配原则\w+ 表示+前面的变量可以出现一次或多次 var reg = /\w+/g;//\w+ 表示+前面的变量可以出现一次或多次 var str = 'abc'; var reg = /\w*/g; var...原创 2020-03-27 21:59:56 · 226 阅读 · 0 评论 -
正则表达式-元字符
// word\w===[0-9A=z_] \w代表的是0-9，A-z,加上一个下划线 _\W === [^\w]\d===[0-9] 指0到9\D===[^\d] 指非0到9\s===[\t\n\r\v\f ]\s元字符用于查找空白字符，空白字符可以是：空格符制表符回车符换行符垂直换行符换页符\S 查找非空白字符\b 匹配单词边界\B 匹配非单词边界\0 查找...原创 2020-03-26 17:38:50 · 278 阅读 · 0 评论 -
正则表达式
exmaple1:字符串满足前三位是0-9之间的数组字 var reg = /[1234567890][1234567890][1234567890]/g; //字符串满足前三位是0-9之间的数组字 var str = '23452u6324ihuyghuiju328';exmaple2:var reg = /[ab][cd][d]/g; var str = 'abc...原创 2020-03-24 16:17:31 · 237 阅读 · 0 评论