- 博客(68)
- 收藏
- 关注
RSS订阅
原创 vue 根据数组对象属性值分类，把一个数组拆分为多个数组
前端必备技能之一,按需分类有给的数据时候为了处理数据方便一些,后端给的数据可能不是我们想要的数据结构,这时候就需要你稍微做一点点的处理才能为自己所用现在有这样一个数组,后端给的,policyDtos: [{clazzType: 1, clazzTypeText: '限签', remark: '严格限签', sourceTypeText: '地区收集'}, {clazzType: 2, clazzTypeText: '限售', remark: '限售', sourceTy
2020-07-31 10:49:59
10356
10
原创 js数组几种常见的操作方法攻略
基础篇1.shift// 删除原数组的第一项，并返回删除元素的值，如果数组为空则返回undefinedvar a = [1, 2, 3, 4, 5]var b = a.shift()// a:[2,3,4,5] b:12.unshift// 将参数添加到原数组开头，并返回数组的长度var a = [1, 2, 3, 4, 5]var b = a.unshift(-2, -1)// a;[-2,-1,1,2,3,4,5] b:7//注：此方法在ie6.0下// 测试的返回值始终为unde
2020-05-13 10:42:43
3309
2
原创 react 函数式组件通信（父传子、子传父、兄弟之间）
例： 通过在父组件中点击按钮打开弹框。例： 通过在子组件中点击按钮关闭弹框。借助中间的父组件传值就行。
2024-03-20 10:27:58
236
原创 v-if、v-show、v-html 的原理
v-if是惰性的，如果初始条件为假，则什么也不做；v-show会生成vnode，render的时候也会渲染成真实节点，只是在render过程中会在节点的属性中修改show属性值，也就是常说的display；v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值。v-if会调用addIfCondition方法，生成vnode的时候会忽略对应节点，render的时候就不会渲染；：v-if有更高的切换消耗；
2024-03-13 11:11:16
332
原创 为什么会有BigInt？
JavaScript中Number.MAX_SAFE_INTEGER表示最⼤安全数字，计算结果是9007199254740991，即在这个数范围内不会出现精度丢失（⼩数除外）。但是⼀旦超过这个范围，js就会出现计算不准确的情况，这在⼤数计算的时候不得不依靠⼀些第三⽅库进⾏解决，因此官⽅提出了BigInt来解决此问题。
2024-03-12 15:08:55
355
原创 js中有哪些数据类型，它们有什么区别？
2，引用数据类型存储在堆（heap）中的对象，占据空间大、大小不固定。2，BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。1，栈：原始数据类型（Undefined、Null、Boolean、Number、String、Symbol、BigInt）1，原始数据类型直接存储在栈（stack）中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
2024-03-12 15:06:46
481
原创 前端vue项目，引入PingFang SC字体
然后再在index.scss中引入fonts.scss文件就行了（引入的时候注意路径是否正确）然后再创建一个fonts.scss文件（引入的时候注意路径是否正确）
2024-03-07 15:32:07
320
原创 如何实现响应式布局
在网页设计中，响应式布局是一种能够使网页在不同设备上呈现出最佳效果的设计方法。无论是在台式电脑、平板还是手机等设备上，网页都能够自动调整布局和大小，以适应不同的屏幕尺寸和分辨率。
2024-01-10 17:00:17
878
原创 vue2中使用EventSource（EventSourcePolyfill）实现持续的消息推送
这里使用了activated和deactivated是因为我们的前端框架是后台管理系统，使用了keep-alive，我希望是做到进入我引入组件的页面建立sse，离开的话就关闭连接。需求：要实现一个 管理员启动、暂停、结束等一系列操作任务的时候，后端将消息通过EventSource传递给前端，前端展示出来。答：因为在和后端建立连接的时候，需要传递token用来建立身份标识，而eventSource的。没有找到相关传参的API，如果你这边不需要传递任何参数，两者用哪个都行。
2024-01-08 09:49:37
1594
原创 vue+css动画 实现文字的上下轮播切换
突然间碰到一个比较丝滑的特效，就研究了一下想把它实现出来。效果：渐隐消失，底部往上走覆盖出现。以下是完整代码，复制粘贴即可运行。
2023-11-08 10:00:06
370
原创 react+canvas实现横跨整个页面的动态的波浪线（贝塞尔曲线）
本来写这个特效 我打算用css实现的，结果是一波三折，我太难了，最终没能用css实现，转战了canvas来实现。当然这个图的波浪高度、频率、位置、速度都是可调的，请根据自己的需求调整，如果你讲波浪什么的调大一下 还有有摆动的效果哦。如果你想看vue的写法，请移步这里。
2023-11-03 10:48:47
615
原创 vue+canvas实现横跨整个页面的动态的波浪线（贝塞尔曲线）
本来写这个特效 我打算用css实现的，结果是一波三折，我太难了，最终没能用css实现，转战了canvas来实现。当然这个图的波浪高度、频率、位置、速度都是可调的，请根据自己的需求调整，如果你讲波浪什么的调大一下 还有有摆动的效果哦。如果你想看react的写法，请移步这里。
2023-11-03 10:28:59
488
原创 axios返回几种数据格式? 其中Blob返回时的size是什么意思？
2、JSON（JavaScript Object Notation）：这是最常见的数据格式，服务器可以返回JSON格式的数据，Axios会将其解析为JavaScript对象。如果返回类型是Blob的话，都会返回size这个字段的。4、Blob（Binary Large Object）：服务器可以返回二进制数据，例如图像或文件，Axios可以将其封装在Blob对象中返回。6、FormData：当使用Axios发送包含文件上传的表单数据时，服务器可能返回FormData对象，Axios会将其返回。
2023-09-05 10:52:04
2064
原创 webauthn实现PIN码和硬件的双重身份验证
如果你需要使用将下面的代码放到你自己新建的JS文件中，引入即可使用。1，使用webauthn注册和账号的绑定以及验证。（2），登录验证，步骤和注册一样，代码也是差不多。2，下面是实际代码的实现。
2022-11-25 11:06:43
396
原创 js递归过滤树形结构数据
// 需要过滤的树形结构数组var arr = [{ pId: null, positionId: '01', children:[ {pId: '01', positionId: '00012', children:[]}, {pId: '01', positionId: '00013', children:[]}, {pId: '01', positionId: '00014', children:[]}, {pId: '01', positionId: '00015', childre
2022-04-14 15:16:04
672
原创 三个选择框，当前框选过之后的数据其他两个不能选择
效果图<template> <div class="multi-distribution-head"> <c-product :selectObj="{productType:'一级难度'}" :isIncomingData="true" :productData="showTypeTree1" :defaultCheckedKeys="defaultCheckedKeys" :defaultProps
2022-03-16 17:27:15
685
原创 Vue 计算属性和侦听器的使用和对比
vue计算属性-computed目标: 一个数据, 依赖另外一些数据计算而来的结果语法一:computed: { "计算属性名" () { return "值" }}需求:需求: 求2个数的和显示到页面上<template> <div> <p>{{ num }}</p> </div></template><script>export defaul
2022-03-15 14:23:12
186
原创 vue+elementUI renderHeader函数实现表格头部hover出现图片
效果图：上代码：// 表头数据格式export const columnsList= [ { key: 'vcAcct', title: '产品代码', align: 'center', fixed: 'left', minWidth: '200', sortable: 'custom' }, { key: 'vcAcctName', title: '产品名称', align: 'center', fixed: 'left', minWidth: '120', sortable: '' },
2022-03-10 16:51:57
1127
原创 第一次将项目上传到github
首先你需要一个github账号，所有还没有的话先去注册吧！https://github.com/我们使用git需要先安装git工具，这里给出下载地址，下载后一路直接安装即可：https://git-for-windows.github.io/1.进入Github首页，点击Your repositories=>New新建一个项目2.填写相应信息后点击create repository即可Repository name: 仓库名称Description(可选): 仓库描述介绍Publi
2022-01-13 15:13:31
184
原创 js 中 try catch用法
try…catch 语句是什么？try…catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码。try…catch语法try { //在此运行代码}catch(err){ //在此处理错误}运行流程：try{...}包含块中的代码有错误，则运行catch(err){...}内的代码，否则不运行catch(err){...}内的代码。try…catch案例var array = null;try { doc
2022-01-12 13:46:26
40733
原创 vue+elementui 分页禁止用户直接点击到最后一页
做项目的时候，客户提出一个需求，就是分页不能直接点击到最后一页，如下图一，但是等一页一页的翻到最后一页的时候是有最后一页的，如下图二图一图二然后我就想到，在样式上动手脚，果然不出我所料，竟然可以。你仔细观察这个分页可以发现这里面是有唯一标识的，就是那三个点点，而且前面的三个点点和后面的三个点点的class类名不一样，这是不是就好办了，就是在点击分页操作和获取数据的时候去获取它的class类名，有的情况下就隐藏掉最后一个li标签，没有的话再给它展示出来。代码如下//定义全局变量data(){
2021-11-30 17:25:43
1568
4
原创 JS addEventListener() 方法
1，addEventListenerdocument.hidden：表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 （注意，页面被其他软件遮盖并不算隐藏，比如打开的 sublime 遮住了浏览器）。document.visibilityState：表示下面 4 个可能状态的值hidden：页面在后台标签页中或者浏览器最小化visible：页面在前台标签页中prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 trueunloade
2021-11-19 11:31:49
1030
原创 elementUI - image-viewer - 图片放大查看组件
// import引入import ElImageViewer from 'element-ui/packages/image/src/image-viewer' // 在组件内声明export default { components: { ElImageViewer }}html：<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="imgURL"></el-imag.
2021-11-18 10:09:35
587
原创 vue-countupjs的使用
基于 CountUp.js 的 Vue 组件, 简易数字动画跳动安装： npm install vue-countupjs --savemain.js： import VueCountUp from 'vue-countupjs' Vue.use(VueCountUp)html： <v-countup start-value="0" :end-value="1000"></v-countup>配置项： start-val
2021-11-18 10:05:54
1355
原创 vue中如何封装公共方法，全局使用
1.src文件夹下新建util.js文件以便存放公共方法export default { rowspan: function (data) { var index = data; // 代码 return index; }}2.main.js中,将unils里的方法注册为全局方法：import utils from '@/util/util.js' Vue.prototype.utils = utils3.任意文件中使用mounted () { var index
2021-11-18 09:47:47
2139
原创 vue开发中遇到的一些问题及解决方案
Case 1vue项目在IE中自动读取缓存中的数据，不重新发请求解决方案：// 在每个请求上增加时间戳config.url = `${config.url}?_t=${+new Date()}`
2021-11-15 14:57:34
1989
原创 JavaScript代码片段字典（三）
数字千分位分隔export const format = (n) => { let num = n.toString(); let len = num.length; if (len <= 3) { return num; } else { let temp = ''; let remainder = len % 3; if (remainder > 0) { // 不是3的整数倍
2021-11-01 14:06:00
64
原创 echarts常用配置属性大全
titletooltip: { show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏） text: '主标题',//主标题文本，'\n'指定换行 link:'',//主标题文本超链接,默认值true target: null,//指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口） subtext: '副标题',//副标题文本，'\n'指定换行 sublink: '',//副标题
2021-10-27 16:20:58
1886
原创 js自己封装万能拷贝(深/浅拷贝)方法
一、什么是深拷贝？什么是浅拷贝？浅拷贝只复制一层对象的属性，浅拷贝出来的对象如果改变了第二层或更深的数据会影响原对象。而深拷贝则递归复制了所有层级，改变任何数据都不会影响原对象二、深拷贝和浅拷贝的方法和存在的问题1.JSON.parse(JSON.stringfy())正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些能够被 json 直接表示的数据结构。jQuery的$.extend() 第三方库实现深拷贝没有处理循环引用的问题。项目中如
2021-10-14 10:38:44
215
原创 js自定义保留六位小数
如果你使用这个Math.round（），这个toFixed（），还有这个Math.pow()，保留小数位不好使，那就请看过来，使用这个就好了function roundFixed (num, fixed = 2) { let nums = num.toString().split('.') if (nums.length >= 2) { let fixedNum = nums[1] if (fixedNum.length > fixed) { let
2021-10-14 10:31:30
4599
原创 使用vue+element-ui的summary-method方法做列合计
使用vue+element-ui的summary-method方法做列合计// html代码<el-table :data="tableData1" style="width: 100%" border show-summary :summary-method="getSummaries"></el-table>// 合计列方法//合计getSummaries (param) { const { columns, data } = param
2021-09-08 09:07:26
1533
原创 element-ui的el-table表格错位问题
el-table表格错位问题使用el-table在ie浏览器出现，谷歌偶尔出现的问题，如下图this.$nextkTick(() => { this.$refs.table.doLayout() // 解决表格错位})有时候表格里面的表格可能会撑不开，挤在一起，这个时候可以试试使用样式解决/deep/ .el-table{ // ie表格撑不开问题 .el-table__header{ width:100% !important; } .el-table__body{
2021-08-25 11:17:28
1032
原创 codepen 右下角多行展开环绕效果
codepen 右下角多行展开环绕效果<div class="wrapper"> <div class="text"> <button class="btn">这是一个占位</button> 浮动元素是如何定位的 正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。 在下面的图片中
2021-07-20 09:08:46
94
原创 从零开始学习Node.js
文章目录简介Node.js是什么?Node.js可以用来做什么?技术Node.js开发环境安装第一个Node.js游戏—石头剪刀布模块 commonJS规范 npm异步与事件 非阻塞I/O Node.js异步编程文章内容Node.js是什么?Node.js 的诞生先来聊聊 Node.js 诞生的故事，了解一下它最早的定位，以及后来定位的变化。Node.js 是2009的时候由大神 Ryan Dahl 开发的。Ryan 的本职工作是用 C++ 写服务器，后来他总结出一个经验，
2021-06-22 10:08:35
272
原创 使用pdfjs实现PDF的预览效果
使用pdfjs实现PDF的预览效果核心部分是pdf.js和pdf.worker.js，一个负责API解析，一个负责核心解析实现pdf预览主要有两种方式：1、使用pdfjs已经写好的viewer.html页面。需要将pdfjs代码到服务器上，因为放到本地包有点大2、将PDF文件渲染成Canvas第一种方式：使用viewer.html,以读取文件流方式在线展示pdf文件这种方法需要从官网上将pdf.js包下载下来官网下载地址：https://mozilla.github.io/pdf.js/get
2021-06-09 15:14:03
7772
1
原创 JavaScript代码片段字典（二）
JavaScript代码片段字典（二）获取域名主机function getHost(url) { var host = "null"; if(typeof url == "undefined"|| null == url) { url = window.location.href; } var regex = /^\w+\:\/\/([^\/]*).*/; var match = url.match(
2021-05-18 13:50:59
60
原创 JavaScript代码片段字典（一）
JavaScript代码片段（一）实现字符串长度截取function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\xff]/; var strre = ""; for (var i = 0; i < str.length; i++) { if (icount < len - 1) {
2021-05-18 13:44:08
68
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人