![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
_小郑有点困了
我的月亮永悬不落。
展开
-
Vue和React对比
Vue和React都是流行的前端JavaScript框架,它们有很多相似点和不同点,以下是它们的优缺点。原创 2023-11-20 17:44:30 · 409 阅读 · 0 评论 -
一个简单的vue兼容分辨率方案
【代码】一个简单的vue兼容分辨率方案。原创 2023-04-26 09:57:20 · 717 阅读 · 0 评论 -
vue获取字符串中的url
【代码】vue获取字符串中的url。原创 2023-04-25 09:36:31 · 368 阅读 · 0 评论 -
Vue单点登录笔记
如果没有直接调用接口获取OKTA登录链接,然后window.location.href跳转过去进行目标登录,登陆完成会重定向回项目url。因项目需要类似于微软应用一样,单点登录。于是乎有了一丁点研究,我这里用的是OKTA登录。1、首先从地址栏输入url之后(或者点击url),那么直接进入单点登录逻辑处理页面。如果是url携带有code等关键参数,直接截取存储,跳转到OKTA登陆页面进行。4、如果是黑名单之外的路由,等同于普通进入页面操作,直接进入相应页面。3、那么此时需要进行路由拦截,配置路由黑名单。原创 2023-04-25 09:21:56 · 570 阅读 · 0 评论 -
Vue移动端横向拖拽加载
项目需要在移动端显示横向的列表卡片,但是又是海量数据,做了分页,于是乎就需要横向滚动加载。类似于上拉加载的操作。原创 2023-04-25 09:30:42 · 286 阅读 · 0 评论 -
el-cascader多层级联点击动态加载子级
区划级联,例如从全国各省->市->县->乡->村,五级结构,那么如果通过一个接口数据量势必太大了。可能会出现接口请求慢的情况,所以就需要点击父级再去请求下一级这样一个实现思路。element的el-cascader 是提供了动态加载方法。原创 2022-11-24 16:09:59 · 1144 阅读 · 2 评论 -
工作笔记-滚动列表中指定项到可视区域范围内
比如给你区域区划的列表,但是固定容器高度,会出现滚动条,如果此时存在一个默认选中项,恰巧他不在可是区域内,但是想要一点进来就要在可视区域内看到这个选中项。使用了vant的picker组件,选中项目默认也并不在选中位置。还是关于这个vant的picker组件,当时没有仔细看文档,淦!实际上是有这个属性的。自己做的列表,注意看这个选中项在最后一行,那么就把他默认滚动到视口范围内。,自己操作dom的简直是多次一举。那么就可以手动计算选中项的位置。原理就是,获取dom,然后调用。查看dom可知,是通过。原创 2022-11-16 11:00:26 · 704 阅读 · 0 评论 -
vue+mixin+element实现大屏自适应等比例缩放显示
vue+mixin+element大屏等比例缩放原创 2022-06-23 17:51:32 · 4061 阅读 · 1 评论 -
vue使用echart绘制全国地图,叠加图表
场景:大数据展示全国各省份信息,绘制地图,并在每个省份上叠加图表。需要做的就是1、绘制全国地图(不同省份根据数据的不同而颜色不同)2、每个省份都需要单独叠加一个图表(饼图)3、地图缩放、图表的大小跟随比例一起缩放4、地图拖拽,图表根据一起移动这里面有一些坑效果图:截图未截完整,示例效果。完整代码:mapOption.js配置项:let obj ={ }export default { geo: { map: 'china',原创 2022-04-28 11:10:14 · 3653 阅读 · 0 评论 -
vue使用luckySheet前端excel的在线表格,导入显示以及导出excel文件
场景:当界面上普通的element表格已经不足以展示的数据的时候,或是为了更好的体验。由后端处理数据为二进制文档流,返回到前端直接进行显示为excel。效果图:代码实现:安装引入:index.html还得引入一些东西,我的项目没有index.html,我就在mounted这样子引入了 const script= document.createElement('script'); script.type = 'text/javascript'; script.src = `https://c原创 2022-04-28 10:06:59 · 4923 阅读 · 4 评论 -
vue重写elementUi的message,全局重写部分参数
场景使用element的时候通常是全局main.js引入,然后每次使用调用不同类型,但是如果你想全局每次调用的时间都缩短。那么就得全局引入的时候重写一下常规引用// Vue.prototype.$message = Message重写Vue.prototype.$message=function(msg){ msg.type= msg.type=='error' ? 'warning':msg.type; Message(msg)}let messagearr=['success原创 2022-03-03 16:04:38 · 1341 阅读 · 0 评论 -
vue实现调用摄像头扫描二维码功能
场景在使用vue开发的h5移动端想要实现一个调用摄像头扫描二维码的功能。可能一时间想到的解决方案就是调用微信的sdk,但是这个微信的扫一扫只能在微信里用,而且还需要公众号认证等配置操作。很麻烦。可以但没必要,万一你的h5和公众号没有任何关联,不久徒增烦恼吗?于是,查阅博客,果然有大佬写过文章。参考博客:vue扫一扫效果图注意:这里本地要用localhost。发布之后要用https的才可以看到。(你的设备也必须有摄像头)代码实现安装npm install @zxing/library原创 2022-02-25 09:42:50 · 4873 阅读 · 11 评论 -
vue使用windows自带能力播放音频
场景:当vue开发web端系统的时候,想播放一些自定义音频。例如播放一些系统信息的时候,就可以使用这个原生的能力。不局限于播放mp3等格式的固定音频。代码实现://播放操作playAudio(){ //没开声音就不再播放 if(window.localStorage.volume!='true')return //初始化一次 let to_speak = new SpeechSynthesisUtterance(); to_speak.voiceURI = 'G原创 2022-01-24 09:23:46 · 677 阅读 · 0 评论 -
vue自定义键盘组合热键触发方法
场景大家跟我想象这样一个场景:在你的系统里,某个页面,你想实现一个快捷键,你“X”+“#”,神乎奇迹的调用了一个接口,是不是很炫酷。代码如下:我这里是M+U键盘 ,然后执行了某个方法,当然可以用switch,多种组合键,执行不同的方法活传不同的参数等等mounted () { $('body').keydown((e) => { console.log(e.keyCode) if (window.event) { // IE原创 2022-01-20 16:40:22 · 1688 阅读 · 0 评论 -
前端vue导出Excel(多sheet)
场景:当导出文件的时候遇到结构复杂的表格(如:表头合并);或者数据分页的时候,后端就很难操作了,难以保持表格原有结构。所以就需要前端导出。步骤如下:1.组装数据2.标记表头合并项,计算合并项3.添加样式4.转buffer,file-saver导出文件组装数据所谓组装数据的意义在于,手动决定他的结构举个例子表格外观是这样的打印一下导出的数据结构是这样的分别查看这个!cols数组是每一列的宽度(第一行每一格的宽度)这个!merges是表格所有的合并项自行组装原创 2022-01-13 10:34:53 · 4166 阅读 · 3 评论 -
vue移动端上拉加载,下拉刷新(mescroll)
官网地址:mescroll.js效果图:安装引入:1. 执行npm命令安装mescroll : npm install --save mescroll.js2. 引入mescroll组件 : import MescrollVue from 'mescroll.js/mescroll.vue'代码:基本赋值官网代码,其实上拉加载,下拉刷新,难点在于丝滑的下下拉,拼接数据<template> <div> <!--标题-->原创 2021-12-13 16:11:12 · 2611 阅读 · 0 评论 -
vue移动端下拉刷新,上拉加载(mintui)
这里使用的是mint UI的loadmore组件文档地址: minui效果图:引入:import { Loadmore } from 'mint-ui';Vue.component(Loadmore.name, Loadmore);代码:至于这个结构的话,我发现把方法都写在组件上,会有分页bug,所以把下拉方法写在了组件内部的盒子上 <mt-loadmore :top-method="loadTop" :bottom-a.原创 2021-12-13 15:59:36 · 872 阅读 · 0 评论 -
vue禁止移动端键盘弹出,使用自定义键盘
项目用到一个车牌输入组件,使用自定义的键盘。那么就需要禁掉默认键盘的弹出做法一:直接input设置个readonly可以实现禁止默认键盘的操作,但是这个方式会看不到input框的焦点样式(一个待输入的线在input中闪烁)...原创 2021-12-13 10:58:21 · 5549 阅读 · 6 评论 -
记一个微信公众号开发h5遇到的样式问题
效果如图:解读一下,就是发布成功之后,在移动设备上,发现底部有一条透明的区域,不规则,不固定,安卓设备使用全面屏手势就会出现。更改虚拟按键(常规的屏幕返回键,home键)模式就不可见。一:以为是设备兼容的问题,底部内边距之类的东西尝试把底部抬高,以为是类似于ios设备下方的安全区,采取抬高的方式试一下,未果。无论底部如何调高,这个东西都在原地不动兼容ios底部安全区做法:vue适配全面屏底部安全区<meta content="width=device-width,initial原创 2021-12-10 17:31:54 · 2092 阅读 · 0 评论 -
vue aws s3直传图片到阿里云oss
本来之前的ali-oss用的好好的,但是后端说,要用s3,可以兼容多种形式的上传。so有了这篇文章。代码:<template> <el-upload class="avatar-uploader" v-model="Addfrom.url" action="" :on-preview="handlePreview" :on-remove="handleRemove" :on-change="handleChan.原创 2021-12-08 20:16:54 · 788 阅读 · 0 评论 -
vue直传图片到oss(多图上传)
前一篇说了单张直接上传oss,这篇写多张上传并回显效果图:oss:具体流程见前一篇文章代码实现:vue:<template> <el-upload class="avatar-uploader" v-model="Addfrom.url" action="" :on-preview="handlePreview" :on-remove="handleRemove" :on-change=".原创 2021-12-06 11:06:12 · 1460 阅读 · 0 评论 -
vue直传图片到阿里云OSS(单张直接上传)
背景:近期项目使用到多图片上传功能,常规的调用后端接口上传,可能会出现上传速度慢,体验不佳的情况。那么就考虑另一种上传方式。由前端直接上传到oss。快的一匹。。。经过摸索,也实现了。代码其实没啥难度,问题都出在阿里云这里,例如:跨域,读写权限等等,以及一个十分恶心的坑(竟然不能把目标文件夹写到配置参数里面,就很无语,百试不得,后来拼在了图片路径前面,达到了效果)首先你得去阿里云开启一个对象存储oss服务:略还得去创建一个AccessKey这两个是关键项还得创建一个bucket,用于存放原创 2021-12-06 09:49:43 · 5554 阅读 · 4 评论 -
el-table表格实现单选
当你想要列表可选且只能选中一条的时候,你需要做:1,隐藏表头全选checkBox2,实现单选html:<el-table border :key="4" height="450px" @select="simpleCheck" @selection-change="handleSelectionChange" ref="tableMain" :data="GETParkingOrderReport.output.value.row.原创 2021-11-23 14:42:47 · 2778 阅读 · 0 评论 -
element表格默认排序会影响vue生命周期内的时间调用(日常工作小记)
element表格默认排序会影响vue生命周期内的时间调用(日常工作小记)因为多个页面共用一个全局属性,那么采取存入内存的方案,但是有时候会出现一种情况,A页面会进行跳转至B页面,跳转之前会进行更改内存。(当然,B页面会读取内存,在created或mounted进行接口请求)。那么就发现了问题。假如:A跳转B,跳转的同时/之前进行更改内存,那么你猜B页面出现的瞬间,你在生命周期监听路由传参,B页面同一个接口会调用几次?答案:至少两次。默认排序触发的接口请求会快于任何生命周期,但是无论怎么快打开F原创 2021-11-18 14:12:18 · 331 阅读 · 0 评论 -
高德地图模仿微信发送位置实现拾取坐标
高德地图实现微信定位拾取坐标效果图:这个拾取模式是,地图中间的这个标记不动,拖动地图,处于这个点下方的坐标即为标记点。为了考虑用户的学习成本尽量低,保持与微信一致,便于操作。实现思路:定位位置:可以利用高德的getCenter和setCenter方法,先绘制一个标记点到地图中心,调好大小位置。然后再利用定位把这个图标挪到和之前的标记点重合的位置即可。拿到坐标:那么每次移动地图,再用getCenter这个方法拿到坐标就行了。效果图:代码实现:html:<div cla原创 2021-11-09 13:48:41 · 1851 阅读 · 2 评论 -
高德地图点击标记点出现自定义信息窗体
高德地图点击标记点出现自定义信息窗体效果图:场景:例如点击地图中的某台共享单车,显示他的电量,状态等。页面自定义窗体html结构,然后通过点击标记点,得到坐标,将其定位上去。(高德内置方法)html:<div class="device-info" id="device-info" ref="deviceInfo"> <pclass="device-click-tlite">{{deviceMapData.output.selectItem.deviceNa原创 2021-11-09 13:35:26 · 2480 阅读 · 0 评论 -
高德地图自定义图片标记点
高德地图自定义图片标记点效果图:场景例如标记范围内共享单车的位置循环坐标数组然后绘制:this.deviceMapData.output.value.curProData.forEach((item,index)=>{ //循环单点绘制 不能自定义icon let marker = new AMap.Marker({ icon: new AMap.Icon({ image: '/static/img/原创 2021-11-09 13:29:42 · 1380 阅读 · 0 评论 -
高德地图获取可视区域内四角坐标(东北,东南,西南,西北)
高德地图获取可视区域内四角坐标(东北,东南,西南,西北)场景:当需要实现查询某坐标区域内的所有共享单车,那么常规操作就是把所选区域内的左上和右下两点经纬度给到后端。获取方法如下: // 初始化地图 map = new AMap.Map('map-gaode', { resizeEnable: true, zoom:6, })var tmapBounds = map.getBounds();var northwest = map.getBounds().getNorthWest()原创 2021-11-09 11:48:30 · 4177 阅读 · 2 评论 -
高德地图标记点要注意的问题
高德地图标记点要注意的问题当打开高德地图的时候,使用API进行获取自身位置坐标,然后再进行setCenter设置中心是这样的。直接看代码:initMap () { // 初始化地图 map = new AMap.Map('map-gaode', { resizeEnable: true, zoom:13 }) // 初始化中心点 // 1、无坐标 有详细地址时 let sure = this.initAddress()原创 2021-11-05 14:40:17 · 479 阅读 · 0 评论 -
vue使用mavon-editor保存md到数据库,页面回显,二次编辑
vue使用mavon-editor保存md到数据库,页面回显,二次编辑场景:最近研究markdown的编辑器,使用他进行上传图片,编写文本和代码,并保存到数据库。调用接口查询进行页面回显。保存到数据库的md格式的文本,可重新渲染到编辑器进行二次编辑效果图:保存数据库之前:保存的东西:数据库存了两种结构:因为发现回显需要的是html结构的,而重新填回编辑器需要的是md格式的回显:用的是html字符格式的,也就是docxContentHtml这个字段二次编辑:用的是md格式的,也就原创 2021-08-10 16:43:01 · 3802 阅读 · 5 评论 -
vue使用mavon-editor(markdown)富文本编辑
vue使用mavon-editor(markdown)富文本编辑最近想开发一个自己的博客网站,这个东西的话,难点重点应该都在前端这里。我能想到的:1.实现一个markdown的富文本编辑器2.能够上传图片,输入代码,并且可以预览效果。发布上传到数据库3.页面回显。能够根据上传到数据库的文本进行回显内容4.其他markdown富文本编辑demo效果图:打印文章内容:就把这个存到数据即可,须带有\n这样的文本符号,才能正确显示结构,只是html结构可能会造成显示异常。安装引入:原创 2021-08-04 10:06:55 · 2686 阅读 · 2 评论 -
vue使用highLight.js实现代码高亮
vue使用highLight.js实现代码高亮背景:但是仅仅限于对代码进行高亮操作,意识到如果给到一片文章,里面有文本有代码有图片就需要进行正则匹配之类的处理这篇文章。。。效果图:安装引入:为什么要安装两个依赖:vue-highlight.js只是实现了代码高亮的功能,他的包里没有css的样式文件,因此还需要安装一个highlight.js来实现真正的样式。npm install --save vue-highlightjsnpm install --save highlight.js原创 2021-08-04 09:52:55 · 3396 阅读 · 1 评论 -
vue使用高德地图小demo(标记点,画线,3D,叠加图片图层)
vue使用高德地图小demo(标记点,画线,3D)这个模式是3D的,可以看到地图是带有一定的倾角的。注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使用。代码复制即可用!效果图:代码实现:main.js是需要引入amap的:import VueAMap from 'vue-amap';Vue.use(VueAMap);VueAMap.initAMapApiLoader({ // 高德key key: '6b8d48xxxxxxx原创 2021-07-21 15:40:11 · 3639 阅读 · 2 评论 -
日常工作小笔记---js将Object显示为正确的结构(增强可读性)
js将Object显示为正确的结构(增强可读性)效果:需求背景:例如你的项目有一个界面展示了所有的接口日志,那么这个无疑问是助你排查问题的利器,这个界面最好的展现形式就是表格,但是想要看入参回参怎么才能好看一些呢,表格完全显示肯定是不美观的,而且也不好看,这里就用了element表格的tooltip组件,但是这个显示的JSON内容做了个格式化处理示例代码:1.后端数据返回形式----对象{ callBackID: null, datas: [原创 2021-07-09 09:49:58 · 319 阅读 · 1 评论 -
vue更多筛选项小组件
vue更多筛选项小组件就是一个简单的小效果,当有很多筛选条件时,默认只展示几项,不会觉得很冗余,有需要可以点击展开,进行更过的条件筛选。并且能够自动判断界面的尺寸,决定是否需要更多筛选项。直接把“查询、重置”内置到组件里面了,便于组件样式的实现,还可以进行插槽。效果:正常大屏分辨率变小可见出现了更多筛选的按钮,可以点击下拉插槽代码:<template> <div :class="['colla-wrap']" ref="filter"> <d原创 2021-06-17 15:28:26 · 1027 阅读 · 1 评论 -
vue中使用wow.js添加特效
vue中使用wow.js添加特效想要给一些演示项目添加一些好看的效果1、安装wow.js(animate.css会被自动安装,但是需要注意引用位置)npm install wowjs --save2、在main.js中引入animate.css因为安装wow.js自动安装的animate.css位置在wow.js里面,所以需要注意引用位置得这样写。import 'wowjs/css/libs/animate.css'import wow from 'wowjs'Vue.prototype原创 2021-05-08 10:42:01 · 189 阅读 · 0 评论 -
openlayers系统学习(此前的一些学习笔记,准备学完echart再正式学这个)
openlayers系统学习目前只写了一些笔记,打算等到echart学完再正式的学习这个东西,不过文档已经有一些东西了,后面开始学习会持续更新。码云地址:添加链接描述原创 2021-04-22 15:10:53 · 143 阅读 · 0 评论 -
eCharts系统学习笔记
eCharts系统学习笔记一直都是复制粘贴,没有系统的好好学习过echart的api和配置项,这回学一下,笔记如下:git可拉取。码云地址:https://gitee.com/yupengzheng/ecart-learning.git原创 2021-04-22 15:07:18 · 125 阅读 · 0 评论 -
vue图片叠加画矩形
vue图片叠加画矩形效果图:容器16:9容器9:19重难点在css布局上面,写不好布局,就会有很多问题。比如:容器是16:9, 图片就需要宽度占满100%;如果容器9:16,那么高度就需要占满100%。需要做的还有获取图片的原始宽高以及实际放到你这个容器里的宽高,屏幕需要缩放,所以不可能写死宽高,都是百分比的。把他封装成了vue组件 (bigImg-wrap):<template> <div class="img-wrap"> <div :cl原创 2021-04-19 10:36:23 · 1687 阅读 · 1 评论 -
uniapp需要create等待onshow中的操作执行完毕再执行的实现
uniapp需要create等待onshow中的操作执行完毕再执行的实现可能是之前没怎么用到过这个东西,事件广播。场景:当你的小程序需要检测用户摄像头授权是否开启的时候,授权弹框只会在首次才弹出,如果很意外的首次用户点了拒绝授权,那么他以后再进入就会一直是未开启授权的状态,而你的小程序是必须要用户开启授权的,那么就影响到整体的流程了,没法玩了。所以你就得在手动加个检测的方法,(具体怎么加,见之前的博客),但是这个方法加在哪里呢,我选择放在onshow,用户未授权,会提示用户必须开启,提供跳转开启授权原创 2021-03-12 09:58:34 · 3258 阅读 · 0 评论