- 博客(48)
- 收藏
- 关注
RSS订阅原创 vue项目在前端处理百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)和WGS-84坐标系相互转换，基本无误差
定义一些常量var x_PI = (3.14159265358979324 * 3000.0) / 180.0var PI = 3.1415926535897932384626var a = 6378245.0var ee = 0.00669342162296594323百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02) 的转换即 百度 转 谷歌、高德/** * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02) 的转换 * 即 百度 转 谷歌、高德 * @para
2023-11-14 14:20:16
786
原创 Vue项目中监听全屏事件，实现全屏功能和按esc退出全屏（解决全屏踩坑难题）
分析浏览器全屏和requestFullscreen全屏Api区别，requestFullscreen() 方法用于发出异步请求使元素进入全屏模式，exitFullscreen退出全屏事件，
2022-06-22 12:05:31
10993
5
原创 Element UI Table组件固定列底部有一条白线的解决方案
bug:在某一次项目中使用暗色系的固定列时发现有一条白线无法消除（之前项目都是亮色系所以没发现问题）通过排查发现这条白线能够随着el-table__fixed-right元素移动但是却没有任何子元素包含这条线的样式所以一直没有找到合理的解决办法只能通过特殊方案去解决这条白线通过设置全视口的高将白线定出table的范围才能暂时解决（或者修改fixed的bottom定位可以解决），但是如果是大屏项目这个仍然不是最优解因此在mounted里设置了根据分辨率问题去自适应的方案 mounted()
2022-03-30 18:12:11
4251
原创 当鼠标移入Echarts出现抖动并滚动条迅速出现消失
Bug效果：当鼠标初次移入Echars，下方出现滚动条并且迅速消失原因：当时设置了tooltip时，鼠标移入会触发悬浮事件，并且会有一个默认的0.4秒过渡时间值当我们把值设置为0时，紧跟着鼠标移动就会解决抖动问题tooltip: { transitionDuration:0,//[defaule:0.4] echart防止tooltip的抖动}...
2022-03-21 17:50:05
1416
原创 CSS解决position:fixed基于父元素定位而不是浏览器窗口
众所周知fixed是基于浏览器窗口定位，但是今天遇到个问题，发现fixed并不一定是这样有一个例外会使fixed是基于祖先元素定位。当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。<div class="container" style="transform:rotate(360deg);"> <div> <div class="box" style="position:fixed;"></div&
2022-03-08 15:08:31
10910
2
原创 elementUI中Tooltip背景颜色样式修改
文档描述使用这个属性popper-class添加一个class<el-tooltip content="Top center" placement="top" popper-class="atooltip"> <el-button>Dark</el-button></el-tooltip>.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow { border-top-c
2022-03-08 15:01:49
1975
原创 ElementUI中table表格自定义表头Tooltip文字提示
实现效果：ElementUI文档：el-table组件 <el-table-column label="水位高程(m)" header-align="center" align="center"> <el-table-column prop="swlel" label="传感器监测" align="center" :render-header="(h, { col
2022-03-08 14:57:53
4101
2
原创 Vue项目中常见的公共方法汇总（五）：通用校验处理
// 初始化时间（通用型） initTm(queryForm, isTwo = true) { const limitTm = window.HT_EnvConfig.limitTm || 8 let day = 0 if (moment().hours() < limitTm) { day = 1 } let fmtStr = 'YYYY-MM-DD ' if (limitTm < 10) {
2022-03-07 14:16:20
743
1
原创 ElementUI中解决使用dropdown等弹窗时定位body而非template创建的dom节点
在使用element-ui组件库的时候，其中有tooltip和dropdown组件，它们在显示弹出部分的内容时，实际上这部分内容是被放在body根节点下的。而如果放在根节点有时候我们的某一些需求就无法得到实现，不得不将其放在我们指定的地方。例如图例中dropdown出现不随div滚动条滚动的情况一、解决办法这里直接给出解决办法，先介绍tooltip组件，其实两者是差不多的、下面是方法：1、解决tooltip<template> <div> <
2022-02-15 14:48:22
5383
1
原创 Vue登录模块中基于canvas实现验证码组件
组件元素<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template>父传子propprops: { identifyCode: { type: String, default: '12
2022-02-11 15:51:12
203
原创 npm报错解决：C:\Users\Admin\AppData\Roaming\npm-cache\_logs\xxxx-debug.log
先上报错图这个报错是我在安装某个依赖时出现的错误这里我尝试过把node_modules包删除并重新下载但是我在删除后npm i 安装依赖是时 仍然爆出了相同的错误同时我尝试过cnpm 和 yarn 也同样会爆出错误最后我选择先清理一遍缓存npm cache clean --force，然后再去cnpm install，然后项目就可以正常安装依赖了。因此以此记录一下，方便下次遇到问题回忆和分享给其他遇到错误的小伙伴。先将node_modules包删除然后清理缓存npm cache clea
2022-01-21 12:23:35
23100
1
原创 通过Vue+flvjs在HTML5中播放flv格式视频文件—demo及api
目前主流浏览器不能直接嵌入并且播放FLV文件，所以直接用video标签播放是行不通的。因此提供两种解析方法嵌入一个swf媒体播放文件，并利用该文件来播放你预设的文件。这里推荐dplayer——http://dplayer.js.org/zh/guide.html#flv（亲测同样好用）利用B站开源的flv.js，通过将FLV文件流转换为ISO BMFF（Fragmented MP4）段，然后通过Media Source Extensions API 将mp4段提供给HTML5 元素。git
2022-01-21 12:12:51
1329
1
原创 CSS的skewX()函数二维倾斜实现平行四边形按钮和梯形按钮组
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/skewX()梯形按钮组ul,li{ padding:0;margin:0;list-style:none}.ul{ height:30px; width:200px; display:flex; border-bottom:1px solid red;}.ul>li{ height:100%; flex:1; border:1px so
2022-01-10 19:22:56
1294
原创 Vue项目中对登陆密码使用crypto-js进行Aes加密
安装npm i crypto-js在utils下创建secret.js文件import CryptoJS from 'crypto-js'// 十六进制密钥const CRYPTOJSKEY = CryptoJS.enc.Utf8.parse('HTKJhtkjHTkj1234') // 加密 function encrypt(plaintText) { var plaintTexts = plaintText var options = { mode: Crypto
2022-01-10 19:17:23
513
原创 Vue组件递归渲染
父级菜单<template> <div> <ul> <li v-for="(item,index) in asideList" ::key = "index" > <p class="main-title"> <span class="title">{{item.title}}</span> <span class="iconfont icon-arrow-right-1"&g
2021-12-29 17:02:40
1060
原创 OpenLayer监听zoom缩放事件显示不同业务图层
前言本身是想使用moveend事件来监听地图的缩放级别，但是初始化实例之后一直不能正常监听到缩放结束的变化。后再文档中查到change:resolution可以同样实现相同效果。因此以此文记录使用和实现方案。监听事件 mounted() { this.$map = this.$refs.baseMap.getMap() this.$map.getView().on('change:resolution', () => { if (this.$map.getView(
2021-12-08 14:26:36
2945
原创 给Echarts添加遮罩层
this.$refs['rainChart'].showLoading({ text: '请稍后......', color: '#327EF3', textColor: '#327EF3', maskColor: 'rgba(28,31,99,0.31)' }) this.$refs['rainChart'].hideLoading();
2021-12-02 14:44:34
1403
原创 TypeScript入门版~适合初学者快速学习。
前言大家好，本文是我在学习TypeScript过程中的一些总结。目前版本仅写到关于typeScript基础使用，模块、命名空间、修饰符等内容，在总结时总感觉案例有些苍白。我会在后面ts的项目demo中进行总结和输出。我是通过观看教学视频和ts官方文档的结合进行学习。在学习过程中晦涩难懂的部分，我也会查看一些大佬发出来的经验贴进行吸收。发出这篇文章的本意是希望能够加深自己的印象，同时能够将自己学习的内容进行一定的输出。当然我作为一个菜鸡总结的还不是很到位。如果各位大佬发现了问题希望能直言不讳指出来，我会及
2021-11-29 17:27:20
1063
原创 Echarts实践：实现一个未来七天天气预报，图表轮播效果及插入svg或img图标
七天效果图轮播效果图轮播效果实现 <el-button class="button" icon="el-icon-arrow-left" @click="backChart"></el-button> <v-chart :options="echartsOption" ref="rainChart" autoresize style="width:90%;" /> <el-button class="button" ic...
2021-10-08 15:35:13
2779
1
原创 前端框架中常见的公共方法汇总（三）：自定义表单验证规则
/**此方法可以全局混入 methods 也可以直接复制，局部使用**/开始时间不能大于结束时间 validateDateRange(stm, etm) { if (moment(stm) > moment(etm)) { this.$message({ message: '开始时间不能大于结束时间', type: 'error' }) return false }
2021-09-22 10:21:19
394
1
原创 前端框架中常见的公共方法汇总（二）：时间格式处理/数字格式处理
时间格式处理// 把时间的分秒值去掉export const formatTM = item => { if (item) { let newItem = item.replace(':00.0', '') if (newItem.indexOf('.') > 0) { newItem = newItem.substr(0, 16) } return newItem } else { return '' }}//
2021-09-18 11:47:00
273
原创 android移动端调试—前端开发工具Eruda
Eruda通过CDN使用：<script src="//cdn.bootcss.com/eruda/1.4.2/eruda.min.js"></script><script>eruda.init();</script>通过npm安装：npm install eruda --saveJs文件对于移动端来说略重（gzip后大概100kb）。建议通过url参数来控制是否加载调试器，比如：(function () { var...
2021-09-08 11:40:46
4603
3
原创 css属性标签选择器
今天在项目中发现组件内包含了一个class选择器查询后发现这种属于属性标签选择器，相对于传统的元素选择器等，可以实现更多的类或标签的选择，甚至直接查询属性，使用起来更加灵活。查询属性/* 存在title属性的<a> 元素 */a[title] { color: purple;}/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */a[href="https://example.org"] { color.
2021-09-06 10:58:39
494
原创 JavaScript中Promise 使用详解
Part 01 - Promise 概述Promise 一种更优的异步编程统一方案传统的异步编程如ajax：是通过回调函数来进行请求后的一系列执行。但是如果直接使用传统的回调的方式去完成复杂的异步流程，就无法避免大量的回调函数的嵌套。这样就容易发生回调地狱，导致代码卡顿回调地狱get（'url',function(){ get2('url2',function(){ get3('url3',function(){ .
2021-09-06 00:28:44
719
原创 js判断是否是手机访问网页
原理：原理有两个，第一：通过游览器（browser）判断是否是手机；第二：通过访问终端判断是否是手机(userAgent)；但是通常考虑到兼容性，需要这两种原理同时使用；具体的实现如下： function checkBrowser(){ var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion.
2021-09-03 15:50:56
1803
原创 Vue中实现通过外部的CheckedBox对echarts（legend）进行动态显示/隐藏
需求原型开发工作中有一项，需使用复选框控制echarts的显隐，找了很多办法没有实现直到看到一篇文章，echarts配置项中自带legend可以控制图标的数据显示隐藏因此我们可以通过checkBox的来对selected对象进行操作来修改图标的状态首先配置legend并让他不显示 legend: { data: ['水位', '流量', '温度'], show: false },其次通过组件的checkBox组件..
2021-08-30 06:21:51
2322
5
原创 5分钟教你读懂JavaScript预编译和函数执行
JavaScript运行三部曲JavaScript在展示页面之前会提前进行编译，因此也称之为预编译，而预编译基本分为三部分 语法分析 ----（有没有基本的语法错误,例如中文,关键字错误...） 词法分析（预编译） 全局对象（global obkject）GO对象 局部对象（active obkject）AO对象 逐行解释执行JS预编译什么时候发生预编译到底什么时候发生? 误以为预编译仅仅发生在script内代码块执行前 这倒并没有...
2021-08-25 14:47:44
206
原创 display:grid 网格布局的基础使用
css新特性——网格布局我们通过在元素上声明display：grid来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格元素。 它将元素分割成行与列，通过栅格栏的形式弥补了flex布局在响应式方面的缺陷。在这个例子中，这有一个类名为wrapper的div元素作为容器，它内部有五个子元素。<div class="wrapper"> <div>One</div> <div>T...
2021-08-20 10:33:51
2645
原创 HTML table标签固定高度，并且显示滚动条
关键设置 /*关键设置 tbody出现滚动条*/21 table tbody {22 display: block;23 height: 80px;24 overflow-y: scroll;25 }26 27 table thead,28 tbod.
2021-08-19 16:12:53
3687
原创 Element UI 上传文件Upload 限制上传文件格式
<el-upload class="upload-demo" :limit="3" :before-upload="beforeUpload" :action="fileUpload" :on-exceed="handleExceed" :on-success="handleSuccessZl" > ...
2021-08-05 09:56:53
2251
原创 Vue - 父子组件通信 - $emit传多个参数父组件如何接收
子组件正常触发$emit传参：// 子组件this.$emit('test',this.param)// 父组件@test='test($event,scoped.row)'当子组件传出多个参数时：如果仍用$event接收，只能接收子组件传出的第一个参数因此我们通过设定为数组来进行接收子组件传来的数据// 子组件this.$emit('test',this.param1，this.param2, this.param3)// 父组件 arguments 是以数组的形式传
2021-07-23 18:05:35
2229
原创 前端框架中常见的公共方法汇总（一）：防抖节流
一、为什么要用防抖和节流 在浏览器中，频繁的DOM操作或发送请求会非常占用内存资源，而实际开发场景中，、又不可避免的会遇到持续触发或重复触发的事件和方法。处理不当或者放任不管就容易引起浏览器卡死，如：input的change事件，滚动条scroll事件等等。因此需要降低事件被触发的频次，防止过多的回调函数占用浏览器内存。二、Vue中公共封装的防抖防抖：当不断触发高频事件后设置一个标识，通过标识来判断高频事件是否结束，如果未结束责支触发一次事件，并且在标识内高频事件再次被触发，则重新...
2021-07-20 09:53:14
436
3
转载 Git冲突：Please commit your changes or stash them before you merge
用git pull来更新代码的时候，遇到了下面的问题：C#error: Your local changes to the following files would be overwritten by merge: xxx/xxx/xxx.phpPlease, commit your changes or stash them before you can merge.Aborting出现这个问题的原因是其他人修改了xxx.php并提交到版本库中去了，而你本地也修改了xxx.p
2021-07-19 15:02:31
27920
原创 JS使用New map()数组去重
pointNoRepeat(arr) { const map = new Map() const result = [] for (let i = 0; i < arr.xxx; i++) { if (map.has(arr[i].xxx)) { map.set(arr[i].xxx, true) } else { map.set(arr[i].xxx, false) r...
2021-07-06 15:43:32
1452
1
原创 配置Prettier与Es-lint格式化兼容
传统异步编程：（xhr请求，ajax请求） 通过回调函数在jquery中$ajax.get()容易形成回调地狱 通过promise=》.then .catch 例如axios就是基于promise封装的
2021-07-06 11:43:50
309
原创 elementUI树结构Tree修改/编辑原节点变为input输入框
思路分析点击修改，节点由span变input，input中显示的内容为原节点内容，并获得焦点全选修改后，失去焦点，由input变回span,节点内容修改<h4>那这样我们需要一个数据内容来控制input和span切换的值</h4>数据内容.在接口返回的数据中，添加showInput字段，来控制什么时间切换节点标签Html结构 <el-tree class="tree" :data="t
2021-05-24 16:17:57
5515
17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人