![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
大前端
文章平均质量分 57
前端知识合集,杂七杂八的,大杂烩
潜心专研的小张同学
个人前端网站:zhangqiang.hk.cn;欢迎加入前端学习交流群:706947563 ;专注前端开发,共同学习进步
展开
-
vscode代码片段自动转图标禁用(el-tag代码自动转成了图标问题排查)
今天在写代码时,一时觉得代码里面有一些图标,光标移到那里代码又显示处理了,这样会使那行代码忽长忽短,看起来很变扭,着实难受。原创 2024-06-25 15:45:55 · 127 阅读 · 0 评论 -
vue3+element plus upload组件回显图片base64的实现
最近遇到个需求,需要基于vue3+element plus的upload组件回显图片,通常我们是通过后端直接返回的url来回显就行了,而且在element plus也给出了示例:不过,o_O,我们下面将要以base64的形式来填充,其实也很简单,自己构造一个这样的对象就行了,url里面放我们base64字符串,然后其他的造成即可,下面请看我的实现样例:将图片列表渲染到组件里重点就是替换上面fileList就可。ok啦。原创 2024-01-26 17:36:14 · 1010 阅读 · 0 评论 -
npm、pnpm、yarn之间的区别
然后有一点,最好不要混用,不然会有未知的错误,至少我在单一的情况只用一种来管理还是没有遇到啥错误的。它是一个成熟、广泛使用的工具,有着大量的开源包。平时在项目开发中,经常用到npm、pnpm、yarn这些来安装包,但是它们之间到底有什么区别呢,一直没太搞明白。我只知道他们都是可以从npm官网上下载包,安装完包咱们就可以写代码了,其他的不觉明历,所以认为需要总结下。是一种较新的包管理工具,旨在解决npm中的依赖项重复安装的问题。是由Facebook提供的包管理工具,旨在提高性能和安全性。原创 2023-12-01 15:21:07 · 299 阅读 · 0 评论 -
一篇关于前端开发中字符串与数字常用方法的总结
最近在写代码时,使用js方法处理字符串与数字,遇到了一些bug或者是在es6方法使用上耽误了过多的调试时间,在此记录一下,加深一下印象。原创 2023-09-04 14:32:09 · 125 阅读 · 0 评论 -
浏览器自带api语音播报speechSynthesis.speak()无法自动播报问题分析及非完美解决方案
这里主要说说语音播报的部分。本来觉得用浏览器自带的API来实现直接写一句话就ok了,但是没想到居然有一个bug。那就是这条语音有时候能播报,有时候就没有声音了?最近遇到一个需求,就是前端页面要实时监听后端传过来的数据,同时当后端传过来这条数据时前端界面要语音播报这条数据。* @param msg 播报的信息。* @param msg 播报的信息。//#region 语音播报封装。// 初次播报使用模拟按钮触发。'哈哈哈哈哈,这是声音~'// 添加点击事件处理程序。// 模拟用户点击事件。原创 2023-07-04 23:16:35 · 4794 阅读 · 7 评论 -
如何使用前端css代码去掉百度地图左下角的图标
如何使用前端css代码去掉百度地图左下角的图标写在前面:本文为百度地图开发系列文章之一,前期回顾:webGIS,基于百度地图的HelloWord实现如何使用前端css代码去掉百度地图左下角的图标(本篇就是)以上对应视频教程(博客与视频前面的序号是一一对应的):百度地图开发从零开始00初始化地图创建helloWorld百度地图开发从零开始01去地图左下角图标个人前端博客网站:zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群::706947563,专注前端原创 2022-05-10 20:41:33 · 1530 阅读 · 0 评论 -
前端css单位小结:vh、vw、百分比、rem、px、计算属性calc
写在前面:本文作为本人学习总结之用,同时分享给大家~个人前端博客网站:zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步!前端css单位小结:vh、vw、百分比、rem、px、计算属性calc1 vh视口的高度,也就是眼睛可以看到屏幕的高度,如果你的屏幕分辩率为1920*1080,那么视口的高度就是1080px,vh可用于写自适应。一般给css div 的 height赋值用。2 vw与vh相对的,视口的宽度,同理,如果.原创 2022-05-10 20:40:32 · 2390 阅读 · 0 评论 -
React Hooks之EChars的基础使用
写在前面:本文作为本人学习总结之用,同时分享给大家~个人前端博客网站:zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步!本文将使用的技术栈为:React HooksEcharsreact 官网:https://zh-hans.reactjs.org/docs/hooks-state.html#gatsby-focus-wrapperEChars官网:https://echarts.apache.org/zh/tu.原创 2022-05-09 12:28:51 · 815 阅读 · 0 评论 -
前端如何高效写页面 | 实战小结阶段一
写在前面:本文作为本人学习总结之用,同时分享给大家~个人前端博客网站:zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步!最近公司在做一个新的项目,与之前大部分都是用ant design组件化开发相比,需要手动画页面的地方较多(这里的手动指的是用div+css布局自己画前端页面,或者自定义antd的样式),花费了老多的时间。所以特地在本阶段做一个小结,来记录如何可以更高效的写前端页面。在目前阶段看来,写一个完整的前端页面.原创 2022-05-09 12:26:51 · 1565 阅读 · 2 评论 -
基于百度地图api获取某一点的详细信息 逆向解析地址 - 后续
写在前面:本文作为本人学习总结之用,同时分享给大家~个人前端博客网站:zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步!基于百度地图api获取某一点的详细信息 逆向解析地址 - 后续经过今天的不断努力终于获取到了地图位置坐标的逆向解析地址!直接把下面这个链接赋值到浏览器就可以得到返回值https://api.map.baidu.com/reverse_geocoding/v3/?ak=GXn1gkhgbbWet55NCy.原创 2022-05-09 12:26:06 · 1930 阅读 · 0 评论 -
基于百度地图api获取某一点的详细信息 逆向解析地址
写在前面:本文作为本人学习总结之用,同时分享给大家~个人前端博客网站:zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步!基于百度地图api获取某一点的详细信息 逆向解析地址首先上图,就是我们想要实现的效果:本章您将能学到:使用百度地图api动态获取到地图上某一点的中文地址详细信息与对应的坐标轴信息。开发所用到的语言:Html、Css、Javascript。 本篇将直接拷贝在Html文件里面,直接打开即可运行。参考:全.原创 2022-05-09 12:25:11 · 841 阅读 · 0 评论 -
前端项目启动 npm 安装 之 常见错误 意外解决了 一直报 esbuild 的问题,使程序正常运行
写在前面:本文作为本人学习总结之用,同时分享给大家~个人前端博客网站:zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步!通常要运行一个前端项目操作流程为:npm install (用于安装库,可以理解为初试化用的)npm start (启动项目)1、 上面这两个为我们理想话的安装,实际上会遇到各种意想不到的bug,比如网络原因,这个时候我们要切换npm 的安装源:参考:npm切换默认源 https://www..原创 2022-05-09 12:23:45 · 11978 阅读 · 1 评论 -
昨天,我写了个上千级的bug
写在前面:本文作为本人学习总结之用,同时分享给大家~个人前端博客网站:zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步!话不多说,如封面图。就是这个错误,一直不断地往上飙升,甚至涨到了好几千个bug。今天特地把它记录一下。在这个上千级的bug中,使用的技术栈是react,实现的功能为百度地图的渲染。但是, bug的主要原因不在上面。 是css的一个基础,继承高度,首先我给子组件一个100%的高度,给了父组件一个定高,但.原创 2022-05-09 12:22:47 · 132 阅读 · 0 评论 -
前端开发之mock.js使用——前后端分离,生成随机数据
写在前面:本文作为本人学习总结之用,同时分享给大家~个人前端博客网站:zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步!前言本篇目标在于先简单了解mock.js,然后可以简单使用,运行出第一个Mock.js的“HelloWorld”。一、Mock.js是什么?官网: http://mockjs.com/官方简介:Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下.原创 2022-05-09 12:20:44 · 496 阅读 · 0 评论 -
使用react修改ant design默认样式|自定义
写在前面:本文作为本人学习总结之用,同时分享给大家~个人前端博客网站:zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步!本章将通过从修改ant design 的 Input 组件默认样式着手,讲解如何自定义自己的样式,以达到举一反三,可以修改任意ant design的组件样式!1 自定义样式效果图预览没在身边,后期补。2 方法1 直接用内联样式修改直接用在标签里面写style={{…}},括号里面写上我们想要的样.原创 2022-05-09 12:19:43 · 3335 阅读 · 0 评论 -
ES6 常用语法小结 | 实战开发后复盘
写在前面:本文作为本人学习总结之用,同时分享给大家~个人前端博客网站:zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步!let & constlet与const都是块级作用域,推荐使用let和const,而不是var;不同点:let是定义的变量可以重新赋值,const定义的变量不可以重新赋值,所以一般我们定义的变量值为固定的时使用const。let arr = [];const today = 'Frid.原创 2022-05-09 12:18:07 · 85 阅读 · 0 评论 -
使用百度地图绘制点、线、面 | Javascript
写在前面:本文为百度地图开发系列文章之一,前期回顾:webGIS,基于百度地图的HelloWord实现如何使用前端css代码去掉百度地图左下角的图标使用百度地图绘制点、线、面 | Javascript(本篇讲解)百度地图开发系列之个性化地图使用的2种方法以上对应视频教程(博客与视频前面的序号是一一对应的):百度地图开发从零开始00初始化地图创建helloWorld百度地图开发从零开始01去地图左下角图标个人前端网站:zhangqiang.hk.cn欢迎加入博主的前端原创 2022-05-09 12:16:00 · 4787 阅读 · 2 评论 -
webGIS,基于百度地图的HelloWord实现
写在前面:本文作为本人学习总结之用,同时分享给大家~个人前端博客网站:zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步!本篇github源码地址: https://github.com/front-end-study-GoGoGo/webGIS-basic-BMapGL1 先上运行效果图2 介绍随着前端技术的不断发展,WebGIS普及度也越来越广,本篇将主要讲解基于百度地图JavaScript API GL v1.0.原创 2022-05-08 16:40:27 · 902 阅读 · 0 评论 -
结合moment时间插件自己封装一个获取【上周、上月、上季度、上年】时间段函数
(https://juejin.cn/post/6987962113788493831)写在前面:本文作为本人学习总结之用,同时分享给大家~个人前端博客网站:zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步!在日常开发中,获取时间的需求是必不可少的,可以说是经常出现,这不,近段时间接触了几个项目里面就有好几处出现了时间获取的需求。下面本文将以react+antd为技术栈,时间插件主要采用moment插件二次封装,展现一个封原创 2022-05-08 16:39:12 · 712 阅读 · 0 评论 -
一个初级前端结合css、div谈一谈屏幕尺寸、分辨率、缩放(显示文本、应用等项目的大小)概念
写在前面:本文作为本人学习总结之用,同时分享给大家,如果觉得这些内容有对你也有用的话,就请点个赞吧~ 谢谢~因为个人技术有限,如果有发现错误或存在疑问之处,欢迎指出或指点!不胜感谢!个人前端博客网站:https://zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群:706947563(点击即可直接进,来自qq官方的快捷代码),专注前端开发,共同学习进步!本章你将能学到:结合css、div布局对屏幕尺寸、分辨率、缩放有更深一层的理解。这几个小知识点,也许我们在日常中,经常原创 2022-05-08 16:38:20 · 680 阅读 · 0 评论 -
前端开发之mock.js使用——前后端分离,生成随机数据
文章目录前言一、Mock.js是什么?二、如何使用Mock.js1.引入库2.写数据3.发送请求总结前言本篇目标在于先简单了解mock.js,然后可以简单使用,运行出第一个Mock.js的“HelloWorld”。一、Mock.js是什么?官网: http://mockjs.com/官方简介:Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能:根据数据模板生成模拟数据模拟 Ajax 请求,生成并返回模拟数据基于 HTM原创 2022-05-08 16:31:22 · 308 阅读 · 0 评论 -
js随机生成一个[min,max]范围的整数,举一反三
</head><body><h2>JavaScript Math.random()</h2><p>点击按钮, getRndInteger(min, max) 会返回 0(包含)到 3(包含)到数字:</p><button onclick="document.getElementById('demo').innerHTML = getRndInteger(0,3)">点我</button><原创 2022-05-08 16:29:16 · 265 阅读 · 0 评论 -
js对象动态赋值---融会贯通
let obj={}; let x='a'; let y='b'; obj[`${x}`]='aaaa'; obj[`${y}`]='bbbb'; console.log("obj:",obj) let config_2=`{"site":{"logo": "${x}","title": "${y}","floor": "${obj[x]"}}`; console.log("config_2:",config_2);输出如下所示:动态赋值里面的变量主要是通过.原创 2022-05-07 12:46:36 · 624 阅读 · 0 评论 -
ES6语法模板字符串详解与使用
let x='q'; let y=`x${x}`;//模板字符串 console.log("y:",y); /* 解释:``这个符号就是模板字符串特有的,可以把他看做就是字符串的双引号“”, 此刻他就是一个字符串,唯一不同的是,我们可以在里面加入变量,${x}这 样,里面x可以是我们任意的变量,数组的某个值、对象的某个值,都可以。而 只要不是用${}包裹的都是普通的字符,比如那个外面的那个x。 */输出结果:...原创 2022-05-07 12:46:01 · 549 阅读 · 0 评论 -
js中JSON.parse()函数与JSON.stringify()函数详解
JSON.parse 函数将 JavaScript 对象表示法 (JSON) 字符串转换为对象 let strJson= '{"name":"唐三","age":18,"University":"史莱克学院"}' //字符串 console.log("strJson:",strJson); console.log("JSON.parse(strJson):",JSON.parse(strJson));//json字符串转对象输出结果:JSON.stringify()函数将 J.原创 2022-05-07 12:43:54 · 647 阅读 · 0 评论 -
echars 图表横轴刻度标签竖着显示
如下图所示,我们将echars 图表的横轴刻度标签旋转个角度,主要通过rotate 这个属性。rotate 的解释 :刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90度。axisLabel: { show: true, interval: 0, rotate:90, }官网教程:https://echarts.apache.org/zh/option.html#xAxis.axisLabel.rotate..原创 2022-04-28 17:36:24 · 1651 阅读 · 0 评论