![](https://img-blog.csdnimg.cn/207e0fb3156c44d18846b768428e31db.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue2实战记录
文章平均质量分 55
vue2是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,vue2被设计为可以自底向上逐层应用。vue2 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,vue2 也完全能够为复杂的单页应用提供驱动。
百思不得小李
互相学习,多多指教
展开
-
Vue 引入config.js后别的js访问不到window对象下的属性
这个时候我们打印window.g就是undefined。因为vue的编译是以webpack为基础的 而index.html的引用在webpack编译之前 无法使用相对路径 而BASE_URL为内置全局变量 可以指向到项目真正的根目录下。这是因为<%= BASE URL %>代表 public文件夹下,<%= BASE_URL %>data/表示public/data 文件夹下。原创 2024-04-08 16:59:59 · 324 阅读 · 0 评论 -
Vue axios请求报错后重复提示同一句话,处理只提醒一次这句话,避免重复提醒
【代码】Vue axios请求报错后重复提示,处理只提醒一次。原创 2024-04-08 14:45:46 · 398 阅读 · 0 评论 -
vue iview table实现全选
【代码】vue iview table实现全选。原创 2024-04-08 11:02:01 · 446 阅读 · 0 评论 -
Vue input密码输入框自定义密码眼睛icon
【代码】Vue input密码输入框自定义密码眼睛icon。原创 2024-04-07 09:22:44 · 505 阅读 · 0 评论 -
Vue项目登录页实现获取短信验证码的功能
现在我们管理后台有个需求,就是登录页面需要获取验证码,用户可以输入验证码后进行登录。之前我们写过不需要调后端接口就获取验证码的方法,具体看。原创 2024-04-01 14:25:22 · 1024 阅读 · 0 评论 -
JS实现双向数据绑定的三种方式
【代码】JS实现双向数据绑定的三种方式。原创 2024-04-01 13:50:21 · 493 阅读 · 0 评论 -
从A项目跳转到B项目,Vue两个不同项目之间实现跳转
这里的window.g.BackUrl是我们在B项目的public下的config.js里对跳回地址进行设置的值,也就是在B项目代码config.js里写上A项目的访问地址,方便调用,然后这里homePage也是A项目的首页路由地址,这样就实现了从B项目跳回A项目。最近遇到一个需求,就是有两个不同的项目,姑且叫项目A与项目B吧,前端技术栈都是Vue,现在登录成功A项目后希望点击A项目里某个按钮可以跳转到B项目里的某个页面,然后点击B项目里某个按钮可以跳回到A项目里的某个页面。原创 2024-04-01 11:23:38 · 596 阅读 · 0 评论 -
Vue动态设置控制表格列表展现列
最近遇到一个需求,表格列表默认不展示某一列,当我设置后可以展示该列,也可以展示和隐藏别的列,起到可以对整个表格列展示隐藏控制的效果,如下示例,默认不展示“单位名称”这一列,在我点击设置齿轮后可以看到,有“单位名称”这一列,但未打钩:当我勾中“单位名称”,去掉“地址”的勾中后,列表可以看到“单位名称”这一列,看不到“地址”这一列。达到了我们控制表格列展示隐藏的效果。这里用到的UI组件库是iview和elementUI。实现思路是:列表展示列我们用到了tableHead,然后我们定义了一个数组showLis原创 2024-03-22 11:58:08 · 385 阅读 · 0 评论 -
Vue项目使用process.env关键字及Vue.config.js配置解决前端跨域问题
由于我们的项目需要在不同环境下进行运行(开发,生产,测试等),这避免我们需要多次的去切换请求的地址以及相关的配置,vue-cli2是可以直接在config文件中进行配置的,但是vue-cli4和vue-cli3已经简化了,没有config文件怎么办?既然知道项目运行的是那个模式,是不是我们就可以在不同模式下运行不同的变量信息,如开发环境使用端口8080,线上(生产)环境的端口是80,这个时候你会想,我知道不同模式配置不同信息,那信息配置在那个文件呢。需要注意的是,以上方法适用于开发环境下解决跨域问题。原创 2024-03-19 17:43:11 · 516 阅读 · 0 评论 -
git推送代码报错error: failed to push some refsto‘远程仓库地址’解决办法,以及撤销 git rebase变基命令git rebase --abort的使用
于是我们的仓库就有了README.m和.gitignore文件,然后我们把本地项目关联到这个仓库,并把项目推送到仓库时,我们在关联本地与远程时,两端都是有内容的,但是这两份内容并没有联系,当我们推送到远程或者从远程拉取内容时,都会有没有被跟踪的内容,于是你看git报的详细错误中总是会让你先拉取再推送,但是拉取总是失败。我们在创建仓库的时候,都会勾选“使用Reamdme文件初始化这个仓库”这个操作初识了一个README文件并配置添加了忽略文件。最近在把代码推送到远端仓库时遇到一个问题,推送不上去,报错。原创 2024-03-15 09:47:40 · 67 阅读 · 0 评论 -
vue iview 级联选择器遇到的坑
需要注意的是,这个iview级联选择器不能像饿了么ui那样配置props自定义项,所以需要我们设置好label与value. 然后loadData里写我们懒加载方法,如下所示,通过getCityDeptRegionBrigade方法发请求获取下一级的数据,这里 item.loading = true;然后通过forEach处理成我们想要的数据格式,我们PC项目用到的前端技术栈是vue+iview,最近有个需求,要做个级联选择器,并且是懒加载动态加载后端返回的数据。原创 2024-03-14 20:07:45 · 260 阅读 · 0 评论 -
Vue2里,利用原生js input的 type=“file“时,获取上传成功后的文件名及文件内容。下载文件到本地
功能场景:现在有个上传下载文件的功能,不需要调后端接口,因为需求是不需要将文件存到数据库里。原创 2024-03-08 18:07:24 · 363 阅读 · 0 评论 -
级联选择el-cascader可以选中任意一项,选中文字即选中整项
修改样式:不能加 scope 也可以放在全局样式上,要修改的样式前面要加上自定义的样式名。原创 2024-02-28 23:47:35 · 726 阅读 · 0 评论 -
级联选择el-cascader 动态加载后台数据,出现箭头和需要双击才能选中的问题
然后,这里我们调getCityDeptRegionBrigade这个方法获取级联数据后,我对数据也进行了处理,多加了个label和value.由于上面进行了props配置,这里不加label和value也行,但这个leaf是必须要加的,因为我们的级联最多只有三级,加了这个leaf: node.level >= 2后就解决了第三级出现箭头和需要双击第三级才选中第三级选项的bug。原创 2024-02-28 17:17:28 · 317 阅读 · 0 评论 -
vue里echarts的使用:画饼图和面积折线图
这里有几个细节要注意的是,这个饼图里文件资源与数据库资源的间距是由series里的minAngle及itemStyle里的borderWidth决定间距大小。渐变色面积是由series里的areaStyle来控制,这行代码color: new this.$echarts.graphic.LinearGradient里是加了new之后渐变色才生效,因为有时候不加这个new它也生效,如果你设置的渐变色没生效就加个new试试。原创 2024-02-22 15:21:11 · 313 阅读 · 0 评论 -
vue保留用户在列表的操作记录, beforeRouteLeave离开当前组件缓存数据即可
【代码】vue保留用户在列表的操作记录, beforeRouteLeave离开当前组件缓存数据即可。原创 2024-02-21 17:45:17 · 220 阅读 · 0 评论 -
el-table同时固定左列和右列时,出现错误情况
【代码】el-table同时固定左列和右列时,出现错误情况。原创 2024-02-21 14:46:34 · 387 阅读 · 4 评论 -
Vue封装全局公共方法
有的时候,我们需要在多个组件里调用一个公共方法,这样我们就能将这个方法封装成全局的公共方法。原创 2024-02-20 10:34:07 · 416 阅读 · 0 评论 -
解决elementUI固定列后,下方多了一条横线的问题
【代码】解决elementUI固定列后,下方多了一条横线的问题。原创 2024-02-18 17:25:45 · 806 阅读 · 0 评论 -
vue2父组件向子组件传值时,子组件同时接收多个数据类型,控制台报警的问题
【代码】vue2父组件向子组件传值时,子组件同时接收多个数据类型,控制台报警的问题。原创 2024-01-31 16:09:57 · 120 阅读 · 0 评论 -
Element UI样式修改之NavMenu导航菜单箭头样式修改
然后将默认的content: “\E6DF”;替换成content: “\e790”;就好了,在vscode里搜索替换即可。找到饿了么Icon里我们想要向下箭头,F12后复制content内容content: “\e790”;原创 2024-01-25 16:32:10 · 678 阅读 · 0 评论 -
el-tree获取当前选中节点及其所有父节点的id(包含半选中父节点的id)
如下图,我们现在全勾中的有表格管理及其下的子级,而半勾中的有工作台和任务管理及其子级。与源数据id一模一样,达到目的。原创 2024-01-18 10:51:18 · 921 阅读 · 0 评论 -
vue项目页面一闪一闪的问题解决办法(v-if闪屏、花括号闪屏)
今天遇到一个vue项目的问题,就是在一个弹窗里如果用了v-if与v-else造成页面一闪一闪的,如下视频所示:vue项目页面用了v-if与v-else后一闪一闪的代码如下所示:当弹窗显示时,前台调后端接口后根据后端返回值来确定isShowPreviewForm变量的值,最开始我是用的v-if与v-else就会导致页面一闪一闪的,这是因为销毁dom元素后导致的闪屏,于是换成v-show来解决了这个闪屏问题。原创 2024-01-16 11:22:31 · 1037 阅读 · 0 评论 -
一文搞懂Git版本工具常用的操作命令
比如我们对刚才添加的代码不满意,想通过Git命令回退到之前的版本。为了保证代码的同步,我们需要将远程代码拉到本地,git有2个命令可以将远程仓库的内容拉到本地,一个是git pull,可以将远程仓库的代码拉到本地仓库,同时合并到本地工作空间;如下图是整个合并分支的过程,红线上面的是branch0分支的test.md文件的内容,绿线上面是master分支中test.md文件的内容,前者比后者多3行内容(含1行空行),执行合并命令后再看master分支中test.md的内容已经与branch0中的一致了。原创 2024-01-11 11:03:38 · 251 阅读 · 0 评论 -
前端实现搜索功能
为了实现上面的效果,初始数据originList,页面上展示的数据myOriginList,选中的数据selectArr,是否全选中checkAll,实现思路是点击搜索按钮后,触发search方法,先判断输入框是否有搜索词,区别处理,如果有搜索词的话,先拷贝一份源数据originList,也就是先拷贝一份初始数据,然后通过数组的filter+includes方法实现过滤,将过滤后得到的数组回显到页面myOriginList上,然后取消全选checkAll设为false。原创 2024-01-09 16:04:57 · 868 阅读 · 0 评论 -
js的for嵌套和数组的map+some两种方法实现两个对象数组进行比对,得到一个期望的新数组
{ checked: true, name: “苹果” }] ,现在想实现的目的是,只要有arr1里的项与arr2项里的name一致的话就将其checked设为true,否则设为false,最终得到的数组是arr3,其结果应是[{checked:true,name:‘苹果’},{checked:false,name:‘香蕉’},{checked:false,name:‘梨子’}]项目需求有个数据需要处理,现有两个数组arr1和arr2,其中 arr1为[“香蕉”, “苹果”, “梨子”],arr2为。原创 2024-01-06 17:30:29 · 498 阅读 · 0 评论 -
弹窗里el-cascader下拉框脱离文档流的解决办法
最近项目遇到一个bug,在弹窗里el-cascader下拉框脱离文档流,如下图,所属辖区。然后子组件弹窗里写隐藏和展示方法。原创 2024-01-06 10:56:23 · 454 阅读 · 0 评论 -
el-cascader隐藏某一级的勾选框及vue报错Error in callback for watcher “options“的解决办法
最后在watch里监听指派类型切换的时候,将selectIndex改变,这样就改变了key。我们给el-cascader了一个类名disableFirstAndSecondLevel,然后style里写隐藏二级勾选框的样式,注意的是,如果这里有scoped可能会导致样式不生效,需要去掉scoped。:在cascader、select中选择了一条数据,再更换类型,没有这条数据了就会报错,watch监听重新渲染标注一下key就好了。包含级联cascader的options、select的option。原创 2024-01-04 15:07:14 · 1059 阅读 · 0 评论 -
el-autocomplete远程搜索使用及el-upload上传多个文件流给后端,详情接口返回的是文件地址,前端将文件地址转成文件流,回传文件流给后端
最近遇到一个项目,里面有2个需求我觉得挺常见的,第一个需求是一个表单里,当用户在输入名称后,前端调接口发请求获取到关联名称的企业名称,并展示,然后当用户选中企业后,前端调接口获取选中企业的具体信息,并填充到表单里;第二个需求是,表单里有个上传图片的功能,前端需要在用户点击保存的时候,前端调保存接口将文件流随表单数据一起以formData格式传给后端存起来,如下图,用户在名称输入框输入“武汉”两个字后调接口获取到的数据如下有“武汉市花木有限公司”、“武汉大学”等,当用户选中“武汉大学”后会将接口返回的信息回显原创 2024-01-04 10:44:20 · 1440 阅读 · 0 评论 -
js通过getElementsByClassName获取到的数组无法直接forEach遍历的解决办法以及禁止用户往输入框el-input里拖拽东西的解决办法
然后在mounted生命周期里,先通过getElementsByClassName获取三个dom,如下代码里usernameArr打印出来usernameArr不是个正常的数组,而是HTMLCollection这个类数组对象,通过Array.from将其转为真正的数组,然后就可以遍历了。最近项目遇到一个问题,就是登录页面里,用户可以拖拽img的值到输入框里。为了禁止用户往输入框里拖拽东西,我们先给三个输入框一个相同的类名myInput。原创 2023-12-28 16:24:57 · 591 阅读 · 0 评论 -
Vue项目里rem的使用
为了我们方便直接使用rem作为单位,我们需要安装一个插件到vscode编辑器上,这个插件叫cssrem。因为UI给我们的设计稿尺寸单位用的是px,这个插件可以在我们写代码输入多少px后帮我们直接算出px转成rem的话rem值是多少,我们直接点击选中即可,如下图。在App.vue里引入rem.js。原创 2023-12-21 17:12:36 · 568 阅读 · 0 评论 -
ECharts标题字体大小自适应变化
然后在我们的组件里使用,先import { nowSize } from “…/utils/nowSize.js”;引入,然后调用方法nowSize(fontSize)传参即可。如下所示,引入后调用方法传入字体大小。我们在做自适应Echarts的时候,字体大小在配置项里是如下配置的, title 标题组件,包含主标题和副标题。原创 2023-12-08 11:18:22 · 1124 阅读 · 0 评论 -
JSON.parse解析报错Bad control character in string literal in JSON
当使用JSON.parse解析json时报错Bad control character in string literal in JSON,因为我们这个是自己的数据库,输入的数据不该出现\r\n,所以直接对数据库数据进行修改。方法一.前端解析前处理掉\r,\n,\t 等转义字符。这句把\r,\n,\t 都替换为空。方法二:数据库中更改数据。原创 2023-12-07 19:07:27 · 1099 阅读 · 0 评论 -
vue+SpringBoot项目前后端数据加解密,实现登录密码前端加密,后端来解密
有个需求就是登录时,前端需要将用户输入的密码进行加密后作为参数传递给后端,后端进行解密。1.前端方面:Vue先安装crypto-jsnpm install crypto-js如果失败了就用cnpm安装吧cnpm install crypto-js前端在src文件夹下的utils文件夹下新建一个Secret.js文件,其代码如下:import CryptoJS from 'crypto-js'// 默认的 KEY 与 iv 如果没有给const KEY = CryptoJS.enc.U原创 2023-12-07 15:42:53 · 1076 阅读 · 0 评论 -
iview Table实现跨页勾选记忆功能以及利用ES6的Map数据结构实现根据id进行对象数组的去重
我们在data里定义了一个数组selectArr,用于存储我们当前所有页面已经选中打钩的数据。getTableData_new获取当前页table数据,需注意的是在我们调获取当前页table数据的接口成功后,我们需要先将当前页所有数据的_checked设为false,即默认未勾选中,然后遍历我们已经勾选中的selectArr,如果找到了就设为勾选中。这也就是实现了“记忆”功能。现在有个需求就是,在我们选择不同页码的数据勾选中之后,实现跨页勾选记忆功能,就是说已经打钩了的数据,不管切到哪一页它都是打钩状态。原创 2023-12-05 18:56:40 · 896 阅读 · 0 评论 -
js调整table表格上下相邻元素顺序
【代码】js调整table表格上下相邻元素顺序。原创 2023-11-04 16:23:15 · 590 阅读 · 0 评论 -
ES6里新增的数据结构Set和Map,利用Set结构去重对象数组
Set数据结构ES6引入了一种新的数据结构Set,它类似于数组,只不过其成员值都是唯一的,没有重复的值,利用这个特点可以进行数组去重。Set本身是一个构造函数,用来生成Set数据结构。let arr = [1,2,3,1,2,2,1,2,1,1];let set = new Set(arr); console.log(set.size) // 3console.log( [...set] ) // [1,2,3] 元素是唯一的 可以用来数组去重Set结构有以下几个方法:add(value原创 2020-05-11 17:59:06 · 353 阅读 · 1 评论 -
Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能。每个守卫接受三个参数to: Route: 即将要进入的目标路由对象from: Route: 当前导航正要离开的路由next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。next(false): 中断当前的导航。原创 2023-09-07 13:51:26 · 1371 阅读 · 0 评论 -
el-upload上传图片成功,详情页回显base64格式的图片
上传图片,并传给后端图片格式是base64。原创 2023-05-24 18:02:46 · 3209 阅读 · 1 评论 -
Vue2里监听localstorage里值的变化
window全局监听localStorage的setItem事件以及时更新,如果key是我们本地缓存里ReallyUserinfo的属性值变化那就能监听到了,从而可以执行我们想要的操作。首先,我们在src下的libs文件夹下新建一个stroage.js用于重写setItem事件,当使用setItem的时候,触发,window.dispatchEvent派发事件。原创 2023-08-31 09:52:46 · 1406 阅读 · 2 评论