- 博客(69)
- 收藏
- 关注
RSS订阅原创 eslint 提示变量或者引用 is defined but never used
eslint is defined but never used
2024-02-04 15:29:06
508
原创 解决 element-ui input=password 在浏览器会自动填充密码的问题
看了几种方案 都号称完美但不能完美解决问题后发现其根本原因是input type=password时浏览器会自动填充解决方法是通过使用input type=text 修改css属性达到预期效果```<el-input type="text" class="no-autofill-pwd" .........>.no-autofill-pwd { /deep/ .el-input__inner {-webkit-text-security:disc!im...
2021-11-10 14:05:45
1027
原创 element ui 表格滚动条抖动的问题
1.把.el-table的样式设为：position:absolute.el-table { position: absolute !important;}2.把包着表格的父级设为 position: relative.tableArea { position: relative;}修改表格滚动条样式：// 修改表格滚动条样式.el-table__body-wrapper::-webkit-scrollbar { width: 6px; heig...
2021-06-10 14:45:42
1747
原创 element-ui主表格多选后 二级弹框表格默认全选数据
需求：element ui的主数据列表多选后，点击按钮进入二级弹框后，让二级弹框的所有数据默认全选二级弹框结构：网上试了好多方法都未生效，只有用watch监听的方法才行。注意：这里必须放在this.$nextTick回调函数里，否则在element ui Dialog弹框里的表格，通过this.$refs.multipleTable是获取不到元素的watch: { // 主表格选择多选框后，监听二级弹框数据，设置默认全选 'gridData'() { this.$nextTic
2021-05-20 11:06:30
598
原创 vue根据屏幕大小适配表格高度
像这种效果，不论切换大小屏幕都要让页码直接在底部显示，不要出现外侧的滚动条，只要滚动内部表格就可以思路：在页面初始化的时候，要获取当前屏幕的高度减去顶部其他部分的固定高度，设置表格的高度，然后在mounted钩子里设置当屏幕切换时，重新获取屏幕高度，再重新赋值渲染页面就ok!上代码：html:data数据定义：钩子函数：created() { this.getUsers(); let screenHeight = document.docu
2021-05-07 16:09:35
1422
原创 通过设置proxyTable实现调用接口跨域
proxyTable: { '/api': { target: 'http://10.10.10.47:10003', //服务器目标接口域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '' //路径接口 } } }
2021-05-06 16:49:37
152
原创 vue登录页实现记住密码的操作
最近做一个后台管理系统，做登录页的记住密码功能，记录下：思路：点击登录按钮，调用登录接口，在登录成功回调里判断，如果记住密码已选，就把用户名密码存到Cookie里，否则就清除Cookie；点击退出后回到登录页，在登录页的created钩子函数里，从cookie里取用户名、密码赋值给当前input框，checked设为true。思路图：上代码：getCookie，setCookie，clearCookie方法：//读取cookiegetCookie() { if (docum
2021-04-25 17:38:29
898
原创 element ui 邮箱非必填校验
业务场景：在新增用户弹框里，邮箱为非必填项，不填也能提交成功，但是如果填了，要进行格式校验vue结构：要加prop<el-form-item label="邮箱" prop="email"> <el-input v-model="editForm.email" clearable></el-input></el-form-item>data数据里定义校验规则：// 邮箱校验规则const checkEmail = (rule, v
2021-04-23 18:10:28
2498
原创 element ui 点击修改开启停用按钮状态
后台在查询用户列表时，返回一个status状态值 true 或 false 来表示 开启 或者 停用true为开启，false为停用，所以对应的操作应该是相反的，开启(true)的时候显示停用按钮，停用(false)显示开启按钮操作区代码示例：因为调用开启停用接口，后台并未返回状态值，直接用查询接口中的status值做取反处理即可，也就是当前行的row.status最后，点击开启或关闭按钮，就会调用接口改变状态，同时按钮颜色也会跟着改变...
2021-04-23 16:34:39
3686
原创 调用接口时form-data形式如何传递数据
和后台调接口的时候遇到一个问题，记录一下调用退出登录的接口时，使用的是form-data的形式，在vue中如何设置1.需要在axios拦截器的地方通过传递过来的 type 值来判断，如果是form就设置请求头：content-type：application/x-www-form urlencoded；// Request interceptorservice.interceptors.request.use(config => { // 判断有无token，如果有设置h.
2021-04-21 14:56:18
9007
原创 yarn在vscode里启动报错
安装完yarn，一定要配置环境变量，在全局下运行，在D盘下运行yarn --version都可以看到版本号，但是在vscode里报错如下：这是因为注册表里权限策略问题：通过get-ExecutionPolicy查看注册表权限是Restricted是受限制的。然后可以设置 set-executionpolicy remotesigned设置失败，提示以管理员身份运行，然后win+X，选择Windows PowerShell(管理员)权限打开执行：询问是否更改执行策略，输入Y
2021-01-25 12:28:17
1334
原创 gulp启动项目报错
有一个需要gulp启动的项目，在启动过程中出现错误，用来记录一下。直接到包含gulpfile.js的项目目录下用gulp启动报错，查看node版本是14.15.3版本，gulp是3.9.1版本，可能是node版本太高了，然后想用npm install n -g安装这个node版本管理模块来回滚或者升级node版本，发现也是报错。如下使用npm install -g n --force还是不行。最后把自己电脑上的node删除，从node历史版本（链接：https://nodejs.org/d.
2021-01-18 14:26:19
726
原创 win10系统nginx文件下载配置
win10配置nginx文件下载1.首先打开nginx官网下载地址：http://nginx.org/en/download.html2.下载最新的稳定版本：3. 下载好之后，解压放到自己想放的盘下面4.在解压的根目录（nginx.exe所在页面）下 打开cmd窗口 执行start nginx.exe 或者直接执行 nginx.exe 即可启动Nginx5.此时在浏览器中输入localhost:80 即可进入欢迎页，在任务管...
2020-12-25 17:15:24
796
原创 鼠标hover表格头部信息出现闪烁
在做下面这种表格的时候要求加入hover提示，鼠标hover上去出现提示信息，离开图标提示信息消失。有时会出现hover上去不断闪烁的现象。可以从下面3个方面试着解决：1. 换成mouseenter事件和mouseleave事件2. 加入setTimeout可以延时100到300毫秒触发3. hover的元素要加一句样式：pointer-events:none;//...
2019-11-28 14:01:43
367
原创 this.$router.push用query传参对象时需注意的地方
在vue项目中，我们用函数式编程this.$router.push跳转，用query传递一个对象时要把这个对象先转化为字符串，然后在接收的时候要转化为对象，要不然会接收不到参数。要不就把参数分开传递，不要放到对象里。this.$router.push({ path: '/liveing', query: { routeParams: JSON.stringif...
2019-11-28 10:35:53
11006
1
原创 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
239
原创 解决从登录页通过this.$router.push跳转首页后 点返回健路由变而页面不变的问题
做H5项目的时候遇到一个问题，我从 login 登录页通过 this.$router.push（{ name: 'home' }）路由登录成功后跳转到首页，但在ios系统下，会有一个默认返回条，点击返回键出现以下情况，路由显示的是回到登录页，而页面却还是首页。解决思路：开始我试着把push改为replace，但是发现并没什么卵用，还是会出现问题，所以只好用路由导航守卫去监听。在首页加入...
2019-09-05 14:33:11
7665
原创 解决font-weight：600在安卓机不生效的方法
按照UI设计图给的 font-weight:600 直接设置，发现苹果机是字体是加粗的，安卓机没有变化，改成 font-weight:bold 就好了
2019-08-29 10:59:57
6717
1
原创 iview表格处理后台返回的字符串
在用vue+iview做的一个项目中，后台给我返回一个名称和费用拼接的字符串，我在iview的表格中显示出来，并且要让折行显示或者是加四个空格显示。发现后台给我加上的空格在前端根本显示不出来，还得自己处理。效果图：后台返回数据：typeList: " 图文咨询 (0.01) 视频会诊 (0.02)"解决思路：拿到后台给的属性，先把把字符串用空格分隔成数组，取到自己...
2019-08-29 10:53:23
1674
原创 line-height在安卓机位置靠上
做一个H5页面，发现字在浏览器、苹果手机和安卓手机下表现都不同。苹果手机是垂直居中的，但是安卓机上，字是靠上的。解决办法是把字体大小、定位、间距、高度和边框线整体都放大2倍，然后再缩小一倍，就可以了transform: scale(0.5)transform-origin: 0 0...
2019-08-29 09:59:22
428
原创 H5搜索页调起软键盘
在H5项目中，进入如搜索页，点击搜索页再跳到另一个搜索页，要调起键盘事件在第一个搜索页的input绑定click事件，跳转到第二个搜索页，在input框加autofocus="autofocus"，发现有时好用，有时会闪现一下又消失，然后在mounted里加入一句代码，貌似好了// 进入页面调起键盘this.$nextTick(() => { this.$refs.se...
2019-08-20 10:12:32
647
原创 多级三目运算符的判断
在vue项目里，选择婚姻已婚和未婚状态，也可以不选，后台返回字段 maritalStatus 为0时代表未婚，1代表已婚如果不选就显示-<span>婚姻：{{ datas.maritalStatus !== null && datas.maritalStatus === 0 ? ('未婚', '已婚') : '-' }}</span>...
2019-08-08 11:02:17
2277
原创 vue-router中的router-link的active-class
在vue-router中做底部导航栏加active样式的做法：在router.js中设置linkExactActiveClass属性：在使用的地方加入exact:定义公共样式：.active{ color: #51BC8A }...
2019-07-16 15:28:17
1090
原创 用户名、密码都有值激活提交按钮
最近用vue做移动端项目，要求当所有input框都有值时才点亮提交按钮，如下图：解决思路：通过三个input框的v-model值运用逻辑运算符返回一个布尔值，通过computed计算属性return出去，用此变量控制提交按钮button的disabled的禁用状态。具体做法：结构：computed属性的设置：当3个变量都为true时，返回true，disable...
2019-07-16 15:19:48
553
原创 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
2170
原创 地址栏url解析为对象
function getUrlParams(url) { const keyValueArr = url.split('?')[1].split('&') let paramObj = {} keyValueArr.forEach(item => { const keyValue ...
2019-07-04 14:28:15
471
原创 vue中后端做Excel导出功能返回数据流前端如何做处理
项目中有一个导出功能的实现，用博客来记录一下。因为需求对导出表格的数据格式和样式有要求，所以这个导出功能放到后端来做，而且后端返回的是数据流，所以需要处理成想要的表格并导出来。先看下效果图：页面效果：点击 导出Excel 调用导出接口成功了：后台返回的数据流，一堆看不懂的乱码：接下来要处理这堆乱码，因为用到的地方多，所以在util.js...
2019-07-03 17:01:54
33703
18
原创 同时支持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
3102
原创 echarts图表使用v-show控制图表显示不全的问题
最近做echarts图表时，因为涉及到使用开关变量控制不同图表的显示隐藏，用 v-if 时会出现没有获取到dom结构而报错，所以改用 v-show，但是 v-show 本身是结构已经存在，当数据发生变化时，结构并未重新渲染，所以会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况，就像下图：还折腾了半天，其实就是当数据请求出来后，调用绘制ehcart...
2019-07-02 17:18:49
9269
4
原创 vue+iview实现拼音、首字母、汉字模糊搜索
最近项目做的后台管理系统中，要求实现一个支持拼音、首字母和汉字模糊搜索的下拉框。项目是用vue+iview做的，iview中有select远程搜索。但是，iview框架也有弊病就是会将输入框中的输入值进行过滤，如果你搜英文的，ok是可以实现的，看人家例子准备的数据也是英文的，但咱要求的是中文也能搜索，首字母和拼音都支持。 输入中文，因为框架中是根据value取值的...
2019-07-01 15:05:22
8540
2
原创 vue项目中图片懒加载时出现的问题
项目中遇到一个问题，记录一下，vue项目中前期没有做图片懒加载的时候，当图片出现错误或者显示路径不对，我加了onerror事件进行错误监听并添加一张默认的图片，优化用户体验。后期因为图片数量变多，所以加入了图片懒加载，但在懒加载中挂载时只加了loading的图片，没有加error，所以导致页面图片未正常加载的地方出现默认图片闪烁的现象，最后在挂载时加入error引入一张默认图片就好了...
2019-06-21 14:23:04
4681
原创 大小不一样的图片随着盒子大小自适应
前提：vue+iview做后台管理系统需求：页面一行有固定的4张卡片，每张卡片里有图片，图片是从后台系统中上传的，大小不固定，要卡片中的图片高度随着屏幕大小自适应小屏幕效果：大屏幕效果：解决方法有两种：1. 利用@media媒体查询做。① 在index.html中加入meta标签 <meta name="viewport" content="width=dev...
2019-06-20 18:37:00
6079
原创 iview关闭抽屉弹层时清空Select弹框高亮样式
用iview做后台管理系统，首页数据列表页，点击新增按钮会弹出一个弹层，那个弹层用的是iview里的Drawer抽屉组件，里面的下拉框都是iview里的select组件，在新建完一条以后，再次打开下拉框里还会遗留上次选择过的样式，后来才知道需要用到一个方法clearSingleSelect。解决方案：在Select元素上定义一个ref属性，取到Select框，在点击取消时的...
2019-06-11 17:20:15
1465
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人