yuanwen52的博客

原创 通过js滑动到指定内容区

【代码】通过js滑动到指定内容区。

原创 css之层叠上下文

在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及层叠Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系，而一旦元素发生堆叠，这时我们就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。我们这里要讨论的层叠上下文(stacking context)，就是HTML中的一个三维概念，即元素的z轴，层级越高越接近阅读者。

原创 vue3动态组件警告提示

出现此警告只需将组件用markRaw函数包裹即可。

原创 微任务和宏任务

2、常见的宏任务：setTimeout、setInterval、setImmediate(Node环境) Ajax Dom事件 MutationObserver script代码块。宏任务和微任务都是异步任务，且异步任务是放在任务队列里的，当主线程任务执行完毕后，从任务队列中取任务、执行任务，不断重复执行这个动作，就称为事件循环机制（Event Loop）。1、常见的微任务：Promise的then/catch/finally回调，process.nextTick()微任务比宏任务优先执行。

原创 页面增加水印提示

页面增加水印提示。

原创 关于js中forEach遍历简单数据类型、对象数据类型的区别

今天在改bug时，看之前的代码用forEach遍历的对象数组，且操作对象的状态。按照以前的惯性思维，forEach是不能改变数组元素的。就把这个逻辑删除了，而又造成了新的bug。

原创 vue中多个路由对应同一个组件，页面切换不刷新问题

切换页面时，不会触发组件的生命周期钩子函数重新执行。要保证key的唯一性。1、监听$route。

原创 React中setState相关问题

setState有两种调用方式，分别是对象模式setState({})、函数模式setState(fn)非react控制的异步回调函数中定时器回调/原生事件监听回调/promise回调。对象模式setState({})合并更新一次状态，只调用一次render更新界面。函数模式setState(fn)更新多次状态，但只调用一次render更新界面。在react控制的回调函数中生命周期钩子/react事件监听回调。react相关回调中异步。其它异步回调中同步。1、合并调用，如何处理？...

原创 js的柯里化（curry）

什么是柯里化？将使用多个参数的函数转换成一系列使用一个参数的函数柯里化的用途？柯里化实际将简单的问题复杂化了，单复杂化的同时，使用函数时拥有了更多的自由度如常用手机号码校验：如果校验多个电话号码，则相同的正则我们需要写多次。如果用柯里化来封装，先简单实现一个curry函数我们用curry函数再封装手机校验函数，达到参数复用的目的最后调用时直接传手机号码即可：...

原创 vscode打包运行vue项目内存溢出的报错与解决办法

项目打包运行的时候，保存后内存溢出，执行如下命令：

原创 右键使用vsCode打开文件夹

1、新建vs.reg文件2、编辑文件Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Directory\shell\VSCode]@="Open with Code""Icon"="C:\\Users\\w9087050\\AppData\Local\\Programs\\Microsoft VS Code\\Code.exe" [HKEY_CLASSES_ROOT\Directory\shell\VSCode\comma

原创 npm快速切换下包镜像源

为了更方便的切换下包的镜像源，我们可以使用nrm这个小工具首先安装npm i nrm -g安装成功之后，即可使用：nrm ls查看可用镜像源使用nrm use taobao 即可切换taobao镜像源

原创 vue中mixins的属性/方法/生命周期函数的优先级

1、对于data定义属性，组件中定义属性覆盖mixins中同名字段2、对于created、mounted等生命周期函数，mixins中中生命周期函数先执行（执行顺序按mixins中顺序），再执行组件中生命周期函数3、对于methods中的同名方法，组件内的方法覆盖mixins中的方法注：对于相同的computed属性，组件的computed属性覆盖mixins内的computed属性，而对于相同的watch监听，mixins中的watch监听先执行。...

原创 js和css是如何影响dom树构建的

浏览器会下载HTML解析页面生成dom数，遇到css标签就开始解析css，这个过程不会阻塞。但是如果遇到了js脚本，此时假如CSSOM还没构建完，需要等待CSSOM构建完，再去执行js脚本，然后再执行dom解析，此时会阻塞。就是说：js会阻塞dom的生成，而样式文件又会阻塞js的执行。用如下代码示例来说明：script脚本阻塞了dom的生成，此时CSSOM还没有构建完，需要等待CSSOM构建完，再执行js脚本。此时dom还没解析完，导致如下代码执行出错（没有查找到该元素）documen..

原创 关于vue中computed和watch使用场景的区别

computed适用的场景是：多对一，即这个缓存属性受多个属性影响，如购物车的总价受价格、数量的影响；watch的使用场景是：一对多，即这个监听属性可以影响多个属性。watch里还可以有异步请求、可以配置组件初次加载时是否执行。...

原创 javascript中Map和Object的区别

1、Object的键只能是字符串或者Symbol，而Map的键可以是任意值。2、Map中的键值是有序的（FIFO），而Object中的键是无序的。3、Map中的键值个数可以从size属性中获取，而Object中的键值只能手动获取。Map本质上为二维数组构造...

原创 关于var、let、const的区别

var:var定义的变量可以重复定义，有变量提升的效果，var定义的变量挂载在window上。let:let定义的变量不能重复定义，挂载在Script作用域上。const:const定义变量时，如果是基础数据类型，不能修改；如果定义引用数据类型时，地址不能修改，值可以修改。定义的变量挂载在Script作用域上。......

原创 用setTimeout实现setInterval

// 用setTimeOut实现setInterval let timeWorker = {}; function myInterval(fn,time) { let key = Symbol(); let execute = ()=>{ timeWorker[key]=setTimeout(()=>{ fn(); .

原创 相邻兄弟选择器和通用兄弟选择器的区别

两者的相同点都是：紧跟之后的元素相邻兄弟选择器：是选中元素后的第一个兄弟元素（必须为相邻）通用兄弟选择器：是选中元素后的所有兄弟元素（不须为相邻）

原创 vue组件递归

项目中出现多级菜单时，需要多层for循环时，但是当菜单增加层级时，需要在页面结构中增加一层for循环。这时我们可以使用组件递归的思想来实现:如下demo:1、定义菜单组件<template> <ul> <li v-for="(item, index) in list" :key="index"> <p>{{ item.name }}</p> <treeMenu :list="item.ch

原创 flex布局中align-items和align-content有什么区

align-items为设置侧轴单行对齐方式，align-content为设置侧轴多行对齐方式

原创 js上传图片限制图片尺寸方法

async beforeUploadPicture(file) { const width = 347 const height = 115 const isSize = await new Promise(function(resolve, reject) { const _URL = window.URL || window.webkitURL const img = new Image() img.onload =..

原创 vue中eventbus被多次触发

问题描述：只要页面没有强制刷新，存在组件切换，bus.$on方法会多次绑定，造成事件多次触发。触发改方法：this.$EventBus.$emit('save');绑定的事件：this.$EventBus.$on('save', () => { this.save(); });解决方法：在每次绑定事件前，先解绑该事件：this.$EventBus.$off('save');this.$EventBus.$on('save', () => {

原创 用正则表达式实现简单数据模板填充

let template = `<h1>今天买了一个{{thing}},好{{mood}}<h1>`;console.log(template.replace(/\{\{(\w+)\}\}/g,function(a,b,c){ return data[b];}))输出结果为：<h1>今天买了一个华为手机,好开心<h1>

原创 git常用命令整理

1、查看本地分支git branch2、查看远端分支git branch -r3、远端建立分支git push -u origin branchName4、远端删除分支git push origin --delete branchName5、以当前分支为基准建立新分支git checkout -b branchName6、拉取远端分支git checkout -b branchName origin/branchName7、删除本地分支git branch

原创 localStorage/sessionStrrage如何存储对象

localStorage/sessionStorage默认只能存储字符串，在实际开发中，需要用来存储对象。这时我们可以在存储时使用JSON.stringify()将对象转为字符串，而在取缓存时，配合JSON.parse()转回对象即可。

原创 企业微信端开启debug模式

1、按快捷键 ctrl + alt + shift + D，进入调试模式2、页面上点右键，Show Dev Tools,即可调试了

原创 解决vue中v-html元素中标签样式失效问题

加上scoped会导致 v-html 下绑定的标签样式不生效解决方案：定义两个style标签，一个加上scoped属性，一个不加上scoped属性<style lang="less" scoped>.viewDetail { .tip { margin-bottom: 0.47rem; background: #e5f1fe; height: 0.8rem; font-size: 0.28rem; font-weight: 400;

原创 使用iview遇到的问题

1、Upload上传组件清空文件列表增加ref属性调用clearFiles方法：this.$refs.upload.clearFiles();2、DropdownItem 添加@click事件无效，在事件后增加native修饰符：native修饰符作用：把一个vue组件转化成普通的html标签，并且该修饰符对普通的html标签是没有任何作用的。<DropdownItem v-for="item in template" :key="item.id" @click.n

原创 重写vue-router的push|replace方法解决NavigationDuplicated报错

在路由定义的地方，增加如下代码，如下只有push方法的重写，同理，replace方法也一样。const originPush = VueRouter.prototype.push;VueRouter.prototype.push = function(location,resolve,reject){ if(resolve && reject){ originPush.call(this,location,resolve,reject); } else { o

原创 vue路由组件的props传参

1、boolean传参（只能接受params参数）{ path: "/search/:keyword?", component: Search, name: "search", props: true, },2、对象传参{ path: "/search/:keyword?", component: Search, name: "search", props: { a: "haha", b:

原创 vue路由的params传参和query传参

1、params传参：需要在路由配置文件中，在路由后面加上占位符示例：path: "/search/:keyword",在声明式导航时在路由后面这样传参：this.$router.push(`/search/${this.keyword}`)params传参取值：$route.params.keyword2、query传参在路由后面用？key val拼接即可，示例：this.$router.push(`/search/${this.keyword}?key=${th

原创 wangeditor实现图片手动上传

this.editor.cmd.do('insertHtml', '<img src="' + this.src + '" style="max-width:100%;"/>');this.src 为图片上传到服务器后返回的路径。

原创 vue-router中$router和$route的区别

$router：一般获取路由信息【路径、query、params等】$route：一般进行编程式导航【push|replace】

原创 iview Upload动态传参

原创 VSCode中禁用TypeScript警告

打开命令面板：CTRL + SHIFT + P 打开文件settings.json： 添加一下两行代码： "typescript.validate.enable": false,"javascript.validate.enable": false,

原创 vue项目的一些小tip

在package.json文件中修改运行脚本为："serve": "vue-cli-service serve --open"

原创 PC端网页屏幕自适应方案（rem）

1、安装flexible和postcss-px2remnpm i lib-flexiblenpm i postcss-px2rem -D2、在main.js 引入lib-flexibleimport 'lib-flexible'3、删除public/index.html 中的meta标记4、修改lib-flexible/flexible.js(node_modules)5、配置postcss-px2remvue.config.js里的css预处理中的postcs..

原创 vue项目--代码检测常见报错及修复办法

在项目的根目录下，新建一个.prettierrc文件，写入下面配置：{　　"singleQuote":true, //使用单引号　　"trailingComma": "all", //结尾总是使用,　　"arrowParens":"always", //箭头函数加（）//avoid　　"semi":false //结尾总是使用;}...

原创 typeof和instanceof的区别

一、typeof typeof操作符返回一个字符串：使用方法如下：typeof 1; // 'number'typeof '1'; // 'string'typeof true; // 'boolean'typeof undefined; // 'undefined'typeof Symbol(); // 'Symbol'typeof null; // 'object'typeof []; // 'object'typeof {}; // 'object'typeof ...