huangfuyk.的博客

JS中对“null”、“undefined”以及空字符串（“ ”）处理的演进历程及示例代码。

Vue3+Element Plus：使用el-dialog，对话框可拖动，且对话框弹出时仍然能够在背景页（对话框外部的页面部分）上进行滚动以及输入框输入信息

uniapp使用video标签播放视频

JS 判断当前浏览器是谷歌Google、火狐Firefox、Safari、Edge、Opera还是其他浏览器的方法。

setInterval 让它刚进页面时执行一次，然后根据设置的间隔时间执行；clearInterval清除setInterval。

JS中使用foreach循环，无法终止判断跳出循环；JS中使用try catch跳出foreach循环；浅谈JS深浅拷贝......

【解决】使用uniapp做App，首页需要显示实时时间及日期，一秒跳动一下。

注： 第三个参数passive默认值为false，但是chrome, Firefox等浏览器为了保证滚动时的性能，在Window,、Document、 Document.body上针对 touchstart 和 touchmove 事件将passive默认值改为了true。使用addEventListener监听滚动来阻止冒泡（e.preventDefault()），removeEventListener移除监听阻止冒泡（e.preventDefault()），但未生效。

需求：将JSON①数据格式输出为JSON②格式。JSON①： [ { sortName:'小明', sortCode: 'xm', children:[] }, { sortName:'小刚', sortCode:'xg', children:[ { sortName:'小小刚', sortCode:'xxg' }, { sortName:'小小小刚', sortCode:'xxxg' } ] }],JSO

【问题】在项目里使用toLocaleDateString()根据本地时间把 Date 对象的日期部分转换为字符串，并返回结果。在PC谷歌浏览器显示正常时间，如下：2022-08-23但是在安卓机上显示的是英文日期，如下：Tue Aug 23【方法】原写法为：new Date().toLocaleDateString().split('/').join('-')改为：let date = new Date();date.getFullYear() + "-" + (date.get

$set如下这样写是不行，还得重新赋值个变量(前提是已经拿到this.formData.actualQty的值，但是页面不显示)。错误示范：this.formData.actualQty= Number(this.formData.actualEa * this.formData.minPackLevel) + Number(this.formData.actualParts);this.$set(this.formData, 'actualQty', this.formData.actualQty

【问题】编辑数据时，先请求详情接口，此时select下拉框中option数据出现渲染两条一样数据下拉列表数据获取方法如下（示例代码，含注释）：loadMoreStore() { this.storeParts.page++; // 分页加载 this.storeLoading = true; // 开启loading效果 this.api.partnerList({ ...this.storeParts } ).subscribe((res: any) => { // 接口请求

以下配置放在【index.html】里。1. IOS禁止微信调整字体大小body{ // css-webkit-text-size-adjust: 100% !important;text-size-adjust: 100% !important;-moz-text-size-adjust: 100% !important;}2. Android禁止微信调整字体大小建立一个adjust-android-size.js文件，在index.html中引入这个js，以下是adjust-andro

写方法formatPhone(val) { if (val) { let matches = /^(\d{3})(\d{4})(\d{4})$/.exec(val) if (matches) { val = matches[1] + ' ' + matches[2] + ' ' + matches[3] } } return val}使用方法（示例代码如下）res.data.managerMobile = this.formatPhone(r.

【问题】h5项目中用到了获取某一时刻的时间戳，与当前服务器的时间作比较，测试发现在pc端以及安卓手机都正常，但是在iOS中未生效。【原因】iOS中需要把时间里面的‘-’改为‘/’。【方法】new Date(date.replace(/-/g,'/')).getTime();例：let date = new（“2021-09-15 22:22:22”）.getTime();改成以下形式即可：var date = new（“2021/09/15 22:22:22”）.getTime();

【需求】点击红框部分（图1），弹出数据列表框，并默认高亮选中的数据（图2）。图1如下：图2如下：【方法】弹出框先抽离成一个组件完整代码如下（主要功能已注释标出）：<template> <div class="shop-list-wrapper"> <van-popup class="my-popup" v-model="shopInfo.show" // 判断是否弹出 round positio

【问题】手机号或者身份证号中间数字用星号代替，不改变源数据。【方法】直接在插值表达式中操作数据：示例代码如下(身份证号脱敏)：<div>{{ cardId.replace(/^(.{8})(?:\d+)(.{4})$/, "$1******$2") }}</div>示例代码如下(手机号脱敏)：<div>{{ mobil.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2") }}</div>在

做项目时遇到这样一个需求：鼠标滑过图片显示遮罩层和小眼睛，点击图片可放大预览，一般情况下我们会直接使用UI组件来实现，但是今天我要说的是用CSS实现。HTML代码如下（示例）：<nz-image-group *ngFor="let img of gooddetail.certificate"> <div class="play-img-box"> <img class="play-img" nz-image width="80px" height="80px"

html示例代码：<img :src="imageUrl" alt="" @click="getImg()">js示例代码：import { ImagePreview } from "vant"; // 引入ImagePreview// 执行方法getImg(){ ImagePreview({ images: [this.imageUrl], // 需要预览的图片 URL 数组 showIndex:false, // 是否显示页码 close

有时候我们在做项目的过程中会遇到这样的需求：使用H5中的video标签播放一个视频，并在视频的中心位置放置一个暂停的图标，点击后视频播放，图标消失；再次点击后，视频暂停，图标出现。想要的效果，例下：我们可以配合使用video标签的pause、play、ended方法进行实现：①因为是一个vue项目，先定义一个变量，暂且叫它videoIsPlay，默认为false，即视频暂停时状态；data () { return { videoIsPlay: false, }},②.

开发中遇到这样一个需求，该项目用的是iview UI组件，需求是：表格列头有一个字段和一个单位，两者样式不同，理想效果如下：“建筑面积四个字为18px、单位（㎡）为16px”。如果按照iview—table表格默认的title属性赋值，那这个字段以及单位的样式就会一样，均为18px。如下图：这时候打开iview官网看到这样一个属性：renderHeader。官方是这样定义的：自定义列头显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 co

在做项目时遇到如下需求：当用户点击到项目“首页”或者登录成功进入到“首页”时，隐藏红框中内容。step1：因为是vue项目，首先声明一个变量indexShow，默认值falsestep2：然后在created钩子里，用includes判断当前浏览器地址栏内容是否包含“首页”的路由“index”step3：v-show判断是否需要显示“首页”按钮及图标（v-show="!indexShow"）示例代码如下：// step1data() { return { indexShow: fa

做项目过程中，发现点击弹窗后，弹窗后面的页面还可以滚动。复现如下：【解决】step1：在点击出现弹框的事件里加上这句：document.documentElement.style.overflow = "hidden";step2：在点击关闭弹框的事件里加上这句：document.documentElement.style.overflow = "scroll";【优化】若项目里使用弹窗较多，则可以通过在原型上定义它们使其在每个 Vue 的实例中可用（main.js）//弹出框后面页

       对于有的方法，逢用便创建，显得太麻烦不说，无形之中增加了我们的工作量，于是我们可以将常用的一些方法进行封装，以后我们就可以随用随拿啦。注意：       在封装一个方法之前，我们要先给方法起一个名字，最好是语义化名字，方便以后的理解，对优化...

做项目过程中遇到这样的问题：获取当前默认时间时，月份为一位数（如 2021-6），但是后端需要的是这样的（如 2021-06）。① 页面样式如下：② 传参如下：③ 此时就需要把获取道到的认时间进行操作，然后赋值给Ant Design of Vue的月度选择框代码如下：let defaultYear = `${new Date().getFullYear()}-${((new Date().getMonth() + 1).toString()).padStart(2, '0')}`④ 效果

在日常开发中，有时候会遇到字符串填充的问题,常见的如：时间不足两位数补“0”等。padStart() 用于补全头部padEnd() 用于补全尾部str.padStart(targetLength,string)：padStart() 方法用另一个字符串填充当前字符串(如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。两个参数：targetLength：当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。padSt.

以下方法，可以助我们的代码更加的优雅。目录带有多个条件的 if 语句返回当前的时间（年月日时分秒）简化 if true...else向下取整判断奇偶数 & 1获得滚动条的滚动距离单声明声明变量判断元素有没有子元素null、undefined 和空值检查给多个变量赋值if 判断值是否存在用于多个条件判断的 && 操作符for 循环比较后返回箭头函数简短的函数调用switch 简化隐式返回模板字面量将字符串转成数字解构赋值Object.entries()Object.values(.

写在前面：回流必将引起重绘，但是重绘不一定会引起回流回流和重绘回流重绘区别如何避免回流当元素的尺寸、结构等属性改变时，浏览器重新渲染部分或者全部文档的过程称为回流首次加载页面浏览器窗口大小改变元素尺寸或者位置改变元素内容改变字体大小改变添加或者删除dom元素伪类触发:hover重绘当页面中元素的样式改变并不影响它在文档中的位置，浏览器会将新样式赋予元素并重新绘制他，这个叫重绘colorbachground-colorvisibility…注意：回流要比重绘更耗费.

在平时开发当中，可能会遇到这样的需求：我在某一特定位置点击元素，当前点击位置出现弹出框，且弹出框可跟随鼠标滚动而移动。例如当我点击下图“眼睛”图标时，要在点击位置弹出一个框，显示点击的该条数据内容。并且当我滚动鼠标时，该弹出框会随着“眼睛”一起移动，相对位置不变。如下图所示：（1）首先给弹出框绑定一个动态top以及left值代码如下：<span:style="{ top: showPositionTop + 'px', left: showPositionLeft + 'px' }".

有时我们在开发过程中会遇到表格里有合并单元格的需求。今天以View UI （iview）组件库为例。1. 打开iview官网-table会发现有合并单元格示例：2. 但是在实际项目中，无法做到像上边代码那样通过 rowIndex和 columnIndex 在前端将合并的单元格写死，而是需要根据后台返回给前端的数据进行逻辑判断，决定合并哪些单元格。（1）比如现在有一个需求是表格的第一列“类别”中，如果有相同类别名字的进行单元格合并<template> <Table .

有时候我们会遇到这样的需求：后端返回一个换行符（“↵”），前端拿到后需求根据该符号进行换行展示方法一：textarea赋值当我们拿到后端返回的数据时，直接通过v-model绑定给textarea，就会有默认的换行，但是它不能随内容高度增加textarea高度实现自适应，如果用JS来实现的话，相对麻烦一点。方法二：使用v-html输出文本“↵”符号在html中会识别别为\r,\n等转义字符，所以我们可以使用\r\n去替换（.replace(/(\r\n|\n|\r)/gm, ' < .

1. 一般情况下，我们可以使用 a 标签进行图片的下载，但有时候只是页面的跳转，并没有进行下载，此时可以加一个download属性。 <a href="http://xxxx.xx.com:xx.jpg" target="_blank" download='xx.jpg'>2. 将图片链接转换成base64格式，再进行下载。HTML部分代码如下：// 参数为可选项<div @click="downloadImg('图片的地址', '图片的名称')">点击下载</d

本文借助该链接做演示：链接地址1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图：2.ECharts实现立体柱状图、3D柱状图及属性①立体柱状图大概有三部分组成（主图、侧边图、顶部图）如图：②主要属性一（控制顶部图的偏移量、大小、高度等）：如图：③主要属性二（控制主图的宽度、颜色、类型等）：如图：④主要属性三（控制侧边图的宽度、颜色、类型等）：如图：注意：以下操作是保证侧边的高度可以与顶部图相贴合如图：...

想必大家工作中也有用到过ECharts，但是大部分的需求应该都是相对简单的展示，比如说使用柱状图时，当数值为正与负值时显示在两侧，如下这样（一左一右或一上一下）：那么如果我想让他们无论正负均显示在同一侧呢？1、可参考如下简单示例：var data1 = [100, 200, 300, 400, 500, 600, 650]; // 真实值，用来控制柱状图的高低var data2 = [-100, 200, -300, 400, -500, 600, -650]; // 显示值，用来显示在柱.

我们日常开发中经常会遇到比较大的数值，需要对其进行格式化，既方便了阅读又使页面更加的优雅。比如说 999999999，直接阅读很不直观，格式化后 999,999,999或者999,999,999.00第一种方式：我们可以使用正则来处理function formatPrice(price) { return String(price).replace(/\B(?=(\d{3})+(?!\d))/g, ',');}第二种方式：也可以不使用正则，进行优雅的处理function for.

有的时候，我们需要获取到摄像头的实时监控视频，并且把画面嵌入到页面当中，此时，可以使用萤石平台实现我们的需求。1、进入到该平台，有一系列详细的步骤及参数介绍。例：url：监控地址，包含验证码、设备序列号、通道号、清晰度、播放类型autoplay：1-开启自动播放，未显示字段-关闭自动播放audio：1-开启音频，未显示字段-关闭音频accessToken：访问令牌，播放监控地址的必要参数live后缀：预览rec后缀：回放autoplay：1-开启自动播放，未.

① 在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。② 使用classList，我们还可以用它来判断某个节点是否被赋予了某个CSS类。③ Element.classList 是一个只读属性，返回一个元素的类属性的实时 DOMTokenList 集合。④ 相比将 element.className 作为以空格分隔的字符串来使用，classList 是一种更方便的访问元素的类列表的方法。新增CSS类使用add

1、vue 选中或点击输入框，边框高亮①：输入框动态绑定一个class，例login-box-focus，如下：:class="{ 'login-box-focus': loginBoxIsTrue }"②：输入框添加一个聚焦（focus）及失焦（blur）事件，如下：@focus="focusUserName()"@blur="blurUserName()"③：data给个默认参数及值，例如loginBoxIstrue，用来绑定到class，如下：data() { return {

VUE的生命周期钩子函数：就是指在一个组件从创建到销毁的过程自动执行的函数，包含组件的变化。可以分为：创建、挂载、更新、销毁四个模块。注：在组件的整个生命周期内，钩子函数都是可被自动调用的，且生命周期函数的执行顺序与书写的顺序无关目录*图示1.beforeCreate2*.created3.beforeMount4*.mounted5.beforeUpdate6*.updated7.bef...

本文主要讲解ES6数组方法find()与findIndex()，关于JS的更多数组方法，可参考以下：①JavaScript 内置对象之-Array②ES5新增数组方法（例：map()、indexOf()、filter()等）③ES6新增字符串扩张方法includes()、startsWith()、endsWith()1. find()该方法主要应用于查找第一个符合条件的数组元素，即...