前端端端端端端
可乐爆米花
这个作者很懒,什么都没留下…
展开
-
ie9兼容
判断浏览器是否是IE9及以下浏览器if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE", "")) <= 9) { // ...}ie9及以下浏览器不能通过window.location.origin获取当前链接的域名,需要做兼容:if (!windo原创 2020-07-23 11:35:12 · 340 阅读 · 0 评论 -
vue项目在IE下显示空白问题
解决办法:1.npm i babel-polyfill2.将webpack.base.config.js中将入口修改为entry: { app: ['babel-polyfill','./src/main.js']},3.在main.js中引入import "babel-polyfill";原创 2020-07-21 11:16:20 · 270 阅读 · 0 评论 -
Vue打包后报错,页面显示空白
问题描述:打包之后,生产环境页面显示空白,且控制台报错,如下:解决办法:将webpack.prod.config.js中publicPath修改为"/"参考:Vue 刷新后页面空白,报Uncaught SyntaxError: Unexpected token的问题webpack 配置 publicPath的理解...原创 2020-07-01 10:12:29 · 348 阅读 · 0 评论 -
vue设置history模式后页面刷新Cannot Get
开发中,将mode模式改为history后,页面刷新显示Cannot Getconst router = new VueRouter({ mode: "history", routes});原因:在webpack.config.js中设置devServer项中historyApiFallback解决办法:const config = { ... devServer: { // history模式下的url会请求到服务器端,但是服务器端并没有这一个资源文件,就会返回40原创 2020-06-03 16:01:48 · 2562 阅读 · 2 评论 -
侧边栏高亮问题
在侧边导航栏中点击某一项“账单”,此时账单菜单栏中高亮,路由配置为’/list’,从’/list’页面可以点击详情,可以进入详情页面查看详情。此时,路由发生变化,activeClass将随着路由的变化,从’/list’ 身上移到’/detail’上了,侧边栏的active Class不在了。如何 在’/detail’ 页面,也要 ‘/list’ 这个页面的样式(高亮)保留住呢?解决思路:给’/detail’ 加上一个路由元信息,在侧边栏去检查路由元数据,然后看是否需要给其active class。原创 2020-06-03 15:03:57 · 405 阅读 · 0 评论 -
webpack 打包压缩 ES6文件报错UglifyJs + Unexpected token punc «(», expected punc «:»
webpack打包压缩 ES6 js、.vue报错:ERROR in js/test.js from UglifyJsUnexpected token punc «(», expected punc «:» [js/test.js:1374,5]解决方案:配置babel,把配置放到文件【.babelrc】中{ "presets": ["es2015"]}原创 2020-05-29 16:20:26 · 2602 阅读 · 0 评论 -
vue 让元素回到顶部
vue 让元素回到顶部在切换路由时,我们需要让页面回到顶部,有以下几种方式:一、router在router中// 回到顶部router.afterEach((to, from, next) => { window.scrollTo(0, 0);})二、滚动条不在body上例如:<template> <!--.wrap-box元素固定高度,内容溢出时,该元素纵向滚动--> <div class="wrap-box" ref="s原创 2020-05-25 16:16:39 · 1575 阅读 · 0 评论 -
git pull拉取代码时WARNING: POSSIBLE DNS SPOOFING DETECTED!
今天早上拉取代码时出现错误:根据提示可以看到主要是.ssh/known_hosts的发送冲突,它是代码库对应的公钥。运行代码:rm -f ~/.ssh/known_hosts重新git pull即可。...原创 2020-04-23 10:54:04 · 645 阅读 · 0 评论 -
将获取到的translate内的角度转为数值
将获取到的translate内的角度转为数值function getmatrix(nowDeg){ var values = nowDeg.split('(')[1].split(')')[0].split(','); var a = values[0]; var b = values[1]; var c = values[2];...原创 2020-01-09 18:02:50 · 201 阅读 · 0 评论 -
vue项目打包后CSS样式在IE9中不完整
vue项目打包后在谷歌、火狐和IE10以上正常显示,但是在win7系统的ie9上页面样式乱掉,有一部分样式没有加载进来。原因:IE9对单个的css文件有大小限制,不能超过250kb,超过的话会自动截取掉。这样的话截取的样式就出现问题,IE9页面样式加载不了。解决办法:npm install --save-dev css-split-webpack-plugin在webpack.pro...原创 2020-01-08 15:16:37 · 979 阅读 · 1 评论 -
解决图片路径中含有空格,无法在background-image中正常显示的问题
解决图片名称中含有空格,无法在background-image中正常显示的问题在需求中通过后台传递的值动态渲染页面的某个div中的背景图片时,发现当有图片的路径中含有空格时,无法正常渲染。解决办法:把空格转义,然后设置给 backgroundImage 就没问题了var img = img.replace(/\s/g, encodeURIComponent(' '))$(".upload...原创 2019-12-22 19:05:50 · 4173 阅读 · 1 评论 -
前端实现模糊筛选
两种方式一、字符串方法indexOfvar len = list.length;var arr = [];for(var i=0;i<len;i++){ //如果字符串中不包含目标字符会返回-1 if(list[i].indexOf(keyWord)>=0){ arr.push(list[i]); }}return arr;二、...原创 2019-10-31 10:42:42 · 424 阅读 · 0 评论 -
一些常用CSS样式整理
1.文字超出显示省略号// 单行超出显示省略号.over{ width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} // 多行超出// 两行超出.overhide { display: -webkit-box !important; t...原创 2019-10-24 11:50:49 · 159 阅读 · 0 评论 -
一些有用的HTML5 pattern
一些有用的HTML5 pattern最近在做手机页面时,遇到数字输入的键盘的问题,之前的做法只是一刀切的使用 type="tel",不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了。于是想要尝试其它的实现方案,最终的结论却令人沮丧。不过也趁机详细了解了下pattern这个属性。type="tel" 和 type="number" 的区别这里还是先那么先交代一下最初遇到的问题。其实无论是t...原创 2019-01-09 10:13:14 · 194 阅读 · 0 评论 -
JS事件事件的冒泡和委派
事件的冒泡(Bubble)指的是事件的向上传导,当后代元素的事件被触发时,其祖先元素的相同时间也会被触发<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <s原创 2018-04-01 18:15:02 · 4457 阅读 · 2 评论 -
element-ui的el-select如何回显value对应的label值
现在的问题是不显示label,只显示value值原因是value的格式存在问题,数据库读取到的value数据类型不一定为number或string类型需要自己转换成相同的类型总结: 显示不正常 多数是由于得到的数据类型对应不上表单操作的数据类型 进行相应转换即可即:option的value值如果为number,保存后从后台拿到的值需要转为number类型;如果为string,则需要转为st...原创 2019-02-27 11:51:59 · 6948 阅读 · 0 评论 -
vue+node.js+mysql
首先创建一个sevver文件夹,里面存放后端文件文件夹下创建以下文件index.js 后端入口文件,启动后端服务db.js 数据库连接配置api.js 连接数据库,各种方法实现sqlMap.js sql语句router.js 后端 express 路由配置index.jsconst routerApi = require('./router');const bodyPar...原创 2019-02-19 09:34:52 · 921 阅读 · 0 评论 -
vue登录状态管理,vuex+sessionStorage
在使用vuex保存登录状态时,发现刷新页面就需要重新登录,因此将vuex与sessionStorage绑定在一起,这样刷新页面就不会掉了文件结构index.jsimport Vue from 'vue';import Vuex from 'vuex';import * as actions from './actions'import * as getters from './get...原创 2019-01-29 16:24:19 · 4280 阅读 · 0 评论 -
vue项目重新加载页面
在做退出操作时,希望在退出登录后,页面可以重新刷新,更新页面显示这是遇到的问题是:用vue-router重新路由到当前页面,页面是不进行刷新的采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好解决方法:provide / inject 组合作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上...原创 2019-01-29 09:16:54 · 5732 阅读 · 0 评论 -
border边框重叠问题(li的border不能覆盖ul的border)
在用ul标签做tab栏时,想实现ul一个底边框线是统一的颜色,在当前li上,要给li一个其他颜色的底边框线,盖住ul的底边框线。实现以下效果灰线是ul的线,蓝线是li的线。然后发现li的高度加上边框线的高度会把ul高度撑开,始终都会露出ul的线。之后把li的高度设为 ul高度+border的高度,之后在设置li的border就会刚好覆盖ul的border了。...原创 2019-07-16 12:05:59 · 1467 阅读 · 0 评论 -
封装轮播图
一个页面中有多个轮播图,需要对轮播图进行封装,使它们互不影响。下面是代码:HTML和CSS样式如下:<div class="v6_saas_left v6_tonglu_left"> <div class="saas_imgs"> <img class="img_active" src="/statics/output/images/v6_images/s...原创 2019-07-24 18:19:21 · 189 阅读 · 0 评论 -
页面适配之pt、px、em、rem用法和特点
页面适配之pt、px、em、rem用法和特点转载 2019-08-01 18:01:16 · 195 阅读 · 0 评论 -
window.open在Safari浏览器中无法打开
window.open在Safari浏览器中无法打开的解决办法在回调函数(最常见的就是发送ajax请求成功或者失败回调函数)中使用window.open时,在Safari浏览器会无效,原因是Safari的安全机制将其阻挡了。解决办法$obj.click(function(){ var newTab=window.open('about:blank'); $.ajax({ succ...原创 2019-08-29 11:53:32 · 1177 阅读 · 0 评论 -
Mac更新node和npm版本
查看本机当前Node和npm版本node -v npm -v 清除node的cache(清除node的缓存)sudo npm cache clean -f 安装"n"版本管理工具,管理nodesudo npm install -g n 更新node版本sudo n stable 更新npm版本sudo npm install npm@latest -g 再查一遍本机...原创 2019-08-29 15:34:11 · 132 阅读 · 0 评论 -
TypeError: CleanWebpackPlugin is not a constructor
TypeError: CleanWebpackPlugin is not a constructor在项目中引入clean-webpack-plugin打包后报错TypeError: CleanWebpackPlugin is not a constructor项目写法:引入:npm install --save-dev clean-webpack-pluginwebpack.co...原创 2019-08-30 14:50:18 · 340 阅读 · 0 评论 -
编译打包(端口被占用
端口被占用events.js:154 throw er; // Unhandled 'error' event ^Error: listen EADDRINUSE 0.0.0.0:3030 at Object.exports._errnoException (util.js:893:11) at exports._exceptionWithHostPor...原创 2019-09-17 10:22:46 · 145 阅读 · 0 评论 -
vue中使用echarts
安装Echarts依赖npm install echarts -S创建图表全局中引用:在main.js中// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts局部按需引用:由于全局引入会将所有的echarts图表打包,导致体积过大在需要使用的文件中引入// 引入基本模板let e...原创 2019-09-17 14:24:05 · 252 阅读 · 0 评论 -
vue中使用echarts-写一个echarts组件
项目中有多个地方需要使用同一个图表模块,需要显示一段数据趋势,点击右上角两个按钮,切换数据。效果如图:在考虑后,决定单独拎出来写一个组件,传值改变数据。代码如下:组件代码:在这里后台传过来的值的格式是将x、y轴数值放进一个数组中传给我,因此我这里对数据做了处理。可以根据数据格式进行修改。<template> <div class="echarts_outer"...原创 2019-09-20 15:59:55 · 742 阅读 · 0 评论 -
vue仿饿了么商店详情页面(列表左右联动、两侧滚动条互不影响)
参考:https://www.jianshu.com/p/66b75f684c84商店详情页面中要求页面划上去之后到达某一位置时,嘴上的tabs标签固定在最上边,下边的两个菜单列表可以滚动,且两个滚动互不影响;点击左侧的某一类别,右侧跳转到相对应部分。HTML<body> <div class="header"></div> <div...转载 2018-11-16 09:25:43 · 4453 阅读 · 1 评论 -
解决input number样式以及在移动端可输入字符的问题
默认在输入框最右有一个上下箭头,可以调节数字大小,如下图,但是我不需要,在css中加上以下代码,让上下箭头消失input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none;}input[type="number"] { -moz-appearance: ...原创 2019-01-09 10:03:45 · 3472 阅读 · 2 评论 -
npm运行报错Error: listen EADDRNOTAVAIL
使用npm run dev报错:Error: listen EADDRNOTAVAIL 10.75.167.184:8088运行不成功,查了资料发现是因为网络设置的是自动获得ip地址, 由于路由器是随机分配ip地址的,自动获取的ip地址和项目配置文件里面手动设置的 host 不一致,那么监听一个不存在的ip地址,自然会报错。解决方法:win + r 输入 cmd 进入命令行后,输入ipco...原创 2018-12-25 15:14:05 · 975 阅读 · 0 评论 -
click事件嵌套click事件多次触发的解决方法
这个问题是在做一个聊天界面时出现的想要的效果是点击左侧的头像时,获取其对应的id,之后在对话框中点击发送按钮时发送消息,并获取头像的id,这个时候发现,当点击发送绑定的click时,变量就会显示出所有点过的所有id。 最开始我想要解除事件冒泡,后来发现不是这个问题分析后发现每次点击外部的click事件后,内部的click事件都会绑定一次,因此会遍历很多次解决方案是每次点击后使...原创 2018-06-15 17:41:45 · 6314 阅读 · 3 评论 -
node实现表单图片、数据上传
在搭建博客时,想要在文章中添加图片作为文章封面,这时候要对前台表单中上传的文件进行上传等操作前台index.ejs页面的表单&lt;form class="form-signin" role="form" method="post" enctype='multipart/form-data'&gt; &lt;div class=&am原创 2018-07-05 18:06:45 · 772 阅读 · 0 评论 -
jQuery设置遮罩层下内容位置不跳动且不可滚动
发现在设置遮罩层底部position为fixed时,默认会回到最顶部,所以对代码进行了修改如下:var scrollTop $bonus.click(function(){ //开启弹出框时,获取scrollTop的值,设置底部position为fixed,并将值赋给他的top值 scrollTop = document.scrollingElement.scrollTop...原创 2018-11-29 14:32:58 · 725 阅读 · 0 评论 -
vue写一个toast弹窗公共组件
最近新项目遇到一个需求,在输入错误的时候,使用toast弹窗提示,在此之前,我使用的弹窗都是只写在单个页面上,需要的时候写一个,虽然也可以,但是对这个项目来说就太过麻烦了,于是想要写一个toast弹窗组件,在全局中引用。参考了从零开始徒手撸一个vue的toast弹窗组件这篇博文,我写了一个自己的弹窗组件。/src/components/toast/toast.vue&amp;lt;template...原创 2018-12-20 09:40:34 · 1478 阅读 · 0 评论 -
vue更改头像功能
-》如上图效果HTML代码:&amp;amp;lt;li class=&amp;quot;info_li info_img&amp;quot;&amp;amp;gt; &amp;amp;lt;b&amp;amp;gt;头像&amp;amp;lt;/b&amp;amp;gt; &amp;amp;lt;span class=&am原创 2018-12-06 17:15:11 · 2432 阅读 · 1 评论 -
解决vue中You may use special comments to disable some warnings....错误
错误提示:找到build/webpack.base.conf.js文件,注释或者删除掉:module->rules中有关eslint的规则module: { rules: [ // ...(config.dev.useEslint ? [createLintingRule()] : []), // 注释或删除 { test: /\.vue$/, lo...原创 2018-12-13 10:07:43 · 5017 阅读 · 0 评论 -
自定义函数
/** * 存储localStorage */export const setStore = (name, content) => { if (!name) return; if (typeof content !== 'string') { content = JSON.stringify(content); } window.localStorage.setItem(n...原创 2018-12-05 17:46:26 · 284 阅读 · 0 评论 -
解决vue项目点击按钮后链接后问号重新刷新页面
登陆页面时,输入完成后点击登陆,页面刷新一次,需要重新登陆,链接最后还出现一个“?”再次登陆才能登陆成功解决方法:这里是 form 表单,点击了button 按钮,触发了他的默认事件,就是触发了提交这个行为。所以使用@click.prevent 阻止默认事件...原创 2018-11-08 16:27:49 · 1014 阅读 · 0 评论 -
在vue中引入jQuery
一、在项目中安装jquery : npm i jqurey –save二、修改webpack.base.conf.js文件添加红框中的内容:const webpack = require('webpack')//在module.exports中添加如下module.exports = { //其他代码... plugins: [ new webpack.Prov...原创 2018-11-07 10:03:22 · 243 阅读 · 0 评论