前端
文章平均质量分 51
前端笔记
£漫步 云端彡
热爱bug的程序猿
展开
-
JS不使用async/await解决数据异步/同步问题
JS 解决axios请求同步问题原创 2022-07-15 17:07:31 · 3281 阅读 · 2 评论 -
Vue环境搭建
Vue环境搭建原创 2022-04-07 12:31:15 · 559 阅读 · 0 评论 -
Vue打包性能优化
Vue页面加载性能优化原创 2021-12-23 09:34:38 · 1830 阅读 · 0 评论 -
ivew 穿梭框Transfer组件高亮显示操作值
项目场景:Transfer(穿梭框),双栏穿梭选择框,常用于将多个项目从一边移动到另一边。这个组件在多个数据之间选择时非常方便。所有的控制都由组件完成,只需要最后保存组件目标值即可。问题描述:由于所有方式都由组件完成,因此会出现一种情况,当操作元素左右穿梭时,这些穿梭值与原数据样式一样,数据过多时,无法区分。而且组件没有任何一种方法直接可以特殊高亮显示。如下图所示(数据虽打马赛克,但可清晰看到数据颜色是相同的):原因分析:我在百度上找了好久都没有找到解决方案,最后查看官网说明和源码研究,原创 2021-09-16 15:43:23 · 460 阅读 · 0 评论 -
Vue3.0 代理解决跨域
Vue@3.0反向代理跨域使用代理解决跨域,方便的是不需要后端配置cors跨域,而且在使用elementui部分组件不会出那么多错。例如:上传组件跨域请求。但是由于使用代理方式请求,会出现另外的问题: 1. 请求session不一致;2. cookie信息无法保存。注意:该代理仅使用在开发环境中,生产环境可将打包后文件放在项目路径下,或者在服务器上配置在Vue 3.0版本中没有config目录,需要在项目根目录下创建三个文件:vue.config.js、.env.development和.en原创 2021-09-06 14:02:55 · 1628 阅读 · 0 评论 -
vue动态加载图片问题
问题描述:vue加载图片时,如果想加载的图片无法拖动,则使用conten进行添加。如果图片路径是动态加载的。则必须加上require;此时就出现一个问题,require参数必须是一个静态字符串。图片路径是动态加载的。怎么才能保证图片可以加载进去呢?@Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA,原创 2021-08-23 09:31:02 · 553 阅读 · 0 评论 -
js宏任务和微任务(异步和同步执行的顺序)探究
js宏任务和微任务(异步和同步执行的顺序)探究目录js宏任务和微任务(异步和同步执行的顺序)探究前言一、什么是宏任务和微任务二、图例解释三、示例代码总结附:js定时器(setTimeOut)真的守时吗?前言js属于单线程,也就是说对于一段js代码片段,只会顺序依次执行,都是同步执行的。而实际使用过程中有些任务执行时间长,有些任务执行时间短,这会导致页面加载时间过长并且出现空白页面的现象,非常影响用户体验。为了解决这个问题产生了宏任务和微任务。一、什么是宏任务和微任务广义上来说宏任务包原创 2021-04-17 11:51:59 · 1170 阅读 · 0 评论 -
ajax处理异步和同步的问题
项目场景:项目中多个请求,需要异步执行,但是在另外的请求中这些请求需要同步执行问题描述:这里只贴了重要部分的代码,项目通过getAllData函数将所有请求数据封装在一起。项目需求:getAllElevatorInfo、reqDeviceStatus和reqDeviceFaultList是三个异步请求,需要请求后端并处理数据,这里getAllElevatorInfo需要处理大量的数据。此后执行initMap初始化地图。问题:这四个方法都是异步进行的,但是initMap初始化的时候会报错数据未定义。原创 2021-04-07 15:44:41 · 285 阅读 · 0 评论 -
async/await的简单使用
async/await的简单使用使用场景:async/await是基于Promise对象的使用,使用在异步返回消息执行顺序的处理逻辑问题描述:先看一下这段代码,这段代码主要实现的功能是,获取定位地址并赋值在input框中,但是这里存在一个问题,this.isMaped = false执行完成之后,会重新渲染页面进行赋值操作。但是结果表明,input的框中并未渲染值 。confirmAddress(){ // console.log(this.coordinate) this.device原创 2021-04-07 11:29:36 · 341 阅读 · 0 评论 -
前端JQuery插件distpicker.js的部分操作使用
前端JQuery插件distpicker.js的部分操作使用前言:需要导入的插件JQuery以及distpicker.js。distpicker GitHub官网,可在官网查询,也可在bootcdn中下载。简单引入<!-- data-toggle="distpicker"必选,data-value-type="code"可选,表示选中值为省市区代码, data-province 可选,默认省级显示 data-city 可选,默认市级显示 data-district 可选,默原创 2021-03-26 11:45:52 · 2079 阅读 · 0 评论 -
使用xlsx.core.min.js进行导入(表格)导出(Excel)功能
使用xlsx.core.min.js进行导入(表格)导出(Excel)功能首先得引入xlsx.core.min.js文件,可以去官方下载,其中有xlsx.core.min.js和xlsx.full.min.js,一般来说第一个就够用了,后者是加入了更多的功能。导出Excel文档,可选择性导出<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></原创 2021-03-15 16:59:00 · 14096 阅读 · 7 评论 -
js(jquery)加载图片(GIF)闪烁的问题
js(jquery)加载图片(GIF)闪烁的问题使用new Image()进行图片预加载,代码如下:function setImage(img,$el,method){ if(method == "div"){ $el.css("background-image","url(" + img.src +")"); }else if(method == "img"){ $el.css({ "content": "url("+img.原创 2021-03-05 16:35:09 · 1193 阅读 · 0 评论 -
window自带定时器
window自带定时器//每隔两秒执行函数window.setInterval(()=>{ ...},2000)原创 2021-02-26 18:06:03 · 250 阅读 · 0 评论 -
axios与vue的封装
axios与vue的封装var $axios = axios.create({ baseURL: 'http://localhost:8080/', //设置基本路径 // `withCredentials` 表示跨域请求时是否需要使用凭证(是否发送sessionid) withCredentials: true, // 默认的});//判断Vue是否存在if (Vue) { //...原创 2020-03-17 23:47:14 · 2128 阅读 · 0 评论 -
CSS 图片动态旋转
CSS 图片动态旋转<div class="header-logo"> <img src="../../img/logo.png" /></div>.header-container>.header-photo>img { width: 50px; height: 50px; margin-top: 10px; /* 设置图片为圆形...原创 2020-03-10 17:32:46 · 1896 阅读 · 0 评论 -
CSS实现bootstrap的Collapse动态折叠和展开时箭头图标
CSS实现bootstrap的Collapse动态折叠和展开时箭头图标bootstrap的折叠代码如下<div class="accordion" id="accordionExample"> <div class="card"> <!-- 重点是在这里的parent-nav 和 collapsed类标签 --> <div class=...原创 2020-03-10 17:10:43 · 8823 阅读 · 0 评论 -
JQuery设计自定义分页组件
JQuery设计自定义分页组件首先得引入JQuery,然后这里我用到了图标是阿里图标库的。接下来直接看代码JS代码var myPagination = { //当前页 pageNumber: 1, //每页显示大小 pageSize: 15, //总页数 totalPage: 0, //定义一个函数 getFunData:Function, //初始化分页组件 /** * 初始化分页组件 * @原创 2021-02-25 19:17:27 · 439 阅读 · 0 评论 -
基于JQuery制作自定义提示消息框
基于JQuery制作自定义提示消息框直接上代码function myAlert(message,params) { let width = 260; let height = 50; let color = "#FFF"; let backgroundColor = "rgba(6,9,38,0.9)"; //获取顶级窗口 let bodyEle = window.top.document.body; let divELe = documen原创 2021-02-24 14:20:05 · 692 阅读 · 0 评论 -
百度地图自定义控件
百度地图自定义控件使用场景:使用百度地图时,希望在地图上覆盖自定义的组件。此时需要自定义组件,否则我想不到什么办法可以在地图之上有其他页面进行操作了。百度地图使用方法:去官网百度地图API,里面介绍的很详细。使用前准备,script中ak的值******代表的是账号申请的密钥,不收费的。 <div id="map-container"></div> <script type="text/javascript" src="https://api.map.bai原创 2021-02-22 19:04:57 · 730 阅读 · 3 评论 -
CSS设置背景透明效果
CSS设置背景透明效果设置背景透明效果有两种方法:使用opacity属性定义透明度,范围0-1,0表示完全透明,1表示不透明,优点:可以在背景图片以及背景颜色上使用。缺点:会把设置div及其子元素都显示透明。<div class="div1"> <p>透明度测试</p></div>.div1{ display: inline-block; margin: 10px; width: 200px; height: 200px; colo原创 2021-02-20 17:44:12 · 1387 阅读 · 0 评论 -
el-popover在表格中使用的坑
el-popover在表格中使用el-popover是elementUi的一个弹出框,当在表格中循环使用时,每一个el-popover没有指定的标记,因此会失效。解决办法<el-popover placement="top" width="160" :ref="'popover-'+scope.$index"> <p>这是一段内容这是一段内容确定删除吗?</p> <div style="text-align: right; margin: 0"&g原创 2021-01-29 20:46:52 · 1738 阅读 · 2 评论 -
HTML5中的音频/视频
H5 bgsound,audio标签bgsound是背景音乐标签,但是只能在IE浏览器中使用。 标签使用方法如下: <bgsound src=" " loop ></bgsound> src为音频路径而在H5中新增了audio的标签,是音频标签,可支持IE,Firefox,Chrome,Safari,Opera浏览器使用,可以实现背景音乐的效果。...原创 2019-09-03 08:25:01 · 1143 阅读 · 0 评论