Wnig's Blog

防止手机中页面放大和缩小<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />在iOS 10以前，iOS和Android都可以通过一行meta标签来禁止页面缩放但iOS 10开始，meta设置在Safari内无效了。 <script> window.onload=functio

阻止默认事件function stopDeFault(e){　　if(e&&e.preventDefault){//非IE　　　　　e.preventDefault();　　}else{//IE　　　　window.event.returnValue=false;　　}} 阻止事件冒泡function stopBubble(e){　　if(e&&e.stopPropagation){//非IE　　　　e.stopPropagat

1.理解js的链式作用域的前提1)首先要知道js的变量作用域，js的变量作用域就两种：全局和局部2)js中当前作用域能访问其上层作用域的变量和函数2.js链式作用域的定义：JS权威指南的描述：JavaScript中的函数运行在他们被定义的作用域里，而不是他们被执行的作用域里。这句话很难理解，但是换做简单的描述，JS的链式作用域就是：JS中当遇到对变量名或者函数名的使用时，会首先在当前作用域查找变量或者函数,如果没有找到，就会到其上层作用域中寻找，并以此类推。下面这个例子在很多博文中引用：v

深拷贝与浅拷贝的区别深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。假设B复制了A，修改A的时候，看B是否发生变化：如果B跟着也变了，说明是浅拷贝，修改堆内存中的同一个值。如果B没有改变，说明是深拷贝，修改堆内存中的不同的值。浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址。深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存，使用深拷贝的情况下，释放内存的时候不会因为出现浅拷贝时释放同一个内存的错误。

一次性插入1000个div，如何优化插入的性能使用Fragmentvar fragment = document.createDocumentFragment();fragment.appendChild(elem);向1000个并排的div元素中，插入一个平级的div元素，如何优化插入的性能先display:none 然后插入 再display:block赋予key，然后使用virtual-dom，先render，然后diff，最后patch脱离文档流，用GPU去渲染，开启硬件加速...

合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页。重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取。重要内容不要用js输出：爬虫不会执行js获取内容。少用iframe：搜索引擎不会抓取iframe中的内容。非装饰性图片必须加al

Vue的性能优化1、编码阶段尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher如果需要使用v-for给每项元素绑定事件时使用事件代理SPA 页面采用keep-alive缓存组件在更多的情况下，使用v-if替代v-showkey保证唯一使用路由懒加载、异步组件防抖、节流第三方模块按需导入长列表滚动到可视区域动态加载图片懒加载SEO优化预渲染服务端渲染SSR2、打包优化压缩代码Tree Shaking/Scope Hoist

Vue赋值后原数据随赋值后的数据的变化而变化this.goodList = JSON.parse(JSON.stringify(this.list));

先引入：npm install crypto-js创建secureUtil.js文件import CryptoJS from 'crypto-js'export default { encrypt(word, keyStr) { const keyHex = CryptoJS.enc.Utf8.parse(keyStr) // 秘钥 const srcs = CryptoJS.enc.Utf8.parse(word) const encrypted = CryptoJ

JS文件导出功能：先把responseType设置为blob然后请求接口后，拿到数据：const that = thisconst fileReader = new FileReader()fileReader.onload = function () { try { const jsonData = JSON.parse(this.result) if (jsonData.code) { // 说明是普通对象数据，后台转换失败 that.$messag

mavonEditor基于Vue的markdown编辑器插件适用于博客系统。安装npm install mavon-editor -save-dev引入import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'// useVue.use(mavonEditor)<div id...

解决方法：先把node_modules删除，然后再安装sudo npm install node-sass --unsafe-perm

解决方法一：cdn.bootcss.com替换成cdnjs.cloudflare.com/ajax/libs解决方法二：不用cdn.bootcss.com改用jsdelivr.com 这个是全球资源都比较稳定、比较快的cdn，但是找的不太方便解决方法三：官网推荐什么，就用什么╮(╯▽╰)╭...

多行文本省略号样式失效，并且报了Autoprefixer applies control comment to whole block, not to next rules警告。原来的代码：/*! autoprefixer: off */ -webkit-box-orient: vertical;/* autoprefixer: on */修改之后的代码：/*! autoprefix...

vue-qr安装二维码生成组件vue-qrnpm install vue-qr --save引入组件import VueQr from 'vue-qr' new Vue({ components: {VueQr}})<vue-qr :bgSrc='src' :logoSrc="src2" text="Hello world!" :size="200">&lt...

Vue.Draggable安装组件yarn add vuedraggablenpm i -S vuedraggable<draggable element="ul" v-model="tableList"> <li v-for="(item, index) in tableList" :key="index">{{item....

在IOS微信的页面，用户回退，数据没有刷新，手动刷新才有数据以下是解决办法：var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/if (browserRule.test(navigator.userAgent)) { window.onpageshow = function (event) { if (event.persis...

wangEditor富文本编辑器文档下载npm install wangeditor使用<div id="div1"></div>var E = window.wangEditorvar editor = new E('#div1')editor.customConfig.uploadImgShowBase64 = true // 使用 base64 ...

px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。vw：viewpoint width，视窗宽度，1vw等于视窗宽...

这两天在写一个促销活动的功能，需要展示选择的时间范围内的所有星期：// 去重function unique(arr) { arr = arr.sort() return Array.from(new Set(arr))}// 获取当前日期星期几function getWeekDate(time) { var now = new Date(time) var day = ...

开始默认全选，蓝色为选中的时间段，代码大致如下（点击时调用该方法）：let timeList = []for (let i = 0; i < 24; i++) { timeList[i] = { name: i, isClick: true }}function countTimeArea(obj) { const arr = [] let num...

先创建一个src/lib/storage.js文件，在里面封装函数const cookie = { // 读取cookie get: key => { var cookieName = encodeURIComponent(key) + '=' var cookieStart = document.cookie.indexOf(cookieName) var...

谷歌浏览器保存账号密码后，input会自动填充，现在想要把它禁用掉：<input type="password" autocomplete="off"/>如果没效果，可以试一下：<input type="password" autocomplete="new-password"/>...

项目中有部分页面需要嵌入到安卓、iOS端，大致代码如下：先创建一个 src/utils/bridge.js 文件用于封装 WebViewJavascriptBridgefunction setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(wind...

问题：let datetime = '2019-08-12 11:11:11'let date = new Date(datetime)console.log('==date==', date)// 在谷歌浏览器上==date== Mon Aug 12 2019 11:11:11 GMT+0800 (中国标准时间)// 在苹果浏览器上==date== Invalid Date解决方法...

安装npm i mockjs -D创建src/mock/index.jsimport Mock from 'mockjs'const data = Mock.mock({ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素 'foods|10-50': [ { name: '@ctitle(2,10)', img: "@image...

项目经常会用到图片上传的功能不管是PC端还是移动端，今天整理一下代码：之前做移动端上传图片的时候，会发现，有些图片没有旋转过来，然后，我们只要引入这个插件，就能解决这个问题。先安装插件exif-js：npm install exif-js --save在需要的页面引入import Exif from 'exif-js'上传图uploadImgs (e) { let file ...

#btn { width: 100px; padding: 5px 20px; color: #fff; border-radius: 5px; text-align: center; background: #f77a7a;}<div id="btn">点我啊</div><p id="content">点了0次</p&gt...

在只有一个输入框el-input的时候，会刷新页面解决办法：在 el-form 上加上 @submit.native.prevent 就可以阻止表单回车提交<el-form @submit.native.prevent></el-form>...

授权登录，前端把当前的url传给后台，后台跳转到微信授权页，授权成功后回跳到原来页面，把token和openid放在cookie里。在main.js里写router拦截，若没有token，存储当前url，命名为forwardUrl，然后跳转到oAuth页面：router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ ...

.control { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 20px;}.btn { position: relative; display: flex; align-items: center; justify-content: cent...

// 输出对象中值大于2的key的数组// var data = {a: 1, b: 2, c: 3, d: 4};// Object.keys(data).filter(function(x) { return 1 ;})// 期待输出：[“c”,”d”]var data = { a: 1, b: 2, c: 3, d: 4 }let arr = Object.keys(data)....

// array.push push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度function arrPush(arr, target) { arr.push(target) return arr}var arry = [1, 4, 2, 0]console.log(arrPush(arry, 8))// array.concat concat() 方法...

这几天在改截图插件的截图框问题，需要获取到元素transform的scale值，找了一下方法，现在记录下来：#divTransform { margin: 30px; width: 200px; height: 100px; background-color: yellow; /* Rotate div */ transform: scale(0.283) rotate(9deg);...

项目有需求，金额按千分位逗号隔开，如果小数点后面有多余的零要去除。由于后台传的值是以“分”为单位的，所以先转换成“元”// 去除小数点后面多余的零 - 金额按千位逗号分割function formatMoney(num, type) { num = num ? parseFloat((num / 100).toFixed(2)) : 0 if (/[^0-9\.]/.test(nu...

原本在网上找的截图插件已经可以满足截图需求了，但是后面，需求又增加了。要有图片压缩的功能，还有能选原图或者截图。所以把代码改了一下（后续可能还会修改）：引入CSS、JS:&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.1.3/cropper.min.css"&gt;&lt;scr...

之前项目要做一个视频上传的功能，然后就要判断文件格式。上传的视频支持mp4, ogg, flv, avi, wmv, rmvb。只知道’video/mp4’, ‘video/ogg’，天真的以为后面几个也是这么写的。然后就出问题了，就一直提示上传格式错误，尴尬。所以现在整理一下常用的MIME Type：Video TypeExtensionMIME TypeMPEG-4...

之前项目都是用npm，后面换了用yarn，现在记录一下常用的一些命令。作用npmyarn安装npm install(i)yarn卸载npm uninstall(un)yarn remove全局安装npm install xxx –-global(-g)yarn global add xxx安装包npm install xxx –save(-S...

不知道是不是Echarts用的比较少，从它的Demo把代码拷过来，再去改那些样式，感觉十分的费劲啊啊啊啊。在这里把之前项目用到的记录下来，免得又忘了。// Vue项目// main.js中配置import echarts from 'echarts' // 引入echartsVue.prototype.$echarts = echarts // 引入组件&amp;amp;amp;amp;lt;div id=&amp;amp;amp;quot;myCh...

mode 有效值：mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。注1：image组件默认宽度300px、高度225px注2：image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别。模式值说明缩放scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素缩放...