weixin_46544600的博客

原创 回流（reflow）和重绘（repaint）

页面首页渲染浏览器窗口大小变化内容变化导致大小尺寸变化添加或删除节点激活css伪类（例如：hover）改变元素位置，例如：margin、padding、border等改变元素外观属性，例如：color、background-color、visibility、outline等。

原创 html css title 属性最长字节 1024

【代码】html css title 属性最长字节 1024。

原创 title属性样式不可调整 ，element-toolTip组件在有些情况下无法使用（比如swiper 无限滚动时）

【代码】title属性样式不可调整 ，element-toolTip组件在有些情况下无法使用（比如swiper 无限滚动时）

原创 利用事件委托和冒泡 判断点击了哪个元素或该元素的子级元素

/ console.log('点击事件冒泡的 DOM 列表：', composedPath);// 注意防止子级类名和父级类名相同 child if(element . classList && element . classList . contains('child')) {console . log('找到指定类名为 child 的 DOM 元素:' , element);break;} } } } };

原创 前端 html导出img或导出pdf

安装需要的依赖 html2canvas和jsPDF并导入获取dom使用htmlcanvas将dom转换为canvas获取canvas的宽度、高度(稍微大一点)实例化一个pdf 并将pdf的宽高设置为canvas的宽高将canvas转为图片将内容图片放在pdf中 调用pdf.save 设置pdf 名称并下载。

原创 vue 高德地图 vue-amap 加载时闪白问题处理

【代码】vue 高德地图 vue-amap 加载时闪白问题处理。

原创 el-date-picker限制最大选择范围

【代码】el-date-picker限制最大选择范围。

原创 使用 str.replace(reg,function(){})格式化时间

【代码】使用 str.replace(reg,function(){})格式化时间。

原创 package.json 中使用链接 引入外网包

原创 vue3 响应式数据重新赋值后，reactive 丢失响应式，而 ref 不会（其中发现一个大坑）

2、刷新页面后 点击 第一个按钮 修改Ref的值 页面数据发生变化，控制台中可以看到使用ref做响应式的数据 refObj 还是一个RefImpl(ref对象)，响应式还在。1、点击 第二个按钮 修改Reactive的值 页面没有任何变化，控制台中可以看到使用reactive做响应式的数据 reactiveObj 丢失响应式。

原创 tree 数据结构 已知当前值 递归找到当前值所在的对象

【代码】tree 数据结构 已知当前值 递归找到当前值所在的对象。

原创 js new 运算符

mdn。

原创 nvm控制node版本或切换node版本后 npm找不到或之前安装的全局包丢失问题

使用nvm控制node版本或切换node 版本后 全局包丢失问题

原创 vue 浏览器 input type=“password“自动填充密码处理

autocomplete=“new-password” 也有问题。autocomplete=“off” 不生效。最后将type 值动态化处理好了。

原创 table tbody内容滚动

【代码】table tbody内容滚动。

原创 前端附件下载

【代码】前端附件下载。

原创 vue 渲染异常

【代码】vue 渲染异常。

原创 vue 将data 重置为初始数据

【代码】vue 将data 重置为初始数据。

原创 tree 数据结构 已知当前值 把他的所有祖先集都拿到一个数组

【代码】tree 数据结构 已知当前值 把他的所有祖先集都拿到一个数组。

原创 利用 reduce 计算数组最大值

【代码】利用 reduce 计算数组最大值。

原创 textarea 让多行输入框 高度随内容变化

正常来说 textarea 的高度是定死的，输入内容超出高度时只会产生内部滚动条，项目需求 要随内容增高而增高，示例代码<textarea class="input-area" autofocus maxlength="5000" placeholder="请输入内容"></textarea>const textarea = document.querySelector(".input-area"); textarea.focus() // 有页面缓存是 autofoc

原创 vite-vue3-ts 搭建项目时 项目中使用 @ 指代 src

vite-vue3-ts 搭建项目时 项目中使用 @ 指代 src。

原创 html css3 旋转

css3 旋转

原创 前端环境配置 20220719

前端环境配置20220719。

原创 数组循环方法哪个速度更快

测试数组循环的方法 哪个更快

原创 vue 图片显示失败 显示默认图片

写法一 <img class="headerImg" :src="item.headImg || './images/common/rankingpic.jpg'" onerror="this.src='./images/common/rankingpic.jpg';" alt="">写法二 （在脚手架中 需要用require 拿到默认图片资源）<img class="headerImg" :src="''" :onerror="defaultImg" alt=""> //

原创 让多行输入框 高度随内容变化 textarea

<textarea class="input-area" maxlength="5000" placeholder="请输入内容"></textarea>const textarea = document.querySelector(".input-area"); textarea.addEventListener("input", function (e) { this.style.height = "inherit";

原创 手写一个promise.all

有时间把限制并发加上<script> let p1 = new Promise(function (resolve, reject) { // console.log('执行 p1'); setTimeout(function () { // console.log('执行完成 p1'); resolve('p1-成功'); }, ); }); let p2 = new Promise(functio

原创 列表轮播（移动滚动条）vue js

// 利用滚动条滚动的滚动列表 yy.sexport function animationUseScroll(element, options) { class Scroll { /** * @param element 运行的DOM * @param options 参数 * { height:90, // 每次滚动的距离 px * delay: 4000, // 每次滚动间隔事件 ms * } */ constr

原创 手写动态圆柱体 vue scss

基于vue scss 写出来的动态圆柱体所需图片 图1 底部图片 图2 实心顶部图片 效果图<div class="column-wrap"> <div class="column"> <div class="column-opacity" /> <!-- <div class="column-solid" :style="{height:(detail.peo

原创 手写tab左右切换

效果 ：点击左右两个按钮达到切换效果（利用transform 进行平移）<div class="app"> <div class="tab-wrap"> <div class="tab"> <div ref="itemWrap" class="item-wrap" :style="{transform: `translateX(${distance}px)`}"> <div v-for="(i

原创 vue-amap画城市边界、自定义标记点、以及消息窗体

效果图代码如下main.js 中引入// 引入vueamap 高德离线地图import VueAMap from 'vue-amap'Vue.use(VueAMap)VueAMap.initAMapApiLoader({ key: '5c0afa7353977f66b3880f3c91ca01e4', // 插件集合 plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', '

原创 text-align: justify；text-align-last: justify；实现两端对齐

实现两端对齐 问题：但是单行文本和多文本最后一行无法达到效果，然而单行文本左右对齐，这种效果在实际项目中出现的频率很高。解决思路： 利用伪元素给文本再添加一行 （图片、代码如下）<div class="test">啊大撒旦大撒旦飞洒啊大撒旦飞洒</div><div class="test">啊大撒旦飞</div><div class="t

原创 async await 理解

async await是一种把异步编程变成同步的方法 （看懂下面代码的执行顺序 ）function func(num) { return new Promise(resolve => { console.log('func-执行') setTimeout(()=>{ resolve(num*2) },3000) }) } function func111(num) { ret

原创 css backdrop-filter属性 用来做图片的部分模糊效果

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。mdn介绍示例：代码：<div class="img-box"> <div class="bottom"> backdrop-filter: blur(5px); </div> </div>.img-box { positi

原创 常用 vscode 配置

{ "workbench.iconTheme": "vscode-icons", // tab 大小为2个空格 "editor.tabSize": 2, // 100 列后换行 "editor.wordWrapColumn": 160, // 开启 vscode 文件路径导航 "breadcrumbs.enabled": true, // prettier 设置语句末尾不加分号 "prettier.semi": false, // prettier 设置强制单引号

原创 背景图片大小（background-size）cover、100%和contain的区别

三者都是来定义背景图显示尺寸大小的，三者之间的区别：cover：是按照等比缩放铺满整个区域。优点：图片不会变形。 缺点：如果显示如果显示比例和显示区域的比例相差很大某些部分会不显示，比如长度比宽度大很多，则宽度左侧会有一部分不显示。100%：长宽100%显示，可能会拉升图片导致图片变形。contain：也是等比缩放，按照某一边来覆盖显示区域的，会有白边...

原创 关于position的属性

概述：position 属性规定应用于元素的定位方法的类型。有五个不同的位置值：static : html元素默认情况下的定位方式 – 静态 静态定位的元素不受top,bottom,left和right属性的影响。relative ：元素相对于其正常位置进行定位。–相对定位 设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。fixed ：元素是相对于视口定位的，-- 固定定位 这意味着即使滚动

原创 相对路径和绝对路径回顾

相对路径的写法：1、./ 是当前目录<img src="images/bg2222.png" width="300" alt=""><img src="./images/bg2222.png" width="300" alt="">2、 ‘…/’ 表示父级目录 (写的时两个点再这上面显示三个点)<img src="../images/bg0000.png" width="300" alt="">3、/ 是根目录（看图看不明白的话就把下面的描述多读几遍

原创 解决ios微信公众号h5页面新增底部前进后退导航栏产生的布局问题

现象：第一次出现微信底部默认导航的时候布局会错乱（在项目中底部弹窗显示不完整），在出现错乱的页面刷新又能恢复正常。问题产生原因：新增导航栏使网页脱离文档流的屏幕高度变小，有些布局没有重新计算（更加具体的原因就没有管了，项目已经是一个成熟的项目，用的框架也不是新框架，会存在样式穿透的问题，很多东西还是少动为妙）。问题分析和解决：底部导航栏是因为出现history记录才出现的，再加上我所作的项目刷新一下页面就能恢复正常。优先考虑在出现history后重新加载页面，监听屏幕高度变化（安卓机不会新增导航），再利