Vue
文章平均质量分 72
一些Vue的记录
liyoro
前端开发
展开
-
QGIS 对 GeoJson 文件数据进行压缩
地图开发,友商提供的是边界Shapefile文件,文件比较大,直接在echarts 上显示地图,前端浏览器会很卡,特别是有地图下钻的时候,体验很不好,所以最好压缩下原创 2023-06-01 14:59:43 · 1151 阅读 · 0 评论 -
Vue.extend 实现地图信息弹窗的随意定制
通过Vue.extend,简单实现地图信息弹窗的定制,template里,可以加载第三方组件,实现设计的需求。信息弹窗点击地图打点的时候动态渲染。视频地址点击地图打点的时候请求获取,响应式设置原创 2022-06-30 16:48:10 · 588 阅读 · 0 评论 -
vue2项目封装百度地图3.0拾取坐标控件
用百度地图3.0 Api封装了一个拾取坐标控件,方便搜索选坐标、地图上拾取坐标。用于需要地图选坐标的业务场景原创 2022-06-16 12:47:33 · 564 阅读 · 0 评论 -
Vue2项目中对百度地图的封装使用
Vue2项目中使用百度地图。基于百度地图JavaScript API v3.0实现,封装主要是为了方便复用,这里封装了地图的加载、还有简单的地图打点、自定义信息弹窗原创 2022-06-15 16:33:25 · 905 阅读 · 0 评论 -
Echarts大屏展示,实现响应式比较常用的方式
transform: scale实现响应式页面,一篇搞定数据可视化项目。目前用的比较多和稳的一种方式,记录下原创 2022-05-20 17:27:19 · 2017 阅读 · 0 评论 -
vue2项目中给echarts地图设置背景图和打点
给地图设置任意背景底图,可以让地图比较炫1、echarts地图背景图设置,可以设置随意的地图纹理2、echarts地图打点,显示数据原创 2022-05-13 16:42:51 · 9375 阅读 · 3 评论 -
vue2项目中封装echarts地图的比较优雅的方式
以前写过 vue项目中封装echarts的比较优雅的方式,大屏可视化里面,除了数据图表很常用,显示省市地图区域也是很常用到的,这是姐妹篇。区域地图选区域时,需要弹窗展示数据,样式是各种各样的,各种排列的数据、图文混搭、视频…这里除了封装echarts区域地图模块,还介绍了下自定义弹窗的实现、自定义弹窗动态加载接口数据的方式能学到的知识1、echarts地图模块封装,可复用2、echarts地图自定义弹窗(显示自定义样式、自定义数据、自定义图片),其它图表的自定义弹窗可参考。3、echarts地图原创 2022-03-08 17:34:20 · 771 阅读 · 1 评论 -
记一次浏览器SameSite策略更新,导致接口 Failed to load response data 的解决过程
浏览器SameSite策略更新,会导致前端不发送Cookie,造成接口不返回数据,也就是Failed to load response data问题原创 2022-01-22 12:47:34 · 5055 阅读 · 0 评论 -
video-time-slider,用于IVR视频回播的时间选择插件
video-time-slider,用于IVR视频回播的时间选择插件,为项目微信小程序制作,基于uni-app开发原创 2022-01-10 17:15:30 · 2414 阅读 · 0 评论 -
create-vue初试,问题小结
create-vue,一个基于vite的全新的vue脚手架工具,始于2021年10月7日,还很嫩,传说未来会替掉Vue-CLI。看文档,用法很简单,就一句命令npm init vue@next但真正用起来,就有几个小问题要注意了。(2021年10月25日)1、npm版本问题命令运行后,选好配置,运行npm install,会发现一堆 npm WARN 信息,其中npm WARN notsup Unsupported engine for vscode-json-languageservice@原创 2021-10-26 08:11:37 · 3910 阅读 · 0 评论 -
Vue高德地图Loca 2.0飞线功能初体验
高德地图原来是没有飞线功能的,很多可视化效果和百度相比确实差很多。在 Loca 2.0 API 里看到了一个PulseLinkLayer的图层连接飞线图层,可以支持弧度,宽度,过渡色等能力。 并且还支持脉冲动画,可以表达数据的朝向。按文档使用了下,发现没效果。发工单问了下,回答说文档有,但是功能是没有的,一周后会实现并上线使用例子???????官方例子:北京人口流出弧线代码实现具体是在 [高德开放平台GeoHUB初用(Vue使用高德地图Loca 2.0)](https://liyoro.co原创 2021-09-15 08:48:39 · 3522 阅读 · 0 评论 -
高德开放平台GeoHUB初用(Vue使用高德地图Loca 2.0)
高德开放平台GeoHUB,高德不声不息出的这玩意挺吊的。以往地图打点、连线、做特定地市的区域地图,都不知道哪里找GeoJSON数据的,现在有这东西就超级方便了。结合高德地图的api,挺好用的了。这里通过Loca.ScatterLayer的来展示下GeoHUB的简单使用。知识1、此文涉及Vue对高德地图2.0的封装使用,这里用 高德地图Loca 2.0 的呼吸点(也叫散射点、贴地点、水波点)的制作过程来演示2、GeoHUB生成的geojosn数据文件使用涉及 vue本地模拟服务器请求mock数据原创 2021-09-01 22:46:52 · 4366 阅读 · 1 评论 -
Vue视频播放进行+水印的截图
需求视频相关项目,有时候需要对视频进行截图的,图片一般加上水印。这里展示下普通视频播放和直播视频播放的加水印方式。资源测试需要的视频资源用的 阿里视频中心video播放视频一些非直播、不复杂的视频播放需求,直接用这个就好了,特别是一些演示用的项目。目前,<video> 元素支持三种视频格式:MP4、WebM、Ogg。MP4:MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器WebM:WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器原创 2021-09-01 22:46:04 · 1859 阅读 · 0 评论 -
Vue对高德地图2.0的封装使用
在Vue项目里使用高德地图,网上有几个比较好用的,例如AMap-Vue ,文档很好,但不开源vue-amap ,文档让人流泪懒人和需求不复杂的,可以直接使用上面的。上面两开源的已经不太活跃了,用的不放心。有些地图的高级功能,用起来特麻烦。所以,抛开第三方,封装自己的地图组件。需求组件按需引入。个人喜欢代码干干净净,只要项目需要的功能就行了简单的封装下,方便直接按官方文档使用需要的功能,方便复用基于 Vue2,AMap 2.0,AMapUI 1.1知识点Vue插槽 slot,方便在原创 2021-08-20 12:29:31 · 2318 阅读 · 0 评论 -
Vue+ Element,记动态生成表格在一个运维项目中的应用
需求运维需要,需要把运维时命令行查询的结果在前端展示,对界面有一些特定的要求,这里分享下一些主要功能的实现。1、要求前端表格界面动态生成,方便后台修改2、列值可排序(时间比较、数值比较…)3、列值可筛选(根据列值类型…)4、表格数据可导出Excel,文件名接口返回(因为模块很多)+当前时间。5、提供关键列搜索功能实现前端界面用element-ui,组件按需引入数据通过本地mock实现,参考vue本地模拟服务器请求mock数据表格界面动态生成表格主要用el-table实现。主要代原创 2021-08-14 10:15:15 · 308 阅读 · 0 评论 -
vue项目中封装echarts的比较优雅的方式
场景1、Echarts使用时,都需要写一堆的option,如果每个图表都要写一个,一个文件里面的代码量是很大的2、不方便复用需求1、方便复用2、展示类的图表,数据与业务、样式分离,只传数据就行3、项目里需要用到的图表会有多个,实现少代码自动化导入,不需要一个个import4、本人图表用在大屏数据可视化的情况比较多,采用的是等比缩放的方式,所以图表也能根据界面缩放自动缩放,不需要手动调用5、图表可配置代码总览涉及的文件如下(具体参考代码):|-- src |-- comp原创 2021-08-12 20:22:38 · 638 阅读 · 0 评论 -
vue本地模拟服务器请求mock数据
原因1、mockjs本地开发的时候用还好,mock数据需要生产时候用就不大行了2、mock的数据通过module.exports、export实现的时候,npm run build 生产打包的时候,这些假数据会打包进app.js文件里面,导致文件大、首屏渲染慢;而且,在js文件里面mock的数据量超过webpack限制的时候,打包会失败3、远程mock数据的就不需要了。像 YApi、网易NEI场景1、做演示项目的时候,数据需要完全本地化实现2、做演示项目的时候,要求数据可供业务人员修改3原创 2021-08-11 20:22:51 · 814 阅读 · 0 评论 -
vue文件,分离样式模块和业务处理模块
场景1、这只是我的编程习惯,个人喜欢css、js代码独立放一个文件里面2、写复杂界面的时候,界面、样式、业务代码都放.vue文件里面,代码量很大,几千上万行的,难受,割了吧3、基于vue cli3项目方法挺简单的,就是利用下ES6的import和export例如mockDataTest.vue文件,在views目录下新建一个mockDataTest目录,目录里新建index.vue(界面主文件)、index.scss(界面样式代码)、index.js(业务js代码),结构如下:|-- sr原创 2021-08-10 23:17:48 · 818 阅读 · 0 评论 -
input去除自动填充后样式
input去除自动填充后样式常见于登录页面,浏览器设置了记住密码后,input会自动填充内容,造成填充内容后的input会变色,色值不定,反正就是不好看。原因input自动填充的样式是用Shadow-dom的方式实现的,游离于DOM 树之外的节点树,不好通过css直接修改。要开启谷歌浏览器的Show user agent shadow DOM设置才能看到对应的css。解决方法1、关闭自动填充表单功能此方式对直接用form和input写的页面有效,对一些封装的第三方UI不大友好,例如eleme原创 2021-05-25 17:14:16 · 1344 阅读 · 1 评论 -
Vue报错:You are using the runtime-only build of Vue where the template compiler is not available
Vue报错:You are using the runtime-only build of Vue where the template compiler is not available环境 "vue": "^2.6.10" "@vue/cli-service": "^3.11.0"问题背景高德地图自定义打点,marker的click弹窗,弹窗里有交互,有调用到methods里面的vue方法,需要动态渲染,用到了Vue.extend,代码报错在此处。报错vue.runtime.esm.js原创 2021-05-22 16:24:15 · 567 阅读 · 0 评论 -
Vue history模式下子页面刷新404问题
Vue history模式下,开发运行的时候刷新页面没问题,但是部署在公司服务器的时候,子页面刷新会有404问题。在Mac自带Apache下尝试了下,确实会出现,解决的过程如下:(没在别的服务器部署过,不过也是给对应服务器加下配置就可以解决了)Mac自带Apache基本操作查看apache版本sudo apachectl -v启动apachesudo apachectl start重启apachesudo apachectl restart备份原来的文件sudo cp /原创 2020-06-09 22:32:11 · 665 阅读 · 0 评论 -
Vue自定义均衡器样式柱图
特殊定制均衡器样式柱图,为了展示。别问为什么这样设计!实现它就对了~~~看到这个奇怪的展示柱图的时候,呵呵~~~先上效果图原理是通过flex布局使小横杆垂直叠加,一个做背景,一个做活动项。2个不同颜色的重合,就可以形成以上的效果。使用说明js里引入组件import equalizerbar from '@/components/equalizerbar'components里面声明下components: { 'equalizer-bar': equalizerbar}v原创 2020-06-01 21:45:08 · 405 阅读 · 0 评论 -
Vue自定义svg百分比圆环组件
不熟悉svg,看文档做的这个东西。菜鸟教程先上效果图使用说明js里引入组件import svgcircle from '@/components/svgcircle'components里面声明下components: { 'svgcircle': svgcircle,}vue文件里面使用<svgcircle rate="0.6" :size="svgcircleSize" :text="svgcircleText" :textS原创 2020-06-01 00:38:08 · 1331 阅读 · 0 评论 -
Vue-CLI-3.0图形化界面初试
环境系统版本 macOS Mojave 10.14安装Node根据官方文档推荐,选择了8.x版本的NodeNode 版本 v8.15.1npm 版本 v6.4.1node 8.x下载地址安装Vue-Clinpm install -g @vue/cli# ORyarn global add @vue/cli检查vue版本是否正确 (3.x)vue --version图形...原创 2020-04-11 00:46:05 · 897 阅读 · 0 评论