![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 76
奔跑的痕迹
I like to learn new technologies every day and I am willing to constantly improve myself.
展开
-
将excel表格转换为element table(上)
由于行列内容太多看起来有些乱,这效果的确不是想要的,于是想到了使用element ui 的table 来加载。最近有个功能需要将excel展示到html 界面里面,看是简单的一个需求也是需要费尽心思才完得成。于是根据这个案例开始重新组织xlsx 加载返回的数据。想要把excel 读取出来,于是使用xlsl的插件。看起来是要好很多了,接下来就是进行行列合并的操作了。将数据转换为html 再使用v-html加载数据。通过插件可以获取到已经分析好的数据。再增加一个重构表单数据的方法。首先要将数据行列重新组装。原创 2024-07-02 21:47:57 · 334 阅读 · 0 评论 -
CesiumJS整合ThreeJS插件封装
最近做项目有一个三维需求使用CesiumJS比较难以实现,发现THREEJS中效果比较合适,于是准备将THREEJS整合到CesiumJS中为实现效果所需我们找到官方博客,于是根据该博客提供的思路去实现整合。原创 2024-06-20 16:58:58 · 612 阅读 · 0 评论 -
openlayers自定义投影坐标系(EPSG:4542),GeoJSON读取geometry和坐标转换
在做二三维开发中时常会遇见,形形色色各种类型的投影坐标系,然额不管是OL还是CESIUM他们都只支持EPSG:3857和EPSG:4326类型的坐标系,所有我们不得不将 其他类型的投影坐标转换为4326或者3857,目前比较好用的要属proj4, 当时刚开始使用也是十分笨拙,走了些弯路…项目中时常会得到shp转换的大量geojson数据如:这种一大堆的坐标系,且需要全部转换,起初我是这样做的:1、拿到所有的featurens,2、申明一个临时变量来保存所有的features3、然后循环调.原创 2021-11-27 12:32:43 · 4670 阅读 · 0 评论 -
vue-router路由history模式+nginx部署项目到非根目录下(实践版)
你总是心太软心太软独自一个人研究到天亮你无怨无悔的疯狂找寻我知道你根本没那么坚强你总是心太软心太软把所有问题都自己扛问题总是太多解决太难不是你的就别再勉强夜深了你还不想睡你还在想着他吗你这样执着到底累不累明知他不会那么容易只不过想早点睡一觉可惜他无法给你机会翻遍网络没有想要结果喔,算了吧。。。。。不我还要再找找最近经历了如上歌词的生活,大致是这样的:开发一个项目,发现使用hash 老是带有一个#号,如localhost:8080/#/这样始终够美观,于是就想着往往his.原创 2021-11-23 21:55:57 · 5203 阅读 · 1 评论 -
openlayres Cannot set property ‘disposed‘ of undefined
今日遇到一诡异事件,使用openlayers 进行feature 加载标注,一直报错Cannot set property 'disposed' of undefined甚是郁闷,看就有相关帖子,但操作完全不同如How to add or remove the Layer from map in ol@6.0.0-beta.3对于代码是看了又看,没问题呀,,,于是我拷贝了项目中原来的代码到该操作方法,进行适当修改,运行正常???异常代码 //矢量标注的数据源 const vecto原创 2021-11-21 12:08:37 · 591 阅读 · 2 评论 -
vue3+vite2+element-plus+ts搭建一个项目
花了几天用 vue3+ vite2+ element-plus+ ts 搭了个 数据管理系统,使用静态数据模拟动态路由,路由拦截,登录页面鉴权等,使用了iconify图标数据预览搭建中踩过动态路由生产环境报错,json循环依赖,路由跳转 ‘window.webkitStorageInfo’ is deprecated. 浏览器卡死等问题但这些都已经处理了,这个简单系统下载就可以使用,喜欢的自取,顺便给个star,3Q....原创 2021-10-24 09:03:33 · 5412 阅读 · 2 评论 -
vue对vue-giant-tree进行节点操作
vue 项目中使用到了vue-giant-tree这个使用ztree封装的树形插件,在对其节点进行操作时遇到了无法向传统的jquery那样获取到ztreeObj;而导致了无法控制节点dom;浪费了许多时间,so特此记录一哈Vue-Giant-TreeVue-Giant-Tree是最ztree的一个封装;用于vue 项目中,该ztree的好处就是不需要自己将数据拼装为树形结构。只需要给他一个...原创 2019-10-17 21:22:18 · 6549 阅读 · 12 评论 -
ES5 apply与call详解
虽然es6已经出台了很多简单的方法替代了apply和call,但是还是有很多老大项目使用到了es5的这些方法,所以对于这些方法的掌握是有必要的apply、call在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。JavaScript 的一大特点是,函数存在「定义时上下...原创 2019-08-11 21:22:29 · 1150 阅读 · 0 评论 -
二次封装Element UI Table实现动态列
开发中常会需要在一个页面显示一个table,而这个table的列是不固定的,而列名也是根据后台传入而动态加载的,so element ui 的table 已经不再满足需求,我们得在他的基础上再次封装增加 refactor_table.vue 组件<template> <el-table :data="tableData" border...原创 2019-11-01 22:47:00 · 762 阅读 · 0 评论 -
禁用input自动补全,模拟type=password输入字符显示为星号
根据改地址做了一个模拟如下:<template> <div class="text-input" :class="right ? 'textinput-right' : ''"> <span v-if="star" class="pwd-txt" :style="right ? { paddingRight: '5px' } : { paddingLeft: '5px' }" > {{ password原创 2021-03-31 21:45:52 · 2524 阅读 · 0 评论 -
openlayers 使用canvas绘制圆形头像图标
记录一个使用canvas 将一张图片等比缩放,裁剪为一个圆1、原始图片2、绘制后在地图中呈现的样式3、设置样式的函数 /** * 设置Style */ setStyleOnPersonLocation (feature) { const data = feature.values_ var imgUrl = 'https://person_head_img/avatar.jpg' // 绘制圆角矩形 let.原创 2020-08-21 16:10:58 · 1027 阅读 · 0 评论 -
css预编译sass和stylus简单使用 (带node-sass安装失败解决方案 )
目前css 流行的三大预编译有stylus、less 、 sass 说白了这些东西就是为了提高编码效率,规划css 代码的,详细大家less 就不用多说了用得都比较多了,只是看看使用stylus, sass定义二外的文件是以 .styl 为后缀 ,他可以文件中定义方法同时使用变量, 属性与值间可以 使用空格分隔,结尾不需要分隔符如: // 背景图片 bg-image($url) b...原创 2020-02-27 18:14:04 · 1490 阅读 · 0 评论 -
Error in render: “TypeError: Cannot read property ‘0‘ of null“
根据操作,直接就指向了这个methods, 找了半天你会发现,这个错误并不是这个地方引起的,why?转了一圈回来,发现是html中引起的原创 2020-12-27 10:07:01 · 4179 阅读 · 1 评论 -
手动封装XMLHttpRequest
自己动手封装一个XMLHttpRequest<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>自定义XMLHttpRequest实现前后端通讯</title> </head> <body> <button type="button" onclick="getData()">获取数据</button>.原创 2020-12-26 15:38:15 · 439 阅读 · 0 评论 -
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.
运行项目是提示Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.原来是babel版本兼容问题修改为 "devDependencies": { "babel-core": "^6.26.0", "babel-eslint": "7.2.3", "babel-loader": "^7.1.2", "babel-plugin-t原创 2020-11-15 20:22:26 · 1158 阅读 · 0 评论 -
Cannot read property ‘type‘ of undefined Occurred while linting **\index.jsx:1
今一个react 中使用mobx 老是提示Cannot read property 'type' of undefined Occurred while linting **\index.jsx:1头疼起初是认为是 @observable的问题,于是修改了整个js将:export default class AppState { @observable count = 1 @observable name = 'jack' @computed get msg() { re原创 2020-11-15 20:21:23 · 2466 阅读 · 0 评论 -
Must use destructuring props assignmenteslint
eslint 检测提示Must use destructuring props assignmenteslint使用对象结构就可以解决了原创 2020-11-15 12:18:17 · 5672 阅读 · 0 评论 -
Experimental support for decorators is a feature that is subject to change in a future release. Set
错误提示Experimental support for decorators is a feature that is subject to change in a future release. Set看着这一片的错误提示很难受修改方法:File > Preferences > Settings输入 > tsconfig.js将 Experimental Decorators 项勾选上就OK了...原创 2020-11-15 12:13:53 · 1667 阅读 · 1 评论 -
Typo in static class property declarationeslint
eslint 检测提示 Typo in static class property declarationeslint找了半天原来是propTypes 写成了PropTypes (就是一个首字母大写导致的)原创 2020-11-15 12:08:00 · 689 阅读 · 2 评论 -
js 判断数据是否为空
/** * Check if it is empty * and return true if it is * @param {Object} checkObj */ function checkIsEmpty(checkObj) { if (!checkObj || !checkObj.length) { // Checke if it is ""、 undefined、 null 、NaN、 [] r...原创 2020-07-31 11:45:00 · 978 阅读 · 2 评论 -
JS 数组常用操作全集
文章目录1、push()方法2、unshift()方法3、pop() 方法4、shift() 方法5、filter() 方法6、join()方法7、 indexOf() 方法8、reverse() 方法9、slice(start, end) 切片方法10、splice(start, selectcount, ...items) 方法11、includes()方法,12、find()方法13、concat() 方法14、sort(orderfunction)方法1、push()方法往数组最后添加一原创 2020-07-27 22:53:53 · 371 阅读 · 0 评论 -
把vue组件发布到npm
一直以来项目都使用他人开发的组件,于是乎自己也想倒腾着做一个,发布到npm 在其他项目里直接使用,这个组件上传和纯js 还是有一定区别的,在这个过程中也遇到了一些小问题,网上找了许多案例,都不是太全面,趁有时间自己记录一下参考网上大佬案例改装一个适合自己需求的运动的时间刻度一、项目创建首选是创建一个项目,这个就不用说了,大家都会c:> vue create my-project二、组件编写在src/components下创建一个TimeAxisAuto.vue三、全局注册再建.原创 2020-07-26 23:43:15 · 1027 阅读 · 0 评论 -
鼠标移入select options会触发mouseleave 事件处理方案
参考html select控件移动到option标签时就触发mouseleave()解决方法html select控件移动到option标签时就触发mouseleave()解决方法https://blog.csdn.net/tian_i/article/details/79181721js获取某个容器下的所有标签,并判断标签类型https://blog.csdn.net/weixin_30498807/article/details/102265975js(判断元素是否包含某个class名)https原创 2020-07-26 13:51:21 · 2528 阅读 · 0 评论 -
Vuex modules 中active相互调用
const actions = { // login userLogin({ commit, dispatch, rootGetters }, userInfo) { commit('permission/SET_ROUTES', [], { root: true }) // 清空permissin下SET_ROUTES console.log(rootGetters['user/usermenu']) // 获取user 模块下的usermenu属性 dispatch.原创 2020-07-26 12:30:56 · 1525 阅读 · 0 评论 -
Vue computed,watch本质区别
今日项目需要一个详细的权限配置,如:路由权限,页面tabs权限,操作权限;而路由权限大都知道就不赘述,而操作权限这就涉及页面中每个按钮了,这里使用VUEX进行管理1.配置storestore 中 user.js 配置如下const mutations = { SET_PERMISS_ARR: (state, permiss) => { state.permissArr = permiss }}const actions = { // 获取权限 getauthList({ .原创 2020-07-18 12:47:19 · 492 阅读 · 0 评论 -
HTML转为PDF,图片导出失败的终极解决方案
如题项目有需求将一个页面导出为pdf,然而页面中的图片却始终无法导出成功1、导出的方法 const PdfDownload = function(domId) { var targetDom = $('#'+domId) // 把需要导出的pdf内容clone一份,这样对它进行转换、微调等操作时才不会影响原来界面 var copyDom = targetDom.clone() // 新的div宽高跟原来一样,高度设置成自适应,这样才能完整显示节点中的所有内容(比如说表格滚.原创 2020-07-08 22:20:01 · 4491 阅读 · 0 评论 -
openlayers获取绘制多边形的顶点坐标
/** * 画笔初始化 */ drawPrepare() { const source = new VectorSource() const vector = new VectorLayer({ source: source, style: new Style({ fill: new Fill({ color: 'rgba(255,218,185, 0.4)' ...原创 2020-06-10 09:15:16 · 2539 阅读 · 1 评论 -
踩了一个基础 知识的坑
看就遇到的图上说的,当修改某一个select 其他两个也会同着更改!html是这样的 <el-form-item label="推送消息类型" > <div v-for="(hItem,index) in pushSecondTypeOfHour" :key="index" class="items-second-type"> <el-select v-model="hI...原创 2020-05-29 22:32:21 · 291 阅读 · 0 评论 -
[vuex] unknown action type:***
vuex 分模块后使用mapActions调用action老是提示 [vuex] unknown action type:*** 异常目录index.js是这样的 import Vue from 'vue' import Vuex from 'vuex' import getters from './getters' Vue.use(Vuex) const modulesFiles = require.context('./modules', true, /\.js$/) .原创 2020-05-27 15:41:41 · 7088 阅读 · 4 评论 -
props传值遇Cannot read property getAttribute of undefined异常
今有一个echarts 图标的子组件使用watch 监听接受父组件传入的data,而在父组件页面再次根据日期筛选数据,重新传入子组件进行图表重绘时老实会提示报错vue.runtime.esm.js?6e6d:619 [Vue warn]: Error in callback for watcher "chartData": "TypeError: Cannot read property 'getAttribute' of undefined"found in原来是异步加载数据切换的锅,.原创 2020-05-27 15:15:30 · 862 阅读 · 0 评论 -
vue数组更改页面无法刷新
今一个图片列表的数组,在新增数据时页面会同步相应,但是进行删除操作时老是无法实现页面及时刷新,使用过vue set也没见效果,纠结半天,哎原来是嵌套对象的坑页面加的图片列表的html这里是一个方法调用接口获取一些返现的数据 赋值给ruleForm,其中dataImages是一个保存图片的数组对象下面就是页面返现图片或者上传,删除操作而就是在这个进行删除的操作时发现了删除完 dataImages中的数据,页面没有刷新的问题试过许多办法无果,最后还是在看console中发现了端倪1、第一.原创 2020-05-23 14:58:47 · 759 阅读 · 0 评论 -
vue-router几大坑
如今vue使用率很高,采坑这就是很平常的了,使用了几年坑都依然没踩完,纠结呀一、route和router大家都知道vue 是组件化开发,页面很多路由难免,这里是路由配置router.js最外层是 new Router创建router 实例,该实例里面是多个route配置注意:这里实例是一个 Router 而 其中参数是routes千万别写成routers了二、params与query参数传递,可以使用params和query的方式进行参数传递需要注意的是router为VueRout.原创 2020-05-20 06:49:06 · 1003 阅读 · 0 评论 -
使用weexplus + vue开发APP的填坑之旅
最近需要撸一个app来满足用户的需求,找来找去发现flutter不错,决定用它但是时间不够(准备挤出时间再去研究flutter),进度又催得紧,最后决定选weex这个上手快些,说干就干打开官网跟着api开始撸起,花了2天发现他对我已经没有刚开始那么抵触(相信我们将来会是很好的朋友),so写一下记录我们的相识、相知、相…,哈哈所需技术栈:h5、js、css 、node、vue、android(...原创 2019-08-22 20:49:37 · 764 阅读 · 0 评论 -
Error: webpack.optimize.CommonsChunkPlugin has been removed
最近使用webpack 进行react 依赖抽离时发现原本的webpack.optimize.CommonsChunkPlugin已经不能使用了打包时提示Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead....原创 2020-05-02 21:17:21 · 2301 阅读 · 0 评论 -
vue cli3 整合Cesium,处理build 时内存溢出问题
一直使用cesium,但是都是使用script直接引入的,但是在将其放置在增加路由的子页面中中时会出现一个问题,刷新后提示cesium is undefined看直接引入cesium.js<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <met...原创 2020-05-02 07:01:23 · 3604 阅读 · 2 评论 -
vue 中render执行流程梳理
用了多年vue 今天对自己了解的render 做一个梳理一、使用template模板先从vue 初始化开始:众所周知项目的main.js中定义了var app = new Vue({})这vue初始化操作其实他会执行到这个方法中的_init函数,在这个方法执行一些列的初始化后,判断$options是否定义el,如果定义调用vm.$mount(vm.$options.el)函数,...原创 2020-05-01 17:45:25 · 1676 阅读 · 0 评论 -
JavaScript原型与原型链深入理解
原型:每一个js 对象(null除外)都会和另一个对象相关联,“另一个”对象就被我们称之为‘原型’,而每一个原型拥有一个prototype 属性指向原型对象(就是原型的实例)的引用,原型就是通过该prototype将自身的属性和方法共享给继承他的子对象;子对象通过__proto__指向原型的prototype进行属性方法继承;这种方式称之为‘原型链’如图其实Function 最...原创 2020-04-26 16:10:17 · 213 阅读 · 0 评论 -
Vue cli3 整合SuperMap巧遇js异步加载的坑
最近使用到superMap做三维地图,而项目又分为可视化大屏与后台管理系统两部分,所以项目配置了多入口,然引入cesium依赖就成了问题,在vue cli3 整合Cesium,处理build 时内存溢出问题虽然知道了整合原生的cesium的方法,但是在实际开发中会发现superMap 官方扩展的接口是无法使用的,必须引入superMap官方重写的cesium.js才可以, 然而superMap...原创 2020-04-17 21:54:03 · 710 阅读 · 1 评论 -
整合vxgPlayer使chrome支持vxg_media_player播放rtsp视频
目前有一个关于接入海康监控进行视频融合的项目需求,按理说在前端技术发展如此迅速的今天,使用web播放一个视频应该是不算什么难事,只是万事都有意外,因很多视频厂家的监控数据都不是普通的mp4啥的,所以使用普通的object 或者video 是播放不了的,必须需要一些额外的插件进行支持,今天我们就来加载一个rtsp格式的视频文章目录一、安装合适的浏览器二、安装VXG Media Player三、...原创 2020-04-20 22:12:24 · 16302 阅读 · 90 评论 -
.cur 图片加载提示 You may need an appropriate loader to handle this file type
最近一个gis 项目需要加载一个.cur的图标,但是编译时提示You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Sour...原创 2020-03-26 20:43:19 · 2899 阅读 · 2 评论