- 博客(118)
- 收藏
- 关注
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
11673
2
原创 微信小程序最新wx.getUserProfile接口获取用户信息和登陆信息的方法，迭代wx.getUserInfo方法。
最近，微信小程序发布了新的版本，是关于用户信息的问题，2021年4月13日后发布的小程序新版本，无法通过wx.getUserInfo与获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData中的用户个人信息），获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。这就需要我们之前的代码进行升级适配。小程序登录、用户信息相关接口调整说明更新方法： 在WXML内，使用bin
2021-04-13 10:59:03
20507
8
原创 前端开发时使用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
8990
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
10306
原创 后端返还二进制excl表格数据时候，如何实现在前端下载表格功能及出现表格打开失败的异常处理。
后端返还一个二进制流的excl表格数据，前端需要对其解析，然后可提供给客户进行下载。思路：把二进制流数据转换给blob对象，然后利用a标签进行前端下载。以上问题需要更改一下接口请求数据的返回方式，如果正常情况下就可以解决下载问题。这样就可以解决下载的问题了。
2024-04-01 20:53:53
345
原创 vue学习笔记——Vue3循环生成表单时，对每一行新生成的数据添加表单验证的方法
把rules的验证规则循环写在element ui的el-form-item的标签上，动态绑定prop的值，使用index生成不同的prop来进行动态绑定。每次添加一个人员的时候，就是增加一个对象push到数组内，进行循环表单验证。在form表单内，动态生成一个数组类型的一组数据，要求对生成的每一组数据内容进行表单验证。例如动态添加人员，并对每个人的人员的信息输入框进行表单验证。
2024-03-22 11:08:51
375
原创 Vue3+ts获取props的值并且定义props值的类型的方法。
1.引入withDefaults模块，给defineProps绑定默认值。以上vue+ts对于props传值的写法。2.定义Props传输值的类型。3.给props的值设置默认值。
2024-01-09 11:03:57
792
原创 git commit提交代码的时候，出现eslint校验时，如何直接暴力跳过检测提交代码
因为接到一个项目，里面有各种eslint代码校验，导致提交了很久都没提交上。想找一个暴力的方法直接提交。可以直接在命令行或者soucetree进行提交代码了。找到/git/hooks/pre-commit文件。找到项目的根目录上，
2023-08-25 10:23:08
700
原创 读取文件地址时，文件内容带有特殊字符时无法找到文件，自动打开一个空text文件。
在读取文件时，有时候会无法打开文件，自动一个空的text文件，原因可能就是文件中带有特殊字符，在进行url转义的时候，导致编码后无法找到指定文件，最后报错。encodeURIComponent(path)的方法，对链接进行转义。在进行url地址的时候，可以使用。
2023-08-18 15:48:02
222
原创 解决使用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
2245
4
原创 vue3 兄弟子组件相互调用方法的实现思路及解决方法
再在B组件内发射一个自定义事件，在组件C接受这个自定义事件的时候，进行A组件内的表单验证函数，书写一个回调函数（返还想要的参数，例如表单是否验证成功的布尔值）。vue实际开发过程中，可能需要在某一个子组件调用另一个子组件的方法，从而实现业务需求。最后在B组件内接收在这回调函数所返还的值，进行自己的业务逻辑代码的书写。利用共同的父组件C，我们可以在C组件通过ref来调用A组件的方法。如上就涉及到到组件B需要调用组件A的form验证方法。以上代码是逻辑实现，仅供参考。例如以下的一个业务场景。
2023-07-18 15:22:34
3121
2
原创 Vue3使用i18n插件实现多种语言切换的功能
i18n.ts为翻译文件的入口文件，此文件需引入全局main.ts文件内。index.ts为范围文件内容的导出文件。
2023-06-30 14:33:26
1261
4
原创 vue开发时，后端一次性返还过多数据时，利用slice方法对数据进行懒加载，使table滚动条滚动到底部时加载数据。
在处理后台返还数据较多时，前端不可能一次性把所有的数据加载在table列表内，我们可以监听滚动条，前端利用slice方法，来截取数据，从而 进行数据懒加载的实现。通过以上方法可以简单实现数据的懒加载。
2023-05-06 10:05:33
564
原创 前端开发处理企业微信浏览器时，开启企业微信浏览器调试模式的方法。
windows:快捷键 ctrl + alt + shift + D，进入调试模式；mac:按下command+shift+control+D进入调试模式。点击右键，showDevTools 就可以进入调试模式了。
2023-04-27 16:38:05
1535
原创 Vue 网页端（pc）微信授权登录的流程与方法
1.在当前页面利用微信提供的api接口，生成二维码图片，用户扫码完成过后，跳转到微信授权登录中间页，判断微信返还的状态，是已注册还是未注册。以上的前提是配置好微信开放平台的回传的url地址。前端拿到后端返还的参数，配置在wxlogin的组件内，即可成功得到二维码图片。redirect_uri这里的url指的是扫码成功后所跳转回的url。我们可以在跳转完成回去的页面的生命周期内，进行对微信登录状态的判断等。像微信的api请求后获取到返还的url，再给前端，前端直接跳转到。重要的是配置回传跳转的路径。
2023-04-24 11:30:34
2649
原创 vue3使用element ui plus实现文件上传功能,可实现自定义处理上传列表，文件类型限制。
有的时候会对element ui 的上传文件功能模糊，简单做一个思路梳理和组件使用。代码内贴有注释，详细介绍代码使用规则。
2023-04-21 11:04:34
3776
原创 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
3549
原创 前端Vue开发，多关键字搜索时，搜索结果高亮显示(解决输入英文时，会错误的把html标签渲染的问题)
html标签，这个时候把html标签转化为一个特殊的符号，把这些所有的特殊符号的代表内容放如到一个数组内，再紧接着高亮渲染html标签，完成后，把原先特殊符号进行替换，依次替换成需要显示的html标签，即可。输入英文字符时，把html标签渲染出来的问题，比如在进行多关键字搜索时，可能会进行a;因为是多关键字搜索，首先考虑的是把关键词转换为一个数据，把关键词和文本信息进行一次循环比对，发现是重复的，就进行高亮显示，如果之前的第一个关键词已经关键词显示，那么此时文本已经存在了。//符合的html定义一个数组。
2023-02-20 14:30:06
999
4
原创 Vue2和Vue3时，利用Object.assign()方法对对象数据进行初始化或置空功能的实现。
点击新增按钮进行form表单的输入填写，当再重新打开弹框时，需要把弹框的内容重置。//this.$options.data() 获取该组件初始状态下的data。或者在实现重置按钮功能的时候，需要对某些数据进行置空的操作。//this.$data 获取当前状态下的data。通过vue2的内置方法来进行实现。
2023-02-15 17:04:05
2987
原创 Vue中对文案内容进行复制的两种解决方法：
在vue内实现复制文案功能，通过查阅文档，大多都是需要使用clipboard的插件，但其实只是简单的复制功能的话，可以使用如下的两种方法。
2023-02-08 17:03:31
434
原创 在使用element ui的form表单验证成功，但是点击提交没有进入validate方法的解决方法。
在对input的值都正确的进行验证后，发现点击提交按钮，没有进入element ui的validate方法，通过逐步的调试，在使用自定义验证规则的时候，没有使用callback的回调，这样就导致无法进入validate方法。
2023-02-03 16:48:02
1093
原创 解决使用Element Ui的走马灯Carousel时,当内容长度为2时循环方向异常的问题。
但是当我们启用下指示器时，就会出现4个指示器，这样就会出现问题，我们可以判断当前是否是属于第一组数据还是第二组数据，通过class类名，显示或隐藏下方的指示器，该方法只针对两个内容出现的方向问题。使用element ui的走马灯Carousel的时候。当内容数量大于2时，可以正常显示，我们可以直接复制一份当前的数据，进行当前的循环操作，这样就可以解决问题。//当为第一组数据的时候，打开当前的指示器，隐藏第二组数据的指示器。//当为第二组数据的时候，打开当前的指示器，隐藏第一组数据的指示器。
2023-01-31 16:09:03
1777
原创 js的try catch使用方法及其主要作用。
在日常进行js代码编写时，我们可能会编写错误的代码，就会在控制台报错，然后阻止报错之后的代码运行。
2023-01-30 15:58:02
939
原创 使用Element-Ui-Plus时，对select-v2进行自定义操作，可以自定义添加筛选后无数据的选项进行添加。
在最近的开发需求中，需要对element-ui-plus的select-v2的组件进行自定义的改装，即在搜索状态完成后，select-v2提供了一个属性方法，即allow-create的属性， 为了使 allow-create 正常工作，但是我们发现，使用这个属性后，如果输入的是已经存在的。使用自定义的空状态的插槽，设置一个添加按钮，监听该按钮，当发现无搜索数据时，点击添加按钮，就把。如果发现无搜索内容，可进行自定义的进行添加当前的select的input框内。当前的input的值替换为搜索框输入的值。
2023-01-13 14:50:41
2105
原创 解决使用element-plus时使用el-select-v2组件时，选中后无法移除focus的状态的方法。
我们可以使用element-ui-plus的el-select-v2的组件，实现复合搜索和下拉框的功能。
2023-01-12 16:19:40
2192
原创 解决使用js使用toFixed保留小数以及进行js的加减乘除运算时浮点数精度的问题。
可是小数转成2进制的时候，因为要对数据乘2直到取整，所以像0.5这种数字，可以很快计算得到2进制结果，但是0.1和0.2这样的数字，是永远不可能计算得到准确的2进制结果的，因为一直乘2，就没有得到整数的时候，此时在转换2进制的过程中，会形成无限死循环。计算机内部在存储无限死循环数据时，必须要有一个限度，采取舍去的原则，所以，0.1和0.2在计算机内部存储的对应的2进制数字，本来就不精准，所以相加得到的2进制结果，也就不精准了，那转换成10进制后，是会有一定的误差的，所以结果不是精准的0.3。
2022-12-23 16:16:12
653
原创 原生JS监听鼠标右键事件，禁用默认事件，绑定新的自定义标签的方法
最近在开发的时候，需要对鼠标右键做一个监听，根据查阅文档发现我们可以使用oncontextmenu来对右击事件进行监听，如果要监听全局的话，直接使用window.oncontextmenu来进行绑定。首先我们要使用e.preventDefault();禁用的默认的右击事件，然后再添加我们的自定义的内容；
2022-12-19 16:31:14
3334
原创 原生js常用的方法（未完待续）
element.getAttributeNode(‘属性名’)；//返回指定元素的属性名和属性值。element.getAttribute(‘属性名’)；//返回指定元素属性名的属性值。element.attributes[‘属性名’]；//返回指定元素的属性名和属性值。通过querySelector获取,获取是拿到的第一个元素。通过querySelectorAll获取,返还的是数组;通过类名获取dom元素 返还的是数组！通过标签名获取dom，返还的是数组！
2022-12-16 14:40:17
246
2
原创 解决使用原生表格table数据进行Vue的循环渲染时，对行或列进行合并的问题。
因为涉及到数据的循环渲染，所以在渲染数据欠，我们首先要设计好数据的。在实际的开发场景下，有时候我们需要对表格的列或者行进行合并，通过对数据的归类处理，这样在循环的时候就可以解决合并的问题。把数据相同的进行归类，类似于以下的方式。
2022-12-15 14:58:08
1673
原创 使用Element ui的from表单验证时，绑定的值无法在验证函数中获取值,恒为undefined的问题分析。
在最近使用element ui的form表单功能进行开发时，通过prop绑定时，无法正确的获取value值，一直输出为undefined，通过调查发现，目前el-form的model主要用表单验证的，也就是配合el-form的rules和el-form-item的prop来使用的。上面是个错误的示范，如果把要验证的数据放在了model绑定的对象外，那么就无法获得数据，验证规则内会一直得到undefined。当你已经对该属性进行绑定后，那么接下来，你的表单的prop默认绑定的值就是model绑定的对象的值。
2022-12-13 18:29:14
2418
3
原创 如何实现随机生成坐标点，并且使每个坐标点之间的距离大于某个距离？(用于散点图的绘制，进行数据的处理)
通过循环获取每个坐标点，每获取一个新的坐标点，都要与之前生成的坐标点进行对比，如果大于指定距离，最近需要开发一个新需求，需要绘制一个随机生成数字的散点图，要求点与点的距离要大于某个特定值。则符合条件，退出循环，如果小于或等于该距离，则继续随机生成，进行比对。可直接复制到本地看效果！//点与点之间的计算公式。
2022-12-08 18:14:45
1315
原创 解决：v-model cannot be used on v-for or v-slot scope variables because they are not writable.报错问题
在使用vue进行前端开发时，可能会遇到循环渲染input输入框的需求，当使用v-for循环后，对v-model进行值的绑定时，可能会出现以下错误,如图所示：v-model cannot be used on v-for or v-slot scope variables because they are not writable.错误代码：通过查阅文档发现，v-model 不可以直接修改 v-for 循环迭代时别名上的数据解决方法：我们可以使用对象的索引来进行v-model的值的绑定。通过以上的方
2022-12-06 17:58:07
6303
原创 Vue开发时，循环生成input，对input框进行位数限制或小数位置限制时，input框的值没有正确双向绑定的问题。
问题开发时，我们发现在通过循环获取input时，input的值并没有进行双向绑定
2022-12-02 15:22:46
830
原创 如何对input框的值进行小数位数的保留，保留几位小数的方法。
在最近开发的时候，遇到这样的需求，对input框内的值进行小数位数的保留，最多保留6位小数。我们可以通过对值内的小数点的索引的判断，获取小数的索引，然后进行保留小数位数。通过以上的方法就可以完美的处理input框保留多尾小数的问题了。
2022-12-02 13:20:49
975
原创 解决使用svg绘制后下载图片以及下载svg内部嵌套image图片失败的问题。
在使用svg进行图形绘制之后，可能需要下载已经绘制的svg图片，我们可能会遇到以下两种情况：情况1：情况2：第一种是svg内部都是使用svg的方法进行绘制的，我们可以直接通过canvas的方法进行绘制下载，方法如下第二种情况是在svg内部嵌套了一个image的图片，此时则无法使用第一种方法直接进行下载，下载的图片无内嵌图片，后来通过调查发下，需要把image引入的图片的路径更改微base64的方法后，再进行下载则可以实现，并解决问题。方法如下。通过此种方法就可以解决svg内部嵌套image图片下载
2022-11-18 14:01:26
1286
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人