- 博客(141)
- 收藏
- 关注
RSS订阅原创 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
316
原创 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
256
原创 Vue打包后报错，页面显示空白
问题描述：打包之后，生产环境页面显示空白，且控制台报错，如下：解决办法：将webpack.prod.config.js中publicPath修改为"/"参考：Vue 刷新后页面空白，报Uncaught SyntaxError: Unexpected token的问题webpack 配置 publicPath的理解...
2020-07-01 10:12:29
327
原创 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
2367
2
原创 侧边栏高亮问题
在侧边导航栏中点击某一项“账单”，此时账单菜单栏中高亮，路由配置为’/list’，从’/list’页面可以点击详情，可以进入详情页面查看详情。此时，路由发生变化，activeClass将随着路由的变化，从’/list’ 身上移到’/detail’上了，侧边栏的active Class不在了。如何 在’/detail’ 页面，也要 ‘/list’ 这个页面的样式（高亮）保留住呢？解决思路：给’/detail’ 加上一个路由元信息，在侧边栏去检查路由元数据，然后看是否需要给其active class。
2020-06-03 15:03:57
359
原创 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
2562
原创 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
1514
原创 git pull拉取代码时WARNING: POSSIBLE DNS SPOOFING DETECTED!
今天早上拉取代码时出现错误：根据提示可以看到主要是.ssh/known_hosts的发送冲突，它是代码库对应的公钥。运行代码：rm -f ~/.ssh/known_hosts重新git pull即可。...
2020-04-23 10:54:04
609
原创 将获取到的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
186
原创 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
911
1
原创 解决图片路径中含有空格，无法在background-image中正常显示的问题
解决图片名称中含有空格，无法在background-image中正常显示的问题在需求中通过后台传递的值动态渲染页面的某个div中的背景图片时，发现当有图片的路径中含有空格时，无法正常渲染。解决办法：把空格转义，然后设置给 backgroundImage 就没问题了var img = img.replace(/\s/g, encodeURIComponent(' '))$(".upload...
2019-12-22 19:05:50
3930
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
389
原创 一些常用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
142
原创 vue中使用echarts-写一个echarts组件
项目中有多个地方需要使用同一个图表模块，需要显示一段数据趋势，点击右上角两个按钮，切换数据。效果如图：在考虑后，决定单独拎出来写一个组件，传值改变数据。代码如下：组件代码：在这里后台传过来的值的格式是将x、y轴数值放进一个数组中传给我，因此我这里对数据做了处理。可以根据数据格式进行修改。<template> <div class="echarts_outer"...
2019-09-20 15:59:55
730
原创 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
239
原创 编译打包（端口被占用
端口被占用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
126
原创 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
326
原创 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
117
原创 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
1128
原创 封装轮播图
一个页面中有多个轮播图，需要对轮播图进行封装，使它们互不影响。下面是代码：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
162
原创 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
1394
原创 element-ui的el-select如何回显value对应的label值
现在的问题是不显示label，只显示value值原因是value的格式存在问题，数据库读取到的value数据类型不一定为number或string类型需要自己转换成相同的类型总结： 显示不正常 多数是由于得到的数据类型对应不上表单操作的数据类型 进行相应转换即可即：option的value值如果为number，保存后从后台拿到的值需要转为number类型；如果为string，则需要转为st...
2019-02-27 11:51:59
6876
原创 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
892
原创 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
4251
原创 vue项目重新加载页面
在做退出操作时，希望在退出登录后，页面可以重新刷新，更新页面显示这是遇到的问题是：用vue-router重新路由到当前页面，页面是不进行刷新的采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好解决方法：provide / inject 组合作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上...
2019-01-29 09:16:54
5663
原创 解决Mysql Error:The user specified as a definer (‘mysql.infoschema’@’localhost’) does not exist
SET GLOBAL innodb_fast_shutdown = 1;2.mysql_upgrade -u root -p
2019-01-09 15:55:17
11215
4
原创 一些有用的HTML5 pattern
一些有用的HTML5 pattern最近在做手机页面时，遇到数字输入的键盘的问题，之前的做法只是一刀切的使用 type="tel"，不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了。于是想要尝试其它的实现方案，最终的结论却令人沮丧。不过也趁机详细了解了下pattern这个属性。type="tel" 和 type="number" 的区别这里还是先那么先交代一下最初遇到的问题。其实无论是t...
2019-01-09 10:13:14
181
原创 解决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
3324
2
原创 vue.router router.replace点两次返回问题及解决方案
三个页面a , b , c , a页面router.push跳转至b，b再router.push跳转至c，c使用$router.replace("b")回到b，然后点击b页面的返回键，需要点击两次才能回到a页面。通过进一步的观察发现，第一次点击其实并不是没有反应，而是页面返回到了首次的b页面。这就是说，在C页面使用replace替换掉的是C页面的路由，C页面之前的B页面历史记录还存在。要c保...
2019-01-04 10:34:10
7765
1
原创 vue回到顶部组件
html<template> <a href="javascript:;" class="toTop" @click="backTop" v-show="backToTop"> <i class="iconfont">&#xe65d;</i> </a&
2018-12-29 11:08:01
1244
1
原创 vue中使用Swiper
一1.下载swiper$ npm install swiper --save2.在main.js中引入cssimport Vue from 'vue'//引入swiperimport 'swiper/dist/css/swiper.css';3.在页面中使用 &amp;lt;div class=&quot;swiper-container&quot;&amp;gt; &amp;lt;
2018-12-28 14:59:22
165
原创 让项目可以使用localhost访问也可以使用ip访问
在初始化一个项目后，使用npm start后，就可以通过localhost:8080访问项目了，但是想要在手机上同时访问就不行了。这时候可以将config/index.js中的host的默认值localhost改为自己的ip地址，这样在手机上输入ip就可以访问了。但是这样只能通过ip地址进行访问，localhost就不能使用了，查了资料后，有一种方法既可以使用localhost访问也可以使用i...
2018-12-27 09:52:50
1255
原创 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
947
原创 vue写一个toast弹窗公共组件
最近新项目遇到一个需求，在输入错误的时候，使用toast弹窗提示，在此之前，我使用的弹窗都是只写在单个页面上，需要的时候写一个，虽然也可以，但是对这个项目来说就太过麻烦了，于是想要写一个toast弹窗组件，在全局中引用。参考了从零开始徒手撸一个vue的toast弹窗组件这篇博文，我写了一个自己的弹窗组件。/src/components/toast/toast.vue&amp;lt;template...
2018-12-20 09:40:34
1423
原创 vue中使用px2rem
1.安装插件npm install --save-dev postcss-px2rem npm install --save-dev px2rem-loader2.配置px2rembuild目录下vue-loader.conf.js中，做如下修改：postcss:[require('postcss-px2rem')({'remUnit':37.5,'baseDpr':2})]如图...
2018-12-14 18:08:15
1597
原创 解决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
4902
原创 获取网址中的参数
获取单个参数，使用正则 // 获取单个参数 function getParams(str) { var t = new RegExp("(^|&)" + str + "=([^&]*)(&|$)"), n = window.location.search.substr(1).match(t); ...
2018-12-10 17:01:03
965
原创 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
2358
1
原创 自定义函数
/** * 存储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
276
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人