vue
此专栏分享项目里遇到的问题
阿wei程序媛
励志成为前端大佬
展开
-
后端返回下载地址url,前端如何下载文件
需求:后端返回给前端的市下载地址URL,前端进行下载对应文件。其中this.form.POD是后端返回的下载地址URL。原创 2023-08-28 18:12:41 · 1053 阅读 · 0 评论 -
Element通过v-for循环渲染的form表单校验
3.prop的第一部分为data中该组遍历数据对应的数组名,此例中为form中的'trucksList';第三部分为form中的'trucksList'中该输入框对应的属性名;需求:有个表单信息是v-for渲染的,例如下图,通过循环遍历实现新增和删除模块,按照平时的写法实现校验,是不能实现我们想要的效果,根据这个需求,我找到了一个解决方法。2.rules为data中rules对象对应属性,如'rules.providerType';1.循环的数据中,每个el-form-item都写rules、prop。原创 2023-08-17 14:26:59 · 1560 阅读 · 0 评论 -
vue使用driver.js完成页面引导的功能
四.引导页面里面引入steps.js,其引导页面完整代码。二.在自己需要引导的页面上引入driver.js。需求:给客户做一个页面引导,教客户怎么做。以上代码就能实现其页面引导的功能。三.在外部建一个steps.js。一.安装driver.js。原创 2023-07-31 15:44:32 · 1955 阅读 · 3 评论 -
vue动态修改浏览器标题和logo
将项目制造一个入口可以修改项目的名称和logo,后端给了一个上传logo的接口,一个更改项目名称的接口,我上传logo,后端返回给我一个图片链接,我更改项目名称,后端返回一个项目名称,我将项目logo和项目名称存入vuex,并监听vuex里的项目名称和项目logo,一旦项目名称和项目logo发生改变,就可以将项目名称和项目logo实时改掉。关于,如何上传这个逻辑就不写了,直接写如何实时更改项目名称和项目logo,找到项目中的app.vue 文件,动态创建link标签,调用后端接口,获取返回的图片。原创 2023-07-04 16:40:45 · 2619 阅读 · 1 评论 -
vue sessionStorage的setItem和getItem使用
1.存储数据:sessionStorage.setItem('名字','要存储的值')2.获取数据:sessionStorage.getItem('名字')原创 2023-03-27 17:36:19 · 1048 阅读 · 0 评论 -
Vue 子组件调用父组件方法
1.this.$parent.event可以调用父组件的方法,无需绑定在子组件身上,有时候会失效,暂未发现触发点,不建议使用。3.props可以调用父组件绑定在子组件身上的事件,需要 :前缀。在router-view身上使用失效。方法一:直接在子组件中通过this.$parent.event来调用父组件的方法。方法三:父组件把方法传入子组件中,在子组件里直接调用这个方法。向父组件触发一个事件,父组件监听这个事件。方法二:在子组件里用。原创 2023-03-17 17:32:18 · 1764 阅读 · 0 评论 -
vue项目下载zip压缩包
以上两种形式的代码就能实现zip下载。当然也可以不用封装的方法。原创 2023-03-17 11:28:29 · 2923 阅读 · 0 评论 -
vue3 伸缩菜单组件
3.在components下面创建一个container的文件,在container文件下面创建一个src文件,然后在src文件下创建navHeader文件,在navHeader文件下创建index.vue文件。4.在components下面创建一个container的文件,在container文件下面创建一个src文件,然后在src文件下创建navSide文件,在navSide文件下创建index.vue文件。2.在router文件下的index.ts写入。以上就是封装伸缩菜单栏组件的代码。原创 2023-01-04 16:09:28 · 1992 阅读 · 3 评论 -
vue3 全局注册图标
3.在main.ts中,全局注册图标。以上就实现了全局注册图标。2.在main.ts引入。原创 2023-01-03 17:54:40 · 327 阅读 · 0 评论 -
使用vite搭建vue3项目(vite + vue3 + vue router + pinia + element plus)
1.更改http://localhost:3000/到8080与Network路由访问(server对象为新增,其余的都是源代码)或者一步到位通过附加的命令行选项直接指定项目名称和你想要使用的模板(根据自己npm版本来选择不同的命令行)(2)修改vite.config.ts配置文件代码,(resolve对象为新增,其余都是源代码)(1)在src目录下新建router文件夹,在router里创建index.ts文件。4.安装css 预处理器 sass。(1)在main.ts引入。(1)在main.ts引入。原创 2023-01-03 13:30:34 · 4395 阅读 · 0 评论 -
vue 长按事件
以上就能实现长按事件,其余的就是调接口实现长按删除或长按复制功能。需求:可以长按删除、长按复制。原创 2022-12-14 16:28:23 · 834 阅读 · 0 评论 -
vue中修改swiper样式
当你在vue中使用swiper时,你会发现,你直接修改swiper里面的样式,是修改不成功的。原因:vue文件中的template,和style 都会经过vue-loader的编译。在style标签上使用了 scoped 属性的话,template中手写的元素和style之间会通过vue-loader生成的一个自定义属性,形成呼应关系,style只对对应的template起作用。编译过程中由swiper 生成的分页器标签不会经过vue-loader的编译,所以选不到。原创 2022-12-09 14:55:37 · 1428 阅读 · 0 评论 -
vue 图片不压缩,以图片中心进行展示
需求:像朋友圈一样展示图片,在长图时,只展示图片中心的一部分。将图片转化为背景图进行展示,既能实现其效果。图片会出现压缩的现象,很不美观。2.如何实现不压缩图片的效果?1.前端一般展示图片常规操作。原创 2022-12-08 15:14:57 · 800 阅读 · 0 评论 -
vue3实现吸顶效果
用样式控制,如果isFixed 等于true,将内容固定到顶部1.在onMounted生命周期中监听页面的滚动事件2.在onUnmounted生命周期中卸载监听事件3.首先获取页面滚动的距离,如果页面滚动的距离大于吸顶元素距离页面顶部的距离,就展示使吸顶元素的isFixed为true,即实现吸顶功能。 以上代码就能实现吸顶效果。原创 2022-12-07 15:49:33 · 1465 阅读 · 2 评论 -
vue 设置input只能输入数字
将标签中的type属性直接设置为就可以达到只能输入数字。优点:他直接能唤起数字键盘,缺点:它只能作用于网页端,在手机输入的话还是可以输入汉字或英文 重点:oninput="value=value.replace(/[^\d]/g,'')"这个方法,输入汉字是输入不进去的,只能输入数字,缺点:他只能唤起键盘(不是数字键盘)我常用的第二种方法。原创 2022-12-07 15:20:06 · 15225 阅读 · 0 评论 -
Vue按回车键进行搜索
需求:为了用户方便进行搜索数据的时候不想点击搜索按钮,想要在input输入框内输入完成之后直接按回车键进行搜索在input标签内部增加@keyup.enter事件即可,事件名为按钮点击名称 注:@keyup.enter.native="getsearchdata"//这里要和搜索的事件名称一样 @submit.native.prevent //这句话禁止第一次进入页面回车搜索的时候刷新页面以上两种方法,都能实现按回车键进行搜索的功能原创 2022-12-05 16:02:49 · 5945 阅读 · 0 评论 -
Vue3 搜索功能,搜索结果关键字高亮
需求:搜索页,搜索出来的关键字高亮效果图:1.HTML使用v-html绑定方法名并传递两个参数,第一个参数是:搜索出来的内容;第二个参数是:搜索框内输入的搜索内容 (其中的item.postContent是接口返回v-for渲染出的内容)2.JS以上两个方法都可以实现此效果。原创 2022-12-05 11:14:00 · 1712 阅读 · 0 评论 -
vue v-for列表渲染中限制条数
需求:在开发评论功能的时候,评论区,最多显示五条,其余的折叠起来,如果你限制高度,五条评论不一定显示的完全,所以想到了,将评论区数据渲染的数据限制一下条数,就可以解决此问题。注:用slice进行截取就可以实现v-for在渲染列表的时候限制渲染的条数。例如:限制渲染条数为5条。原创 2022-11-23 16:13:43 · 1673 阅读 · 0 评论 -
textarea内容自动撑开高度,实现高度自适应
如何解决这个问题呢?原创 2022-11-18 17:42:28 · 3353 阅读 · 0 评论 -
vue 将后端返回的图片设置为背景图片
2.backgroundImage使用的是驼峰命名,不是background-image。注:1.userinfo.userAvatar是后台返回的用户头像的图片。需求:需要将用户头像设置成背景图,但是用户头像是后台返给我的数据。通过这行代码就能实现其效果。原创 2022-11-15 13:30:26 · 1795 阅读 · 1 评论 -
vue将html内容转为图片并下载到本地
需求:将自己写的html内容转化为图片并可以下载到本地。原创 2022-11-03 17:52:12 · 2313 阅读 · 0 评论 -
基于vue+element ui 实现excel文件的导入
我这个需求,是要把时间和文件传给后端,并且有一个继续添加,有两种方法可以实现。最后跟后端商量一下,最终以第二种方法实现。这里我就只写如何实现将文件导入。以上代码就能实现文件导入的功能。原创 2022-08-22 11:13:14 · 1966 阅读 · 0 评论 -
判断后端接口返回的图片形式并拼接后端接口返回的图片
写项目时,有时候后端会返回不带http的图片,例如:images/works/userNo/3122A434D5ED48E39824A9C016458ADB.png,有时候返回带有http的图片例如:http://xxxx.com/images/works/userNo/3122A434D5ED48E39824A9C016458ADB.png,如何处理这种问题?其中 imageDomain: 'http://xxxx.com/' 3.在需要判断图片的地方使用此过滤器方法二 2原创 2022-07-06 13:49:50 · 1047 阅读 · 0 评论 -
vue 调后台接口实现导出excel表格功能
1.导出按钮 <el-form-item> <el-button @click="downloadExcel()" type="primary">导出</el-button> </el-form-item>2.调用接口 // 导出 downloadExcel() { this.exportBalanceOrder() }, async exportBalanceOrde原创 2022-05-25 13:53:26 · 3547 阅读 · 5 评论 -
vue中修改elementUI,vant 样式(样式穿透的三种方法)
在vue项目中,当我们在使用第三方组件库(element-ui、vant)时,遇到需要修改组件中第三方组件库中的样式,但同时又不想去除scoped属性造成组件之间的样式覆盖,这个时候,就可以使用样式穿透来解决这个问题。1,使用>>><style scoped>>>>第三方组件类名 { 样式}</style>当Sass、Less之类的预处理器无法解析>>>,可以使用/deep/或者::v-deep2./d原创 2022-05-26 17:09:51 · 1467 阅读 · 0 评论 -
vue中this.$router.push()路由传参和获取值的方法
1.params传参获取值2.query传参获取值1、两种方式的区别是query传参的参数会带在url后边展示在地址栏 (/assetDetail?id=31),params传参的参数不会展示到地址栏。2、由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。...原创 2022-06-21 14:27:52 · 1006 阅读 · 0 评论 -
Vue限制文本框显示字数,多余用...代替
效果图: 1.在filters.js封装过滤器方法2.在main.js引用过滤器 3.在需要控制字数的地方使用此过滤器就可以实现效果图的效果原创 2022-07-04 15:28:33 · 1871 阅读 · 0 评论 -
watch监听对象里面值的变化
后台管理有时候有选择选择框的不同选项,会影响下一个选择框的内容,如下图。对以上例子和代码进行理解,就可以理解watch监听对象里的值的变化。.这个时候就可以用到watch监听。2.data里的代码。...原创 2022-07-20 10:28:59 · 7763 阅读 · 0 评论 -
vue 全局弹窗组件封装
在公共组件文件夹(components)下建一个弹框组件文件夹(EditboxForm) 2.在公共组件文件夹(components)下建一个install.js文件3.在main.js中引入公共组件 4.在自己需要有弹窗的页面,挂载弹框(这个是我项目的整个页面,逻代码比较多,可以仔细研究一下是可以看懂的) 5.可以在自己所写表格页面文件夹里新建一个弹框页面。例如新增和修改弹框(这个页面根据自己所需要的弹框写的,只需要将插槽一一对应,写出自己的弹框样式即可)。原创 2022-07-06 10:33:40 · 7119 阅读 · 0 评论 -
vue实现九宫格抽奖
以上代码是我实现功能的代码,仔细研究一下,就可以看懂,希望对你们有所帮助!最近写了一个九宫格的抽奖,然后现在总结一下。原创 2022-08-22 10:25:00 · 2839 阅读 · 3 评论 -
vue中页面加载进度条效果的实现
1.安装插件2.在main.js中引入3.在main.js中进行配置4.在main.js中对路由钩子进行设置原创 2022-07-07 10:15:45 · 2410 阅读 · 0 评论 -
vue身份证号脱敏显示
一般后台返回全部的身份证号,我们前端需要对其数据进行处理,将中间的年月日用*****表示。有时候后台会给你返回一半的身份证号,中间用,分隔,我们也需要将其数据处理,如图。以上方法可实现对身份证号的脱敏显示。...原创 2022-07-25 17:02:00 · 3074 阅读 · 0 评论 -
vue中引入字体包
1.创建文件夹 存放字体 在src目录下创建text文件夹 ,字体放在这个文件夹下,命名为字体名(英文更好),并且创建text.scss。有时候UI上面会有一些特殊字体,这时候,你就可以将UI给你的字体包引入到自己的项目中,去实现特殊字体的处理。2.在text.scss里面写入。3.在main.js中引入。4.直接在自己需要的页面使用。以上步骤就可以实现引入字体包。...原创 2022-08-02 20:03:28 · 5467 阅读 · 0 评论 -
vue 日期减日期获取天数
【代码】vue 日期减日期获取天数。原创 2022-10-09 13:24:24 · 1080 阅读 · 0 评论 -
vue 封装组件之上传图片组件(el-upload)
以上代码就能实现上传图片的功能,并且对新增里面的上传图片和修改里面的上传图片的回显都起作用,代码根据自己的项目进行更改使用即可。2.如果上传图片,项目里面使用次数很多,你可以全局引入,在main.js里引入。以上代码可以直接粘贴使用,但是对于这两行代码需要根据自己的项目实际情况来写。1.在components文件夹里自定义文件名称ImageUpload。3.如果使用次数不多你可以在你所需页面进行引入。4.在自己所需要图片上传的页面。注:2和3选其一即可。原创 2022-10-14 14:15:50 · 2184 阅读 · 0 评论 -
利用VUE生成二维码
1.安装2.在自己所需页面引入3.HTML4.JS5.效果图。原创 2022-08-23 17:06:00 · 212 阅读 · 0 评论 -
vue 点击一个按钮,循环切换图片
今天遇到一个需求,点击一个按钮,循环切换图片,1.2.3.1.2.3的循环。原创 2022-08-26 16:23:52 · 849 阅读 · 0 评论 -
vue 日期加减
1.给操作对象绑定change事件处理函数handleChange()最近遇到一个需求,根据加减天数,日期也要跟着加减。2.js定义handleChange()代码。以上代码就能实现其功能。原创 2022-10-09 13:05:48 · 4303 阅读 · 0 评论