- 博客(30)
- 收藏
- 关注
RSS订阅
原创 关于element-ui中使用table表格相关问题
关于element-ui中使用table表格相关问题1.hover某一行时修改背景颜色可引入固定代码.el-table--enable-row-hover { .el-table__body tr:hover > td { background: #E6FFF7;//这里写你想切换的颜色 }}`2. 固定表头当你的表格某一行需要hover或者active增加一定的样式或效果时，你会发现样式效果加上后，表头就算是固定宽度，但是还是会出现不断闪烁，这时候可在 总css文件里面
2021-01-25 20:42:59
397
1
原创 vant+vue实现远程搜索和关键字高亮功能
实现效果如图：逻辑代码如下： //html代码 <van-search v-model="searchVal" shape="round" show-action @cancel="onCancel" @search="onSearch" @input="onSe
2022-05-30 12:05:50
1616
原创 【单行/多行设置文字超出固定宽度，显示省略号...】
单行省略 width: 135px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;多行省略 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; //如果是两行，这里就写2 overflow: hidden;...
2022-05-30 11:43:41
112
原创 解决VUE修改数据页面不重新渲染问题
解决VUE修改数据页面不重新渲染问题开发中遇到问题：在数组对象里面动态赋值，数据更新后，页面却不对应更新原因发现：利用索引直接设置数组对象值，页面不会刷新解决办法一：用$set将值赋值到数组对象的每一项，如果不用set赋值，值正常可以赋值，但是页面不会更新，已踩坑。解决办法二：用Object.assign赋值处理关于Object.assign的使用可参考ES6或者： 以下可参考: Object.assign....
2021-10-26 18:08:59
1696
原创 前端将xml格式数据转换成json格式数据的数据处理
使用插件：x2js this.$request('PROPFIND', url, headers, body).then( res => { var basicData = this.$x2js.xml2js(res.body).multistatus.response; console.log('原始数据',basicData) let detailDate = []; basicData.forEach( i => {
2021-03-19 10:59:31
1425
原创 [前端优化一]前端如何避免同时下发两个相同的请求
[前端优化一]前端如何避免同时下发两个相同的请求原因：http在下发请求时，如果不做任何处理，往往会存在点击过多，同时下发多个相同请求，给服务器造成压力，页面卡顿，影响使用。解决方法：以下贴出相关代码：// 请求拦截器axios.interceptors.request.use((config) => { // 发起请求时，取消掉当前正在进行的相同请求 if (config.url.indexOf('system') === -1 && promiseArr[con
2021-02-21 11:26:58
846
原创 vue项目中封装弹框为子组件 涉及的相关父子组件传参的问题
【VUE报错】vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “dialogVisib
2021-01-28 20:38:12
626
1
原创 解决element-ui中，数据嵌套太深，表单验证拿不到值的问题
因为后台返回的数据层次结构太深，所以在双向绑定的时候没有一一定义，最后在做验证的时候发现，数据没有定义，直接通过我们的form表单，是拿不到数据的，也做不了验证，就只能整个页面重新规范开发，这里给出应对数据嵌套太深，表单验证拿不到值的解决方法...
2020-11-04 17:57:44
3580
3
原创 element-ui中表格快速渲染方法
以前习惯用v-for遍历后去渲染，后来公司的静态页面都是做好的，只需要渲染数据即可，学到了一个快速的方法1. 将要渲染的表格内容用prop表示出来2. get到的数据用对象保存3. 如果要根据后台返回不同的字段，显示不同的值，可定义formatter函数下面贴出全部代码<template> <div class="voice-info"> <div class="equipInfo-voice"> <div class="
2020-11-04 17:12:24
2104
原创 解决element-ui中span标签默认不显示空格问题
最近遇到一个bug，后台返回来的数据有空格，但是前端用span标签渲染上去，空格就自动清除了，找了好久，才发现给span标签添加一行样式，一切都解决了span{ white-space:pre;}快拿去试试吧~
2020-10-16 17:02:54
4079
2
原创 关于Vue项目中使用element-ui组件的upload上传文件遇到的问题
关于Vue项目中使用element-ui组件的upload上传文件遇到的问题1.这里的action可以自定义，写后台上传图片/文件的地址2.上传图片/文件时默认不携带请求头，所以我们需要自己手动去添加请求头，这里的请求头要写在计算属性中...
2020-09-16 15:28:42
1326
原创 Vue 解决项目中重复点击相同路由报错问题
报错内容vue-router.esm.js?8c4f:2089 Uncaught (in promise) NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”, message: “Navigating to current location (”/changePassword") is not allowed", stack: “Error↵ at new NavigationDupli
2020-08-18 14:02:42
1013
1
原创 Vue项目中实现简单的权限管理
一，页面级别的权限管理（通过角色判断能否进入该页面）1.添加路由元信息，定义各个页面的角色数组2. 在导航守卫中，判断用户的角色是否存在于数组中，存在即可访问3. 优化一下：用户不能访问的页面，左侧的导航栏上也应该设置隐藏二，按钮级别的权限管理（不同的角色使用页面，可操作的功能不同）1. 抽取文件directive/directive.js ，自定义指令并在main.js中导入2. 在不同的页面，根据用户角色对按钮的使用权限插入自定义属性...
2020-08-17 13:45:23
1552
1
原创 解决Element-ui中侧边栏最常出现的小问题
1. 解决侧边导航栏收缩后，右侧内容不能一起收缩的问题解决方法：修改width属性值2. 解决侧边导航栏不能平铺整个页面解决方法：给导航栏最小高，单位用vh这里补充vh vw的用法vh：相当于浏览器的高度vw：相当于浏览器的宽度例如：calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小...
2020-08-17 10:41:28
4309
1
原创 vue项目中对token的封装处理
1.将token存储在localstorage中的处理//设置一个固定的key值const KEY='Authorization'//暴露三个方法//设置tokenexport function setToken(token){ window.localStorage.setItem(KEY,token);}//获取tokenexport function getToken(){ return window.localStorage.getItem(KEY);}//删
2020-06-19 11:16:13
1437
原创 解决vue项目中遇到的深拷贝浅拷贝问题
解决vue项目中遇到的深拷贝浅拷贝问题遇到的问题：使用element-ui修改表单文本框的数据时，无论确定还是取消，页面数据都在同步修改原因：复杂类型的赋值是浅拷贝，直接赋值 会导致双向修改解决的方法：将浅拷贝转换成深拷贝解决思路：先把该对象转成字符串(普通数据类型), 就没有引用类型的影响了。再转回对象使用。转换方式 ：JSON.parse(JSON.stringify(对象))这里简述下深拷贝浅拷贝的概念浅拷贝： 将A对象赋值给B对象，修改B对象的属性和方法会影响到A对象的属性和方法。深
2020-06-08 17:47:02
3126
1
原创 Element-ui里面没有的图标，推荐使用Iconfont（阿里图标库）及详细用法
Element-ui中的图标有限，写项目的时候难免会遇到Element-ui中没有的图标，这里推荐使用Iconfont（阿里图标库），里面的图标样式超多~链接: 阿里图标库-官网地址.以下给出我认为比较简单的使用方法1.点开图标库，搜索你想要的图标样式2.将你需要的图标添加到购物车，这里需要登录，可以使用github账号3.这里添加到项目，这里项目名字可以随便写4.将文件下载到本地，并解压然后复制到style文件下5.在main.js下导入6.打开iconfont.css文件，找到
2020-05-27 18:14:48
2492
1
原创 解决修改element-ui样式无法生效问题
vue项目中，通常我们在写样式的时候为了避免全局污染，我们会给当前组件的样式加上scoped，让当前样式只作用于当前组件，但是在写项目的时候会发现一个问题：写在scoped里面的样式并不能修改element-ui的原有样式，不管是加上/deep/还是!important这里给出解决方法：...
2020-05-27 17:40:50
2194
原创 vue中使用moment.js设置日期格式
需求：使用步骤：1.npm安装npm install moment --save2.在main.js中导入并添加到vue的原型上import moment from 'moment'//导入moment插件Vue.prototype.$moment = moment;//添加到vue的原型上//moment.locale('zh-cn');//如果需要汉化可自行添加3.哪个组件需要使用就在哪个组件中导入import moment from 'moment'4.设置过滤器fil
2020-05-26 17:18:48
331
原创 总结css3的十大滤镜
1、模糊滤镜（px）给图像设置高斯模糊。值越大越模糊，默认是0，就是不模糊。filter:blur(4px);2、亮度（%）给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。 filter: brightness(200%);3、对比度（%）调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的
2020-05-26 14:24:46
231
原创 对vue中的input输入框进行邮箱验证
如图效果，不是表单验证，是对input输入框的单独验证可以给输入框添加@blur事件函数，代码如下//给输入框添加事件函数 <el-input prefix-icon="el-icon-message" v-model="email" @blur="OnSubscribe()"></el-input>//事件函数的逻辑 OnSubscribe() { //邮箱验证的正则表达式 const reg = /\w+([-+.]\w+)*@\w+([-.
2020-05-26 14:08:12
5035
1
原创 解决element-ui走马灯轮播图高度写死，无法自适应页面问题
最近项目中需要写到一个轮播图，我直接套用的了element-ui的走马灯，但是走马灯的高度是固定写死的，这样页面缩放就会塌陷，没办法实现屏幕自适应，所以我就想能不能根据图片的宽高比例，动态获取图片的高度，实现响应式布局，下面给出解决办法：1. 给图片加载load加载事件，并获取图片第一次渲染时的高度因为是参照的大佬写的博客自己改造的，下来去了解了nextTick的基本用法：链接: 官方文档：vue.js的异步更新队列.简单总结下nextTick的使用场景：*1.在vue声明周期的created(
2020-05-26 11:53:05
3340
2
原创 新版vue-cli下怎么安装并使用jquery，以及怎么解决$ is not defined的配置问题
由于element-ui里面的默认ui样式，并不能满足目前项目中需要用到的一些样式，所以我会去安装jquery，引入需要用到的jquery插件。这里是详细的安装使用步骤：1. 安装jquerynpm install jquery --save# 如果你更换了淘宝镜像，可以使用cnpm来安装，速度更快cnpm install jquery --save2.配置webpack看其他博主...
2020-04-20 16:08:22
1583
原创 css实现图片变灰
今天设计图上有需求是给图片一个hover效果，让图片变灰，这里我们可以尝试用css的灰色滤镜代码如下： //html结构 <img :src="item.img" alt @click="$router.push('/after')" /> //css中的样式 img { width: 250px; height: 250px; ...
2020-04-15 16:13:53
1184
原创 一行代码简单解决项目中需要用到的验证码
简单解决项目中需要用到的验证码在写一个表单提交的时候，项目后台还没有给到我验证码的接口，让我自己去网上找找处理验证码的方案，这里找到了一个验证码接口，分享如下http://183.237.67.218:3002/captcha这个网址刷新一次验证码就更新一次，为了以防验证码有重复情况，可选择在后面拼接随机数或者时间戳,随机数小概率情况下也可能重复，所以我拼接了时间戳，肯定不会重复，这样一个验证码...
2020-04-10 11:42:09
143
原创 关于Ubuntu字体在浏览器显示失效的解决方法
关于Ubuntu字体在浏览器显示失效的解决方法最近一直在做公司国外的官网，独立开发，前端小菜鸟会遇到很多问题，解决方法就是在网上找各种博客汲取经验，今天公司UI设计出了一个新的页面字体，我就直接设置上去了，但是明明font-family：Ubuntu设置好了，字体也没生效，才发现font-family里面没有这类字体导致无法生效，如果再次遇到同样的问题，使用以下代码即可解决需要什么字体就导入什...
2020-04-09 11:43:47
643
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人