- 博客(43)
- 收藏
- 关注
RSS订阅原创 vue引用public目录下文件
vue引用public目录下文件有时候我们在开发h5时候，会有需要绑卡授权操作，这个时候需要同意某些协议并且这些协议是可以点击打开的，这种该怎么做呢？其实这就是一个链接，前端能够打开链接并且常用的也就是a标签喝vue自带的router-link，当然其他还有，通常来说a标签就够了关于协议的存储，这里简单说下，在实际开发中，协议存储有以下几种：1、存放在前端，一种是直接放在public静态资源文件夹下，webpack打包不会对其处理，直接把文件复制到存放项目的工程目录下；还有一种就是托管在cdn上，类
2022-05-27 18:11:58
17549
1
原创 vue完整的登陆页面开发
**完整的登陆页面开发**，组件使用的是vant ui，具体用法可去官网看。分几个部分考虑，一、输入框input的校验：1、blur时没有值和格式不符合的逻辑校验2、限制输入长度逻辑，比如手机号只能11位，验证码只能6位。二、验证码按钮逻辑：1、不同状态下验证码颜色，文案，是否能点击，是否显示记数需要兼顾。2、验证码能够正常点击是在手机号格式正确情况下，所以这里要有个监听手机号，一旦格式符合，验证码生效3、关于计数器的逻辑。以下会从上面的点开考虑：一、input的校验没有可说的，记住俩
2022-05-26 20:02:37
1595
1
原创 vue3不同环境下如何配置代理
实际开发的时候，经常会遇到并行开发的需求，会出现第一个需求接口转发是一个地址，下一个需求接口转发是一个地址，这时候如何解决呢？第一种情况：前端也不申请多套环境。本地开发时，多加个代理，比如叫api2，然后在当前需求的接口前面使用这个。在这里插入图片描述但是会出现个问题，前端页面加载后，只有涉及当前需求的模块接口是通的，其他模块的接口报错（并不是说其他模块有问题，其他模块已提测），因为你本地启动后，前端只有一套环境，但是后端有俩套环境，二者不一致。如果当前需求的模块数据依赖于之前模块，那测试流程将无法
2022-01-20 16:46:05
2952
原创 vue中cannot read properties of null （reading ‘0‘）
本地开发中，很容易遇到这种类似问题，这个时候调试也能很好的解决，但是今天想说下，如果在打包之后遇到这种报错一般是啥问题cannot read properties of null （reading ‘0’）1⃣️首先确定打包没问题2⃣️如果url输入回车后控制台就报错，那很可能是路由渲染的数据，即数组没有判断其是否有值就使用了，或者是左边导航栏的数据也没有判断是否有值，或者是后台返回的权限在使用的时候也没判断是否有值。总之，重点检查出此渲染需要使用的数据。...
2021-12-27 22:01:43
4144
原创 vue编辑表格报错 Failed to execute ‘getComputedStyle‘ on ‘Window‘: parameter 1 is not of type ‘Element‘.
vue table报错
2021-12-04 00:37:34
7466
原创 vue跨域接口转发
记录下关于跨域，接口转发的理解//vue-cli3.0 里面的 vue.config.js做配置devServer: {proxy: {‘/rng’: { //这里最好有一个 /target: ‘http://45.105.124.130:8081’, // 后台接口域名ws: true, //如果要代理 websockets，配置这个参数secure: false, // 如果是https接口，需要配置这个参数changeOrigin: true, //是否跨域
2021-12-02 23:11:57
757
原创 vue3新特性
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-09-23 18:20:20
1380
2
原创 vue不使用vue-qr生成下载二维码
需求：不使用插件生成下载二维码。表格内某一列点击查看，展示二维码，且支持下载,如图。初始化的时候，后端返回表格数据的同时会把二维码图片地址返回。所以，整个逻辑就是，点击不同查看携带不同图片地址去访问接口。1、点击查看，展示图片。2、点击下载按钮（这里要解决跨域问题，本地开发和上测试服和生产的时候都得解决）,红色ip去除3、接下来就是拿每个图片的标识开始发请求。4、请求过去后，解析后端返回的流。注意：这里需要注意的就是图片下载跨域处理，关于如何解决，上篇博文说过。先关代码，我贴一
2021-09-18 18:32:26
217
原创 关于vue中proxy代理的一些理解
vue中proxy代理的理解今天开发的时候 意外发现对vue的代理有了新的理解，以前都是很模糊的状态，先看图吧。1、proxy里面是个大对象，如果有多个代理，直接在后面加子对象，实际开发中可能不止接口代理还有图片上传下载代理。2、整个代理流程如何？①首先得知道什么是代理，为什么需要代理？代理：顾名思义就是代替别人做某事，到开发中也是这样，因为本地开发时基于node服务器进行开发，是不能直接请求后端的接口，一旦直接请求会报跨域错误，（不信可以试试把url直接写成后端地址，这时就会报错）如果这样的话
2021-09-18 16:41:34
2276
1
原创 vue2或者vue3图片上传功能（upload）
采用element ui中upload组件上传，目前支持上传单张图片，如果多张可进行更改。一、页面上组件使用注意：①如果是多张图片，file-list会用到。②name是申明上传文件的格式，可以和后端商量，有时候上传图片后端只需要image格式，但有时候后端会把图片和文件定义成一种格式即file。③action。图片上传的接口地址，通常是公司的服务器，这个地址不能直接填测试地址，会报跨域问题，需要知道本地开发从哪里开始代理，我这里是从api开始代理，所以action后面为api+图片接口地址。④v-i
2021-09-14 15:54:14
4610
原创 银行卡号手机号怎么用*号展示
关于银行卡号手机号怎么用*号展示工作中经常会遇到银行卡号或者手机用*号隐藏部分数据，用到的知识点是字符串substring和substr方法substring()和substr（）方法都是从0开始数，不包括最后一项。手机号格式： computedPhone() { let res = JSON.parse(JSON.stringify(this.phone)) + ""; if (res == "") { return ""; } le
2021-03-22 19:12:37
458
原创 【ElementUI】日期选择器时间选择范围限制
element ui中日期日期范围的限制官方文档中使用picker-options属性来限制可选择的日期，这里举例子稍做补充。函数名disabledDate不可更改。单个输入框情景1: 设置选择今天以及今天之后的日期data (){ return { pickerOptions0: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7;
2021-03-17 10:41:28
1114
原创 浅谈git的推拉取合并功能
git一直以来都是我的硬伤，现在各种工具层出不穷，很多鼠标操作就能代替 手动输入git命令，今天就来谈一谈手动实现git的推拉取功能。首先说下git add .存在得意义，为什么不直接提交git commit尼？其实git add .的作用就是将你变动得文件放入暂存区，这个区域用来记录你每次变动的文件，那有的人就会问 为什么需要这个 我每次变动直接提交推送不就好了嘛 但是你要知到当我们在写代码的时候 并不是文件变动一次就得需要走一编流程 所以这个时候我们就需要把变动的代码放到一个缓存区，一起提交推送，
2021-02-08 23:27:39
263
原创 工作中遇到的问题
工作中遇到的问题由于上班期间会遇到各种奇葩问题，在这做个总结。1、父组建引用自组件后，如何修改自组件内的样式。我们知道在父组件直接修改自组件样式是不可行，所以需要用到深度作用选择器。<<<.用法：给在父组件中的子组件加个类名，深度选择子组件需要修改样式的类名。在这里插入图片描述2、如果页面上需要展示多个dialog，如何让他们平级展示。同时展示多个弹框，只展示一个弹框原因是层级z-index值不同，值比较大的就会展示在最上面，可以打开控制台直接看出。这就需要...
2020-12-28 17:53:16
122
原创 el-input只能输入数字，保留小数点俩位
由于项目中有很多控制输入框字符校验的规则，每次找都比较复杂，今天先做个罗列。1、只能输入数字。其实这个方法element组件自带el-input-numer可以解决，但是！但是！有个坑，如果你想在输入数字的基础上保留俩位数，你可能未设置precisio=2，对吧对吧，但是如果你继续想控制小数点前的位置个数时你就会发现这个组件拿不到像后面带零的长度，比如1.00打印出来也只是1，所以这个就得额外处理点和0 。当时真的气死我，还好经过同事的指点发现一个更好用的方法。1⃣️只能输入数字的校验，注意input
2020-12-27 18:05:38
4516
原创 解决date-picker切换日期无法赋值问题
上班期间遇到element ui中事件控件date-picker大坑，需求要点击编辑进来绑定回显后端返回的值，之后再次选择日期发现无法选中，更离谱的是选中的回调函数毛线都没用～ 气死我了 当时。就在这时 我想起了度娘。于是我百度了下，按照某位大佬的写法来了一遍 我靠 惊呆了 还真可以 这个方法就是在初始化的时候用this.$set(要回显的变量，后端返回的值)。请看截图。...
2020-12-02 14:01:27
1043
原创 vue实现导出excel功能
vue实现导出excel功能对于导出的excel理解：导出excel需要前后端协商约定返回流的格式，导出的内容和格式都是后端实现的，前端只需要将后端返回的文件流解析成浏览器能够识别的流，解析的过程都是统一的写法。1、如何写注意传参数方式：get方式的话，直接在请求接口后拼接参数，post方式，将参数放入data里面。最终效果如图：后端返回的文件流。完整代码如下：handleDownload() { axios({ method: 'get',
2020-11-27 13:39:55
1708
3
原创 如何利用vue实现打印功能
vue实现打印功能vue自带插件可以实现打印功能，这就需要我们本地安装这个插件。1、安装 npm install vue-print-nb --save判断如何安装成功：package.json文件搜索print查看是否有，其实所有判断插件是否安 装成功都可以这样。2，引入 安装好以后在main.js文件中引入import Print from ‘vue-print-nb’ Vue.use(Print); //注册3、如何使用打印按钮上加上自定义指令v-print，这个是v
2020-11-27 10:43:06
2514
原创 es6中Set和Map的数据结构
一、Set它类似于数组，但是成员的值都是唯一的，没有重复的值。所以可以用来数组去重遍历操作Set结构的实例有四个遍历方法，可以用于遍历成员。（1）keys()：返回键名的遍历器（2）values()：返回键值的遍历器（3）entries()：返回键值对的遍历器（4）forEach()：使用回调函数遍历每个成员二、MapMap结构的目的和基本用法JavaScript的对象（Object），本质上是键值对的集合（Hash结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
2020-07-18 18:11:32
259
原创 es6数组、对象的扩展
一、数组的扩展①Array.from() 用于将俩类对象转为真正的数组：类似数组的对象和可遍历的对象包括es6新增的数据结构Set和Map（1）类对相②Array.find() 数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。③Array.findIndex()数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是
2020-07-18 17:51:31
161
原创 ES6 module中模块的学习
对于前端，自从入行以来愈发觉得深似海，无边无际要学的很多，自己总感觉好像啥都会，但是不深入，所以从今天开始准备拾起零散的知识加以强化巩固。今天就从es6的模块开始吧~前言：历史上，js是没有模块体系，无法将一个大的程序拆分成小的模块，但是像一些后台预言python却是有的。所以后来在es6出来之前社区就出了一套规范可以将大程序拆分成小程序，也就是我们经常说的CommonJS和AMD,前者用于服务器，后者用于浏览器，后来es6出来后就代替了这种模块解决方案。下面看下CommonJS的实现过程上面代码
2020-07-16 16:46:15
204
原创 小程序post请求数组变成字符串
小程序post传参数组变成字符串今天开发的时候，同事遇到一个问题，传参之前打印了参数，商品id是个数组，但是到request中却序列化成一个个字符串如图传参前格式request中如图这是原来的小程序请求头原因是浏览器接收参数的时候将其序列化了，可以在请求头上加上***Content-Type：application/json***但是这会影响到其他的请求头，所以可以和后端约定需要什么类型的数据，我同事是将params中参数join(’,’)变成字符串传给后台斜体样式...
2020-06-29 17:13:28
2595
原创 upload上传如何覆盖之前的文件
有个博主写的很好 转载下https://www.cnblogs.com/lovemomo/p/11777608.html大致思路就是使用on-chang事件改变fileList里文件列表，只保留最后一项js部分
2020-02-12 14:57:06
1088
原创 如何自大环境，拉取公司代码
首先直接从官网下载git，然后傻瓜式安装，然后下载小乌龟安装，作为git的可视化工具，具体安装教程可百度，很简单。然后克隆代码，然后安装vue脚手架，因为我的代码是基于vue运行的，所以要下载脚手架，光是这样还不行，因为还要安装npm包，采用淘宝镜像安装 npm install --registry=https://registry.npm.taobao.org 这样你得项目就可以运行，但是...
2020-02-02 21:00:58
709
原创 vue 区分新增，编辑，查看页面
工作中经常会遇到编辑，新增，查看共享一个页面，因为后台的接口编辑和新增都是写在一起的，唯一不同的是id先说说我要实现的功能：我想要点击新增的时候，路由跳转一个页面，编辑的时候也跳转，查看也跳转，这三个就页面来说没有任何区别，区别在于页面绑定值不同，新增的时候不需要绑定值，页面没有数据，用户输入数据，点击确定就ok了；点击编辑按钮之前我们要调用一次查询按钮，查询当前用户之前是否存在数据，如果没有的...
2020-01-09 11:43:46
10227
1
原创 页面删除表格数据和请求 接口的删除
删除表格的每行数据有俩种删除，第一种是前端页面删除，不请求接口，第二种就是请求接口删除（这里请求接口删除是删除多条之后点击保存请求接口）第一种：利用splice方法，删除的是表格的index值delete(index){ //绑定事件时将index传过来this.tableData.splice(index,1)//tableData里是一个大的字典也就是表格的数据 }第二种：删除...
2020-01-06 18:10:43
1016
原创 vue判断表格不能输入空值和重复值
类似这种点击确定前要判断表格是否有空，如果有空值则给出提示，不允许提交遍历表格每行数据的字段，利用some返回bool类型值sureAdd(){ var flag=this.tableDatas.some(x=>{ return x.name.trim==""})console.log(flag) //falseif(flag){this.$message.error...
2020-01-06 13:52:43
5022
1
原创 把对象变成数组对象
就是你获取到的数据是对象格式，但是你想吧这个对象放在一个数组里 类似下图这种其实这个时候不妨采用以下方法：row原本是字符串类型的，使用这个方法会变成数组包裹着对象格式。插个小知识点，以免自己忘记...
2019-12-23 18:58:40
1653
原创 数组形式的对象转成数组
开发中遇到此种类型的数据，如何转换成数组格式方法如下：使用map方法，但是要注意的是一定要给个变量接收每个item中你想取得键值，item就是下标为0、1、2时候的对象，item.id就是对象里面的id值最后的格式转成[44,45,46,47]样子...
2019-12-23 18:53:18
247
原创 获取表格中某个字段对齐进行判断
tablesDatas数据格式为字典，例如[ {name:‘qq’,age:20},{},{}]现要拿出某个字段对齐进行判断。可使用some的api.trim()去空格
2019-12-20 18:44:44
128
原创 修改elementUi中上传图片默认样式不影响全局样式
开发项目中多次运用到element ui中upload上传图片组件，但是有一处需要将正方形的上传框变成圆形，于是找到需要修改的元素，发现已修改，其他地方也会修改，于是找到一个好方法，在需要修改的样式的父元素添加类名，然后要修改的类名前面加上父元素即可。如图所示：框起来的是要修改的元素，前面是其父元素最终效果图：完美！！！！...
2019-12-07 15:22:27
3780
原创 element-ui组件form表单校验采坑！！！！！
由于公司业务需求。需要使用很多表单，故采用element ui中form表单，因为组件封装好校验未填的提示，也就是如下写法：写完之后特开心，因为纳闷多表单校验再也不用写纳闷多if了，没想到的是，今天提测，测试输入空格，我靠，惊呆了，空格竟然能保存？？？？？于是百度解决方案，现有以下俩种解决方案第一种：在绑定表单的时候加上trim，如图所示：这个有什么好处尼？ 他可以去除开头和结束的空...
2019-12-06 20:28:21
3707
原创 vue中Error in render: "TypeError: Cannot read property 'split' of undefined"
今天，检查项目的时候，切换不同的tabs报错无法识别split，首先将初始化函数注释，发现还是报这个错，说明不是初始化的问题，后来老大帮我解决，具体解决方案如下：首先模板中引入家在组建，给与一定时间初始化，这样数据就能完全加载成功引入组件组件内容：页面中调用：初始化状态写法：这样就没问题了...
2019-12-03 16:09:02
3020
原创 修改伪类样式
修改:before伪类的技巧如果你想修改伪类上的元素，则可以打开控制台找到那个元素后修改你想要的样式，如果只是去除某个样式，则可以加display：noe属性即可...
2019-12-03 10:19:31
506
原创 小程序引用自定义组件报错组件内容为空或者this.selectComponent为空
写项目的过程中经常遇到弹框，今天刚好遇到俩个一样的弹框，只是弹框的title不一样，就突发奇想分装个自定义模态框，嗯，上网百度了，感觉也不难，但是中途遇到个bug，弄了一个下午加上午也没完成，最后在老大的帮助下，成功解决这个问题。一开始单写个demo发现点击能够出现弹框，但是放在写有其他内容的页面中死活报错，主要是 can not read popup of null,也就是组件的内容为空，说...
2019-08-22 18:16:20
4369
2
原创 小程序拨打电话
小程序官方文档提供了如何复制代码，直接跳转到拨打电话页面，代码如下call_phone:function(e){ var phone=e.currentTarget.dataset.phone; console.log(phone) if (phone!=undefined){ wx.makePhoneCall({ phoneNumber: '...
2019-08-20 16:46:06
827
原创 小程序复制文本信息并粘贴
最近都在写小程序页面的迭代，今天遇到复制微信号，其实很简单，因为微信官方提供了接口。箭头所指的地方就是你要复制粘贴的文本，我这里是从后台返回的数据，可以根据自己的需求进行更改。至于为什么要用if else，那是因为我们要判断用户是否存在微信号给与相应提示。当然，如果你不需要那就不用判断。代码如下：wxml文件：<view style="width:90rpx;height:42rpx...
2019-08-20 16:40:35
1717
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人