前端开发
文章平均质量分 56
涟动下渔舟
我是web前端小白,向大神们看起,努力努力
展开
-
Echarts环形图设置空数据样式
需求背景由于最近的需求涉及到图表的展示,所以引入Echarts来渲染图表,但是问题也随之而来了,仔细阅读过文档后发现,Echarts对于环形图并没有能够设置默认样式的地方,对于空数据,界面直接就是空白一片,产品不能接受,没办法只能一顿捣鼓了。解决问题的方法经过一番捣鼓后,想到,既然组件不支持空数据,而且还想显示一个带颜色的默认的圆环,那么我们就可以给数据项后多添加一个数据,即默认数据代码如下:// 处理空数据 if (props.chartdata?.filter(item => i原创 2020-12-16 11:19:11 · 4412 阅读 · 1 评论 -
text-decoration设置文本下划线失效
前言最近公司的一项业务中涉及到了文本下划线的问题,本来对于我们来说,下划线并不是难点,可曾想过,这里也能踩坑。下划线? so easy!text-decoration: underline solid black;加上这个,想都不用想结果呢?细心的小同学应该发现问题了,这条下划线,中间出现了断裂,是的,你没看错g j p q y 这几个字母显示不了下划线!这是什么鬼,之前不...原创 2020-01-13 14:48:39 · 3873 阅读 · 0 评论 -
前端JS错误捕获--sourceMap
前言在我们的项目开发中,随着项目的不断完善,线上bug的捕获、调试和处理是越来越重要,那如何来解决这个问题呢?传统方案1、增加多个console.log来打印报错信息2、弹alert提示用户或者是升级一步,捕获用户的报错,上传错误日志通常情况下在try-catch里捕获错误信息,或者window.onerror里捕获。可以了解window.onerror捕获异常的同学,可以学习一下...原创 2020-01-08 15:24:55 · 2583 阅读 · 0 评论 -
egg上传Excel读取内容并保存
问题产生背景我们的后端服务采用的eggjs,用来处理一下轻量级的用户服务,比如说用户基本信息的保存、文件等等。这次有一个上传Excel 文件保存并读取内容返回给前端的需求,经过一步步采坑(本人小菜鸟一只),终于实现了,把这个过程分享给大家,希望能够帮助要采坑的同学,跳坑。解决方法1、上传文件这里可以参考网上提到的多种方式ajax方式或者from方式,当然啦我这里采用的是from方式。当...原创 2019-07-22 11:41:48 · 3762 阅读 · 0 评论 -
H5横向滑动菜单
H5横向滑动菜单最近处理一个需求,产品需要做一个顶部横向的菜单栏,类似于今日头条首页的菜单栏先来看看效果:构思首先说说我的思路吧 ,通过设置一个横向的导航栏,滑动到顶部后悬浮,然后滑下来后再继续随着页面滑动。实现过程1、设置导航栏,这里我们需要一个三层div嵌套的导航导航栏核心代码<div class="nav" ref="nav"> <div cla...原创 2019-06-21 18:07:16 · 5105 阅读 · 1 评论 -
微信h5页面缓存
微信h5页面缓存问题前言先说说之前开发的问题来看看现在的效果:因为我的分享页面是在一整个项目中的,默认就是采用的第一种方案,所以我直接修改了图片的名称,打包编译后上传js文件到服务器,得到的效果是:前言移动端开发中,经常会碰到微信缓存的问题,总体感觉而言,有太大的无可奈何,但是问题总归是要解决的。先说说之前开发的问题由于之前无论是公众号还是微信分享链接,都是经过充分测试后发布上线的,上线后...原创 2019-05-07 18:38:41 · 9550 阅读 · 0 评论 -
create-react-app运行项目报babel-jest错误
问题的产生最近使用create-react-app创建一个react项目,按照官方安装好create-react-app后,初始化项目啥的都正常,结果一运行,就报错了。There might be a problem with the project dependency tree.It is likely not a bug in Create React App, but somethi...原创 2019-05-08 13:49:31 · 2921 阅读 · 4 评论 -
mint-ui 下拉组件loadmore踩坑
mint-ui是vue开发中常用的组件库,而loadmore 通常用于处理下拉加载与上拉加载坑1、页面渲染完,loadmore设置的上拉/下拉执行两次产生原因:loadmore设置中的auto-fill需要设置为false实现代码如下:<load-more :bottom-method="loadBottom" :bottom-all-loaded="isLoadAll" ref="load...原创 2018-04-12 14:58:32 · 13167 阅读 · 10 评论 -
vue中添加mp3音频文件
有的时候我们需要在vue中添加音频文件,但是直接将音频文件放置了assets目录下的时候,会发现并不能正常播放,下面是两种常用的配置方法:方法一、将音频文件放置在static目录中,然后进行调用,如下所示<audio class="success" src="/static/audios/do_wrong.mp3"></audio>以上这种方式就能够解决这个问题了。方法二、给项目配原创 2017-07-18 17:00:26 · 33941 阅读 · 3 评论 -
Weex新建项目报错weex-vue-render/index.js
Weex新建项目报错按照weex官方文档上的操作,新建一个基于Vue的Weex项目,一切步骤都是正确的,却发现项目运行起来后页面不显示,这个很让人郁闷,大概就是这个样子。折腾了好久之后才发现,问题出在这里,f12打开调试工具会发现报了一个错,如下:然后我们从新加载页面后,错误变了,变成如下所示了:看了问题越来越明显了 我们进入node_modules中,找到weex-vue-render打开后发现原创 2017-07-06 15:03:21 · 2035 阅读 · 0 评论 -
Vue项目中设置背景图片
在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式:background:url("../../assets/head.jpg");这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1》在data中定义如下: export defa原创 2017-06-07 20:50:08 · 87914 阅读 · 13 评论 -
h5移动开发Ajax上传多张Base64格式图片
h5移动开发Ajax上传多张Base64格式图片到服务器废话不多说,直接看代码吧 1、上传组件 <div class="imgbox"> <img class="goodsimg" src="../../assets/addimg.png"> <input id="file" type="file" class="fileupload" accept="image/*" m原创 2017-05-18 11:36:12 · 2751 阅读 · 0 评论 -
基于Ajax的formData图片和数据上传
最近做一个项目,关于用户数据和表单上传的项目,碰到了不少坑,这里总结的分享给大家,希望能够帮助大家。(小白,欢迎大家多交流)多的就不说了,直接来代码吧!!1、上传组件 说明一下,项目是基于vue框架的<template> <div class="newproduct"> <div class="topbox"> <div class=原创 2017-05-18 12:08:51 · 3711 阅读 · 0 评论