- 博客(37)
- 收藏
- 关注
RSS订阅原创 vue中如何使用JS通过a标签下载文件
使用window.open()跳转如何处理类似 localhost:xxxx/baidu.com这种问题使用window.open(‘baidu.com’) 时我们会发现跳转后结果会出现localhost:xxxx/baidu.com，导致下载失败。在url前面+'//' 就可以了，即使用window.open('//' + 'baidu.com')使用js生成a标签 const link = document.createElement('a') link.style.display = .
2022-03-25 23:45:47
2128
原创 Centos6使用yum install安装目标应用报/var/cache/yum/x86_64/6/base/mirrorlist.txt的问题
这里写自定义目录标题一、报错如下二、解决二、结果如下一、报错如下二、解决修改fastestmirror.conf的配置参数sed -i "s|enabled=1|enabled=0|g" /etc/yum/pluginconf.d/fastestmirror.conf备份文件mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak使用阿里云的源curl -o /etc/yum.repos.d/Ce
2021-12-31 17:40:07
1094
原创 关于react-native-reanimated的Connection refused问题与处理办法
这里写自定义目录标题1、关于react-native-reanimated的Connection refused问题1、关于react-native-reanimated的Connection refused问题报错如下：报错原因： 是因为gradle配置文件启动了代理，导致无法访问。把gradle.properties文件里代理的配置语句注释掉即可。处理方法如下：...
2021-10-15 16:18:33
738
原创 关于React组件中的生命周期
目录关于React组件中的生命周期1、理解2、生命周期流程图（旧）2.1 组件生命周期2.2 父子组件生命周期执行顺序3、生命周期流程图（新）4、常用的重要钩子5、即将废弃的生命钩子关于React组件中的生命周期1、理解组件从创建到死亡它会经历一些特定的阶段，生命周期就像一个人的生命一样，它是人从出生到老去的一个过程，在这个过程，我们会在合适的年龄做合适的事情，比如上学，工作等等React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。我们在定义组件时，会在特定的生命周期回调
2021-08-16 09:53:20
554
原创 组件实例的三大核心属性
目录组件实例的三大核心属性1、state1.1 理解1.2 使用2、props2.1 理解2.2 作用2.3 使用2.3.1 基本使用2.3.2 对props中的属性值进行类型限制和必要性限制3、refs与事件处理3.1 理解3.2 何时使用3.3 使用3.3.1 字符串形式的ref3.3.2 回调形式的refs3.3.3 使用createRef创建ref容器 --- React最推荐的一种形式，React 16.3 版本引入3.4 总结4、事件处理组件实例的三大核心属性1、state1.1 理解
2021-08-11 11:02:00
702
原创 Class类基础知识梳理
目录Class类基础知识梳理1、什么是Class类2、怎么声明一个类3、类的实例化4、类中的方法5、类中的属性6、类中的私有属性与私有方法7、类的继承7.1 extends与super7.2 关于constructor7.3 重写从父类继承过来的方法8、类中使用赋值语句9、总结：Class类基础知识梳理1、什么是Class类在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。class 的本质是 function。它可以看作一个语法糖，让对象原型的写法更加清晰
2021-08-11 10:50:36
1236
原创 React的面向组件编程
目录React的面向组件编程1、函数式组件2、类式组件2.1 渲染的基本流程2.2 实现如下2、注意React的面向组件编程1、函数式组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1_函数式组件</title></head><body> <!-- 准备好一个“容器” -->
2021-08-11 10:30:25
427
原创 微信公众号开发
目录微信公众号开发一、什么是微信公众号二、公众号分类1、订阅号2、服务号3、小程序4、企业微信（原企业号）三、订阅号和服务号的主要区别1、 推送频率2、 提供功能3、适用人群四、微信公众号注册1、注册网址五、微信公众号的开发1、公众号的模式2、工作模型分类3、微信公众号开发交互流程4、验证服务器地址的有效性（1）为什么需要验证服务器地址的有效性（2）怎么实现微信服务器有效性的验证5、什么是Access token（重中之重）6、weixin-js-sdk（1）简介（2）作用（3）使用（4）signature
2021-08-05 11:19:53
4306
原创 前端的工程化、模块化和组件化
目录前端的工程化、模块化和组件化一、工程化1、为什么要以工程化的思想来看待前端项目？2、 那我们又该怎样去做到前端的工程化呢？二、模块化1、模块2、为什么要模块化？3、作用三、组件化1、组件2、为什么要组件化？3、作用前端的工程化、模块化和组件化个人理解，不一定对，欢迎指正一、工程化 工程化是一种思想而不是某种特定的技术，当然我们在实现项目工程化的过程中，我们也会去使用一些技术。前端工程化是使用软件工程的技术和方法来对前端的开发流程、技术、工具等进行规范化、标准化，其主要目的为了提高效率和降低成
2021-07-28 10:36:42
2190
原创 虚拟DOM与Diff算法
目录虚拟DOM与Diff算法一、什么是DOM与虚拟DOM？二、为什么要使用虚拟DOM1、关于回流与重绘2、为什么使用虚拟DOM三、Diff 算法1、为什么要使用Diff算法2、什么是 DOM-Diff 算法3、diff 算法的子节点更新策略4、更新策略的实际运用5、具体代码实现虚拟DOM与Diff算法一、什么是DOM与虚拟DOM？① DOM（文档对象模型）：是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改。真实DOM结构如下：&
2021-07-27 11:46:26
1413
2
原创 vue项目中的vue.config.js配置文件中的proxy代理post请求时报ECONNRESET错误
目录1、问题2、分析3、解决4、结果1、问题错误如下所示：vue.config.js中的代理配置如下：devServer: { proxy: { // change xxx-api/login => mock/login // detail: https://cli.vuejs.org/config/#devserver-proxy '/ecustom': { target: 'http://xxx.xx.x.xxx:xx', //AP
2021-07-07 13:53:07
3023
5
原创 /deep/的使用与导致样式失效问题处理
这里写自定义目录标题1、背景2、深度选择器3、关于/deep/导致浏览器样式失效问题1、背景【1】当 style 标签有 scoped属性时，它的 CSS 只作用于当前组件中的元素,使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式.。【2】样式失效:最近项目用户在使用过程中发现有些样式失效了，经过排查发现是跟最近谷歌升级
2021-03-12 14:04:58
3441
2
原创 CSS中实现单行、多行溢出文本省略号显示
单行文字超出显示省略号overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多行文字超出显示省略号overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;因使用了webKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；-webk.
2021-03-11 16:40:01
258
原创 vue中如何实现对dom元素大小改变的监听
目录1、背景2、处理方案1、背景在窗口大小没改变的时候，有些dom元素的大小发生了变化，导致页面某些元素没有重新渲染，出现不适应的情况。如下图所示：2、处理方案（1）方案一、vue项目中，我们可以使用element-resize-detector插件来实现，简单粗暴。实现方案如下：1、安装相关插件，npm install element-resize-detector2、在main.js中引入依赖，并挂在vue原型链上：import ElementResizeDetectorMaker f
2021-03-10 15:37:27
6324
原创 elementUI时间选择器(el-date-picker)输入格式的转换与自定义
目录1、背景2、方案设计3、说明1、背景现在很多的web端管理系统会选用vue+element-ui这套技术体系去实现前端界面开发。在使用时间控件的时候的时候，很多用户会希望输入202103100915能够显示成2021-03-10 09:15或2021/03/10 09:15等，总而言之就是输入方便，显示优美。效果如下图所示：2、方案设计刚刚听SA给我提这个需求的时候，我的第一反应就是去Element官网看看是否有什么属性支持自定义输入的，还真别说，找到了下面两个属性，于是就迫不及待的拿来试了试
2021-03-10 14:50:18
13707
17
原创 获取当前聚焦元素在父元素中的下标--原生JavaScript
这里写自定义目录标题1、场景2、处理跳转不到结束日期的问题1、场景在做关于el-date-picker时间控件的enter键切换时，type="datetimerange"时，在开始时间的input中按enter键，会直接切换到下个控件，不会聚焦到结束时间的input中，这是因为开始和结束时间的input是在同一个控件里。如下所示：2、处理跳转不到结束日期的问题实现思路：【1】时间控件中会有两个input元素，如下图：【2】获取当前聚焦的元素，看它是否是结束日期所在的input，若是，则跳转
2021-03-03 15:53:46
429
1
原创 window.onresize与window.addEventListener(‘resize‘,...)来做浏览器窗口的缩放监听
目录一、背景二、`window.onresize`为什么在重复使用过程中会被覆盖？三、`window.addEventListener`的运用一、背景在做浏览器窗口监听时我们该选用window.onresize还是window.addEventListener('resize',...)呢？之前遇到过这样一种情况，在一个vue项目的navBar部份使用了window.onresize做了监听控制，当窗口缩放到一定大小以下时菜单只显示图标隐藏文字，后面由于在做表格时也需要去做监听以实现自适应策略，在实现的
2021-02-23 11:04:19
24797
6
原创 el-form,当表格校验遇上v-if，怎样处理表格校验不生效的问题
1、场景在实际工作开发中，我们在处理el-form表单校验问题时常会遇到这样一种情况：根据不同的条件，展示不同的el-form-item，这个时候我们就需要考虑表单元素的显示与隐藏。在vue中，控制显示隐藏的有两个指令：v-if和v-show。【1】两者不同点：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；【2】原理：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基
2020-12-28 17:49:46
3860
5
原创 vue中如何实现对sessionStorage的监听
1、使用场景（1）在vue项目中，为了在浏览器刷新时，页面数据不丢失，我们会选择将数据浏览器缓存sessionStorage中。（2）为了传递参数之所以写这篇文章，也是在上次处理vue中使用keep- alive缓存机制，切换标签含有iframe标签的界面会被重新刷新的问题过程中，由于切换标签，含iframe的组件不会在触发路由钩子函数和生命周期函数，导致界面数据无法做更新操作，同时还要解决浏览器刷新时，界面数据不丢失的问题，所以才考虑到去监听sessionStorage的值，以此来更新数据。2、
2020-12-09 15:35:44
5186
原创 elementUI中如何在Tabs标签页的标题文字后面添加文字或图标
1、效果如下：实现代码如下：<el-tab-pane name="first"> <span slot="label"> <span class="span-box"> <span>预警</span> <el-tooltip class="item" effect="dark"
2020-12-08 11:18:45
8362
4
原创 vue中使用keep- alive缓存机制，切换标签含有iframe标签的界面会被重新刷新的问题处理
1、序言最近工作中，项目上遇到一个这样的需求，就是在打开报表的打印预览界面时，去切换标签，切回打印预览界面的时候，要求界面不刷新。vue框架中，我们去处理此类问题，通常马上就会想到去使用vue框架中自带的keep-alive组件，所以一开始我也是去使用了keep-alive,但是发现没有达到预期效果，后面通过研究和查阅资料发现，在vue项目中加入了含有iframe的页面，在路由切换的过程中，使用keep-alive是达不到数据缓存的效果的。2、使用keep-alive缓存不了iframe界面原因（1）
2020-12-01 11:51:16
10178
20
原创 element-ui中有关el-input聚焦时全选内容功能的实现
这里写自定义目录标题一、el-input聚焦时全选文本一、el-input聚焦时全选文本在开发过程中，为了实现更好的用户体验，我们在使用input输入框时有时候需要得到焦点的同时全选文本，下面是实现方案。<el-input @focus="getInputFocus($event)" clearable v-model="consignorName"></el-input> getInputFocus(event) { console.l
2020-11-18 19:13:15
8402
5
原创 Android webview与H5混合开发 -- H5双击返回键退出应用程序
关于 /** * 首页五个界面URL的末尾字符 */ private List<String> strList = new ArrayList<>(Arrays.asList("/chatlist", "/friends", "/shop", "/cart", "/my"));String js = "appgoback()";webView.evaluateJavascript(js, new ValueCallback<String>() {
2020-07-24 10:10:46
1018
转载 Android webview 与js(vue)实现交互操作（1）
js 与原生交互分为两种情况：js 调用原生方法，原生调用 js 方法。本文将对这两种情况分别讲解，H5 端用 vue 实现。一、前期准备（Vue项目准备）本文的 H5 端用Vue 实现，所以在正式开始前先把 Vue 项目环境准备好。项目写好后，执行 npm run serve 命令启动项目，启动成功后会在命令行看到两个地址：http://localhost:8080/ ，和 http://10.0.0.188:8080/。10.0.0.188 是我本机的 ip 地址，每个人的不一样。在电脑
2020-07-23 20:38:10
2579
原创 ElementUI -- 表单嵌套表格，v-for生成的表单项实现表单验证。
1、界面代码： <!-- sku组合可视化显示 --><el-form :model="listModel" ref="skuListForm"> <el-table v-if="skuVisible" :data="listModel.sku_list" border stripe> <el-table-column type="index"></el-table-column> <el-tabl
2020-07-21 11:37:40
1897
原创 vue中retry的使用--解决axios请求超时的问题
1、使用场景（1）后端接口请求超时。（2）后端接口报错。（3）弱网状态下，重新请求。2、实现步骤axios中的使用以下代码都是在api.js中进行操作：（1）先进行axios的配置：//设置全局的请求次数，请求的间隙axios.defaults.retry = 3; // 请求次数axios.defaults.retryDelay = 2000; //请求间隙（2）设置拦截器axios.interceptors.response.use((res) => { // 拦截器
2020-07-17 15:41:33
2363
原创 数组去重总结+遇过的一些坑
很多方法说明会从菜鸟教程借鉴与粘贴，请读者不要介意。1、for循环+splice方式splice() 方法用于添加或删除数组中的元素。注意：这种方法会改变原始数组。splice方法的说明：（1）基础语法：array.splice(index,howmany,item1,…,itemX)（2）参数说明：[1] index：必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。[2] howmany：可选。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未
2020-07-13 13:37:50
579
原创 抓取淘宝商品详情时，用到的一些正则表达式
一、去除数据里的标签delHtmlTag(str) { str = str.replace(/<[^>]+>/g, ''); //去掉所有的html标记 return str.replace(/\s+/g,''); //去掉所有空格}二、详情数据处理/<\s*img\s+[^>]*?size\s*=\s*(.*?)[^>]*?\/?\s*>/i.test(el) //判断是否是<img></img>标签包裹的数据
2020-05-30 18:15:47
766
原创 el-input绑定键盘按键--按键修饰符
常用按键修饰符别名修饰符键值修饰符对应按键.delete.8/.46回格/删除.tab.9制表.enter.13回车.esc.27退出.space.32空格.left.37左.up.38上.right.39右.down.40下鼠标按键修饰符别名修饰符可用版本对应按键.left2.2.0以上左键.right2.2.0以上右键.middle2.2.0以上
2020-05-30 11:28:55
1160
原创 elementUI的el-table单元格中显示多张图片，并能点击放大查看
如何在el-table的单元格中显示多张图片具体效果图如下图所示：主要的实现思路就是在template中添加一个span标签，然后做一个v-for的循环，去加载数组中的每一张图片，具体的实现代码如下<el-table-column label="社圈动态图片" align="center" width="265px"> <template slot-scope="scope"> <span v-for="(item,index) in scope
2020-05-25 14:23:40
8917
12
原创 elementUI如何实现table表格中图片的鼠标移入/点击显示
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
2020-05-07 10:01:06
7378
12
原创 vue+echarts,进行tabs切换时，图表宽度设成百分比不生效的问题
1、问题描述最近在做电商后台管理项目，在首页用echarts做可视化显示的时候，遇到了进行tabs切换时图表不会自适应的问题。具体问题截图如下。如上图所示，当进行tabs切换的时候，折线图图表的宽不会自适应。下面我们看代码和产生该问题的原因。 <div style="width:100%;display:flex;justify-content: space-between;"&g...
2020-05-06 17:22:34
1678
原创 ElementUI中switch开关的使用--关于如何将文字显示在按钮上的实现
这里写自定义目录标题有关于element中switch的用法实现的效果图具体实现步骤：有关于element中switch的用法el-switch的详细用法实现的效果图具体实现步骤：（1）添加html代码的显示，此处写了class="switch"类名,是为了避免造成全局样式的污染。 <el-table-column label="上下架" align="center">...
2020-04-28 16:04:12
7073
15
原创 vue+elementUI,实现表单验证中的图片上传验证(el-form与el-upload)
目录简介el-form表单的实现及非空验证el-upload,只允许上传一张图片的实现步骤el-form中，实现el-upload的验证简介目前在做一个商城后台管理系统，在实现表单的过程中需要上传商品图片、二维码、头像等，每次只能上传一张，并且需要进行相关的非空验证，以下是具体的实现思路，希望能帮到大家。el-form表单的实现及非空验证本文所实现的表单验证是普通的输入验证，若想自定义表单...
2020-04-21 17:35:34
14851
22
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人