Wangdr的博客

原创 vue动态设置宽度

<div class="progress" :style="'width:' + credit_ratio * 100 + '%'"></div>

原创 flex布局左右两边固定，中间自适应

<style> #flex{ display: flex; background-color: skyblue; height: 100px; line-height: 100px; } #left,.right{ ...

原创 html5中video标签设置视频的宽度和高度

一般情况下：<video width="320" height="240" controls="controls">但是有的时候发现设置了视频的高度却并没有发生变化，我们可以设置其父元素的宽高，让video填充满父元素。只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可。object-fit语法ob...

原创 解决vue打包之后部分css不生效问题

用vue的脚手架做前端开发的时候，本地开发所有的样式都能生效，但是打包之后就会有部分样式失效（我遇到的问题是，当内容超过3行的时候，多出部分省略的样式无法添加。），且在浏览器中无法找到该css属性。解决办法如下：首先注释掉webpack.prod.config.js中，下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.bui...

原创 vue--图片预览器（vant）+ 安卓返回键处理

vant的图片预览运用详解：&lt;div class="img_box" v-for='(item2,index) of item.images' :key='index'&gt; &lt;img :src="item2" alt="" @click="getImg(item.images,index)"&gt;&lt;/div&gt;//图片预览，通过传参的方式把

原创 微信小程序不用scroll-view做锚点跳转以及滑动选中

微信小程序不用scroll-view做锚点跳转以及滑动选中

原创 小程序组件间传值

在某些场景下，可以通过this.selectComponent获取子组件实例，直接调用子组件的方法或修改子组件的data。父组件通过在子组件标签上设置属性的方式向子组件传值。子组件触发事件，将数据通过事件参数传递给父组件。子组件通过properties定义接收的属性。进行跨页面或跨组件的数据共享。利用小程序的全局对象。时在URL中携带参数。

原创 小程序生命周期

小程序的生命周期主要包括三个层面：应用级别的生命周期（APP）、页面级别的生命周期（page）和组件级别的生命周期（Component）。

原创 animation给同一个元素加多个动画

animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。本文将详细介绍animate.css的使用。元素从右向左渐变滑入，然后再上下漂浮。animation动画可连写。

原创 vue上传文件到阿里云oss方法 结合element-ui 中的 el-upload

vue上传文件到阿里云

原创 element的el-dialog初始化visible值为true时，弹窗闪烁问题

设置这个参数为true。

原创 JS优化技巧

实现链式反应的本质为：每次该对象（Object-A）调用其方法（Method-1）时，返回值仍为本对象（Object-A），从而后面使用链式的方式再调用另外一个方法（Method-2）时，得到的this仍为原对象（Object-A），然后返回值同样（Object-A），从而仍可通过链式的方式再调用该对象上的别的方法（Method-3），以此类推。Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。

原创 github网站打不开，hosts文件配置

github。

原创 getBoundingClientRect().top与offsetTop的区别

返回当前元素相对于 offsetParent（position为非static且距离自己最近的祖先元素） 节点顶部边界的偏移像素值。当监听的是window的滚动条时，元素的getBoundingClientRect().top会原来越小，而offsetTop一直不变。楼层导航，懒加载，返回顶部按钮等等，只要涉及scroll事件，都无法避免的要去计算某个元素距离视窗顶部的距离。且这个距离不随滚动条滚动变化，也就是说这个距离开始是多少就是多少，是个恒定值（包括滚动条卷起的部分）1、监听window的滚动条。

原创 子组件获取父组件的ref

【代码】子组件获取父组件的ref。

原创 some、every、filter、map的区别

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。map() 方法按照原始数组元素顺序依次处理元素。filter() 不会对空数组进行检测。some() 不会对空数组进行检测。filter() 不会改变原始数组。map() 不会对空数组进行检测。some() 不会改变原始数组。map() 不会改变原始数组。

原创 网站哀悼全部灰色显示

【代码】网站哀悼全部灰色显示。

原创 JS常用正则

例如，“er\b”可以匹配“never”中的“er”，但不能匹配“verb”中的“er”“er\B”能匹配“verb”中的“er”，但不能匹配“never”中的“er”。等价于[ \f\n\r\t\v]。等价于[^ \f\n\r\t\v]。:表示[0-9a-zA-Z_]，表示数字、大小写字母和下划线。:表示[^0-9a-zA-Z_]，非单词字符。:表示[^0-9]，表示除数字外的任意字符。：等价于{0，} 表示出现任意次，可以不出现。：等价于{0，1} 表示出现或不出现。:表示[0-9]，表示一位数字。

原创 vue+js+css实现动态换肤，切换活动主题

在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用。用 – 这样写法加上样式名称 例如：–background 引用：var(–background)是一个伪类，表示文档根元素，所有主流浏览器均支持 ，除了 IE8 及更早的版本。5、最后main.js中全局引入theme.js 就好啦~1、新建theme1.css文件。2、theme2.css文件。3.theme.scss文件。（简单举个列子哈~）如有问题欢迎指正~~

原创 vue使用v-for循环ABC...英文字母

注意：该方法是 String 的静态方法，字符串中的每个字符都由单独的 Unicode 数字编码指定。使用语法： String.fromCharCode()。fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。：将 Unicode 编码转为一个字符。

原创 Vue项目使用自定义域名访问本地

disableHostCheck: true，是解决浏览器打开www.local.com出现Invalid Host header页面的情况。1、配置本地hosts文件：添加127.0.0.1 www.local.com（自定义域名）

原创 Exif.js 读取图像的元数据

Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。EXIF 数据主要来自拍摄的照片，多用于移动端开发，PC 端也会用到，此插件兼容主流浏览器，IE10 以下不支持。

原创 vue全局自定义指令

通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。新建src/directives/LimitNumber.js文件。批量注册指令，新建 directives/index.js 文件。二、全局批量注册自定义指令。在main.js全局引入。.........

原创 Vuex数据持久化存储

Vue项目中使用Vuex作为状态管理，相当于全局的变量存储，可以在所有的vue组件中共享数据、动态修改其状态。但是当我们去刷新浏览器的时候，store中的状态都会被清空、重新初始化为最初的状态，在某些情况下，我们可能需要将这些状态保存下来，所以这篇来介绍如何让vuex或pinia的状态持久化存储。要实现持久化存储，简单来说就是将其状态保存到localStorage或者sessionStorage中。修改状态的时候，往session中存储一下，state从 session中取，达到持久化存储的效果。.....

原创 vue 动态引入第三方js和css

页面中经常会用到第三方库的情况，直接全局引入html文件会造成资源浪费实现在需要的页面动态加载

转载 浏览器从输入URL到页面展示发生了什么

传送门

原创 promise 和 async/await 的比较

/** *promise 优点 *1、支持链式调用，可以解决回调地狱问题 * 2、便于异常处理 * * 中断 promise 链 * 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数 * 办法: 在回调函数中返回一个 pendding 状态的 promise 对象 ...

原创 vue组件递归与传值（权限复选框）

实战用例：管理后台–权限管理模块，多级菜单，菜单层级不固定。使用组件递归之后不能使用父子传值，不是普通的父子关系。新建一个bus.js文件。二、组件递归后的传值。

原创 解决ios手机H5页面键盘收起后页面上移问题

input失焦后给body设置滚动距离$('input').blur(()=>{ var scrollbox = $('body'); var sheight = scrollbox.scrollTop(); scrollbox.scrollTop(sheight - 10); setTimeout(function(){ scrollbox.scrollTop(sheight); },100) })

原创 Vue 适配iOS、Android顶部状态栏（沉浸式，混合APP开发）

1、将导航+状态栏拆出来做个公共组件（此处只贴出状态栏的高度） <div class="status-bar" v-else :style="'height(statusHeight/75)+'rem'"></div>2、获取高度、赋值移动端通过ua信息传递（安卓手机的全面屏有些特殊，所以单独做了些处理，具体看代码）//判断屏幕是否为全面屏export function statusHeight(){ function judgeBigScreen() {

转载 JavaScript的原型链系统---图解

原创 教你快速理解函数防抖与函数节流

函数的节流和防抖在有些情况我们也许会碰到如下场景,监听一个input框的输入事件,但是大多数情况下,我们不是为了监听用户输了什么,而是想知道用户输到什么时候结束了,所以如果实时监听键盘事件,在每次用户敲击键盘的时候去触发一个函数,这样就多了非常多无用的操作,比如window.resize事件//在你的控制台输入以下代码window.onresize = ()=> { console.info('onresize');};可以看到 如果我们简单的变化浏览器的大小,控制台会一直打印,这

原创 js获取query 参数

var url="http://www.runoob.com/index.php?id=1&image=awesome.jpg";function getQueryVariable(variable){ var str=url.split('?'); var query=query[1]; var vars=str.split('&'); console.log(query,str,vars); for (var i=0;i<vars

原创 map和forEach的区别

无论arr是不是空数组，forEach返回的都是undefined。1.map方法支持return返回值，通过return可返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。所以当有人问你，扩展运算符是深拷贝还是浅拷贝的时候，应该分情况回答。1)、当数组的值为基本类型的时候，map遍历数组，当对数组中的值做处理的时候，的确不会改变原数组。给obj，不在原数组中直接操作item的值，而是操作obj中值，这样原数组就不会改变了。为了不让map改变对象数组这样的原数组，我们可以这样写。

原创 vue优化之加快首屏加载速度

一、依赖优化之 CDN 加速减少app.js和vender.js的体积，加快加载速度二、gzip暴力压缩1.npm安装npm i compression-webpack-plugin@1.1.12 --save-dev2.配置，config里的index.js文件 build: { // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all sta

原创 iOS上H5一些兼容性问题

1.input textarea 上边框显示较粗，解决方案：input, textarea { -webkit-appearance: none;}

原创 vant-ui框架 tab切换list不加载问题（切换后onload不触发）

遇到的问题：项目里，加载的list，页面上有个切换的tab,实现切换不同的类型，加载不同的list的功能。vant-ui的list就有个bug，当切换tab的时候，它的onload没方法自动触发。然而在当前标签页，如果列表已经加载完毕再去切换，onload就可以实现自动触发解决办法：tab(i,en){ this.num=i; this.type=en; this.evaluate_list=[];//清空list列表 this.noData=false;//展示列表

原创 mpvue学习笔记

一、mpvue 和 Vue 的生命周期对比在原生小程序的页面（Page）中包含了很多页面的生命周期方法，如onLoad、onUnload、onShow、onHide、onPullDownRefresh等等，mpvue中推荐使用Vue组件生命周期方法，而像onPullDownRefresh、onReachBottom这类特殊功能的生命周期则需直接使用原生的。二、在使用mpvue的时候那些需要特别...

转载 mpvue开发小程序

一、创建小程序1.vue init mpvue/mpvue-quickstart firstapp出现以下选择和配置信息? Project name firstapp? wxmp appid touristappid? Project description A Mpvue project? Author kevinzhang <kevin.zhang@moredist.co...

原创 vue中使用wangeditor富文本编辑器

1.先下载 编辑器cnpm install wangeditor --save2.用法：2.1、html用来放编辑器<div id="editor"> <p v-model="info">请输入内容</p>//占位符 </div>2.2、js部分var E = require('wangeditor') ;mount...