- 博客(66)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 mapbox filter
当使用图片时，icon1,icon2,defaultIcon要提前注册在地图中。let paintProp="icon-image" (图层属性名)let prop = 'name'(数据属性名)
2024-01-10 17:38:59
334
原创 云程低代码开发平台操作指南
只讲使用，不说感受，咱又说了不算1、创建应用首先要创建应用，可以按着功能模块划分应用，可以将应用设置为公共，这样可以在其他应用中访问到公共应用中的页面。2、应用中的菜单进入创建后的应用中，可看到如下页面...
2022-05-31 15:34:15
1575
4
原创 websocket及心跳检测
var wsUrl = "ws:************}://";function createWebSocket() { ws = new WebSocket(wsUrl); wsInit();} //初始websocket方法 function wsInit() { //关闭回调 ws.onclose = function (e) { //清除心跳 clearTimeout(heartCheck.timeoutObj.
2021-12-27 15:44:44
1756
原创 闪烁事故/火灾svg图
新建.svg文件，粘贴如下代码即可，该svg构成为一个闪烁的实心圆与两个闪烁的外圈环，其中circle 中cx,cy为圆心位置，r为半径，fill为填充色，opacity为填充色的透明度， stroke-width为边框的宽度，stroke-opacity=".7"为边框的透明度，style中animation:blink 10000s infinite 代表使用 @keyframes中定义的blink动画，持续10000s,infinite 无限循环，animation其他参数如下。animati.
2021-07-08 16:26:05
334
原创 leaflet 弹窗里添加点击事件
方案一：1、在每个marker的popup里添加相同class "detail-button" id（marker的id）不同的元素2、监听map 的popup open事件3、找到所绑定的detail-button元素4、为该deail-button元素添加事件，点击即可获取marker所设置的id //添加点marker addEventMarker(row){ if(this.eventMark ){ //移除上一个事件mark
2021-05-14 10:19:06
5235
7
原创 优化地图显示效率的几种方式
1、减少请求次数，做好缓存，请求过的数据可以不再请求2、分级请求，如在地图上加载大数据量时，可以在大级别下如18级及以上再进行请求，小于18级不予请求3、后台可直接返回jsonSting，减少返回数据量（简化字段），使用google的protobufjs...
2020-12-31 17:14:43
224
原创 拷贝数组的三种方法
let arr = [1,2,3,4];let copyArray=[];1、copyArray= Object.assign([],arr)2、for(let item of arr){ copyArray.push(item) }3、copyArray= arr.slice();
2020-12-29 19:45:02
432
2
原创 DOM API实现块级全屏
效果如下：原图全屏后效果，调用dome的requestFullScreen()方法。假设要放大id为"someSmallImage"的元素 vue 代码，纯页面手打，部分函数名称不对，主要是理解思路<div id="someSmallImage" @click="imageFullScreen"></div>imageFullScreen(){ let isFull = document.fullscreenElement || document....
2020-11-24 16:26:16
147
原创 javaScript忍者秘籍第二版优雅代码赏析
1、利用事件冒泡，监听表格设置单元格的点击效果创建唯一的处理器，注册到比单元格更高层级的 元素上，通过冒泡可以处理所有的单元格单击事件。我们知道单元格是 表格的后代元素，通过event.target即可获得被单击的元素。将事件处理 器代理到表格上优雅得多，如：const table = document.getElementById('someTable');table.addEventListener('click', function(event){ if (event.target.ta
2020-11-05 17:47:48
221
原创 canvas显示图片分辨率降低优化
canvas画布尺寸 cavas 标签上定义的height、weigth属性canvas显示尺寸 canvas style定义的height、weight属性图片像素渲染到canvas像素再到显示尺寸像素再到屏幕实际像素，这个过程会造成像素的抽稀和差值，这个过程导致照片模糊。可以把画布尺寸设置为与图片尺寸相同大小来解决。如图片尺寸为1920*1200，则把画布也设置相同尺寸<canvas height="1200",width="1920" id="m...
2020-11-04 16:15:01
2082
原创 vue 读取protobuf数据
//该篇文章只涉及读取后台返回的protobuf，不涉及传输。1、运行npm install protobufjs --save 安装2、拿到后台给的proto文件，在src里创建一个proto目录，用于存放proto文件及编译后的js文件3、运行命令npx pbjs -t json-module -w commonjs -o src/proto/proto.js src/proto/*.proto生成proto.js文件，如图4、引入protojs如 import proto...
2020-10-19 16:58:06
1110
原创 canvas在图片上画矩形框和点，并控制显隐
1、定义document canvas元素<canvas id = "image-canvas"><canvas id="rectangle-canvas" ><canvas id="point-canvas">2、画图片var imageCanva = document.getElementById("image-canvas"); //获取canvas元素var imagectx = imageCanva.getContext('2d'); ...
2020-08-07 10:54:44
2428
原创 js获取后台传入的图片
1、以二进制流格式请求 responseType:'arraybuffer'2、处理二进制流 btoa(new Unit8Array(data)).reduce((data,byte)=>data + String.fromCharCode(byte),''));最终得到图片路径 'data:image/png;base64,' + btoa(new Unit8Array(data)).reduce((data,byte)=>data + String.fromCharCode...
2020-08-07 10:21:20
1351
原创 element select 下拉数据滚动分页且可搜索
由于下拉项过多，加载速度过慢，所以采用下拉加载方式，同时搜索改为后台搜索，其中remoteMethod就是后台搜索绑定的方法，后台搜索时输入框无法判断是搜索还是选中，所以使用multiple 并且:multiple-limit="1"<el-form-item id="loadMoreSelect" :label="下拉" style="width: 100%;"> <el-select :placeholder="请选择" v-model="selectedUse.
2020-07-07 14:26:35
6264
4
原创 分段分颜色的进度条
这是一个自己写的进度条组件<template> <div style="display: flex;margin-top:33px" v-show="countNum"> <div class="process-content" ><!--顶部内容显示，标题头，数目--> <span style="font-size: 14px">{{processTitle}}</span>&.
2020-06-05 16:11:36
2863
2
原创 el-cascader级联实现一级菜单单选，二级菜单多选
主要是把逻辑搞清楚，实现起来容易了，主要思路就是把当前选中与上次选中做对比，使用了多选multiply属性，这个属性下，选中的数据结构为：一级为length1的数组，二级为length2的数组 <el-cascader class="cascader" v-model="shareScope" @change="shareScopeChange"
2020-05-16 17:46:44
13400
3
原创 element confrim添加自定义标签
const h = this.$createElement; this.$confirm( 提示, { title: that.$t('confirm.information'), message: h('div', null, [ h('span', null, '删除'), ...
2020-05-15 18:26:28
449
原创 Cesium primitive 多种线元素，选中变色，且只有一条变色
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { var pickedFeature = viewer.scene.pick(movement.position); if (typeof (pickedFeature) != "undefined") //鼠标是否点到线上 ...
2020-02-26 16:33:52
2349
4
原创 element-ui条件rules
<el-form-item prop="name" :rules="this.id==1?rules.name:[{ required: false, trigger: 'blur' }]" :label="姓名" :label-width="100px" ...
2019-06-13 10:11:40
7466
原创 下载后台传输的数据
// 下载方法 download(data, filename) { if (!data) { return; } let url = window.URL.createObjectURL(new Blob([data])); let link = document.createElement("a"); li...
2019-06-11 17:47:33
449
原创 vue 强制刷新
1、在要强制刷新的父组件中注册reload方法reload() { this.isRouterAlive = false this.$nextTick(function() { this.isRouterAlive = true console.log('reload') })},控制router-view的显示与隐藏<router-view v...
2019-05-30 18:07:54
3741
1
原创 利用vue-i18n中英文切换实现国际化，及从后台读取配置文件国际化解决方案
控制整个系统的中英文或其他语言显示，大概思路就是就是要把整个系统显示的中文对应的英文全部翻译一遍，然后写定key，根据配置的中英文属性，拿value。1、npm installvue-i18n --save 安装依赖2、编写语言文件，我放在这里，en.js为英文配置文件，zh.js为中文配置文件，en英文配置文件部分截图，对应的zh中文配置文件截图3、在main.js里面引入v...
2019-05-30 15:42:10
5710
9
原创 父组件调用子组件的方法以及子组件调用父组件的方法
一、父调用子需求，新增页面的某个字段的select要根据父组件的某个值确定，并且需要在打开页面时就已初始化好。1）首先在子组件中写好方法methods:{ getOption(Strategy){ if(Strategy){ if(Strategy==3){ this.Options=[{value:'3',name:'大象'}] } ...
2019-04-10 17:50:01
2577
原创 google升级后记住密码输入框的颜色变蓝
颜色还好，也可以考虑不修改，如果实在看不下去可以加入.el-input__inner{ -webkit-box-shadow: inset 0 0 0 1000px #fff!important;}意思是在google浏览器中向内加入水平、垂直偏移量、模糊距离均为0，尺寸为1000px的阴影。...
2019-03-27 14:44:34
332
原创 列表页访问详情、编辑后返回列表原位置且列表数据刷新
最近bug改的头都大了，男bug和女bug实在是太刁钻了！！！！背景：某个风和日丽的清晨，我一早打开禅道，看到女bug给我提了一个从列表访问详情，返回列表后希望还在原位置的bug。解决方法：首先在router里配置meta{ //list管理 path: '/home/list', name: 'Catalogmanage', component: r...
2019-03-20 11:49:09
2778
原创 根据文件扩展名导出文件
新建一个a标签，根据后台返回数据赋值给href,然后触发点击a事件。exportData(id) { axios .get(config.DOWNLOAD_FILE + "/" + id, { //url: 接口地址 responseType: `arraybuffer`, //一定要写 headers: { Authorizat...
2019-02-28 14:20:04
191
原创 工作中遇见的正则表达式
//只能使用字母、数字、符号3个（- _ .） reg = /^[a-zA-Z\d\.\-\_]*$/;//字母开头，只包含字母,数字,有且只有一个.reg = /^[a-zA-Z][a-zA-Z\d]+[\.][a-zA-Z\d]*$/;//最小长度6，最大长度20，且至少有一个字母、数字、!@#$%^&*() 中的一个var numreg=/^(?=.*...
2019-01-14 17:11:27
129
原创 解决用户未登陆，输入IP地址仍能访问静态页面的问题
解决办法就是，判断用户的登陆状态，如果没有登陆，将路由强制转换到登陆页，在router/index.js的登陆路由配置中写入 routes: [{ path: '/', name: 'LoginIn', component: resolve => require(['../pages/login/Login.vue'], resolve) }...
2018-12-24 11:25:59
698
原创 解决js异步问题
万恶的后台搞了三个级联接口返回数据，让我自己拼成一个级联，搞了一天，发现它这个接口简直不忍直视，遂奋起反抗，勒令其重写接口。不过一天的纠结，并不是没有收获，get到了promise可以解决js异步的问题。用promise.then（）解决了使用axios无法返回参数的问题。用法如下。新建一个Promise构造函数，然后将这个构造函数返回export function getPart1(...
2018-12-24 10:42:50
701
原创 Vue 列表页table点击跳转详情页后返回列表页table变色
需求：列表跳详情后，返回列表页，所有点击过的列表项变色；实现：一、将跳转的列表信息存储在sessionStorage里 二、返回列表的时候，取出sessionStorage信息，给table附样式代码：在详情页获取传递过来的行id,并存储在sessionStorage里，写在vue 的mounted里，注释已经很全了mounted(){ var i...
2018-12-07 14:21:47
2842
原创 vue axios 导出excel
exportExcel() { var _this = this; axios({ method: "post", url: config.EXPORT_EXCEL + this.$store.state.userId, //接口地址 data: {range: _this.range, apiNa...
2018-11-24 13:40:58
1342
原创 vue 多个标签切换变色
需求：多个标签切换改变颜色 <span v-for="(list,index) in randOptions" class="seach-all" :class="{seachchange:changeblue==index}" @click="changeColor(index,list.text)">{{list.text}}</span&g
2018-11-21 16:42:19
3299
原创 element table自定义样式
现有需求如下表头的下边框为默认实现，除表头外的下线框为虚线，并且第一列的数据有下划线element ui 官网提供了各种方法http://element-cn.eleme.io/#/zh-CN/component/table其中:cell-style可以自定义单元格的样式，可以在定义表的时候写入 <el-table :data="tableDa...
2018-11-20 17:23:37
5624
原创 Vue 样式切换及三元判断样式关联
假设有需求：后台返回状态1:启用，0：禁用1、若要使启用为绿色，禁用不添加其他样式 <el-table-column prop="statusName" align="center" label="状态"> <template slot-scope="scope">
2018-11-14 14:51:05
8152
原创 element 自定义验证及验证同时在规则里为字段赋值
有时候element的表单验证无法满足我们都的需求，我们就需要写自定义验证。现有如下需求，需要验证某个输入的字段是否含有不位于首尾的“.”字符，同时在末尾加上字符串“哈哈哈”，实现：使用element自定义的自定义验证，首先在页面中写入<el-form status-icon ref="subform" class="demo-ruleForm" :model="subf...
2018-11-13 18:27:01
2842
原创 电脑上找不到C:\Users\Andminster\AppData文件夹的解决办法
当电脑上找不到这个文件夹时，其实是被系统隐藏起来了。我们可以进行设置让其显示出来。具体操作如下（以win7系统为例）1、打开资源管理器，点击左上角的组织，点击组织下的文件夹和搜索选项2、在对话窗口中选中“查看标签”找到“隐藏文件和文件夹”选择显示隐藏的文件设置完后回到资源管理器中就可以找到了，显示文件扩展名的选项也在这个标签里哦！ ...
2018-11-07 09:59:47
24636
原创 如何利用经纬度坐标生成矩形，生成wkt格式数据并获得面积
1、假设有点lon1 = 121.34455;lat1 = 77.23233;lon2=124.232323;lat2=79.454545;首先用这两个点建立一个矩形,var geometryPolygon = new ol.geom.Polygon(null);geometryPolygon.setCoordinates([[lon1,lat1],[lon1,lat2...
2018-09-19 16:30:34
7335
3
原创 vue中利用openlayers加载天地图
首先在vue中安装openlayes依赖，现在推荐使用ol，ol需要一个一个的引入，我嫌麻烦就直接用的openlayers，我把openlayrs定义为全局变量，下载完openlayers依赖包后，在main.js里面引入，import ol from 'openlayers;然后设置成全局属性Vue.prototype.$ol=ol;使用ol时，只需要使用this.$ol就可以了...
2018-09-19 14:53:17
12574
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人