Vue2
这里是Vue的专栏,都是作者实战工作经验总结,图文并茂,力求通俗易懂,希望对你有所帮助;
huangfuyk
自己应为之事,勿求他人;今日应为之事,勿待明日。
展开
-
vue2/Vue3项目中,通过请求接口来刷新列表中的某个字段(如:Axios)
vue2/Vue3项目中,通过请求接口来刷新列表中的某个字段。可以使用 Vue 的异步请求库(如 Axios)来发送请求,并在请求成功后更新相应的字段。注意:由于 Vue 3 使用了 Composition API,所以代码中不再使用。函数中,我们定义了需要用到的数据和方法,并将它们返回以在模板中使用。方法用于发送请求获取列表数据,将返回的数据存储在。简单的示例如下,假设列表数据存储在。数组中对应项的字段来实现刷新。在 Vue 3 中,可以使用。导出,使它们能在模板中使用。在这个示例中,我们使用了...原创 2024-04-14 11:30:00 · 560 阅读 · 0 评论 -
【解决】JS中使用foreach循环,无法终止判断跳出循环;JS中使用try catch跳出foreach循环;浅谈JS深浅拷贝......
JS中使用foreach循环,无法终止判断跳出循环;JS中使用try catch跳出foreach循环;浅谈JS深浅拷贝......原创 2023-04-02 09:15:00 · 681 阅读 · 0 评论 -
【解决】TypeError: this.$refs.treeRefs.xxx is not a function
【解决】TypeError: this.$refs.treeRefs.xxx is not a function。原创 2023-03-17 16:43:43 · 967 阅读 · 0 评论 -
【解决】uniapp中uni.setTabBarStyle使用backgroundImage不生效,背景图不显示,渐变色不生效;使用uni.getSystemInfo()获取系统信息。
【解决】uniapp中uni.setTabBarStyle使用backgroundImage不生效,背景图不显示,渐变色不生效;使用uni.getSystemInfo()获取系统信息。原创 2023-02-05 10:30:00 · 2132 阅读 · 0 评论 -
【解决】Element UI表格Table组件,点击翻页后之前选中的数据仍保留,勾选中的样式也会回显
解决:使用Element UI的表格Table组件,在第一页选中的数据,跳转到第其他页再返回第一页时,选中的数据消失。原创 2022-12-04 09:30:00 · 4549 阅读 · 0 评论 -
vue或uniapp中,子组件$emit过去一个参数,但是在父组件中传送两个参数($emit传送过来的可用$event接收,另一个参数直接传即可)
【代码】vue或uniapp中,子组件$emit过去一个参数,但是在父组件中传送两个参数($emit传送过来的可用$event接收,另一个参数直接传即可)原创 2022-11-14 08:00:00 · 819 阅读 · 0 评论 -
【解决】this.$router.push跳转到另一个页面mounted事件不执行。拿不到this. $route.query的值。(vue2/vue3))
使用this.$router.push({path: ‘xxxx’, query: {id: “1”}})跳转到“xxxx”页面时,发现跳转成功且地址栏显示id=1,但是在该页面的mounted方法里却拿不到this. $route.query.id的值。发现该页面在app.vue文件中被。...原创 2022-08-14 19:30:00 · 3181 阅读 · 0 评论 -
用uniapp中的scroll-view组件做成可左右滑动的tab栏,在某一tab跳到另一页面,再返回到该页面,之前tab仍被选中且左边距仍停留在之前的位置
用uniapp中的scroll-view组件做成可左右滑动的tab栏,在某一tab跳到另一页面,再返回到该页面,之前tab仍被选中且左边距仍停留在之前的位置。可见,我从tab“五五五”的页面进入“查看”,点击返回,tab到了“一一一”的位置。③在该页面(demo1)左上角返回时,记得销毁tabCurIndex;②TabCur与scrollLeft获取初始值时,先看本地是否存在;①在点击切换tab时,记录点击的索引,存储到本地或者vuex;期望达到从哪来的回哪去的效果。...原创 2022-07-23 11:30:00 · 1353 阅读 · 0 评论 -
【解决】如果v-show的条件为真,那么v-for循环将显示所有元素(Vue)
【解决】如果v-show的条件为真,那么v-for循环将显示所有元素(Vue)原创 2022-05-10 14:22:00 · 654 阅读 · 2 评论 -
this.$set给自己赋值不生效,需重新赋值一个变量【vue】
$set如下这样写是不行,还得重新赋值个变量(前提是已经拿到this.formData.actualQty的值,但是页面不显示)。错误示范:this.formData.actualQty= Number(this.formData.actualEa * this.formData.minPackLevel) + Number(this.formData.actualParts);this.$set(this.formData, 'actualQty', this.formData.actualQty原创 2022-02-18 18:14:28 · 2277 阅读 · 0 评论 -
【解决】ERROR Failed to compile with 1 error;error in ./node_modules/pdfjs-dist/build/pdf.js
接手别的同事的Vue项目,下载好依赖,执行npm run dev运行的时候,出现问题,如下:根据报错信息发现"pdfjs-dist"装的也有,项目中也有用到,版本是2.0.943:此时,再次执行npm i pdfjs-dist@2.0.943,单独下载pdfjs-dist依赖,然后再执行npm run dev,发现项目OK~举一反三,类似这样的报错信息,很大一部分情况都是由于单个依赖导致,可根据报错信息进行下载安装,进行解决。...原创 2022-01-23 09:00:00 · 30040 阅读 · 7 评论 -
【解决】编辑数据时,先请求详情接口,此时select下拉框中option数据出现渲染两条一样数据的情况
【问题】编辑数据时,先请求详情接口,此时select下拉框中option数据出现渲染两条一样数据下拉列表数据获取方法如下(示例代码,含注释):loadMoreStore() { this.storeParts.page++; // 分页加载 this.storeLoading = true; // 开启loading效果 this.api.partnerList({ ...this.storeParts } ).subscribe((res: any) => { // 接口请求原创 2021-12-04 21:36:35 · 1180 阅读 · 0 评论 -
Vue-移动端-点击弹出数据列表,并使选中那条数据样式高亮显示。
【需求】点击红框部分(图1),弹出数据列表框,并默认高亮选中的数据(图2)。图1如下:图2如下:【方法】弹出框先抽离成一个组件完整代码如下(主要功能已注释标出):<template> <div class="shop-list-wrapper"> <van-popup class="my-popup" v-model="shopInfo.show" // 判断是否弹出 round positio原创 2021-09-17 01:00:25 · 1747 阅读 · 0 评论 -
前端手机号、身份证号脱敏,中间显示星号*,不改变源数据(js、vue手机号、身份证号脱敏)
【问题】手机号或者身份证号中间数字用星号代替,不改变源数据。【方法】直接在插值表达式中操作数据:示例代码如下(身份证号脱敏):<div>{{ cardId.replace(/^(.{8})(?:\d+)(.{4})$/, "$1******$2") }}</div>示例代码如下(手机号脱敏):<div>{{ mobil.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2") }}</div>在原创 2021-09-14 19:10:43 · 15981 阅读 · 4 评论 -
【解决】vue开发的嵌套在app内的h5页面物理返回至app内时,出现白屏,需要滑动两次才可以正常返回。WeixinJSBridge.call(“closeWindow“)
/ 导航离开该组件的对应路由时调用。需要返回的页面上进行路由拦截(// 可以访问组件实例。原创 2021-08-17 18:39:27 · 2122 阅读 · 1 评论 -
vue项目点击后,从左边或右边滑出组件,再次点击原路滑回。<transition>、transform
【需求】点击某个元素,屏幕右边滑出组件(页面)【方法】参考vue-进入/离开 & 列表过渡把引入的组件用< transition >标签包括住,例: <transition > <components v-if='show'>...</components> </transition>使用vue的过渡类名,例:// v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一原创 2021-08-16 11:16:16 · 3310 阅读 · 1 评论 -
Vue项目中使用Vant的“ImagePreview 图片预览”组件
html示例代码:<img :src="imageUrl" alt="" @click="getImg()">js示例代码:import { ImagePreview } from "vant"; // 引入ImagePreview// 执行方法getImg(){ ImagePreview({ images: [this.imageUrl], // 需要预览的图片 URL 数组 showIndex:false, // 是否显示页码 close原创 2021-08-09 18:14:47 · 1744 阅读 · 0 评论 -
使用H5中的video标签时,页面中间显示“暂停”图标;点击播放,图标消失;点击暂停,图标出现(play、pause、ended)
有时候我们在做项目的过程中会遇到这样的需求:使用H5中的video标签播放一个视频,并在视频的中心位置放置一个暂停的图标,点击后视频播放,图标消失;再次点击后,视频暂停,图标出现。想要的效果,例下:我们可以配合使用video标签的pause、play、ended方法进行实现:①因为是一个vue项目,先定义一个变量,暂且叫它videoIsPlay,默认为false,即视频暂停时状态;data () { return { videoIsPlay: false, }},②.原创 2021-07-23 09:17:26 · 8703 阅读 · 16 评论 -
iview(View UI)使用 Vue 的 Render 函数,自定义表格列头显示内容(renderHeader)
开发中遇到这样一个需求,该项目用的是iview UI组件,需求是:表格列头有一个字段和一个单位,两者样式不同,理想效果如下:“建筑面积四个字为18px、单位(㎡)为16px”。如果按照iview—table表格默认的title属性赋值,那这个字段以及单位的样式就会一样,均为18px。如下图:这时候打开iview官网看到这样一个属性:renderHeader。官方是这样定义的:自定义列头显示内容,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 co原创 2021-07-06 09:53:51 · 2786 阅读 · 1 评论 -
js、vue项目根据浏览器地址,在某一页时隐藏某些元素(window.location.hash、this.$route.fullPath、includes)
在做项目时遇到如下需求:当用户点击到项目“首页”或者登录成功进入到“首页”时,隐藏红框中内容。step1:因为是vue项目,首先声明一个变量indexShow,默认值falsestep2:然后在created钩子里,用includes判断当前浏览器地址栏内容是否包含“首页”的路由“index”step3:v-show判断是否需要显示“首页”按钮及图标(v-show="!indexShow")示例代码如下:// step1data() { return { indexShow: fa原创 2021-07-01 16:42:59 · 1100 阅读 · 7 评论 -
解决:JS 弹层后底部页面可以滚动、vue 弹出框后面页面可以滚动(web端)
做项目过程中,发现点击弹窗后,弹窗后面的页面还可以滚动。复现如下:【解决】step1:在点击出现弹框的事件里加上这句:document.documentElement.style.overflow = "hidden";step2:在点击关闭弹框的事件里加上这句:document.documentElement.style.overflow = "scroll";【优化】若项目里使用弹窗较多,则可以通过在原型上定义它们使其在每个 Vue 的实例中可用(main.js)//弹出框后面页原创 2021-06-29 13:26:29 · 1760 阅读 · 7 评论 -
Ant Design of Vue中DatePicker设置mode=“year“无法获取value及关闭面板的解决方案| Ant Design of Vue年份选择框(YearPicker、vue)
打开antd vue官网我们会发现,日期选择框控件只有DatePicker、MonthPicker、RangePicker、WeekPicker,唯独缺少了YearPicker,但是我们在项目中会用到只选择年份的控件,那么这时候就需要我们在此基础上自己进行组件的封装了。通过官网我们会看到,它的属性有mode以及format看到这两个属性,也许我们会很开心,觉得这就够了,然后就设置一下:format="YYYY"mode="year"迫不及待的想看一下效果:此时我们会发现,样式是出.原创 2021-06-18 17:42:33 · 4729 阅读 · 1 评论 -
ECharts折线图里的legend图标更换以及标题样式问题
示例如下图(ECharts提供),有一个需求是更改下图中红框中图标以及字体样式:此时需要在legend里进行设置,更改图标的属性为icon,更改字体样式需要在textStyle进行更改。代码块如下(legend对象放在option内第一层即可):legend: { data:[ { name: '最高气温', textStyle:{ fontSize:12, fontWeight:'bolder', color:''原创 2021-06-09 11:25:28 · 9684 阅读 · 3 评论 -
Vue、JS点击元素,该位置出现弹出框,且可跟鼠标滚动而移动
在平时开发当中,可能会遇到这样的需求:我在某一特定位置点击元素,当前点击位置出现弹出框,且弹出框可跟随鼠标滚动而移动。例如当我点击下图“眼睛”图标时,要在点击位置弹出一个框,显示点击的该条数据内容。并且当我滚动鼠标时,该弹出框会随着“眼睛”一起移动,相对位置不变。如下图所示:(1)首先给弹出框绑定一个动态top以及left值代码如下:<span:style="{ top: showPositionTop + 'px', left: showPositionLeft + 'px' }".原创 2021-05-27 11:23:38 · 4682 阅读 · 3 评论 -
vue修饰符:.lazy .number .trim 的作用以及使用场景介绍
在 Vue—修饰符 里面有这么三种属性:.lazy.number.trim1. lazy在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转为在 change 事件_之后_进行同步。意思是什么呢,就是说当我们在input输入框输入数据时,v-model绑定的值不会发发生变化,但是当我们停止输入,输入框失去焦点或者按下回车时,v-model绑定的值才会发生变化,即在“change”时而非“.原创 2021-05-24 14:22:08 · 5764 阅读 · 13 评论 -
View UI (iview)表格合并单元格(行/列合并)
有时我们在开发过程中会遇到表格里有合并单元格的需求。今天以View UI (iview)组件库为例。1. 打开iview官网-table会发现有合并单元格示例:2. 但是在实际项目中,无法做到像上边代码那样通过 rowIndex和 columnIndex 在前端将合并的单元格写死,而是需要根据后台返回给前端的数据进行逻辑判断,决定合并哪些单元格。(1)比如现在有一个需求是表格的第一列“类别”中,如果有相同类别名字的进行单元格合并<template> <Table .原创 2021-05-21 14:02:53 · 5018 阅读 · 23 评论 -
前端页面上换行、根据后端返回的换行符(“↵”)进行换行展示(vue、v-html)
有时候我们会遇到这样的需求:后端返回一个换行符(“↵”),前端拿到后需求根据该符号进行换行展示方法一:textarea赋值当我们拿到后端返回的数据时,直接通过v-model绑定给textarea,就会有默认的换行,但是它不能随内容高度增加textarea高度实现自适应,如果用JS来实现的话,相对麻烦一点。方法二:使用v-html输出文本“↵”符号在html中会识别别为\r,\n等转义字符,所以我们可以使用\r\n去替换(.replace(/(\r\n|\n|\r)/gm, ' < .原创 2021-05-17 13:23:39 · 13119 阅读 · 4 评论 -
vue中下载图片、下载字符流图片,将图片链接转换成base64格式进行下载
1. 一般情况下,我们可以使用 a 标签进行图片的下载,但有时候只是页面的跳转,并没有进行下载,此时可以加一个download属性。 <a href="http://xxxx.xx.com:xx.jpg" target="_blank" download='xx.jpg'>2. 将图片链接转换成base64格式,再进行下载。HTML部分代码如下:// 参数为可选项<div @click="downloadImg('图片的地址', '图片的名称')">点击下载</d原创 2021-05-07 15:42:35 · 1440 阅读 · 2 评论 -
Vue超出文本框显示省略号,鼠标滑过显示全部;Vue动态绑定title属性;使用ES6新增模板字符串进行拼接(反引号)
1. title定义和基础用法:title 属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)。提示:title 属性常与 form 以及 a 元素一同使用,以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性众所周知,基础用法如下:例:<html> <body> <p title="鼠标滑过 我就显示啦">Hello Word</p>原创 2021-04-30 13:10:46 · 1362 阅读 · 2 评论 -
Vue:多个click事件;Vue:向组件传递多个@click
在做项目的过程中,我们会遇到多个点击事件同时执行的情况,本文将为大家介绍三种方法。第一种就是一个事件里执行多个方法// 触发点击@click = 'clickhandler'// 点击事件clickhandler() { this.function1(); this.function2();}第二种就是多个事件里执行多个方法// 触发点击@click = 'clickMethods1(); clickMethods2()'// 点击事件clickMethods.原创 2021-04-20 17:19:28 · 4607 阅读 · 2 评论 -
ECharts实现柱状图正负数显示在同一侧
想必大家工作中也有用到过ECharts,但是大部分的需求应该都是相对简单的展示,比如说使用柱状图时,当数值为正与负值时显示在两侧,如下这样(一左一右或一上一下):那么如果我想让他们无论正负均显示在同一侧呢?1、可参考如下简单示例:var data1 = [100, 200, 300, 400, 500, 600, 650]; // 真实值,用来控制柱状图的高低var data2 = [-100, 200, -300, 400, -500, 600, -650]; // 显示值,用来显示在柱.原创 2021-04-10 14:28:25 · 6184 阅读 · 0 评论 -
【已解决】Error:Cannot find module ‘xxx\xxx\node_modules\npm\bin\npm-cli.js‘
以下报错,解决方案:打开node.js官网,根据报错的路径,重新下载安装到该路径即可原创 2021-03-05 15:27:51 · 17401 阅读 · 10 评论 -
vue选中或点击输入框,边框高亮;vue选中或点击元素,当前元素背景高亮
1、vue 选中或点击输入框,边框高亮①:输入框动态绑定一个class,例login-box-focus,如下::class="{ 'login-box-focus': loginBoxIsTrue }"②:输入框添加一个聚焦(focus)及失焦(blur)事件,如下:@focus="focusUserName()"@blur="blurUserName()"③:data给个默认参数及值,例如loginBoxIstrue,用来绑定到class,如下:data() { return {原创 2021-02-08 10:28:33 · 4082 阅读 · 0 评论 -
Ant Design Vue下拉选择框增加可搜索功能(Ant Design Vue Select选择器)
Ant Design Vue下拉选择框增加可搜索功能打开Ant Design Vue官网,找到Select选择器(点击进入),见如下示例:其中:①:showSearch属性使框框变为可搜索;②:option-filter-prop="children"便是绑定下拉选项中的内容可被搜索(<a-select-option>)③:实现。期待与您一起探讨关于Ant Design Vue或VUE或原生JS等等前端技术哦~...原创 2021-02-05 10:11:02 · 8148 阅读 · 1 评论 -
vue项目中使用高德地图的api实现城市的定位
今天女朋友突发奇想,让我帮她做一个可以对所在城市进行自动定位的一个小功能。我二话没说,打开电脑就是一顿操作,操作记录如下(贼拉拉详细,无论小白还是大白,都可看得懂):使用Vue-CLI构建一个Vue项目。在src目录下的views目录里创建一个City.vue(名字自取)在src目录下的router目录下的index.js文件中增加如图所示内容(path值可自取,component值则要对应第2步创建的文件夹名)如下图:打开浏览器,搜索“高德api”,点击进入如未注册,点击右上原创 2020-05-10 19:55:39 · 8968 阅读 · 44 评论 -
使用Vuex、Vue路由、axios的经验汇总
博客说明:文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!目录一、Vuex二、Vue路由三、axios一、Vuex安装npm i axios --save使用axios.get('/user?ID=12345') .then(function (response) { console.log(re...原创 2020-05-01 10:36:47 · 5284 阅读 · 50 评论 -
女朋友生日,不要礼物,非要我给她讲解VUE的生命周期钩子函数,最后直夸我讲的详细又透彻!
VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化。可以分为:创建、挂载、更新、销毁四个模块。注:在组件的整个生命周期内,钩子函数都是可被自动调用的,且生命周期函数的执行顺序与书写的顺序无关目录*图示1.beforeCreate2*.created3.beforeMount4*.mounted5.beforeUpdate6*.updated7.bef...原创 2020-04-25 18:03:23 · 9121 阅读 · 89 评论 -
使用Vue-CLI创建Vue项目
在看本文之前,请确保电脑上已经装了node,关于node的安装和使用可参考node的安装与使用专栏1 . 利用Vue-CLI初始化构建Vue项目时,我们将会获得一个初始的文件夹结构,如下所示:2 . 安装Vue-CLInpm install -g @vue/cli或yarn global add @vue/cli例:3 . 使用vue --version或vue -V指令,查...原创 2020-04-21 21:45:33 · 6617 阅读 · 28 评论