前端
文章平均质量分 57
什么什么什么?
这个作者很懒,什么都没留下…
展开
-
初学vue3笔记
vue3原创 2022-10-27 20:42:47 · 204 阅读 · 1 评论 -
XSwitch
下载链接:https://crx.extfans.com/extension-v2/idkjhjggpffolpidfkikidcokdkdaogg/xswitch@latest.zip?e=1653472808&token=QwV7OgC8jKau8iKjsseBUDIt5FN6na7ZeOi4eaMU:K-CgrWwM2PfcErru5cbzQPrZTw8=安装流程使用指南https://www.yuque.com/jiushen/blog/xswitch-readme...原创 2022-05-27 11:29:36 · 405 阅读 · 0 评论 -
浏览器中图片的请求情况
图片预加载在页面中图片的引入方式有以下几种<img src="xxx" />,用src直接引入;backgroud:url('xxx'),在css中当背景;const img = new Image('xxx'); img.src = xxx,在js中动态生成图片标签浏览器渲染页面顺序............原创 2022-05-25 16:44:05 · 800 阅读 · 0 评论 -
垃圾回收机制(GC)
为什么需要垃圾回收机制程序工作过程中会产生很多数据,但是有些数据可能用过一次后就不用了,如果不对这些数据进行清除,就会占用很多内存空间。如果不释放内存,重则会导致进程崩溃。垃圾回收机制就是对不需要用到的数据进行删除,释放内存。什么是垃圾回收机制在 JavaScript 内存管理中有一个概念叫做可达性,就是那些以某种方式可访问或者说可用的值,它们被保证存储在内存中,反之不可访问则需回收。垃圾回收机制就是定期找出那些不再用到的内存,然后释放其内存。算法策略最为常见的就是标记清除算法该算法分为两步:原创 2022-05-19 19:34:38 · 268 阅读 · 0 评论 -
elementUI cascader级联选择器隐藏某一层级的多选框
问题:el-cascader可以实现多选,但是在超过3层级的懒加载情况下,在没有加载最后一层内容是,点击选择框无法回显打input上并且change事件无法获取到值(下面的示例采用的是一个3层多选级联选择器)原因:由于这些层级是相关联的,所以,选中只会获取的子叶也就是最后一层的数据,这时候,最后一层也就是第三层没有数据,所以change获取到的才会如图所示,length为0.解决:一、我们可以通过在props中配置checkStrickly:true取消父子级的关联但是由于取消了父子级的原创 2022-03-17 19:56:14 · 5366 阅读 · 0 评论 -
移动端iframe跳转第三方应用出现无法滑动问题
问题为了实现跨平台兼容,我们的项目用的是capacitor+vue框架,实际上就是在webview上用iframe实现页面的跳转功能,ios在跳转到第三方页面时,出现了无法滑动的情况。由于iframe在ios上宽度撑开屏幕问题,设置了iframe的scrolling为no,因此才会出现无法滑动问题。解决办法由于不能直接改iframe,于是我们选择迂回救国,通过调用内置浏览器访问第三方页面。capacitor内置浏览器open()通过调用调用capacitor的内置浏览器打开第三方页面,但是该浏原创 2022-03-11 15:36:29 · 4766 阅读 · 0 评论 -
代理环境切换组件
问题在公司里我们联调的过程中,需要将本地请求代理到测试环境中;Vue项目中,采用devServer.proxy对代理进行配置;devServer: {// xxx为代理内容 proxy:{ '/*':{ ws:false, target:'docker33-www.baidu.net', changeOrigin:true } } port: 8088, },该例子是将所有请求都代理到test33-www.baidu.net;所以我们修改代理环原创 2022-03-11 14:33:46 · 844 阅读 · 0 评论 -
vue实现侧边定位栏
实现一个侧边栏,需要实现两个功能通过点击侧边栏,定位到响应的内容滑动滑动栏,侧边栏同步高亮对应的item效果图如下:1. 通过点击侧边栏,定位到响应的内容如果是用html的话我们可以用 锚点 的办法进行定位;在vue中,我们可以通过获取组件的高度,将滑动栏定位到对应的位置在进入主题之前我们需要先了解3个关于获取高度的属性scrollTop 滑动栏中的滑块离视区最顶部的距离document.documentElement.scrollTop || document.body.s.原创 2022-03-10 19:59:13 · 1870 阅读 · 0 评论 -
关于打印出现空白的问题
问题在打印的需求中,我们一般是将数据展示在页面中,然后通过调用window.print(),将页面打印出来但是这里有一个顺序问题,我们需要先加载完页面才能进行打印,不然就会出现白屏问题。解决方法this.nextTick()this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。但是 mounted() 不会承诺所有的子组件也都一起被挂载。所以在mounted中执行this.nextTick()会有子组件还没加载完成的情况。async mounted() {原创 2022-03-10 17:17:38 · 2040 阅读 · 0 评论 -
文件下载功能
对于文件的下载,目前知道后端有两种返回形式:① 返回blob文本流②返回文件的url链接参考文章1参考文章2一、通过a标签直接下载直接调用a标签进行下载(a标签只支持非图片和非PDF下载,这两种格式a标签只提供查看功能)<a href="https://.../158ac1e6917445a4aa384a2a7209445a.xlsx" download="test">下载文件</a>在a标签中的href中加上文件的地址;downloa属性可设置下载文件的名称原创 2021-12-28 10:29:12 · 652 阅读 · 0 评论 -
vue项目监听文件变化自动重启webpack服务器
问题:因为每次更换开发环境时,都需要手动重启一次服务器。以下的方法可以实现自动化重启。一、安装nodemon插件nodemon插件,这里有一篇详细的入门介绍。这里只有我的配置进行记录。首先我们需要在开发环境中安装nodemon依赖 npm install --save-dev nodemon在项目的package.json文件中的scripts对象下添加开启nodemon的操作// package.json"scripts": { "serve": "vue-cli-servi原创 2021-09-16 15:01:19 · 2086 阅读 · 3 评论 -
关于js中的!和!!
js中!不止可以用于取反,也可以将非布尔值类型转换为布尔值。对于null、undefined、和‘’(空),取反后为true,其他为false!!顾名思义就是将非布尔值类型转换为布尔值然后再进行取反。则null、undefined和 ‘’,会变成false,其他会变成true。tip:如果本来就是布尔值类型,则就按照布尔值逻辑进行取反这个两个方法主要用于判断获取的值是否有效比如,我们之前要判断这个值是不是有内容,有才进行相关操作,则// 如果val是null、undefined、‘’,.原创 2021-09-14 16:03:13 · 136 阅读 · 0 评论 -
2021.7.19前端小记
Object.seal()是es5的特性,用于封装对象,object.seal()会改变对象的两个特性,使对象即不能扩展新的属性、删除已有属性,也不能修改属性的已有的特性tip:如果你在使用Object.seal方法后,给对象添加新的属性可能不会报错,但是不会起任何作用,如果你通过Object.defineProperty方法重新配置该对象的特性,则会报无法重新定义不可配置属性的特性的错误var obj = { prop: function () {}, foo: 'bar'}var原创 2021-07-20 16:30:02 · 71 阅读 · 0 评论 -
前端小记~
一、call、apple、bind的区别用于重定向this。call和apple会直接执行函数,而bind返回的是一个函数,需要加()调用,才会执行。//例子:var obj={> name: 'she'> myfun: function(fm,t){> console.log(this.name+' '+fm+' '+t)> }> }> var bd(){> name: 'he"> }> obj.myfun.cal原创 2021-07-19 10:41:56 · 967 阅读 · 1 评论 -
移动端canvas画布加载图片模糊问题
参考链接:高清图片在不同移动端设备上的显示效果由于pc端和移动端的分辨率不同,在pc端1pxwindow.devicePixelRati= 单个css像素(逻辑像素)/ 物理像素物理像素(设备像素):是显示器真正的像素点,我们可以将屏幕看成由一个一个的小灯组成,而1物理像素===1个小灯逻辑像素(设备独立像素):是操作系统定义的一种像素单位,,在不缩放的前提下,CSS 中的 1px 就代表着 1 个物理像素...原创 2021-07-15 16:32:30 · 465 阅读 · 0 评论 -
关于window.print()
window.print()在js中调用该方法能够打印当前页面的body里面的内容。强制换页css属性中page-break-befrore、page-break-after、page-break-inside可以对换页进行设置page-break-before 可以设置某元素前面的换页值说明auto默认值。如果必要则在元素前插入分页符。always在元素前插入分页符。avoid避免在元素前插入分页符。left在元素之前足够的分页符,一直到原创 2021-07-04 02:39:58 · 448 阅读 · 0 评论 -
cvte前端一面面经
一、vue中双向数据绑定的实现参考链接:Vue的数据双向绑定原理及实现、Object.defineProperty的缺陷vue实例创建后,将遍历所有DOM对象,并为每个数据属性添加了get和set缺点:不能监听对象的增加和删除; 不能监听数组的修改二、CORS跨域如果后端设置header允许访问域为*,还能携带cookie请求吗参考:前后端跨域请求处理以及携带cookie CORS实现服务端配置 Access-Control-Allow-Origin: ‘*’ 或者前端的origin原创 2021-03-24 13:00:10 · 311 阅读 · 0 评论 -
深传互动前端面经
一、什么是H5参考:https://baike.baidu.com/item/html5/4234903?fr=aladdinH5是HTML的第五个版本,是构建web内容的一直语言描述方式。HTML5 的语法特征更加明显,并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容;视频、音频、图像、动画以及与设备的交互都进行了规范。...原创 2021-03-24 01:55:28 · 154 阅读 · 0 评论 -
mockjs打开新世界——再也不用担心没有后端接口怎么办了
什么是mockjs用于拦截Ajax请求,模拟数据返回。当后端接口还没开发完成时,可以手动模拟后端接口。使用mockjs模拟后端接口,可随机生成所需数据,可模拟对数据的增删改查。在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成 之后,只需要改变url地址即可。mock/index.js 内容const fs = require('fs');const path = require('path');const Mock = require('mockjs');co原创 2020-08-06 14:40:07 · 229 阅读 · 0 评论