![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
实际开发-问题解决
文章平均质量分 59
平常的例子和官方文档,是不会针对实际开发解决问题的,我只是把遇到有意思bug分享出来
-風过无痕
前端小卡拉米
展开
-
vue 使用iframe标签切换不同项目,实现步骤(互相嵌套,高度不适应(底部出现白条-随着切换越来越大)传值取值(免登录),内容空白缓存问题)
最近在开发中,由于是合作开发。双方已经有自己的前后端代码,最终需要整合代码上线测试由于模块功能不同,双方ui并没有提前统一设计风格,并且已经开发完毕。前后端如果直接合并到对方项目(前端-有各种冲突-后端鉴权-业务场景不一样)导致.......后来最好的解决办法就是,通过iframe标签带参数来回切换对方项目。原创 2024-02-11 10:27:40 · 1750 阅读 · 0 评论 -
vue-使用echarts+echarts-gl实现某个省份地区地图3d可视化
最近在开发中遇到一个需求,需要把一个地区地图变成3d感觉悬浮在大屏中间配合业务需求其实echarts配合三方库就可以实现这个效果,具体细节需要自己调整。原创 2024-01-19 20:29:18 · 2146 阅读 · 1 评论 -
vue-element-table表格实现每一条数据绑定定时器实现倒计时或者持续时间
最近在开发中遇到一个需求,每一条数据前端计算处理时间,或者是倒计时时间。第一表格不可能展示所有数据,所以我们需要当前时间和数据库开始时间获取一个初始值。第二我们需要把定时器持续时间绑给每一条数据中,方便展示,和操作时候传递给后端存储。这样一来就解决这个需求,并且不管展示多少数据都不会出错,而且用户体验感较好.原创 2024-01-19 20:19:06 · 1328 阅读 · 0 评论 -
芋道前端框架上线之后发现element-ui的icon图标全部乱码
最近发现线上有人反映图标全部是乱码,登录上去看确实乱码,刷新就好最后一顿搜,发现是sass版本不兼容导致的图标乱码问题。原创 2023-12-21 22:05:36 · 710 阅读 · 0 评论 -
vue-内网,离线使用百度地图(地图瓦片图下载静态资源展示定位)
最近发现很多小伙伴都在问内网怎么使用百度地图,或者是断网情况下能使用百度地图吗后面经过一番研究,主要难点是,正常情况下我们是访问公网百度图片,数据,才能使用内网时访问不了百度地图资源时就会使用不了,如果我们能把我们需要数据下载到本地,自己访问自己,那这个问题就可以解决我们可以使用地图下载器下载我们需要的瓦片图数据,使用serve运行起来,这样内网和断网就可以使用了遗憾的是只能基本展示,定位。不能使用百度地图api-类,因为百度地图类和api都是通过http请求来实现的。原创 2023-12-21 21:39:33 · 6851 阅读 · 22 评论 -
vue-使用input封装上传文件图片全局组件
实际开发过程中,我们经常遇见需要上传文件图片功能,可以封装一个全局组件来调用原理很简单,首先获取到文件或图片对象,调用自己公司文档服务器的接口,上传文件图片为了方便用户体验,我们应该在上传之前开启遮罩层,上传成功之后关闭遮罩层。我们还可以根据实际开发场景自定义把url和文件名称传回父组件data})原创 2023-11-22 21:22:18 · 503 阅读 · 0 评论 -
vue el-dialog弹出框自定义指令实现拖拽改变位置-宽度-高度
在实际开发中我们经常使用el-dialog弹出框做表单,一般情况都是居中。遮挡到了一部分数据当我们想要查看弹出框下面的数据时,就只能先把弹出框关闭,查看完数据之后在打开弹框我们通过动态样式,和鼠标事件就可以实现。但自己写的在适配性和全面性上还是有所欠缺的这种我们可以直接复制使用,写成全局自定义指令。多的地方使用,并且只做加法1.来到src/创建directive文件夹2.在src/directive/创建dialog文件夹专门用来放关于dialog的代码。原创 2023-10-20 20:24:53 · 3509 阅读 · 2 评论 -
vue el-dialog封装成子组件(组件化)
实际开发过程中我们经常听见组件化开发,但在实际开发过程中(没有人审查时)怎么方便来我们有时是因为时间不够,所以把所有代码写在一个页面。当业务逻辑复杂时可能会有1k多行虽然不能要求自己写出高效复用性高的组件,把dialog弹出框写成一个子组件抽走还是可以的当你把表单抽在就会发现代码少了很多。原创 2023-10-18 20:48:34 · 3478 阅读 · 0 评论 -
vue 后端返回二进制流-前端通过blob对象下载文件-图片
在实际开发中我们经常会遇见下载文件的场景,比如下载合同,下载文件下载文件有2种方式,一种是后端返回二进制流,前端通过blob对象接受根据不同类型下载还有一种把地址直接在浏览器新窗口打开浏览器打开pdf可以预览和下载,其他文件直接下载但不管是那种方式,原理都是一样的只是取决于谁来执行转化代码。原创 2023-10-18 20:46:30 · 3143 阅读 · 2 评论 -
element-tree树结构-默认选中第一个节点高亮-根据id选中节点高亮
tree树结构是在开发中经常使用的组件,比如区域树,楼层树,组织架构树,等等包含节点关系实际开发可能需要我们一进到页面选中树形结构第一个节点,并且调用数据,来达到用户体验在用户选择之后,通过本地存储的方式把楼层id存起来,刷新之后获取楼层id,调用数据或者为了用体验我们需要在选中同时高亮,在状态保持之后,把绑定楼层id节点高亮提示用户万变不离其宗,基于文档介绍和HTML结构代码。我们可以通过2种办法实现。原创 2023-09-09 21:17:29 · 7708 阅读 · 0 评论 -
vue-canvas基本使用和注意事项-动画闪烁效果-自适应适配不同分辨率问题
canvas画布是html的新特性,熟悉画布我们可以完成很多拖拽,标注,动画的功能使用canvas实现一个小例子很容易,但是真正在项目中使用时,我们需要注意的地方有很多canvas基本原理就是它基于渲染方法,根据画布相对的x,y坐标,长,宽,来渲染画布效果熟练使用之间我们肯定是需要连接基本使用和相关注意事项,才能在遇到问题时快速解决。原创 2023-08-24 21:39:49 · 1508 阅读 · 0 评论 -
vue-pc端禁止用户选中文字-右键-复制
pc端开发中我们经常会遇见一些页面,会因为刷新,渲染,卡顿出现文字选中效果或者一些敏感的页面我们不希望用户复制,选中,页面的文字信息,比如考试,敏感信息其实这些也是可以通过代码控制的,这样可以使项目更加安全,合理。把代码写在页面mounted就是这个页面不可以复制,选中,右键,写在app.vue页面的mounted就是整个项目不可以选中,复制,选择。原创 2023-08-24 21:33:18 · 708 阅读 · 0 评论 -
vue-pc上传优化-uni-app上传优化
经过这一趟流程下来相信你也对 vue-pc上传优化-uni-app上传优化 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!原创 2023-08-22 21:53:35 · 482 阅读 · 0 评论 -
vue-pc端elementui-统一修改问题-Dialog 对话框点击空白关闭问题-element-所有组件层级问题
经过这一趟流程下来相信你也对 vue-pc端elementui-统一修改问题 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!原创 2023-08-10 23:02:54 · 1811 阅读 · 0 评论 -
vue-pc端Message 消息提示防抖处理-短时间内只触发一次
element提供的的message消息提示用确实方便直接代码就搞定。但是在特定的场景并不适用点击某一个点位提示用户点击了或者websocket推送提示用户来信息了(这种提示用户场景)如果有很多推送信息来,或者用户一直点击。这是屏幕会一直弹出message提示信息往下堆叠并不友好,而且还会把屏幕挡住。使得用户体验很不好,我们应该对弹出框信息进行防抖处理并且这种处理我们最好做加法,这样原来在页面中写的message提示消息也不用二次修改。原创 2023-08-10 23:01:21 · 622 阅读 · 0 评论 -
vue-pc端实现按钮防抖处理-自定义指令
我们经常在移动端会处理按钮和输入框的防抖和节流处理,在pc端很少进行这样的操作但是在pc端也是可以进行按钮的防抖操作,这样也是比较合理,可以不用但不可以不会我们只要配合vue项目自定义指令加上全局注册,就可以实现按钮的防抖操作。并且这种方式是在做加法,把自定义指令全局注册之后,只需要把@click换成v-antishake(自定义指令)即可转存失败重新上传取消1.在src/directive/module下建立antishake.js文件-代码如下}, 2000)})。原创 2023-08-10 22:59:37 · 521 阅读 · 0 评论 -
vue-百度地图自动获取定位
使用地图的项目中经常会出现定位问题,进入页面是需要一个地图中兴点默认值,来生成地图如果这个值写死,就会出现不管谁在任何地方使用这个系统位置是不会动的,用户体验不好其实百度地图是提供了这个api的,使用这个api就可以获取用户的经纬度这个api原理是根据你计算机的ip地址获取定位,网络原因会出次定位不准问题。这个api在别的浏览器(除谷歌之外)可能还有兼容问题,需要测试如果域名不是https每次使用还需要用户确认,取消的话他就不会调用了。原创 2023-07-20 22:00:51 · 1334 阅读 · 1 评论 -
vue-使用Baidu(百度地图)实现输入位置获取定位经纬度
开发中我们需要地图定位,就是用户输入位置,自动定位获取经纬度,传递给后端存在数据库找了一圈发现千篇一律,最后也是使用element的搜索输入款配合原生百度地图实现这个功能点击地图需要逆地址解析,输入地址时调用百度地图渲染在下拉框,选择传输地址,经纬度一般是在添加时加载地图,可能会因为网络原因加载地图实例失败,所以需要一直加载到实例在项目中工具文件形式引入,相当于创建了一个标签引入地图资源,挂在在全局上。原创 2023-07-20 21:58:45 · 2754 阅读 · 0 评论 -
vue-使用JSEncrypt对密码本地存储时加解密
在实际开发中需要对一些敏感信息进行加解密(本地存储时),不如密码,身份证号,公司社会码其实像这种普遍经常用的功能,一般都是有第三方包拿来直接用的比如jsencrypt-提供好方法我们可以根据提供的网址跟换密钥对下面我们就已开源项目若依前后端分离项目进行演示。原创 2023-07-19 21:44:27 · 1956 阅读 · 0 评论 -
Vue 数组对象去重(去掉之前数据,去掉之后数据)
数据去重是对数据的一种处理使用,对于前端来说有时候需要自己操作数据来简化操作数组去重情况,保留第一次加入数据(去重后面),保留最后一次加入数据(去重前面)保留第一次的数据,是判断下一次加入数据的id在数组是否存在,存在过滤抛弃保留最后一次加入数据,是判断加入时候数组存在要加入数据id,把数组里面数据删除不管是哪一种情况都是通过数组方法可以实现的,但建议用写好的,不容易出错,代码简洁。原创 2023-07-12 21:18:50 · 2007 阅读 · 0 评论 -
vue 实现一键复制功能(复制图片和文字)
一键复制这个功能也是经常使用到的,实现起来并没有那么复杂原理就是找到这个Dom元素把这个元素里面的文字和图片直接复制下来。细节复制方法的时候可能会出现斜杆(不是不生效不用管),图片大小会维持原来的图片大小。注意在页面scss写的样式复制出来并不会生效,记得写行内样式才能识别到。原创 2023-07-12 21:16:20 · 2197 阅读 · 0 评论 -
Vue 子组件使用 this.$parent 无法访问到父组件数据和方法
最近在使用父子组件时候,通过this.$parent访问父组件数据和方法,出现undefined的情况。实际场景是父组件有一个dialog弹出框,包含几个子组件form表单,根据标识只展示一个子组件。在子组件需要传递一个ID给父组件中的data数据,想到this.$parent(比较简便),不想用this.$emit。但发现this.$parent 实例是有打印的,但是访问父组件数据和方法都是undefined的情况。原创 2023-06-28 21:12:50 · 3473 阅读 · 4 评论 -
vue 实现钉钉官网的轮播图下面功能滚动排版CSS效果
最近在写PC端的业主端时候,发现传统的菜单栏比较丑,也不符合实际应用(功能页面并不多-展示为主)偶然发现钉钉官网的效果挺有意思的,想着把这个效果复原过来,然后夸夸搜索了一番。经过一顿的cv打法,加上修修补补把大概的效果整了出来,时间关系最基础的,剩下的可以自己补充。原创 2023-06-28 21:09:14 · 681 阅读 · 0 评论 -
vue axios分页查询2种方式-post请求-get请求拼接
在规范化开发中实际get请求和post请求是由要求的,get请求获取数据,post请求传递数据。但在实际开发中如果是没有硬性要求时,一般都是分页查询时候为了图方便直接使用post请求。但其实2种请求方式通过封装都是可以进行分页查询的,可以会不用,但不能不会。原创 2023-06-19 22:03:12 · 1993 阅读 · 0 评论 -
uniapp 使用app-plus自定义导航栏(titleNView)右侧自定义图标+文字按钮
最近在使用uni-app写H5移动端时候,在pages.json文件配置导航栏的图标时发现不生效去官网查阅了很久,意思是不支持本地图片,支持iconfont.ttf(iconfont本地下载)格式图片意思是在导航栏的图标需要在iconfont图标库找好以下载本地形式放到项目资源文件夹titleNView配置实现过程1.登录iconfont图标库网站找图标下载-iconfont-阿里巴巴矢量图标库2.把下载解压的文件放在static文件下-里面文件结构如此。原创 2023-06-13 22:13:13 · 7811 阅读 · 5 评论 -
axios-CancelToken方法取消请求-控制多次同样api调用取消上一次接口调用
开发当中看到了axios取消方法,经过查阅,axios这个包是提供了取消请求的方法的。移动端当是tab栏类的页面,或者是下拉刷新和上拉加载是一个接口是,会出现20条情况(接口调用2次)。pc端同一个按钮,分页在连续触发之后会调用多次同样接口,这样会数据不对,资源占用。其实是网络或者人为导致api触发多次,这时候我们就要根据axios取消方法稍作更改。思路1.axios实例是提供了CancelToken () 取消请求,原创 2023-06-04 13:30:43 · 2324 阅读 · 0 评论 -
vue-upload上传图片详细使用(文档服务器)
实际开发中我们的图片,文件,PDF我们都应该存在文档服务器当中。从而优化代码,减少代码文件大小。我们可以让后端把文档服务器搭建好,写好相应的存储接口api,我们就可以使用Upload组件上传。但是我们需要注意的是,在实际开发中。在请求拦截中设置的token,和userid(用户id)要重新设置一次。因为我们是使用upload组件直接上传,并没有经过axios,拦截不到。要在headers(请求头中设置2个参数)原创 2023-05-16 20:40:42 · 4349 阅读 · 0 评论 -
vue-admin-template-添加标签页全局组件-详细使用
使用vue-admin-template简单模板的时候,添加标签页全局组件,详细实现过程如下。如果是我们不想让他删除的标签页(比如首页)可以在meta加上这个属性affix: true。路由在前端,路由在后端,有权限,路由表规则没有name,都会导致报错。下面会有图解。在项目开始之前配置,他会影响到页面高度,要配置。有权限退出登录的时候要清空标签页。原创 2023-03-30 22:39:51 · 2127 阅读 · 0 评论 -
vue form表单图片上传
在实际开发中经常需要在from表单上传图片,比如考试封面,文件封面。等等在element-ui 有现成的,但是他需要上传到地址,晚上查阅的也有现成的,太重了。我们的需求就是上传一个图片预览,获取到base路径,双向绑定到form表单,传给后端保存。我们可以通过2个盒子+input的file类型+自定义点击事件dispatchEvent就可以实现了。原创 2023-02-27 20:19:47 · 1234 阅读 · 0 评论 -
vue 通过全局过滤器(filters)枚举转换后端传回来数据
在实际开发中,会发现有些键名是传回数字的显示,表格的数据,我们就需要把它转换成用户看的懂的数据。全局过滤器除了可以使用枚举,还可以给时间戳转换,form自定义表单规则,相当于一个工具包。枚举除了给表格替换数据,还可以给导出替换数据,打印替换数据,给form表单提供下拉款数据。原创 2023-02-27 20:19:44 · 861 阅读 · 0 评论 -
饿了吗 tree树形结构 显示文件图标 搜索 更改样式
判断文件状态,通过自定义插槽的方式,在数据渲染时添加i标签,从而显示图标 通过el-tree通过的节点展开事件,在控制台输出data、node、element后可以观察发现,当点击展开节点时,node中存在一个expanded参数且值为 true:通过data.children.length === 0 是不是最后一个。树形结构的图标的展示,3中状态,未打开的文件状态,打开时的文件状态,最后一级的文件状态。树形结构的搜索过滤功能,官网有,稍微配置一下即可。树形结构的样式二次修改,原创 2023-02-15 16:24:07 · 609 阅读 · 0 评论 -
Vue Element Select选择器自定义验证规则
在我们在做增删改查的时候,一般会遇到添加和修改的from表单需要表单验证。一般常规的from表单是有自己的验证规则,from加一个 :rules="rules"但他需要v-model值和prop值要一样,这是常规情况。我遇到的是,绑定多个负责人和对应的电话,加验证规则。实际场景1.我们在from表单绑定多个负责人就需要使用到 select 选择器,下拉的数据是点击打开弹框时发请求来的。2.点击选中的时候,数据时对象形式,id 名字 电话 绑定在一起的。选中负责人的时候,我们是把一整个对象存到数组里面。原创 2022-12-02 12:35:36 · 4821 阅读 · 0 评论 -
vue 实现Excel 导出
数据表格的导出,是实际开发的常见功能,前后端都可以实现表格导出,讲解自己在用的一种。获取数据源,可以通过后端接口实现,也可以利用分页查询的表格接口来实现。处理数据,对excel表格的表头(最上面一行)表格数据是一个二维数组对应起来的,表格文件名字。利用第三方包构建Excel,vue-element-admin 是提供了文档的,可以根据实际情况更改。原创 2023-01-31 15:56:05 · 2987 阅读 · 0 评论 -
Vue中使用Datav 完成大屏基本布局
Vue就像一个大房子,可以集成组件一起使用。Datav + Vue-Baidu-Map + ECharts,相互一起使用。经过这一套流程我们就可以快速搭建出属于自己的大屏框架,在根据实际需求进行更改。原创 2022-11-30 15:40:57 · 26971 阅读 · 13 评论