- 博客(74)
- 收藏
- 关注
RSS订阅原创 vue3+高德地图(或echarts)+turfjs实现等压线,色斑图(用于显示气象,环境等地图场景)
首先是turf.js(英文官网),也有中文网不过也就目录翻译了一下.高德官网自行获得key使用turf的isobands api实现.数据: 需要准备geojson格式经纬度信息+业务值(比如温度,高度,光照只要是number值什么数据都可以)国内各地区geojson数据点这里获得我这个是贵州的实例业务值 使用的是随机值<style scoped lang="scss"> .About{ height: 100%; width: 100%; positi
2024-04-11 17:03:40
823
1
原创 vant ui中 pullRefresh+list与tabs相结合使用导致一直触发load的一种比较简单的解决办法
办法: `不把van-pull-refresh以及van-list放在van-tab标签当中`其原因可能是在tab里定位 触底判断有问题
2022-11-02 15:18:23
918
原创 微信小程序 在自己封装的js中做到跳转到任意页面
首先因为微信小程序的路由跳转 都是相对路径 如果直接写pages/index/index 会在跳转时加上当前页面的路径 比如pages/my/my/pages/index/index所以需要使用微信小程序提供的getCurrentPages()(这个方法是已经加载的页面)来实现// 跳转回index页function skipIndex(params) { const pages = getCurrentPages() // 获得所有的加载页面 const currentPage = p
2022-03-25 10:00:41
1133
原创 实现等待wx.login完成后在执行其他请求
wx.login以及wx.request不支持async 和 await通过Promise封装getCode(e){ return new Promise((resolve, reject) => { wx.login({ success: res => { //发起网络请求 console.log('login success',res) app.globalData.WXCode = res.
2022-03-23 14:18:18
1048
原创 [ app.json 文件内容错误] app.json: [“usingComponents“][“van-button“]: “@vant/weapp/button/index“ 未找到
我出现这个原因是 按照官网( https://vant-contrib.gitee.io/vant-weapp/#/quickstart 快速入门一步一步走)最后导入的路径 好像在我这不对我自己改成就能用了
2022-03-09 14:56:05
3130
6
原创 wgt包更新时会下载但是不会安装
我遇到的 这个bug是因为生成wgt包时manifest.json中的appid与需要更新的app的appid不一致,导致代码认为不是一个应用这个appid是固定的 并且 不同的账号申请的appid不能跨账号公用需要添加成协助者 https://ask.dcloud.net.cn/article/12859 或者转让https://ask.dcloud.net.cn/article/12861...
2022-02-18 16:49:01
564
原创 echarts的dataZoom属性在移动端 h5+环境中无法左右滑动问题
问题很迷 解决方法也很迷dataZoom属性即使只有一条也要传入数组[] 不能直接传入对象{}// 这样不行dataZoom:{ type: 'inside', start: 0, end: 50,},// 这样就没问题dataZoom:[ { type: 'inside', start: 0, end: 50, }],...
2022-01-11 10:28:49
3092
3
原创 echarts柱状图x轴 label一行超过设置的字数换行
在echart官网找了好久只能倾斜 但有的时候倾斜也放不下所有的字幸好echart提供了formatterxAxis: [ { type: 'category', data: ['啊啊啊啊阿', '不不不不不不不', '啛啛喳喳错错错'], axisLabel: { fontSize: 11, // 更改显示文字显示形态 让他每三个字符就换行
2022-01-10 15:50:03
2652
原创 微软在线office online 使用时遇到的一些问题
首选微软的office online使用的是路由https://view.officeapps.live.com/op/view.aspx?src=地址的方式在线预览的office online 并没有对h5+ 和 app 的版本如果是app内嵌可能会有无法缩放的问题我是直接跳转手机内置浏览器 来使用的然后就是An error occurred We're sorry, but for some reason we can't open this for you. Learn more我这出现这
2021-12-30 12:33:06
8958
11
原创 微信公众嵌套页面里再嵌入其他页面的一些问题
我们这的需求就是 要在微信公众嵌套入的h5+页面里在嵌入一个页面 并且那个页面还需要有一些跳转到(打开手机)浏览器的操作我第一反应就是写一个plus.webview直接嵌入但是写完发现不行微信公众根本就带不开我写的plus.webview应该是就不支持webview嵌入iframe+postMessage因此我选择iframe+postMessage的方法选择这个方法的原因就是iframe是无法让iframe内部的顶级对象是没有 plus对象的 就算父级有也不行因为我的业务要求就是能获得ifr
2021-11-25 14:56:41
831
原创 js 将video的第一帧 转为图片
是通过video和canvas两个html5的标签实现的首先在缓存创建这两个标签let canvas = document.createElement('canvas')let video = document.createElement('video')然后就是video标签要让他播放并且要静音// 自动播放video.setAttribute("autoplay",'autoplay')// 静音video.setAttribute("muted",'muted')// 为了保险 我
2021-11-19 16:33:58
2417
原创 vue中使用的v-model在使用正则时不能正确读取值的问题(正则通过 oninput的方式写的)
使用了element组件问题代码<el-input v-model="ContractYear" oninput="if(value.length>2)value=value.slice(0,2);if(value.length > 21)value = value.slice(0,20)" style="display: inline-block" placeholder="年份（数字）" clearable :style="{width: '20%'}"></el-i
2021-11-02 16:50:27
1431
原创 vue使用Echart跟随窗口大小改变而重新绘制时出现读取窗口大小不及时的问题
通过原生自带的window.onresize监听窗口大小 + Echart自带的冲渲染函数.resize()刚开始我改变大小时 感觉挺好 但是我一点窗口最大化就开始出现问题 他没有时时根据窗口大小改变而是跟进上一次的大小改变的我找了好久才想到是不是执行循序的问题 就加了个 定时器setTimeout 发现加上后就正常了 确实可以<div> <div ref="FileNumEchartMain" :style="{width: this.EchartWidth + 'px
2021-10-28 10:46:32
597
原创 vue中让字符串能识别换行符 \n
在标签的style中添加white-space:pre-line;<span style='white-space:pre-line;'>{{'aaaaaaa \n bbbbbbb \n ccccccc'}}</span>
2021-09-26 13:23:20
1423
原创 我在项目中用到的vue FullCalendar的内置函数以及配置项
<FullCalendar v-if="isLoadingSucess" :class="[$style.calenderDetail]" :options="calendarOptions" ref="FullCalendar"/>// 切换到下一月/周/日this.$refs.FullCalendar.getApi().next()// 切换到上一月/周/日this.$refs.FullCalendar.getApi().prev()// 跳转.
2021-09-17 10:21:29
1064
原创 vue中使用FullCalendar日历组件
官方地址:https://fullcalendar.io/官方vue文档(比较简洁而且是英文的):https://fullcalendar.io/docs/vue中文文档(jquery版本)地址:https://www.helloweba.net/javascript/445.html目前没有vue的中文文档在vue中安装fullcalendarnpm install --save @fullcalendar/vue @fullcalendar/core在项目中使用fullcalendari
2021-09-15 09:58:22
3373
4
原创 iconfont矢量 在已经有的情况下新增图标
首选去https://www.iconfont.cn/寻找自己想要的图标然后到这里 一般情况下不要直接下载 点击添加至项目(没有就新建一个,就相当于一个收藏夹)点击确定 只有会跳转到我的项目页面在里面 可以对刚刚添加进来的矢量图进行修改 点击这里这里需要修改是因为 咱们是追加新的矢量图 可能会遇到 Unicode(16进制)码跟已经存在的图标重复的情况 这时咱自己避开已存在的矢量图的 Unicode(16进制)码这个Unicode(16进制)就是在下载后的iconfont.css文件中
2021-09-06 10:58:09
307
原创 element el-table加入固定列时 滚动条无法移动 失效的情况
其原因是因为固定的列的高度过高 覆盖了滚动条 导致 点击到的元素并不是滚动条这个是我们只需要修改一下 固定列的高度让他把滚动条漏出来就行// 我这里用的是stylus(类似于less的css预处理语言) 通过计算出来的正常高度 再减去一点就能漏出来了>>> .el-table__fixed { height: calc(100% - 18px) !important;}...
2021-08-27 09:42:07
1683
原创 vue keep-alive缓存页面切换后不触发created等用什么检测页面切换
首先是使用actived钩子函数,这个函数能够检测到keep-alive缓存的页面的切换actived(){ this,init();}其次如果是用router路由切换时时,如果没触发的actived,用beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave守卫钩子函数试试// beforeRouteEnter 组件实例在这时还没被创建 就是this还没有 需要用vm代替beforeRouteEnter (to, from, next) {
2021-07-21 15:30:05
945
原创 vue-seamless-scroll在小米手机上显示不正常 显示出两行的问题
起因是 本来设置vue-seamless-scroll进行一行的向左循环滚动 但是在小米手机上他却显示了两行而且 并不是无缝滚动网上查了好长时间没得到解决办法只好自己分析 首先是vue-seamless-scroll是通过生成一个跟数据一毛一样的一个内容区 两行轮播并且是基于float:left 让两行变为一行的 但是他的问题就是需要宽够才能到一行所有 出现两行 可能是因为 他的宽度计算的不正确基于这个思路我添加了一个99999px的宽度.swiperWidth{ >div{
2021-07-06 10:42:10
966
1
原创 js中Date,计算日期,当前日期前多少天的日期 两个日期相减或相加,根据传入的当前时区时间计算对应的北京时间
首先要给Date内置函数添加一个方法用于格式化时间// 扩展date的时间格式化Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+"
2021-07-01 11:24:52
1864
原创 vue 手写 移动端 左右滑动 防止上下滑动冲突 超过宽度一半切换
原理是通过touchstart touchmove touchend三个事件配合transform属性实现<div ref="mattersContent" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="{transform: 'translateX('+translateX+'px)',transition: transition+'s',white-space: 'nowrap'}">
2021-06-16 14:00:19
1372
原创 vue的v-model绑定对象属性时,更新不及时,不能修改
在vue中如果v-model绑定的是对象的具体的属性,并且在data中之声明了对象 没有声明绑定的属性时,v-model是不能实时刷新的就像下面这样<template> <el-input v-model="obj.text" type="textarea" placeholder="请输入多行文本"> </el-input></template><script>export default { data() { retur
2021-05-28 16:58:50
1923
原创 vue输入空格符 以及空字符串在页面不显示或者只显示一个的问题
其实没有不显示的情况,都是显示一个其原因是vue2.6版本升级之后页面template中的换行和空格都被过滤了,不管打印多少都会只打印一个想要打印多个空格可以通过vue的指令v-html实现 <span v-html="'嗨 嗨'"></span>并且注意使用v-html的标签不能再输入内容,就算输入也会只显示v-html中的内容...
2021-05-18 14:17:55
3150
1
原创 node soket.io + express + vue-soket.io 之间实现通信
因为vue和node服务器之间是会使用不同的两个端口 后端的soket.io不能靠自己就能实现前后端通信vue中提供了一个vue-soket.io 和 proxy代理 通过这两个就能实现连接到后端的soket.io后端要导入 soket.io模块vue中要导入 vue-soket.io具体代码前端首先是在vue脚手架启动的项目中会有一个config文件夹这个文件加下的index.js在这个文件的module.exports 中dev当中添加proxyTable: { "/socket
2021-03-12 19:04:04
170
原创 js模拟实现Array的Map、Every、Some、Reduce、Find方法
Array.prototype.myMap = function(callback){ var newArr = [] for(var i = 0; i<this.length; i++) { // this 是arr // 当前循环的元素放到自定义的函数中 进行运行并且 吧返回的结果放到新数组的对应索引 newArr[i] = callback(this[i], i, this) // this[i]是当前的元素 i是当前的索引 console.log('ca
2021-01-04 20:13:37
304
1
原创 nodejs的PM2进程管理
PM2PM2 node.js进程管理工具(npm i pm2 -g)守护进程： 服务挂掉后自动重启多进程：更好的里有cpu和内存PM2使用启动服务在package.json的scripts中添加'prd':"cross-env NODE_ENV=production pm2 start bin/www"意思是在执行cross-env模块的 npm run prd命令时 使用pm2 来启动 bin/www常用命令pm2 list #打印当前服务的信息列表 比如（App name,id,v
2020-12-27 11:53:19
262
原创 KOA中的ejs的基本使用
ejs服务端模板引擎ejs文件也可以使用script标签 来写js内容在koa中使用ejs先导入和注册const views = require('koa-views')app.use(views(__dirname + '/views', { // 这里已经说明的使用ejs模板的文件是哪个了 在后面只需要说明文件名 extension: 'ejs'})) // ejs注册然后通过render在路由中返回ejs需要的内容和数据 比如变量router.get('/', async
2020-12-20 08:56:45
759
1
原创 REST基本概念
REST（Representational State Transfer）GitHub上的REST API是相当标准REST风格Representational ：数据的表现形式（JSON，XML…）,rest对数据不做任何限制，但是用的最多的是jsonState：当前状态或者数据Transfer：数据传输是万维网软件架构风格 不是什么硬性规范用来创建万维网网络服务的REST的六个限制 规范客户-服务器（Client-Server）服务端专制数据存储，提升了简单性前端专注用户界
2020-12-14 17:14:58
238
原创 在用v-for时又想用v-if进行判断是否生产内容
如果将v-for和v-if写在一个标签内会直接报错The 'undefined' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'需要添加<templat>将v-for写在template中<template v-for='(
2020-12-02 09:25:49
534
原创 setState的异步，同步以及合并
setState<body> <div id="test"></div></body><!-- 核心库 --><script type="text/javascript" src="js/react.development.js"></script><!-- 基于React专门用于操作DOM的扩展库 --><script type="text/javascript" src="js/re
2020-11-22 20:21:42
503
原创 ant design的自定义主题 modifyVars无效的原因
ant design的自定义主题config-overrides.js文件const {override,fixBabelImports,addLessLoader} = require('customize-cra')module.exports = override( fixBabelImports('import',{ libraryName:'antd', libraryDirectory:'es', style:true })
2020-11-16 19:21:52
6135
原创 针对vue ui启动项目抛error
error Expected indentation of 6 spaces but found 8 indent这句话是当前缩进不对 只能有6个空格但是却有8个 所有报的错误error Missing space before value for key ‘loginForm’ key-spacingerror A space is required after ‘,’ comma-spacing这两句话是在对象的键值对之间的冒号后面缺少空格以及逗号后面缺少空格{path:'/',
2020-11-08 14:20:53
3303
原创 Promise对象
Promise对象ES6新增的，该对象允许对延迟个异步操作流程进行控制。一个promise对象就是一个代表了异步操作最终完成或者失败的对象。开发人员可以使用由其他函数创建并返回的promise对象。promise对象本质上就是一个绑定回调的对象，而不是将回调传进函数内部promise的状态：pending：初始状态，即不成功，也不是失败fulfilled：操作成功完成rejected：操作失败创建Promise对象构造函数Promise对象接收一个回调函数new Promise(f
2020-11-03 16:20:42
116
原创 session的存储，以及redis基本介绍
session是server端存储用户信息用session时，如果访问量过大的话，不能只放在进程内存中 ，不然可能会撑爆内存而且如果session放在进程内存中，在多进程时，因为进程之间内存不共享 所有有可能会查不到解决方法之一就是使用redisredis是web server常用的缓存数据库，数据在内存中相比于mysql，访问速度更快(因为一个是内存中，一个是硬盘中)用redis他是脱离web server的，就想web server跟mysql之间的关系一样 node的进程内存和re
2020-10-25 08:36:36
964
原创 原生node创建路由的分层
原生node创建路由的分层为了方便维护 可以将路由内容跟创建路由以及服务端基本结构分来可以分为四层服务端的基本基本结构 这个结构就能通过上面暴露的内容 拼成完整的，这里完全是createServer的逻辑 跟业务代码无关 可以说是比较固定的这里完全是createServer的逻辑 跟业务代码无关 可以说是比较固定的const http = require('http');const PORT = 8000;const serverHandle = require('../app');
2020-10-24 08:43:40
170
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人