自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(41)
  • 收藏
  • 关注

原创 几个监听dom的api你都知道吗?

【代码】几个监听dom的api你都知道吗?

2024-03-05 17:11:11 342

原创 vue实现@唤起列表功能(借助ElAutocomplete)

【代码】vue实现@唤起列表功能(借助ElAutocomplete)

2023-07-25 11:05:25 358

原创 Web Animations API动画实现方案

Web Animations API是一种更低级的动画编程方法,它允许你以JavaScript代码的方式来控制动画的各个属性

2023-07-05 09:24:18 254

原创 自定义指令实现按钮加密

自定义指令(v-password)实现按钮加密

2023-06-27 13:54:22 332

原创 前端实现报表批量导出(html-to-image+jspdf)

在vue应用中通过vue-print-nb实现单个文件打印,通过html-to-image+jspdf实现页面批量下载

2023-06-25 14:34:26 1037

原创 chatGPT应用之用js方法将总数按比例分配

然后使用一个循环来遍历比例数组,计算出每个比例对应的分配值,并将这些值存储在一个数组。接下来,我们计算总数与所有分配值之间的差值,将这个差值按照轮询的方式加到。函数来确保分配的值是整数,并避免了由于除法带来的小数误差。这个函数的关键在于按比例计算每个值的过程,我们使用了。在函数内部,我们先计算比例数组中所有元素的总和。数组中的每个元素中,直到差值为 0。这个函数接收两个参数:总数。最后,我们返回分配值数组。

2023-04-19 10:30:27 233 1

原创 Nuxtjs3踩坑记录Cannot start nuxt: The “name“ argument must be specified

Cannot start nuxt: The "name" argument must be specified

2023-03-16 09:55:15 431

原创 new URL()在生产环境会出现的一种问题

new URL()再生产环境的异常情况

2022-10-18 15:50:22 2226

原创 前端数据字典下拉选项框封装

需求:后端给定一个数据字典的请求接口,前端根据后台返回的 去请求select下拉框的option数据。

2022-07-12 16:17:46 1016

原创 Vue received a Component which was made a reactive object.

报错原因:vue接收到一个组件,该组件是一个响应式对象。这可能会导致不必要的性能开销,应该通过使用’ ‘或使用’ ‘而不是’ '来避免。解决办法:使用或者’ '将组件设置为非响应式

2022-06-16 16:34:46 2948

原创 from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for ...

跨源资源请求问题解决方案问题描述:当我们在vsCode中使用 open in brower插件打开html文件文件时,就会报错 xxx已被CORS策略阻止,引入的资源还会失效。解决办法1 :Live Server插件在vsCode的插件市场中搜索并安装Live Server插件:安装好后,右键要打开的文件,就会出现“Open with Live Serve”选项,这样打开文件就不会报错了:解决办法2:anywhere在vsCode控制台或者cmd中安装npm install anywhe

2022-05-27 09:33:15 17412 5

原创 前端开发工具

前端开发工具有一个想入行前端的小伙伴叫我帮他整理一份前端开发的工具和资料,我就根据自己平时常用的工具整理了一份1.代码编辑器:vsCode下载地址:https://code.visualstudio.com/Download常用插件:Debugger for Chrome chrome 调试工具Auto Close Tag 自动闭合html标签Auto Rename Tag

2022-05-06 10:49:26 330

原创 查找dom,使其滚动到视野范围内

解决办法:使节点滚动到视野范围内的apielement.scrollIntoView()问题场景:在一颗树上检索字符,并定位到字符所在位置。解决思路:给遍历树,给包含检索字符的节点添加一个类class,再使用querySeletor()找到包含这类的节点,最后使用scrollIntoView()使其滚动到可视区域。var search=this.$el.querySelector('.search').scrollIntoView()...

2022-04-19 20:46:22 390

原创 el-input-number无法实时监听输入事件?我的解决办法

el-input-number无法实时监听输入事件?我的解决办法一般来说el-input-number的@change方法只会在blur的时候触发,那如何实时监听输入数字的变化呢?步骤一:将@change替换成@input.native <el-input-number :ref="'ref' + $index" v-model="row.energy" @input.native="handleInput(row, $index)" :precision="3"

2022-03-22 10:40:32 6009

原创 export2excel.js导出excel 多级表头

export2excel.js导出excel 多级表头所需依赖包npm install -S file-savernpm install -S xlsxnpm install -D script-loaderExport2Excel.js/* eslint-disable */require('script-loader!file-saver');// require('script-loader!@/Excel/Blob');require('./Blob');require('sc

2022-01-19 17:02:37 1902

原创 删除数组指定元素

Array.prototype.indexOf = function (val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1; }; Array.prototype.remove = function (val) { var index = this.indexOf(val); if (index > -1) ..

2021-11-16 15:17:27 595

原创 判断点是否在多边形内

function isPointInPolygon (point, polygon) { var pts = polygon;//获取多边形点//下述代码来源:http://paulbourke.net/geometry/insidepoly/,进行了部分修改//基本思想是利用射线法,计算射线与多边形各边的交点,如果是偶数,则点在多边形外,否则//在多边形内。还会考虑一些特殊情况,如点在多边形顶点上,点在多边形边上等特殊情况。var N = pts.length;var b

2021-11-02 15:46:51 377

原创 echarts如何显示一个省的部分市

echarts如何显示一个省的部分市例:我想显示内蒙古地区的部分市、盟,只显示蒙东地区。文章目录echarts如何显示一个省的部分市1.到[地图选择器](http://datav.aliyun.com/tools/atlas/index.html)下载内蒙古自治区的地图json2.打开这个json文件删除不需要地区信息3.在main.js(*或者其他地方但是一定要引入*)中注册地图信息。4.在页面上使用5.效果展示1.到地图选择器下载内蒙古自治区的地图json2.打开这个json文件删除不需要地区

2021-10-18 11:04:04 1149 1

原创 base64编解码

base64编解码var Base64 = { _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", encode: function(e) { var t = ""; var n, r, i, s, o, u, a; var f = 0; e = Base64._utf8_encode(e); while (f < e.length) { n = e.charCode

2021-09-15 16:42:54 282

原创 响应式组件

Vue received a Component which was made a reactive objectvue接收到了一个响应式的对象组件解决思路:避免组件成为一个响应式的对象组件原来的代码:<script>import mychild from '../slot/child.vue'export default { components:{mychild}, data() { return { //在data重声明插槽,会被动态绑定 &l

2021-09-15 16:40:23 378

原创 echarts v5去除内置的geoJSON

echarts v5去除内置的geoJSONecharts 高版本中去除了内置的map.json

2021-09-15 16:36:48 252

原创 vite打包报错:块的大小超过限制,Some chunks are larger than 500kb after minification

vite打包报错:块的大小超过限制,Some chunks are larger than 500kb after minification解决办法1:加大限制的大小将500kb改成1000kb或者更大chunkSizeWarningLimit:1500,build.chunkSizeWarningLimit类型: number默认: 500块大小警告的限制(以 kbs 为单位)。解决办法2:分解块,将大块分解成更小的块rollupOptions: { o.

2021-07-22 10:57:53 17187 6

原创 前端动画的几种实现方式

前端动画的几种实现方式vue自带过渡动画Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡vue+animate.css简单动画+过度动画实现方式:安装或者下载animatenpmnpm install animate.css --saveyarnyarn add animate.cssCDN<head> <link rel="stylesheet" href="https://cdn

2021-07-06 14:48:52 351 2

原创 VUE.js 部署Element-UI图标不显示问题。

VUE.js 部署Element-UI图标不显示问题。问题描述:vue项目打包后,element-ui自带的图标不显示如下图解决办法:1.进入build/utils.js2.在此处添加 “publicPath: '…/…/” publicPath: '../../'

2021-05-17 09:12:46 573 2

原创 Catch all routes (“*“) must now be defined using a param with a custom regexp

vue3报错 Catch all routes ("*") must now be defined using a param with a custom regexpvue3对404配置进行了修改,必须要使用正则匹配原因:Vue Router不再使用path-to-regexp,而是实现了自己的解析系统,该系统允许路由排名并启用动态路由。由于我们通常会在每个项目中添加一条单独的包罗万象的路线,因此支持的特殊语法没有太大的好处。参数的编码是跨路线编码,无一例外使事情更容易预测。...

2021-05-13 11:13:42 10331 3

原创 vue插件注册和使用

vue插件注册新建文件 directive.js//获取节点let findEle = (parent, type) => { return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)}//触发器const trigger = (el, type) => { const e = document.createEvent('HTMLEvents') e.initEv

2021-05-06 09:02:29 347 3

原创 blob流导出类型

blob流导出const blob = new Blob([content], { type: 'application/octet-stream' })文件后缀MIME Type.docapplication/msword.docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.document.xlsapplication/vnd.ms-excel.xlsxapplication/vnd.open

2021-04-30 15:00:58 567 2

原创 VUE预览后端传来的二进制图片

VUE预览后端传来的二进制图片1.新建一个对话框,用来显示图片<el-dialog title="" :visible.sync="imgdialog" width="70%"> <img :src="src" alt=""/></el-dialog>2.下载方法,可以将request替换成axiosdownload(row) { this.$request({ url: baseUrl + '/file/download',

2021-02-04 19:51:39 2952 3

原创 vue二进制图片文件流下载

vue二进制图片/文件流下载问题:后台返回二进制文件,直接控制台打印时乱码的。解决方式:download(params) { this.$request({ url: baseUrl + '/fbsfd_nw_transaction/base/download', method: 'post', data:params , responseType: 'arraybuffer' }).then(res =>

2021-02-04 19:38:57 1045 3

原创 Vue环境变量和模式

Vue环境变量和模式环境变量的作用:开发和测试时调用后台接口的地址是和生产环境中不一样的,有些时候需要跳转到其他网页,也需要测试和生产环境跳转不同的页面。这些配置如果都用人工来维护,上测试环境注释掉生产的代码,上生产环境注释掉测试的代码,会很麻烦也很容易出错。这些配置如果都用人工来维护,上测试环境注释掉生产的代码,上生产环境注释掉测试的代码,会很麻烦也很容易出错。所以有必要在一个入口进行控制,这就要用到vue框架中的环境变量和模式。参考官方: https://cli.vuejs.org/zh/gu

2021-01-28 19:01:34 427 2

原创 vue-amap高德地图demo

vue-amap高德地图demo---------vue-amap是一套基于Vue 2.0和高德地图的地图组件。---------官方文档:https://elemefe.github.io/vue-amap1. vue-amap安装 npm安装 npm install vue-amap --save2. vue-amap引入在main.js中引入。建议单独写一个vue-amap.js,再将vue-amap.js引入main.jsimport VueAMap from 'vue-

2020-11-04 11:13:09 1150

原创 vuex状态管理初学demo,一看就会

vuex状态管理初学,一看就会1. vuex安装: npm install vuex --save2. 新建store.jsstore.js中代码如下import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ //state理解为管理状态的容器,变量在这里面声明,像vue页面的data() state: { count:0 },methods

2020-10-27 20:38:17 156

原创 vue中echart数据动态切换,一看就懂

vue中echart数据动态切换话不多说上效果图如果觉得是你想要的效果就继续往下看吧。话不多说直接上源码:<template> <div> <!--这里的作用是造几个用来点击的按钮来触发数据刷新 --> <div id="list" style="width: 20px;height: 200px;"> <ul v-for="item in 3" :key="item" @click="changedata(item)"&g

2020-09-08 11:24:32 2637 3

原创 vue页面滚动到指定位置

vue页面滚动到指定位置一看就懂话不多说,直接上代码HTML部分 <div> <button @click="jump()">跳转</button> </div> <div id="map" style="width: 500px;height: 500px;"> this is map div </div> <div id="box" style="width: 500

2020-09-08 10:43:36 3947 6

原创 在vue中添加echarts

在vue中添加echarts首先安装echarts到你的vue项目 npm install echarts -s在main.js中引用echartimport echarts from 'echarts';Vue.use(echarts);新建一个vue文件,并创建一个dom<template>//创建一个dom <div id="main" style="width:100%;height:500px;"></div></t

2020-08-12 21:10:58 1303

原创 Git使用入门

Git使用入门一、什么是GitGit 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。Git 与常用的版本控制工具 CVS, Subversion等不同,它采用了分布式版本库的方式,不必服务器端软件支持。Git与SVN的区别二、git下载官网:https://git-scm.com/ 通常来讲官网的下载速度慢的可怕。我推荐下面这个下载地址????淘

2020-07-31 13:39:20 270

原创 HTTP协议重点

HTTP协议HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准。HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)。一、HTTP报文什么是HTTP报文:HTTP报文是HTTP协议在客户端和服务端之间传送的数据块。HTTP报文由哪些部分组成?一个HTTP请求报文由请求行(request line)、请求头部(header)、空行和请求数

2020-07-28 22:15:36 294

原创 Less和Sass的区别

Less和Sass的区别Less和Sass都属于CSS预处理器,那什么是 CSS 预处理器呢?CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行CSS的编码工作。一、Less和Sass分别是什么:Less(Leaner Style Sheets) :是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可

2020-07-27 12:17:24 291

原创 计算机网络知识散点

OSI七层协议:应用层表示层会话层运输层网络层数据链路层TCP/IP四层协议:应用层运输层网际IP网络接口层五层体系结构:应用层运输层数据链路层网络层物理层香农公式:C=Wlog2(1+S/N)W:信道宽度S/N:信噪比信道复用频分复用时分复用统计时分复用CMSA/CD协议码分复用码分多址CDMA冗余码数据M被除数:2^n M(在数据后面加n个0)除数P:n+1位余数R:n位M+余数模2运算1111+1010=0101生成多项式:x^

2020-05-30 20:06:33 279

原创 防碰撞算法

防碰撞算法思维导图

2020-05-30 12:45:54 2660

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除