自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(49)

原创 鼠标hover表格头部信息出现闪烁

在做下面这种表格的时候要求加入hover提示,鼠标hover上去出现提示信息,离开图标提示信息消失。有时会出现hover上去不断闪烁的现象。可以从下面3个方面试着解决:1. 换成mouseenter事件和mouseleave事件2. 加入setTimeout可以延时100到300毫秒触发3. hover的元素要加一句样式:pointer-events:none;//...

2019-11-28 14:01:43 84

原创 this.$router.push用query传参对象时需注意的地方

在vue项目中,我们用函数式编程this.$router.push跳转,用query传递一个对象时要把这个对象先转化为字符串,然后在接收的时候要转化为对象,要不然会接收不到参数。要不就把参数分开传递,不要放到对象里。this.$router.push({ path: '/liveing', query: { routeParams: JSON.stringif...

2019-11-28 10:35:53 1730

原创 webpack跨域问题记录

1.可以用webpack模拟数据index.jslet xhr = new XMLHttpRequest();// http://localhost:8081 webpack-dev-server的服务 -> 3000xhr.open('GET', '/user', true);xhr.onload = function(){ console.log(xhr.resp...

2019-10-28 12:24:12 80

原创 解决从登录页通过this.$router.push跳转首页后 点返回健路由变而页面不变的问题

做H5项目的时候遇到一个问题,我从 login 登录页通过 this.$router.push({ name: 'home' })路由登录成功后跳转到首页,但在ios系统下,会有一个默认返回条,点击返回键出现以下情况,路由显示的是回到登录页,而页面却还是首页。解决思路:开始我试着把push改为replace,但是发现并没什么卵用,还是会出现问题,所以只好用路由导航守卫去监听。在首页加入...

2019-09-05 14:33:11 3745

原创 解决font-weight:600在安卓机不生效的方法

按照UI设计图给的 font-weight:600 直接设置,发现苹果机是字体是加粗的,安卓机没有变化,改成 font-weight:bold 就好了

2019-08-29 10:59:57 2703

原创 iview表格处理后台返回的字符串

在用vue+iview做的一个项目中,后台给我返回一个名称和费用拼接的字符串,我在iview的表格中显示出来,并且要让折行显示或者是加四个空格显示。发现后台给我加上的空格在前端根本显示不出来,还得自己处理。效果图:后台返回数据:typeList: " 图文咨询 (0.01) 视频会诊 (0.02)"解决思路:拿到后台给的属性,先把把字符串用空格分隔成数组,取到自己...

2019-08-29 10:53:23 942

原创 line-height在安卓机位置靠上

做一个H5页面,发现字在浏览器、苹果手机和安卓手机下表现都不同。苹果手机是垂直居中的,但是安卓机上,字是靠上的。解决办法是把字体大小、定位、间距、高度和边框线整体都放大2倍,然后再缩小一倍,就可以了transform: scale(0.5)transform-origin: 0 0...

2019-08-29 09:59:22 242

原创 H5搜索页调起软键盘

在H5项目中,进入如搜索页,点击搜索页再跳到另一个搜索页,要调起键盘事件在第一个搜索页的input绑定click事件,跳转到第二个搜索页,在input框加autofocus="autofocus",发现有时好用,有时会闪现一下又消失,然后在mounted里加入一句代码,貌似好了// 进入页面调起键盘this.$nextTick(() => { this.$refs.se...

2019-08-20 10:12:32 210

原创 多级三目运算符的判断

在vue项目里,选择婚姻已婚和未婚状态,也可以不选,后台返回字段 maritalStatus 为0时代表未婚,1代表已婚如果不选就显示-<span>婚姻:{{ datas.maritalStatus !== null && datas.maritalStatus === 0 ? ('未婚', '已婚') : '-' }}</span>...

2019-08-08 11:02:17 1135

原创 vue-router中的router-link的active-class

在vue-router中做底部导航栏加active样式的做法:在router.js中设置linkExactActiveClass属性:在使用的地方加入exact:定义公共样式:.active{ color: #51BC8A }...

2019-07-16 15:28:17 759

原创 用户名、密码都有值激活提交按钮

最近用vue做移动端项目,要求当所有input框都有值时才点亮提交按钮,如下图:解决思路:通过三个input框的v-model值运用逻辑运算符返回一个布尔值,通过computed计算属性return出去,用此变量控制提交按钮button的disabled的禁用状态。具体做法:结构:computed属性的设置:当3个变量都为true时,返回true,disable...

2019-07-16 15:19:48 221

原创 npm ERR! Unexpected end of JSON input while parsing near '...Comment: https://open'

今天在安装依赖包的时候老报错,报错如下:npm ERR! Unexpected end of JSON input while parsing near '...Comment: https://open'因为我安装过淘宝镜像,怀疑是因此报错,上网找答案,要执行下面这句话清除下缓存:npm cache clean --force然后再重新安装一下官方的镜像:npm set reg...

2019-07-08 11:35:45 1611

原创 地址栏url解析为对象

function getUrlParams(url) { const keyValueArr = url.split('?')[1].split('&') let paramObj = {} keyValueArr.forEach(item => { const keyValue ...

2019-07-04 14:28:15 207

原创 vue中后端做Excel导出功能返回数据流前端如何做处理

项目中有一个导出功能的实现,用博客来记录一下。因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来。先看下效果图:页面效果:点击 导出Excel 调用导出接口成功了:后台返回的数据流,一堆看不懂的乱码:接下来要处理这堆乱码,因为用到的地方多,所以在util.js...

2019-07-03 17:01:54 20366 13

原创 同时支持mp4/ogg/webm/flv格式的视频播放

最近项目里要求支持多格式视频上传和播放,用的是H5的video标签,但video只支持三种格式mp4/ogg/webm这三种。实际需求要求同时也要支持flv/avi/rmvb这三种格式。到目前只找到能支持flv这种格式的插件,github地址:https://github.com/bilibili/flv.js1、在vue项目中,下载安装依赖包npm install --save f...

2019-07-02 18:12:54 1312

原创 echarts图表使用v-show控制图表显示不全的问题

最近做echarts图表时,因为涉及到使用开关变量控制不同图表的显示隐藏,用 v-if 时会出现没有获取到dom结构而报错,所以改用 v-show,但是 v-show 本身是结构已经存在,当数据发生变化时,结构并未重新渲染,所以会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况,就像下图:还折腾了半天,其实就是当数据请求出来后,调用绘制ehcart...

2019-07-02 17:18:49 4229 1

原创 vue+iview实现拼音、首字母、汉字模糊搜索

最近项目做的后台管理系统中,要求实现一个支持拼音、首字母和汉字模糊搜索的下拉框。项目是用vue+iview做的,iview中有select远程搜索。但是,iview框架也有弊病就是会将输入框中的输入值进行过滤,如果你搜英文的,ok是可以实现的,看人家例子准备的数据也是英文的,但咱要求的是中文也能搜索,首字母和拼音都支持。 输入中文,因为框架中是根据value取值的...

2019-07-01 15:05:22 3838 2

原创 vue项目中图片懒加载时出现的问题

项目中遇到一个问题,记录一下,vue项目中前期没有做图片懒加载的时候,当图片出现错误或者显示路径不对,我加了onerror事件进行错误监听并添加一张默认的图片,优化用户体验。后期因为图片数量变多,所以加入了图片懒加载,但在懒加载中挂载时只加了loading的图片,没有加error,所以导致页面图片未正常加载的地方出现默认图片闪烁的现象,最后在挂载时加入error引入一张默认图片就好了...

2019-06-21 14:23:04 3168

原创 大小不一样的图片随着盒子大小自适应

前提:vue+iview做后台管理系统需求:页面一行有固定的4张卡片,每张卡片里有图片,图片是从后台系统中上传的,大小不固定,要卡片中的图片高度随着屏幕大小自适应小屏幕效果:大屏幕效果:解决方法有两种:1. 利用@media媒体查询做。① 在index.html中加入meta标签 <meta name="viewport" content="width=dev...

2019-06-20 18:37:00 1866

原创 iview关闭抽屉弹层时清空Select弹框高亮样式

用iview做后台管理系统,首页数据列表页,点击新增按钮会弹出一个弹层,那个弹层用的是iview里的Drawer抽屉组件,里面的下拉框都是iview里的select组件,在新建完一条以后,再次打开下拉框里还会遗留上次选择过的样式,后来才知道需要用到一个方法clearSingleSelect。解决方案:在Select元素上定义一个ref属性,取到Select框,在点击取消时的...

2019-06-11 17:20:15 656

转载 多行省略号不显示的问题

最近做的项目中遇到一个很奇葩的事情,在我电脑上多行省略号是正常显示的,但是在测试人员的电脑上竟然不显示,怪不得叫测试机,哈哈。上网百度发现有人遇到同样的问题,在最下面的小字当中发现了答案,话不多说直接上图:我电脑的效果:测试人员电脑效果:解决方案:把包含旧属性的那几行用注释掉的两行包裹起来,打包时旧属性就不会被清除掉了,就可以正常显示了。啊,好神奇啊,好开...

2019-05-30 18:25:21 204

原创 iview表单校验上传图片成功后,提示文字不消失

最近做的项目中有直播和课程后台管理模块,遇到一个bug,其中有个功能是上传直播图片和直播附件,而且都是必填项。用的框架是vue+iview,用Form表单验证,对必填项做校验。当不填写时点提交会出现红色提示文字,但是当图片上传成功后,提示文字并不会消失。尝试在自定义校验中进行判断如果图片变量有数据就不提示,但是不管用。最后发现在图片上传成功的组件里需要把数据返回到父页面,父页面接收到...

2019-05-30 11:12:38 2225

转载 iview组件的Table表格的内容过多时,显示title提示

在iview的Table表格中,如果数据超出当前列的宽度,多余的部分会折行显示,使得该行的高度增加。为了实现*文本将不换行,超出部分显示为省略号的效果,iview提供了表头属性ellipsis。然而这个属性却有一个弊端,就是显示为省略号的部分对用户来说是不可见的,非常影响体验,而且在iview文档中,作者并未给出任何解决办法。最简单的解决办法是给相关数据增加title属性,使得鼠标移入时...

2019-05-28 18:16:02 925

原创 快速判断数组中每个对象同一属性值是否相同

做批量删除的时候,要确定数组对象中每一项中有没有发布状态的,如果有也就是判断releaseStatus字段有没有为true的,只要有一个为true就给出提示让撤回后再删除,如果没有发布中的直接删除,下面这句可以快速判断,只要有一个是true就返回false,否则返回true。看项目需要也可以用every来判断,具体用什么看具体业务逻辑,都是返回布尔值const search = [ ...

2019-05-28 14:11:13 12697

原创 在iview + vue项目中使用自定义icon图标

最近做一个后台管理系统,是用iview+vue cli2做的,在做的过程中需要将左侧的导航栏加入icon图标,但是iview库里的图标和UI要求不符,这就需要引入自己的图标库。1. UI设计师会把自己做的图标库上传到阿里巴巴图标库,打开设计师给的图标库地址,把所有要用到的图标点击加入购物车2. 到购物车中点击添加至项目3. 给项目起个名字,点击确定,...

2019-05-13 15:20:20 8501 1

转载 js数组去重的方法

1.遍历数组法它是最简单的数组去重方法(indexOf方法)实现思路:新建一个数组,遍历去要重的数组,当值不在新数组的时候(indexOf为-1)就加入该新数组中;var arr=[2,8,5,0,5,2,6,7,2];function unique1(arr){ var hash=[]; for (var i = 0; i < arr.length; i++) {...

2019-03-03 16:09:55 34

转载 js排序的方法

1. 冒泡排序var arr = [1,4,-8,-3,6,12,9,8];function bubbleSort(arr){ for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr.length-i-1; j++) { if(arr[j...

2019-03-03 13:29:37 3254

转载 从输入url到页面加载完成发生了什么

当用户输入url地址时,大致发生以下几步:输入网址,点击回车; 浏览器查找当前URL是否存在缓存,并比较缓存是否过期(包括浏览器缓存、系统缓存、路由器缓存); 发送到DNS服务器,并获取域名对应ip地址; 与web服务器建立TCP连接; 浏览器向服务器发送http请求; 服务器响应请求,并返回指定url的数据(或错误信息,或重定向的新的url地址); 浏览器下载服务器返回的数据及解...

2019-02-25 19:00:25 77

转载 跨域以及解决办法

同源:符合“协议+域名+端口”三者相同,就是同源。同源策略:同源策略,初衷是为了浏览器的安全性,保证浏览器不易受到XSS、CSFR等攻击。同源策略限制的内容有:Cookie、LocalStorage和IndexedDB等存储性内容 DOM和JS对象 AJAX请求发送后,被浏览器拦截但是有三个标签是允许跨域加载资源:<img src=xxx> <link h...

2019-02-25 18:33:51 54

转载 HTTP和HTTPS的理解

1. HTTP和HTTPS的基本概念HTTP:是客户端和服务器端用来传递消息的一种网络超文本传输协议,是一个客户端和服务器端请求和应答的标准(TCP)。HTTPS:HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,要比http协议安全。HTTPS协议的主要作用可以分为两种:一种是建立一个信息安全通道,来保证数据传输的安全;另一种就是确认网站的真实性。 ...

2019-02-25 16:43:06 60

原创 原生js实现一个随机点餐的小效果

html:<div class="wrap">        <div id="box">        </div><button id="start">开始</button><button id="stop">停止</button&a

2019-02-25 13:46:36 900

原创 js继承的几种方式

1. 原型链式继承即 子构造函数.prototype = ne问题:不能给父构造函数传递参数,改变子级构造函数里的对象时,父级也会跟着改变,父子构造函数的原型对象之间有共享问题。2. 借用构造函数继承数()注意:使用call和apply借用其他构造函数的成员, 可以解决给父构造函数传递参数的问题, 但是获取不到父构造函数原型上的成员。3. 组合式继承借用构造函数...

2019-02-25 13:35:30 36

转载 闭包

1.闭包概念:闭包是指有权限访问另一个函数作用域中的变量的函数。2.闭包的由来:要理解闭包,首先要理解javascript的特殊的变量作用域。变量的作用域无非就两种:全局变量和局部变量。javascript语言的特别之处就在于:函数内部可以直接读取全局变量,但是在函数外部无法读取函数内部的局部变量。出于种种原因,我们有时候需要获取到函数内部的局部变量。所以,为了解决这个问题就出现了闭包。3...

2019-02-25 13:10:05 84

转载 this指针的理解

js当中的this指向在创建时并不能确定,而是要看它所在的环境,也就是说不是由定义是决定的,而是由调用时决定的。通常会指向调用它的对象,深入一点的说,它的值取决于调用的模式。而在JavaScript中,一共有4中调用模式:方法调用模式、函数调用模式、构造函数调用模式、apply调用模式。1. 方法调用模式当一个函数是作为一个对象的属性时,我们通常称这个函数是这个对象的一个方法。当这个方法被...

2019-02-25 13:02:32 924 1

转载 数组的深浅拷贝总结

数组的浅拷贝(只能拷贝基本类型)ES5 方法总结1.slice方法    let arr = [2,4,434,43]    let arr1= arr.slice();    console.log(arr1); // [ 2, 4, 434, 43 ]2. 遍历数组    Array.prototype.clone = function(){        let a=[...

2019-02-24 21:29:11 155

原创 使用原生js实现邮箱模糊查询的效果

写的比较粗糙,还有很多改进的地方,先用来记录一下html:<div class="box">        <input type="text" placeholder="网易邮箱/常用邮箱" id="text">        <button id="clearBtn">清空</button&amp

2019-02-24 21:18:48 379

转载 webpack2.7.0配置不同的打包环境

前言在实际开发中,有很多需要根据不同环境配置不同的接口地址的情况,如果每回打包的时候都去改配置文件就超级麻烦,所以这边提供了一个自动化的方法,无需打包前修改配置文件就能实现根据不同环境调用不同接口。步骤1.修改package.json文件备注:cross-env是跨平台地设置及使用环境变量的插件2.修改build/build.js文件此处设置node环境变量的语...

2019-02-24 13:08:13 380

原创 Vue父子组件传值的方法

1.父向子传值props父组件:<child :inputName="name">子组件:(1)props: {   inputName: String,   required: true  }(2)props: ["inputName"]2.子组件向父组件传值$emit子组件: <span>{{childValue}}</s...

2019-02-23 23:29:05 37286

原创 vue中配置不同的代理同时访问不同的后台

如果和不同的后台调接口,如果后台接口没有合到一起,前端可以配不同的代理来共同访问他们的接口在config文件夹下的index.js中设置如下:proxyTable: {    '/api/login': {  // 第一个代理:此处的路径是所有接口前面相同的部分,用来匹配带有这部分路径的        target: "http://192.168.100.209:8910",...

2019-02-23 23:19:09 9706 2

原创 解决浏览器中点击input输入框时,placeholder的值不消失的方法

<input type="text" placeholder="请输入" onfocus="this.placeholder=''" onblur="this.placeholder='请输入'">

2019-02-23 23:12:40 5450 1

空空如也

空空如也

空空如也
提示
确定要删除当前文章?
取消 删除