- 博客(96)
- 收藏
- 关注
原创 iframe 通信的三种方式(重点介绍postMessage)
- 父级html --> < button onclick = " postMessageBtn() " > postMessageBtn </ button > < iframe id = " myIframe " src = " http://172.30.10.18:8080/#/login " width = " 375 " height = " 700 " > </ iframe > < script > /**
2024-08-14 09:30:44 1760
原创 vue项目路由跳转后上一页面未完成的接口取消请求
在路由跳转后,如果上一个页面未完成的接口请求,需要取消掉。比如: 页面A请求接口A,页面B请求接口B。从页面A跳转到页面B,如果接口A未完成,需要取消掉(尤其是点击过快的情况下,还会出现本地缓存的参数被新页面参数替换的情况)。
2024-06-03 17:37:28 702
原创 回流(reflow)和重绘(repaint)
页面首页渲染浏览器窗口大小变化内容变化导致大小尺寸变化添加或删除节点激活css伪类(例如:hover)改变元素位置,例如:margin、padding、border等改变元素外观属性,例如:color、background-color、visibility、outline等。
2024-03-13 14:36:05 476
原创 title属性样式不可调整 ,element-toolTip组件在有些情况下无法使用(比如swiper 无限滚动时)
【代码】title属性样式不可调整 ,element-toolTip组件在有些情况下无法使用(比如swiper 无限滚动时)
2023-08-08 18:18:23 350
原创 利用事件委托和冒泡 判断点击了哪个元素或该元素的子级元素
/ console.log('点击事件冒泡的 DOM 列表:', composedPath);// 注意防止子级类名和父级类名相同 child if(element . classList && element . classList . contains('child')) {console . log('找到指定类名为 child 的 DOM 元素:' , element);break;} } } } };
2023-07-26 14:39:28 558
原创 前端 html导出img或导出pdf
安装需要的依赖 html2canvas和jsPDF并导入获取dom使用htmlcanvas将dom转换为canvas获取canvas的宽度、高度(稍微大一点)实例化一个pdf 并将pdf的宽高设置为canvas的宽高将canvas转为图片将内容图片放在pdf中 调用pdf.save 设置pdf 名称并下载。
2023-07-19 11:37:29 584
原创 使用 str.replace(reg,function(){})格式化时间
【代码】使用 str.replace(reg,function(){})格式化时间。
2023-04-23 14:34:18 114
原创 vue3 响应式数据重新赋值后,reactive 丢失响应式,而 ref 不会(其中发现一个大坑)
2、刷新页面后 点击 第一个按钮 修改Ref的值 页面数据发生变化,控制台中可以看到使用ref做响应式的数据 refObj 还是一个RefImpl(ref对象),响应式还在。1、点击 第二个按钮 修改Reactive的值 页面没有任何变化,控制台中可以看到使用reactive做响应式的数据 reactiveObj 丢失响应式。
2023-04-11 11:12:57 675 1
原创 nvm控制node版本或切换node版本后 npm找不到或之前安装的全局包丢失问题
使用nvm控制node版本或切换node 版本后 全局包丢失问题
2023-02-01 15:06:04 6685 3
原创 vue 浏览器 input type=“password“自动填充密码处理
autocomplete=“new-password” 也有问题。autocomplete=“off” 不生效。最后将type 值动态化处理好了。
2023-01-12 10:12:47 1047
原创 textarea 让多行输入框 高度随内容变化
正常来说 textarea 的高度是定死的,输入内容超出高度时只会产生内部滚动条,项目需求 要随内容增高而增高,示例代码<textarea class="input-area" autofocus maxlength="5000" placeholder="请输入内容"></textarea>const textarea = document.querySelector(".input-area"); textarea.focus() // 有页面缓存是 autofoc
2022-08-25 10:03:13 1945
原创 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=""> //
2022-05-12 18:15:39 1073
原创 让多行输入框 高度随内容变化 textarea
<textarea class="input-area" maxlength="5000" placeholder="请输入内容"></textarea>const textarea = document.querySelector(".input-area"); textarea.addEventListener("input", function (e) { this.style.height = "inherit";
2022-05-09 15:26:26 384
原创 手写一个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
2022-04-27 22:54:57 131
原创 列表轮播(移动滚动条)vue js
// 利用滚动条滚动的滚动列表 yy.sexport function animationUseScroll(element, options) { class Scroll { /** * @param element 运行的DOM * @param options 参数 * { height:90, // 每次滚动的距离 px * delay: 4000, // 每次滚动间隔事件 ms * } */ constr
2022-03-08 17:31:51 1001
原创 手写动态圆柱体 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
2022-03-08 09:57:22 376
原创 手写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
2022-03-02 10:54:40 467
原创 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', '
2022-02-23 18:22:19 3053 8
原创 text-align: justify;text-align-last: justify;实现两端对齐
实现两端对齐 问题:但是单行文本和多文本最后一行无法达到效果,然而单行文本左右对齐,这种效果在实际项目中出现的频率很高。解决思路: 利用伪元素给文本再添加一行 (图片、代码如下)<div class="test">啊大撒旦大撒旦飞洒啊大撒旦飞洒</div><div class="test">啊大撒旦飞</div><div class="t
2022-02-22 21:07:09 1245
原创 async await 理解
async await是一种把异步编程变成同步的方法 (看懂下面代码的执行顺序 )function func(num) { return new Promise(resolve => { console.log('func-执行') setTimeout(()=>{ resolve(num*2) },3000) }) } function func111(num) { ret
2022-01-12 16:08:16 155
原创 css backdrop-filter属性 用来做图片的部分模糊效果
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。mdn介绍示例:代码:<div class="img-box"> <div class="bottom"> backdrop-filter: blur(5px); </div> </div>.img-box { positi
2022-01-11 13:32:21 659
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人