- 博客(49)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 el-upload 多文件上传
uploadResourcesFile.vue的封装<template> <div v-loading="loading" class="upload-file-panel" element-loading-text="上传资源比较大，请耐心等待..."> <el-upload ref="upload" :action="action" :file-list="fileList" :data="paramsData" :on-c
2021-07-29 10:25:32
850
原创 React native 收起键盘
// 引入import { Keyboard} from 'react-native';// 在需要隐藏键盘的方法中，加入如下代码即可实现键盘隐藏Keyboard.dismiss();
2021-07-13 11:55:49
786
原创 React Native 连续点击两次返回键，退出APP
在app.js中添加如下代码即可：import { Platform, BackHandler, ToastAndroid} from 'react-native';const lastBackPressed = Date.now();export default class App extends Component { .... .... .... componentWillMount() { if (Platform.OS === 'andro
2021-07-13 08:41:23
417
原创 React Native AsyncStorage 实现 APP 登录后，杀死APP进程后，不用再次登录
这两天体验已上线的APP发现，不管APP是否是登录状态，只要杀死APP的进行，就必须重新登录。再体验一下淘宝APP，完全不需要登录。于是乎，便请教了下百度老师，经过一番折腾，我的APP也有此功能啦。故分享出来，供大家参考和指导一、用AsyncStorage存储登录后的用户信息login = () => { const { loginName, loginPassword } = this.state; if (!loginName) { Toast.message('
2021-07-13 08:33:17
875
2
原创 js 常用工具类/方法
/** * @desc 金额格式化 * @param s 金额 * @param n 保留的小数位数 * @return {String} */function formatMoney(s, n = 2) { if(s){ n = n > 0 && n <= 20 ? n : 2; s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + ""; let l
2021-04-13 11:13:50
1063
1
原创 nginx安装配置 Windows
1、下载nginx访问nginx的官网 https://nginx.org/en/download.html，下载windows对应的最新nginx压缩包，解压到自己电脑上存放软件的文件夹中即可解压完成后，文件目录结构如下：2、启动nginx注意：一定要在dos窗口启动，不要直接双击nginx.exe，这样会导致修改配置后重启、停止nginx无效，需要手动关闭任务管理器内的所有nginx进程，再启动才可以用dos命令，进入nginx的存放目录，并启动，如本人电脑的nginx存放目录为D:\Ri
2021-04-08 11:04:29
172
原创 leaflet 绘制带箭头的线条（路径）
最近接到项目需求，需要在网页上实时展示APP用户巡检的轨迹，这个需求很简单，直接用leaflet画polyline就可以满足；很快便出了一版效果很项目经理，但是项目经理一看，说：这个和百度地址的路径展示差距太大，要求实现的效果和百度地图一样。OK，经过请教百度老师，发现leaflet的polylineDecorator可以满足此需求。经过实践，效果还不错，故分享出来，供参考和指导。1、引入 leaflet.min.js 和 leaflet.polylineDecorator.js访问polylineDe
2021-03-30 09:56:33
7271
8
原创 删除pm2日志
1、手动删除pm2日志pm2 flush2、自动删除pm2日志pm2 install pm2-logrotate // 注意是pm2 install而不是npm installpm2 set pm2-logrotate-ext:retain 7 //保存7个文件pm2 set pm2-logrotate-ext:max_size 100M //每个备份文件大小为100Mpm2-logrotate有很多其他的配置项，具体可参考 npm官网，pm2 logrotate...
2021-03-15 11:29:25
1983
原创 canvas绘制直线并跟随鼠标旋转
效果 575cfbd85796103288ea12cc5fa3ac71 1、canvas及全局变量定义<canvas id="chartCanvas" class="chartCanvas"> 你的浏览器不支持canvas，请升级你的浏览器</canvas> var canvas = document.getElementById('chartCa
2021-03-05 14:25:54
1432
3
原创 cesium 入门学习之二：搭建cesium开发环境
1 、读入数据新建文件夹cesium_test把上一节cesium目录下的Build文件夹拷贝到cesium_test文件夹中把上一节cesium，Apps目录下的HelloWorld.html修改HelloWorld.html中js和css的引用路径2 、全局安装http-server直接在浏览器打开cesium_test目录下的HelloWorld.html文件，是会报错的；这是因为cesium无法直接在浏览器上运行，它需要依赖服务器，本人选择node.js的http-server库作
2021-01-29 16:45:43
579
原创 cesium 入门学习之一：运行cesium，展示3D地球
一直都想研究下cesium，今天终于实际行动起来，开始码代码，经过一番折腾，成功展示出3D地球，故分享出来1、下载cesiumcesium的运行时依赖node.js环境，所以小伙伴们需提前装好node.js，这里就不教大家怎么装node.js了；另cesium不同的版本对node.js的版本要求是不同的，由于本人电脑node.js的版本为8.9.3,故选用Cesium-1.70版本github下载地址在github上找到对应的版本下载，下载完成后解压，进入到该文件目录，打开cmd窗口，输入命令，np
2021-01-29 16:33:24
1252
原创 vue iframe嵌套html页面,并向html页面传递参数
今天接到一项目需求，需要在vue页面展示3D标签效果，想着摆脱eslint，就把3D效果写成html页面，在vue页面，通过iframe嵌套去完成。这样，效果是可以展示出来了，但是由于3D效果初始化的时候需要设置宽度和高度，故想着传参的形式，把包裹iframe容器的高度传给html页面，几经尝试，发现在vue中，像iframe页面传递参数，需要用了@load，故记录下来vue代码<div class="cloud-content" id="cloudContent" <iframe
2021-01-19 16:24:01
2713
5
原创 js 数组 sort方法无效解决方案
今天在码代码的时候，一个简单的数据sort排序竟然为难了我半个小时，先上无法排序成功的代码handleSort(sortType) { this.sortType = sortType; if(sortType === 1){ this.menuRightList.sort((a, b) => { return a.count < b.count; }); }else{ this.menuR
2021-01-14 16:24:37
1767
5
原创 el-upload单文件上传
1. 上传文件组件封装 UploadResourcesFile.vue<template> <div class="upload-file-panel" v-loading="loading" element-loading-text="上传资源比较大，请耐心等待..." > <el-upload class="upload-demo" ref="upload"
2021-01-08 10:26:17
1033
原创 leaflet 清空地图上绘制的marker
1. 在data属性中定义layerGroup、map变量data() { return { layerGroup : null, map : null, };},2. 在地图上显示markerdrawWaterStMarker(arr){ // 如果地图没有加载完毕，则返回 if(!this.map){ return; } // 清空地图上已存在的站点 if(this.layerGroup !== n
2021-01-08 10:06:37
3409
1
原创 leaflet 点击地图marker，popup弹框展示chart图效果实现
1.leaflet绘制地图marker,添加点击事件drawWaterStMarker(arr){ // 如果地图没有加载完毕，则返回 if(!this.map){ return; } // 清空地图上已存在的站点 if(this.layerGroup !== null){ this.layerGroup.clearLayers(); } // 如果站点数据为空则返回 if(arr.length === 0){
2021-01-08 10:00:18
5486
14
原创 vue 播放.aac格式的音频文件
代码 data() { return { audioUrl : 'http://192.168.50.122:8080/test/test.aac' } } <audio controls="controls"> <source :src="audioUrl" type="audio/mpeg"> </audio> ....效果...
2020-12-17 16:04:53
1395
5
原创 React-Native 环形进度条组件 react-native-circular-progress
先上效果图实现在RN中，要实现环形进度条效果，一般都是需要借助chart图实现；最近做RN项目，经过折腾，发现react-native-circular-progress这个组件几乎能完美的解决。故分享出来，废话不多说了，直接上代码1、react-native-circular-progress组件Circle.js的封装import React, { PureComponent } from 'react';import {StyleSheet, View, Dimensions} from
2020-12-17 15:42:09
2207
原创 leaflet+geoJSON实现绘制区域边界和边界高亮效果
先展示下效果图：具体代码如下：geoJSON绘制边界initNewMap(){ var myStyle = { "color": "#00f", "weight": 2, "opacity": 0.5, "fillColor": 'red', "fillOpacity": 0, }; let JsonUrl = 'http://192.168.37.129:22221/assets/images/
2020-12-04 10:44:28
6455
13
原创 使用react-native-video播放直播视频流
最近做RN项目，需要在APP端播放直播视频流，对比过很多插件，最终选择了react-native-video，npm地址，然而在使用过程中，还是尝试了多次，才实现了播放直播流的功能。温馨提示：如果你的react-native版本是0.5之内的，那么建议使用react-native-video的3.2.1这个版本的npm包，否则会出现很多奇怪的报错，我也是经过多次尝试，最终总结出的经验文章目录一、安装react-native-video二、配置1. 配置android/app/build.gradle2
2020-12-04 10:21:34
4127
2
原创 Leaflet加载、删除dynamicMapLayer动态图层
let url = 'http://gis.rwworks.com:6080/arcgis/rest/services/danjiangkou/tudizhengshouxian/MapServer'; const testLayer = L.esri.dynamicMapLayer({ url: url, opacity: 1 }) testLayer.setZIndex(999); this.map.addLayer(testLayer);
2020-11-30 14:34:41
1182
原创 leaflet地图叠加瓦片图层
let url = 'http://gis.rwworks.com:6080/arcgis/rest/services/danjiangkou/tudizhengshouxian/MapServer'; const testLayer = L.esri.tiledMapLayer({ url: url, opacity: 1 }) testLayer.setZIndex(999); this.map.addLayer(testLayer);
2020-11-30 14:32:09
1952
原创 Navigation.navigate页面跳转报错解决方案记录
react-native Navigation.navigate页面跳转报错：Undefined is not an Object（evaluating this2.props.navigation.navigate)…解决方案最近做RN项目，项目菜单是通过侧滑栏全局配置效果实现，但是在点击侧滑栏菜单项时，却始终报标题所示的错误提示，经过一系列网上查阅和实践，终于搞定，故记录下来调用侧滑栏组件时，传递navigate<SlideMenu navigate={this.props.navig
2020-11-30 14:01:54
1866
原创 vue-video-player播放 hls(m3u8)视频流
一、组件封装<template> <div style="width:100%;height:100%;" ref="videoContainer"> <video-player class="video-js vjs-big-play-centered" ref="myPlayer" :options="playerOptions" v-show="cont
2020-11-17 10:21:31
2616
2
原创 vue-video-player，切换页面时控制台报错：TypeError: this.el_.vjs_getProperty is not a function解决方案
备注：最近项目中，用vue-video-player播放rtmp流，在切换面时，控制台一直报错：TypeError: this.el_.vjs_getProperty is not a function；网上找了很多方案，都没能成功解决；最终，经过反复试验，终于彻底解决了报错问题，想将代码分享出来 <video-player class="video-js vjs-big-play-centered" ref="myPlayer" :options="player
2020-10-28 09:52:24
1058
原创 webpack项目 vue-pdf引入报错 window is not defined
webpack项目 vue-pdf引入 控制台保存 window is not defined解决方案webpack.config.js中，output添加如下一行代码：module.exports = { .... output: { globalObject: "this" } ....}重启项目，刷新浏览器即可
2020-10-12 17:55:53
1381
原创 echarts markline X轴 Y轴 添加标识线
一、X轴添加标识线效果：代码：markLine: { symbol: ['none', 'none'], itemStyle: { normal: { lineStyle: { type: 'dashed', color: 'red', }, label: { show: true, position: 'end', dist
2020-10-12 11:48:40
4828
6
原创 css nth-child用法
选择第一个元素 :first-child li:first-child{ color : red; }选择最后一个元素 :first-child li:last-child{ color : red; }选择非最后一个元素 :not(:last-child) li:not(:last-child){ color : red; }选择偶数行元素 :nth-of-type(odd)或:nth-child(2n) li::nth-of-type(o.
2020-10-12 09:06:27
630
原创 RN 常用标签属性集合
文章目录一、文字省略号 numberOfLines二、图片大小控制 resizeMode该篇主要记录在react native开发中，标签常用的一些属性，会持续更新一、文字省略号 numberOfLinesnumberOfLines={number} 其中number表示超过多少行时显示省略号，如<Text numberOfLines={1} style={[styles.itemRightLetter]}> 在文字长度超过一行时，便显示省略号</Text>二
2020-09-11 16:28:46
1049
原创 js 数组、对象的浅拷贝、深拷贝
文章目录一、数组的浅拷贝1. 数组内的元素不是对象或数组1. 数组内的元素是对象或数组二、数组的深拷贝三、对象的浅拷贝四、对象的深拷贝一、数组的浅拷贝1. 数组内的元素不是对象或数组如果数组内的元素不是对象或者数组，那么浅拷贝通过数组的slice()或concat()方法即可完成例如：var a = [1,2,3,4,5,6];var b = a.slice();console.log(b);a[0] = 11;console.log(a);console.log(b);1. 数组
2020-09-10 15:03:15
187
原创 canvas 鼠标点击绘制任意多边形、鼠标拖动改变形状
文章目录前言一、通用代码封装二、canvas类的封装1.定义类2.初始化3.初始化鼠标事件3.鼠标事件处理4.绘制多边形及顶点总结前言本文主要介绍如何通过鼠标点击绘制任意多边形，以及通过鼠标移动改变多边形的形状一、通用代码封装 class Point { constructor(opts = {}) { this.x = opts.x || 0; this.y = opts.y || 0; } }const
2020-09-09 14:11:27
4277
10
原创 vue-video-player 浏览器缩放
文章目录前言一、vue-video-player的封装二、调用1. 引入2. vue template代码2. 主要js代码效果前言 此篇是在上一次《[Vue 播放rtmp直播流]》基础之上的更新及补充；近期接到客户需求，需要在视频流上显示额外的信息；当然，视频流上叠加信息可以通过canvas来完成（透明canvas实现），但是在测试的过程中发现，当浏览器缩放时，叠加的图层信息与初始化的时候会产生错位及偏移，这主要是由于，默认情况下，视频流显示大小会随着浏览器的缩放而自动调整大小，但图片确实固定的；.
2020-09-07 14:33:32
2328
原创 native-echarts的使用
文章目录前言一、安装native-echarts二、使用步骤1. tpl.html的配置2. 修改source源，以便打包后chart图能正常显示3. 调用并显示chart图4. 效果图前言近期接到客户一需求，要在chart图上展示markLine标线，由于RN项目使用的chart图展示插件为：react-native-charts-wrapper，该插件没法实现此功能，只好另寻方案，试过使用webView实现此功能，但实际运行却经常白屏，故废弃，综合对比，选用了native-echarts来实现此功
2020-09-02 15:25:22
1919
原创 卸载并重新安装pm2 linux
卸载并重新安装pm2今天部署项目到linux服务器，使用pm2启动项目，但一直无法正常启动，使用pm2 log 命令查看，提示node_modules包有问题，但提示的node.js版本和软链接的并不一致，经询问后台，才知道，他们之前在这个服务器安装过node和pm2，最后又简单替换了node和pm2…于是乎，就需把目前部署的pm2删除掉，但通过npm uninstall pm2是无法删除的，经过实践，确定以下方案可以，故粘贴出来# 删除rm /usr/local/bin/pm2 rm -r /us
2020-08-26 17:01:46
10465
转载 leaflet移除除底图外的所有图层
map.eachLayer(function (layer) { if (!layer._container || ('' + jQuery(layer._container).attr('class')).replace(/\s/g, '') != 'leaflet-layer') { layer.remove(); }});原博客链接
2020-08-21 16:44:02
2804
canvas绘图任意矩形、多边形
2020-10-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人