前端
文章平均质量分 62
html,css,js
1234Wu
日常写bug
展开
-
高德地图2.0 绘制、编辑多边形覆盖物(电子围栏)
高德地图2.0 绘制、编辑多边形覆盖物(电子围栏)原创 2024-09-17 01:48:52 · 930 阅读 · 0 评论 -
高德2.0 多边形覆盖物无法选中编辑
多边形覆盖物无法选中编辑。先检查一下数据的类型得是``,里面是字符串的虽然显示没问题,但是不能选中编辑。原创 2024-09-16 22:17:06 · 289 阅读 · 0 评论 -
uni微信小程序 map 添加padding
指定可视范围的时候,只用include-points会很极限。导致marker不能完全显示。规划驾车线路的时候,使用uni的。原创 2023-11-24 14:02:59 · 3430 阅读 · 2 评论 -
前端面试-React专题
(JavaScript XML)实际上,它只是为 React.createElement() 函数提供语法糖,为我们提供了在 JavaScript 中使用类 HTML 模板语法的能力。jsx语法最终会被babel编译成为方法,createElement方法会生成虚拟的DOM节点对象,再由函数生成真实DOM,插入到对应节点中去原创 2023-05-27 21:00:33 · 2064 阅读 · 0 评论 -
词云图 - 用echarts散点图模拟
词云图-用echarts散点图模拟。原创 2022-07-29 02:38:19 · 480 阅读 · 0 评论 -
echarts graph关系图自定义线条label颜色
echarts 关系图自定义线条label颜色 自定义label颜色:通过配置edgeLabel中的rich和formattertype: 'graph',原创 2022-07-01 17:48:48 · 3954 阅读 · 0 评论 -
input输入框自动填充后默认样式修改
修改input自动填充样式原创 2022-06-01 09:48:28 · 588 阅读 · 0 评论 -
利用svg错落显示文本
错落显示文本:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用SVG错落显示文本中的每个文字</title> <style type="text/css"> text{ font-family:SimHei; /*定义字体*/ font-size:36px; /原创 2022-05-31 14:32:47 · 230 阅读 · 0 评论 -
umi Cannot find module ‘antd-mobile/es/button/style‘
用UMI创建React项目之后引入ant-mobile报错找不到样式文件说:官方给了解决方法:如果你的项目中依赖了 @umijs/preset-react (可以在 package.json 文件中看到),那么请把它升级到最新版如果你的项目中依赖了 @umijs/plugin-antd (可以在 package.json 文件中看到),那么请把它升级到最新版如果你的项目中上述两个 npm 包都没有依赖,那么可以安装最新版的 @umijs/plugin-antd-mobile 插件但是并没有原创 2022-05-03 01:29:49 · 2687 阅读 · 1 评论 -
前端处理二进制文件流,预览图片、PDF
原生js实现预览图片、PDF服务返回二进制流,用axios处理,指定blob类型,然后再转换成URL( 处理后会变成blob://... 这种格式);图片的话,作为src地址可以直接实现;预览PDF需要服务端的响应头Content-Type 为PDF类型application/pdf,不指定这种类型会直接下载,不能预览;实例:axios指定responseType为blob类型接收响应:axios.get('url',{ params:{ key:this.key },原创 2022-04-13 23:38:48 · 23212 阅读 · 2 评论 -
ES2020 实用新特性
ES2020 新特性1. ?? 判断运算符??与 || 类似,但是更严格。用来判断运算符左侧是否为null或undefined时,才会返回右侧的值。适用场景:'' ?? 1 // '''' || 1 // 10 ?? 1 // 00 || 1 // 1null ?? 1 // 1undefined ?? 1 // 12. ?.链式判断运算符?.判断左侧对象是否为null或undefined。如果是则返回null或undefined;否则,返回右侧的值适用场景:简化 &am原创 2022-04-12 01:48:45 · 2325 阅读 · 0 评论 -
web页面--前端明水印
采用canvas绘制图片,observe监听页面元素改变重新添加。<template> <div id="water_mater" ref="Watermakr"></div></template><script>export default { data() { return {} }, methods: { createWaterMark() { const { loginIp = '',原创 2022-04-07 00:41:11 · 566 阅读 · 0 评论 -
VS Code Pettier设置换行最大宽度
.prettierrc 文件这里修改的都是与默认值不同的,没有修改到的就是启用默认值.prettierrc 文件是使用 json 格式,如果报错了,该配置文件在编辑器里面是不会生效的{ "bracketSpacing": true, "printWidth": 120, "semi": false, "singleQuote": true}如图:...原创 2022-03-23 17:28:48 · 2343 阅读 · 0 评论 -
前端面试题_2022-02
目录一、JS部分:1.原型链2.闭包3.手写Promise4.数据类型判断5.Map和Set6.垃圾回收机制7.安全随机数8.贪心算法9.js循环10.数组新方法二、HTML部分三、Css部分1.垂直居中2.弹性布局3.grid布局四、浏览器部分五、Vue部分1.$nextTick2.$set3.取消请求4.vue3.0新特性5.vue新指令一、JS部分:1.原型链2.闭包3.手写Promise4.数据类型判断typeof:返回7种数据类型:number,str原创 2022-02-16 03:15:28 · 4183 阅读 · 1 评论 -
js扁平数据结构转Tree
js扁平数据结构转Tree无意间看到的一道题,实际业务有这种场景,就打开看了看,不过我们这种数据都是中台在处理,然后返回给前台的。let arr = [ { id: 1, name: "部门1", pid: 0 }, { id: 2, name: "部门2", pid: 1 }, { id: 3, name: "部门3", pid: 1 }, { id: 4, name: "部门4", pid: 3 }, { id: 5, name: "部门5原创 2022-02-13 03:03:39 · 494 阅读 · 0 评论 -
ES6数组新方法
ES6数组新方法目录ES6数组新方法1. `forEach()`和`map()`2. `filter()`3. `reduce()`4. `some()`5. `every()`6. `Array.from()`7. `Array.of()`8. `copyWithin()`9. ` find() `和 `findIndex()`10. `fill()`11. `entries()`,`keys() `和 `values()`12. `includes()`13. `flat()`,`flatMap()`原创 2022-02-06 21:16:22 · 2544 阅读 · 1 评论 -
React 生命周期
React 生命周期1、生命周期图react生命周期函数挂载、卸载只会执行一次,更新会执行多次。2、生命周期的三个阶段1)挂载时(创建)执行时机:组件创建时(页面加载时)执行顺序:Constructor() --> render() --> componentDidMount()钩子函数触发时机作用constructor ()创建组件时1,初始化state; 2.为事件处理程序绑定thisrender ()每次组件渲染都会触发渲染UI(原创 2022-01-30 23:36:26 · 1633 阅读 · 0 评论 -
React-context
Context 通过组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。在一个典型的 React 应用中,数据是通过 props 属性由上向下(由父及子)的进行传递的,但这对于某些类型的属性而言是极其繁琐的(例如:地区偏好,UI主题),这是应用程序中许多组件都所需要的。 Context 提供了一种在组件之间共享此类值的方式,而不必通过组件树的每个层级显式地传递 props 。原创 2022-01-11 02:35:28 · 85 阅读 · 0 评论 -
React组件通信--props
React组件通信1、props接收数据ReactDOM.render( <App name='传递数据' age={19} color={[1,2,3]} fn={()=>{console.log('函数')}} tag={<p>段落</p>} />,document.getElementById("root"));函数组件:propsfunction App(props) { function myClick(e)原创 2021-12-30 00:01:29 · 799 阅读 · 0 评论 -
React组件基础
React组件1.创建组件1)使用函数创建组件函数名必须大写、开头必须有返回值、使用函数名作为标签名let MyComponent = () => { return <div>myComponent</div>;};ReactDOM.render(<MyComponent />, document.getElementById("root"));在这里插入代码片2)使用Class创建组件大写字母开头、类组件要继承React.Componen原创 2021-12-01 23:32:28 · 98 阅读 · 0 评论 -
React
React1.安装npm i react react-dom2.React的使用1)引入react和react-dom两个js文件<script src="./node_modules/react/umd/react.development.js"></script><script src="./node_modules/react-dom/umd/react-dom.development.js"></script>2)创建React元素原创 2021-11-16 02:12:49 · 480 阅读 · 0 评论 -
前端常见知识点三之HTML
前端常见知识点三之HTML1.HTML5 drag apidragstart:事件主体是被拖放元素,在开始拖元素时触发darg:事件是被拖放元素,在正在拖放时触发dragenter:事件主体是目标元素,在进入某元素时触发dragover:事件主体是目标元素,在某元素内移动时触发dragleave:事件主体是目标元素,在移出目标元素时触发drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发dragend:事件主体是被拖放元素,在整个拖放操作结束时触发2.对HTML语义化标签的原创 2021-07-11 22:44:39 · 154 阅读 · 0 评论 -
前端常见知识点五之Fetch
前端常见知识点五之Fetchfetch发送2次请求的原因fetch发送post请求的时候,总是发送2次。第一次状态码是204,第二次才成功;因为在用fatch的post请求的时候,导致fetch第一次发送了一个Options请求,询问服务器是否支持修改的请求头,如果服务器支持,则在第二次中发送真正的请求。参考文章:Fetch API 教程...原创 2021-07-11 22:11:38 · 463 阅读 · 0 评论 -
前端常见知识点四之webscoket
前端常见知识四之webscoket1. 概览1)WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。2. 其他特点包括:(1)建立在 TCP 协议之上,服务器端的实现比较容易。(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服原创 2021-07-11 03:03:37 · 680 阅读 · 2 评论 -
前端常见知识点二之浏览器
前端常见知识点之浏览器1.web Quality(无障碍)能够被残障人士使用的网站称得上一个易用的(易访问的)网站使用alt属性:<img src='xxx.jpg' alt='this is a xxx'/>有时候浏览器无法显示图像,alt会发挥它的作用:用户关闭了图像显示不支持显示图形的迷你浏览器浏览器是语音浏览器(供盲人和弱势群体使用)如果您使用了alt属性,那么浏览器至少可以显示或读出有关图像的描述。2.几个实用的BOM对象方法BOlocation–浏览器对象原创 2021-07-04 01:47:24 · 729 阅读 · 0 评论 -
前端常见知识点一之HTTP
1.http和https基本概念http: 超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器请求和应答的标准(tcp),用于从WWW服务器传输超文本到浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。https: 是以安全为目标的http通道,简单的讲是http的安全版,即http下加入ssl层,http的安全基础是ssl,因此加密的详细内容就需要ssl。https协议的主要作用是:建立一个信息安全通道,来确保数组的传输,确保网站的真实性原创 2021-06-30 02:44:38 · 639 阅读 · 0 评论 -
echarts 堆叠树状图排序
echart 堆叠树状图。没有相关的配置API,要自己先把数据排好,再传到数据配置中。。。它的配置项:option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: {原创 2020-11-22 05:05:27 · 2580 阅读 · 2 评论 -
vue 环形进度条封装
<template> <div> <svg :viewBox="`0 0 ${2 * radius + srtokeWidth} ${radius + srtokeWidth}`"> <defs> <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" :stop-color="原创 2020-09-03 17:27:54 · 255 阅读 · 0 评论 -
git本地回滚代码
回退命令:回退到上个版本:$ git reset --hard HEAD^回退到前3次提交之前,以此类推,回退到n次提交之前:$ git reset --hard HEAD~3退到/进到 指定commit的sha码:$ git reset --hard commit_id强推到远程:$ git push origin HEAD --force...原创 2020-08-14 10:56:01 · 1183 阅读 · 0 评论 -
修改Git提交者昵称和邮箱
// 设置全局git config --global user.name "Author Name"git config --global user.email "Author Email"原创 2020-07-30 16:39:55 · 466 阅读 · 0 评论 -
2020前端面试总结
一、前端安全问题1.xss攻击(跨站脚本攻击)2.csrf攻击(跨站请求伪造)3.点击攻击(内嵌ifame)二、防抖节流防抖:在第一次触发事件时,不立即执行函数,而是给出一个期限值比如200ms。(比如滚动监听,一直按方向键就一直会触发)节流:即使用户不断拖动滚动条,也能在某个时间间隔之后给出反馈。让函数执行一次后,在某个时间段内暂时失效,过了这段时间后再重新激活三、作弊检测监听VisibilityChange事件,当页面不可见的时候就会documnet.visibilitystate原创 2020-07-17 16:10:40 · 379 阅读 · 0 评论 -
CSS3自定义滚动条样式
效果图:HTML:<div class="box"> <div class="transcrided_text"></div></div>CSS:.transcrided_text { margin: 0 0.5rem; font-size: 0.14rem; padding-bottom: 0.2rem; height: 1.62rem; overflow-y: scroll;}/*主要部分 -- 自定义样式*原创 2020-06-28 17:02:31 · 235 阅读 · 0 评论 -
Js之类型转换
最近在看冴羽的博客,发现东西太多,也难记。所以还是决定照着过一遍,加深印象,也便于以后查阅。原文请看:冴羽的博客;接下来进入正题,先是基本类型之间的转换:js数据类型可以分为两类:可变的引用类型: object(array ,function,正则);不可变的原始类型: null, undefined, number, string, boolean, symbol(es6)一、原始类型的转换1.1 原始值转布尔转换成布尔类型,在 JavaScript 中,只有 6 种值可以被转换成 fal转载 2020-06-24 18:34:07 · 268 阅读 · 0 评论 -
es6 Map、Set和Array.from()
使用Map、Set、Array.from都需要支持es6的浏览器才能使用。一、Map:1.Map是一组键值对的结构,具有极快的查找速度。2.格式类似于一个二维数组。var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);m.get('Michael'); // 95var m = new Map(); // 空Mapm.set('Adam', 67); // 添加新的key-valuem.set('Bob', 59);原创 2020-06-17 15:46:17 · 420 阅读 · 0 评论 -
向当前url添加参数
//向当前url添加参数,没有历史记录 window.history.replaceState({ path: newurl }, '', newurl); function updateQueryStringParameter(uri, key, value) { if (!value) { return uri; } var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");.原创 2020-06-08 20:55:59 · 1277 阅读 · 0 评论 -
IE浏览器error:Promise未定义
原因:ie对es6的支持很糟.不认识Promise、箭头函数等等。。解决方法:安装babel-polyfill插件yarn add babel-polyfillnpm install --save babel-polyfill引入://在common.js(全局公共js)中引入即可import "babel-polyfill"如果不行,这些也装一下:babel-loader、babel-core、babel-preset-env同时:var path = require('pat原创 2020-05-12 17:08:00 · 993 阅读 · 0 评论 -
NodeJS(express)连接、封装操作MySQL
NodeJS Express连接、封装操作MySQL原创 2020-05-11 11:04:37 · 4733 阅读 · 1 评论 -
qrcodejs2--Vue生成二维码组件封装
1.安装qrcodejs2:npm install qrcodejs2 --saveyarn add qrcodejs22.初步封装组件:/** * @file 生成二维码的组件 * @author Walker * @date 2020-03-16 */<template> <div class="emqrcode"> <but...原创 2020-03-19 09:53:00 · 10130 阅读 · 1 评论 -
TS对象类型 -- 接口(interface)
/** * 对象类型 -- 接口 *///在面向对象的语言中,接口(interfaces)是对行为的抽象,而具体如何行动需要类(class)去实现//在Ts中的接口是非常灵活的概念,除了对行为抽象之外,他还对形状进行了描述//1.interface Person { name: string; age: number;}//变量使用接口时,形状必须和接口相同,或多或少、类型...原创 2020-03-14 19:48:46 · 4677 阅读 · 0 评论 -
视频九宫格布局
没有什么特别的,就是用了一下弹性布局.video-bk { width: 100%; height: 80%; background: #fff; /* 使用弹性布局 flex */ display: -webkit-flex; /* Safari */ display: flex; flex-direction: row; flex-wrap: wrap; ...原创 2020-03-13 19:48:35 · 505 阅读 · 0 评论