vue2 vue3 通用项目
记录项目中封装的一些内容,vue2 vue3 都可以使用
王小王和他的小伙伴
前端开发
展开
-
el tree 默认展开第一级节点
【代码】el tree 默认展开第一级节点。原创 2024-06-05 14:27:44 · 1352 阅读 · 1 评论 -
Vue3 子组件访问父组件的方法 - 父组件访问子组件的属性或方法 - 子组件修改父组件的值
【代码】Vue3 子组件访问父组件的方法 - 父组件访问子组件的属性或方法 - 子组件修改父组件的值。原创 2024-06-03 10:24:03 · 502 阅读 · 0 评论 -
vue3 再次返回页面,滚动条回到顶部
在页面a,滑动了滚动条,再进入页面b,但是页面B记录了滚动条位置。现在想要,进入页面B,不记录之前的滚动条,原创 2023-11-23 16:13:36 · 655 阅读 · 0 评论 -
Vue3 设置点击后滚动条移动到固定的位置
点击不通过按钮,显示红框中表单,且滚动条滚动到底部 (显示红框中表单默认不显示)原创 2023-11-24 18:03:33 · 966 阅读 · 0 评论 -
封装 视频以及监控组件
【代码】封装 视频以及监控组件。原创 2023-07-18 17:04:44 · 628 阅读 · 0 评论 -
vue中 img标签,链接失效显示默认图片 onerror
当图片加载失败时,会触发 @error 事件,我们可以在事件处理函数中将 src 属性修改为默认图片链接。需要注意的是,在一些情况下,比如 src 属性本身就为空或者是一个相对路径,可能无法触发。为了避免这种情况,建议在加载图片前进行判断,保证 src 属性是一个有效的链接。在模板中,我们使用 img 标签来显示图片,并将 src 属性绑定到。标签来显示图片,并且图片链接失效时需要显示默认图片,可以使用。在上面的代码中,我们首先加载了一个无效的图片链接。,然后指定了一个默认图片链接。原创 2023-05-25 14:18:17 · 1171 阅读 · 0 评论 -
vue将图片链接转换为file文件类型
【代码】vue将图片链接转换为file文件类型。转载 2023-05-23 13:48:58 · 2046 阅读 · 3 评论 -
nuxt3 vue 让PC网站在手机上按比例缩小适应屏幕
【代码】nuxt3 vue 让PC网站在刚进入网页的时候,在手机上自动按比例缩小适应屏幕。原创 2023-04-10 14:23:00 · 1123 阅读 · 0 评论 -
【解决 swiper轮播图设置自动轮播,手动滑动后,不再自动轮播
*设置 disableOnInteraction: false **原创 2023-03-28 16:07:27 · 1929 阅读 · 0 评论 -
vue项目 - element组件样式无法修改:深度修改elementUI样式
在实际开发过程中不可避免地遇到需要修改ElementUI默认样式。可是有些样式不太容易修改、下面有几种修改的方法:1.在样式外新增一个样式不添加scoped(会影响全局)在单个xx.vue文件最后多写一对标签,即有两对style标签,一对有scoped,一对没有scoped。如果写在有scoped属性的style标签里:覆盖的样式不会生效!<style> .my{ margin: 20px; } .my .el-input__inner{ border-radius: 15原创 2021-06-03 18:13:26 · 3523 阅读 · 0 评论 -
vue项目 - 实现页面打印成PDF格式
现在要实现功能为:将写好的页面。打印成PDF格式代码实现1.首先安装插件// 第一个.将页面html转换成图片npm install --save html2canvas// 第二个.将图片生成pdfnpm install jspdf --save 2.创建文件: 在src/utils文件夹中创建文件html2pdf.js// 导出页面为PDF格式import html2canvas from "html2canvas"import JSPDF from "jspdf"export原创 2021-06-11 17:25:44 · 1569 阅读 · 1 评论 -
vue项目 - json2csv插件实现导出CSV文件
需求 :将数据导出CSV文件展示:使用的插件npm install --save file-saver json2csv注:使用的是element ui 和 json2csv插件代码:<template> <div> <div id="app"> <el-row> <el-button type="text" @click="onExportFile">导出</el-button&原创 2021-10-22 15:33:33 · 1822 阅读 · 0 评论 -
Vue项目 - 更高效的vuex状态缓存方式-createPersistedState 存储token
前言在使用vue开发项目的时候,我们经常会利用vuex来进行全局的状态管理从而达到实现数据全局共享的目的,但是使用vuex有一个缺点就是在页面刷新之后数据会消失从而使页面展示异常或者请求接口报错,比如用户在登录成功后,我们会从后台拿到用户的token,或者uid等信息,因为大部分的接口都需要用户的token传给后台来进行鉴权处理,因为用户刷新页面是不可控的因素,这个时候我们就要结合本地存储来保证数据的存储。1. 手动利用HTML5的本地存储API存储数据第一反应就是前端开发常见的localStorag转载 2022-02-24 11:30:52 · 11589 阅读 · 4 评论 -
vue项目 - 结合postcss-px2rem 插件 实现px自动转换rem
需求:代码中大小使用px单位。页面中自动转换成rem ,此次是我用在PC端中,配置之后可自动转换rem。原创 2021-07-27 23:39:58 · 402 阅读 · 0 评论 -
vue项目 - 实现下载成Excel模式
实现效果直接代码: <p class="cursor downBtn" @click="handleDownTwo"> <img src="../../assets/logo/downTwo.png" /> <span>明细下载</span> </p> handleDownTwo() { const url = location.host; window.open( `http原创 2021-07-29 16:25:40 · 249 阅读 · 0 评论 -
vue项目 - 封装页面自适应大小,解决横竖屏切换布局错乱的问题
需求: 移动端或者h5端项目,要兼容各个手机的大小,包括说手机横竖屏时页面大小展示的问题,原理:监听窗口变化,根据计算属性,重新获取屏幕宽度值,$pxAuto(web显示宽度像素/设计稿宽度,得到1设计稿像素是多少web宽度像素,再*设计稿的值, 等于 自适应尺寸)解决:...原创 2022-06-14 00:07:49 · 1708 阅读 · 0 评论 -
vue项目 - 给页面添加水印
项目中需要个打印页面的功能 ,页面中需要水印代码实现:1.创建文件夹 watermark.js文件注:可以自己设置属性/** 水印添加方法 */const setWatermark = (str1, str2) => { const id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.g原创 2021-06-11 16:42:24 · 2166 阅读 · 2 评论 -
JS 封装时间格式化
封装的js代码,直接调用使用原创 2022-03-07 16:04:19 · 379 阅读 · 0 评论 -
Vue3 + ts + jest 单元测试 配置以及使用
Jest中的断言使用expect,它接受一个参数,就是运行测试内容的结果,返回一个对象,这个对象来调用匹配器(toBe/。1.jest单元测试的写法为三步,引入测试内容,运行测试内容,最后进行比较,是否达到预期。,不论Jest是全局运行还是通过npmtest运行,Jest的测试脚本名形如。它都会执行当前目录下所有的。......原创 2022-07-26 15:01:21 · 1921 阅读 · 0 评论 -
JS 将毫秒数时间,转化为时间格式(yy-MM-dd)
1.利用toLocaleDateString(); 或toLocaleString();转换 //time:1723983662736 this.newTime = new Date(this.time).toLocaleDateString(); // 2024/8/18 this.newTime2 = new Date(this.time).toLocaleString(); // 2024/8/18 下午8:21:022.利用函数封装 转换为原创 2021-10-22 16:28:08 · 1024 阅读 · 0 评论 -
封装localStorage 封装sessionStorage 设置默认失效时间为 一天
【直接代码】封装localStorage 封装sessionStorage 设置默认生效时间为 一天。原创 2022-11-28 10:40:03 · 929 阅读 · 0 评论 -
前端 上传文件/照片/视频 到cos(腾讯云) 代码实现
前端 上传文件/照片/视频 到cos(腾讯云)原创 2021-12-17 14:34:52 · 3258 阅读 · 12 评论 -
前端 单元测试介绍 - 以及在项目中使用 (史上最全)
单元测试 能更快的发现bug,让绝大多数bug在开发阶段发现解决,提高产品质量比起写注释,单元测试可能是更好的选择,通过运行测试代码,观察输入和输出,有时会比注释更能让别人理解你的代码(当然,重要的注释还是要写的。。。)有利于重构,如果一个项目的测试代码写的比较完善,重构过程中改动时可以迅速的通过测试代码是否通过来检查重构是否正确,大大提高重构效率编写测试代码的过程,往往可以让我们深入思考业务流程,让我们的代码写的更完善和规范。基础的配置和使用可参考Vue3 + ts + jest 单元测试 配置以及使用。原创 2022-11-28 15:47:02 · 2083 阅读 · 0 评论 -
Vue3 +ts + eslint 配置 + [git hooks] pre-commit 配置 实现git 提交 阻拦不规则代码(包括console.log、debugger)
要求 在gitcommit之前阻拦不规则代码提交,包括console.logdebugger,包括其他错误。原创 2022-07-28 11:52:12 · 3283 阅读 · 0 评论 -
前端实现 AWS s3 (亚马逊)云储存 上传文件/照片/视频 代码实现
公司有项目需要将原先服务器上的图片转移到AWS的S3 储存桶中 ,前端的上传图片也需要重新编写,const AWS = require('aws-sdk');var albumBucketName = "aircom";var bucketRegion = "us-east-1";// 实例化aws对象var s3 = new AWS.S3({ accessKeyId: "AKIA6GPXMC3MGNZCFRMB", secretAccessKey: "sQrIvBdN原创 2021-12-17 14:34:00 · 5977 阅读 · 0 评论 -
前端 使用 aes 加密 和解密
【直接代码】前端 使用 aes 加密 和解密。原创 2023-06-25 10:56:12 · 747 阅读 · 0 评论 -
JS 封装深拷贝 deepCopy
封装的js代码,直接调用使用原创 2022-03-07 15:58:58 · 334 阅读 · 0 评论