- 博客(130)
- 收藏
- 关注
RSS订阅
原创 vue学习笔记——Vue3+element plus实现表单验证的方法
最近想实现vue3+element plus来实现表单验证，发现[element plus](https://element-plus.gitee.io/zh-CN/component/form.html#%E5%8A%A8%E6%80%81%E5%A2%9E%E5%87%8F%E8%A1%A8%E5%8D%95%E9%A1%B9)的官方沿用的还是vue2的方法来进行表单验证。通过查阅其他资料，写了一版关于vue3+element plus的表单验证模板，代码及注释如下：<template>
2021-12-23 18:23:28
12738
2
原创 微信小程序最新wx.getUserProfile接口获取用户信息和登陆信息的方法，迭代wx.getUserInfo方法。
最近，微信小程序发布了新的版本，是关于用户信息的问题，2021年4月13日后发布的小程序新版本，无法通过wx.getUserInfo与获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData中的用户个人信息），获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。这就需要我们之前的代码进行升级适配。小程序登录、用户信息相关接口调整说明更新方法： 在WXML内，使用bin
2021-04-13 10:59:03
24580
10
原创 前端开发时使用iframe标签的时候发生两次请求问题的解决方法
使用iframe可以加载其他页面的元素,比较方便,但是在实际运用中,在某些浏览器中或发生某种行为时会出现加载两次或多次请求的问题,导致资源浪费.正常使用时如下方这种情况:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
2021-01-14 11:14:23
10576
16
原创 使用index of 时发生报错： Uncaught TypeError: Cannot read property ‘indexOf‘ of null 之问题解决
我们通常使用 index of 的方法进行 for循环的排重，或者获取索引。通过判断是否位-1的情况，来进行排重。比如：indexOf("?") != -1；在最近开发的时候，我需要获取a标签的href属性，然后给href属性 给a标签上增加自定义属性，使用index的方法，发现报错了。报错代码：<script> var aTargent = document.getElementsByTagName('a'); var aTargentUrl; for (va
2020-08-17 11:05:49
11048
原创 使用nvm对node进行多版本管理
可以现在C:\Users\name\AppData\Roaming\nvm目录下建立node_cache和node_global文件夹。，下载完成后，对文件进行解压安装，按照提示一步步安装，如果电脑上之前有安装过node，需要先卸载，再进行安装。如果在项目内使用npm显示无效指令，那么可能就是环境变量没有指定npm的路径，需要在环境变量里设置路径。3.在nvm目录下载指定版本的node。环境变量位置在我的电脑的高级设置内。用哪个版本就切换哪个版本。这样就可以下载指定版本。4.常用的nvm的命令。
2024-12-18 19:34:48
250
原创 vue3的项目用谷歌72的版本打开，报错Uncaught SyntaxError: Unexpected token ?
使用vue3开发项目时候，项目打包完成后，部署项目的时候，可能会出现在服务器部署前端代码的时候出现白屏的情况，1.可能出现nginx路径配置不正确的问题，导致出现报错，这个可以在nginx的error的文件内查询报错内容。2.可能是因为vue3的代码采用es6语法，无法适应低版本的浏览器，比如谷歌的72版本的浏览器。开发环境可能是高等级的浏览器，客户的环境可能是低等级的浏览器，而且无法升级等情况。
2024-12-12 09:52:12
696
原创 react 使用状态管理调用列表接口渲染列表（包含条件查询，统一使用查询按钮，重置功能），避免重复多次调用接口的方法
如果我们在这里直接调用list接口，是无法进行同步的接口数据调用的，因为setSearchValue函数是一个异步函数，会导致我们调用接口的时候还是老的值，没有进行重置值。因此还是通过监听input的值的变化来进行接口调用，但是同时我们又不想在input值变化时候立即调用，因为我们可以添加一个中间状态，通过一个中间状态来进行处理。当然，页面内可能会有很多的按钮，比如有两个input框，一个input框是控制查询名称，一个input是查询id。比如我们要进行一个查询接口。
2024-12-04 18:54:57
521
原创 使用uniapp开发微信小程序使用uni_modules导致主包文件过大，无法发布的解决方法
在使用uniapp开发微信小程序时候，过多的引入uni_modules的组件库，会导致主包文件过大，导致无法上传微信小程序，主包要求大小不超过1.5MB.分包大小每个不能超过2M。解决方法：分包。
2024-11-18 19:06:25
3449
1
原创 前端通过nginx部署一个本地服务的方法
location @router 是为了避免刷新报错。配置静态文件的目录，以上配置完成后打开localhost:8088就可以打开前端项目了。把生成的dist文件复制出来，替换到nginx的html文件下。3.配置conf目录的nginx.conf文件。下载完成后解压缩后运行nginx.exe文件。正常是单斜杠，如果报错就试试双斜杠。2.打包你的前端项目文件。
2024-11-01 16:47:58
944
原创 如何快速删除node_modules依赖包的方法。
3.删除完成后，你可以进行选择重新下载node_modules依赖包。此场景适用于你想重置node_modules依赖包的情况。2.通过命令行进行删除node_modules依赖包。可以通过下载rimraf命令行工具进行删除。1.通过npm下载rimraf命令行工具。
2024-10-28 09:50:33
476
原创 vue项目配置配置代理解决请求接口跨域问题
以上的配置生效都是为了本地开发连接测试的接口，生产环境不存在这种问题。服务器可以直接转发配置即可完成跨域的问题。使用vite搭建的vue项目配置方法。使用webpace构建的vue项目。
2024-10-17 15:56:13
420
原创 vue3 element table 插槽外的数据更新，插槽内的数据未更新。
在使用element table组件时候，有时候需要对table内部的header插槽进行单独的列的数据操作，比如在列头增加一个筛选功能，对指定范围的值进行一个筛选，需要对input的值进行v-model的绑定，对绑定的值进行清空时候，会出现无法更新视图的问题。
2024-10-11 20:59:35
513
原创 uni-app开发微信小程序使用zb-table组件，进行表格自定义开发（支持固定表头和首列、上拉加载更多、及固定多列，表格自适应内容，排序，多选checkbox、可点击删除，编辑、合计功能，兼容多）
该文档支持固定表头和首列、上拉加载更多、及固定多列，表格自适应内容，排序，多选checkbox、可点击删除，编辑、合计功能，兼容多端简单的功能直接文档有解析。这里只解析运用到的两个格式化数据内容格式化以及数据样式格式化。
2024-07-13 15:29:58
1425
2
原创 uniapp进行微信小程序开发，使用navigateBack返回到上一个页面时候，接口未刷新。
使用uniapp进行微信小程序开发时，有a和b两个页面，从a进入b页面后，通过uni.navigateBack()方法返回a页面时候，无法触发a页面的onShow函数里面的接口调用。
2024-07-12 20:06:17
1324
原创 后端返还二进制excl表格数据时候，如何实现在前端下载表格功能及出现表格打开失败的异常处理。
后端返还一个二进制流的excl表格数据，前端需要对其解析，然后可提供给客户进行下载。思路：把二进制流数据转换给blob对象，然后利用a标签进行前端下载。以上问题需要更改一下接口请求数据的返回方式，如果正常情况下就可以解决下载问题。这样就可以解决下载的问题了。
2024-04-01 20:53:53
509
原创 vue学习笔记——Vue3循环生成表单时，对每一行新生成的数据添加表单验证的方法
把rules的验证规则循环写在element ui的el-form-item的标签上，动态绑定prop的值，使用index生成不同的prop来进行动态绑定。每次添加一个人员的时候，就是增加一个对象push到数组内，进行循环表单验证。在form表单内，动态生成一个数组类型的一组数据，要求对生成的每一组数据内容进行表单验证。例如动态添加人员，并对每个人的人员的信息输入框进行表单验证。
2024-03-22 11:08:51
938
原创 Vue3+ts获取props的值并且定义props值的类型的方法。
1.引入withDefaults模块，给defineProps绑定默认值。以上vue+ts对于props传值的写法。2.定义Props传输值的类型。3.给props的值设置默认值。
2024-01-09 11:03:57
1804
原创 git commit提交代码的时候，出现eslint校验时，如何直接暴力跳过检测提交代码
因为接到一个项目，里面有各种eslint代码校验，导致提交了很久都没提交上。想找一个暴力的方法直接提交。可以直接在命令行或者soucetree进行提交代码了。找到/git/hooks/pre-commit文件。找到项目的根目录上，
2023-08-25 10:23:08
1138
原创 读取文件地址时，文件内容带有特殊字符时无法找到文件，自动打开一个空text文件。
在读取文件时，有时候会无法打开文件，自动一个空的text文件，原因可能就是文件中带有特殊字符，在进行url转义的时候，导致编码后无法找到指定文件，最后报错。encodeURIComponent(path)的方法，对链接进行转义。在进行url地址的时候，可以使用。
2023-08-18 15:48:02
296
原创 解决使用element ui时el-input的属性type=number，仍然可以输入e的问题。
其他的中文特殊字符都不可以输入，但是只有e是可以输入的，原因是e也输入作为科学计数法的时候，e是可以被判定为数字的，使用element ui时el-input的属性type=number，仍然可以输入e，但是有些场景是需要把e这种情况屏蔽掉的，我们可以使用如下的方法。在进行键盘事件输入时，进行监听，禁止e的输入。通过以上方法就可以解决。
2023-08-18 13:53:55
3254
4
原创 vue3 兄弟子组件相互调用方法的实现思路及解决方法
再在B组件内发射一个自定义事件，在组件C接受这个自定义事件的时候，进行A组件内的表单验证函数，书写一个回调函数（返还想要的参数，例如表单是否验证成功的布尔值）。vue实际开发过程中，可能需要在某一个子组件调用另一个子组件的方法，从而实现业务需求。最后在B组件内接收在这回调函数所返还的值，进行自己的业务逻辑代码的书写。利用共同的父组件C，我们可以在C组件通过ref来调用A组件的方法。如上就涉及到到组件B需要调用组件A的form验证方法。以上代码是逻辑实现，仅供参考。例如以下的一个业务场景。
2023-07-18 15:22:34
5223
2
原创 Vue3使用i18n插件实现多种语言切换的功能
i18n.ts为翻译文件的入口文件，此文件需引入全局main.ts文件内。index.ts为范围文件内容的导出文件。
2023-06-30 14:33:26
1598
4
原创 vue开发时，后端一次性返还过多数据时，利用slice方法对数据进行懒加载，使table滚动条滚动到底部时加载数据。
在处理后台返还数据较多时，前端不可能一次性把所有的数据加载在table列表内，我们可以监听滚动条，前端利用slice方法，来截取数据，从而 进行数据懒加载的实现。通过以上方法可以简单实现数据的懒加载。
2023-05-06 10:05:33
703
原创 前端开发处理企业微信浏览器时，开启企业微信浏览器调试模式的方法。
windows:快捷键 ctrl + alt + shift + D，进入调试模式；mac:按下command+shift+control+D进入调试模式。点击右键，showDevTools 就可以进入调试模式了。
2023-04-27 16:38:05
2304
原创 Vue 网页端（pc）微信授权登录的流程与方法
1.在当前页面利用微信提供的api接口，生成二维码图片，用户扫码完成过后，跳转到微信授权登录中间页，判断微信返还的状态，是已注册还是未注册。以上的前提是配置好微信开放平台的回传的url地址。前端拿到后端返还的参数，配置在wxlogin的组件内，即可成功得到二维码图片。redirect_uri这里的url指的是扫码成功后所跳转回的url。我们可以在跳转完成回去的页面的生命周期内，进行对微信登录状态的判断等。像微信的api请求后获取到返还的url，再给前端，前端直接跳转到。重要的是配置回传跳转的路径。
2023-04-24 11:30:34
3426
原创 vue3使用element ui plus实现文件上传功能,可实现自定义处理上传列表，文件类型限制。
有的时候会对element ui 的上传文件功能模糊，简单做一个思路梳理和组件使用。代码内贴有注释，详细介绍代码使用规则。
2023-04-21 11:04:34
5308
原创 uni-app上传文件报错解决方案：error:ReferenceError: FormData is not defined；
在uni-app内，提供了一个uni.uploadFile的方法，可以把获取到的临时的文件url来进行传输， 然后就可以实现文件的上传功能了。// 上传图片 通过uni-app的uni-file-picker组件 函数返回。微信小程序内没有FormData这个对象，FormData针对的web,//调用uploadFile方法来进行图片的转换。我们通常会这样来进行图片的接口传输。然后把fd作为参数进行传输。//需要传图片的后台接口。
2023-03-01 17:34:28
4698
原创 前端Vue开发，多关键字搜索时，搜索结果高亮显示(解决输入英文时，会错误的把html标签渲染的问题)
html标签，这个时候把html标签转化为一个特殊的符号，把这些所有的特殊符号的代表内容放如到一个数组内，再紧接着高亮渲染html标签，完成后，把原先特殊符号进行替换，依次替换成需要显示的html标签，即可。输入英文字符时，把html标签渲染出来的问题，比如在进行多关键字搜索时，可能会进行a;因为是多关键字搜索，首先考虑的是把关键词转换为一个数据，把关键词和文本信息进行一次循环比对，发现是重复的，就进行高亮显示，如果之前的第一个关键词已经关键词显示，那么此时文本已经存在了。//符合的html定义一个数组。
2023-02-20 14:30:06
1200
4
原创 Vue2和Vue3时，利用Object.assign()方法对对象数据进行初始化或置空功能的实现。
点击新增按钮进行form表单的输入填写，当再重新打开弹框时，需要把弹框的内容重置。//this.$options.data() 获取该组件初始状态下的data。或者在实现重置按钮功能的时候，需要对某些数据进行置空的操作。//this.$data 获取当前状态下的data。通过vue2的内置方法来进行实现。
2023-02-15 17:04:05
3654
原创 Vue中对文案内容进行复制的两种解决方法：
在vue内实现复制文案功能，通过查阅文档，大多都是需要使用clipboard的插件，但其实只是简单的复制功能的话，可以使用如下的两种方法。
2023-02-08 17:03:31
546
原创 在使用element ui的form表单验证成功，但是点击提交没有进入validate方法的解决方法。
在对input的值都正确的进行验证后，发现点击提交按钮，没有进入element ui的validate方法，通过逐步的调试，在使用自定义验证规则的时候，没有使用callback的回调，这样就导致无法进入validate方法。
2023-02-03 16:48:02
1337
原创 解决使用Element Ui的走马灯Carousel时,当内容长度为2时循环方向异常的问题。
但是当我们启用下指示器时，就会出现4个指示器，这样就会出现问题，我们可以判断当前是否是属于第一组数据还是第二组数据，通过class类名，显示或隐藏下方的指示器，该方法只针对两个内容出现的方向问题。使用element ui的走马灯Carousel的时候。当内容数量大于2时，可以正常显示，我们可以直接复制一份当前的数据，进行当前的循环操作，这样就可以解决问题。//当为第一组数据的时候，打开当前的指示器，隐藏第二组数据的指示器。//当为第二组数据的时候，打开当前的指示器，隐藏第一组数据的指示器。
2023-01-31 16:09:03
2349
原创 js的try catch使用方法及其主要作用。
在日常进行js代码编写时，我们可能会编写错误的代码，就会在控制台报错，然后阻止报错之后的代码运行。
2023-01-30 15:58:02
1084
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人