- 博客(57)
- 收藏
- 关注
原创 vue2项目中可选链报错
这是需要安装babel依赖@babel/plugin-proposal-optional-chaining,并添加到babel.config.js中。注意上面信息,错误来源是 node_modules/@open-wc模块下的文件。这个时候还需要在vue.config.js中添加如下配置,添加所有报错的模块。在babel.config.js中添加如下配置。这个时候还可能会报如下错误。这样就可以正常运行了。
2024-07-19 10:53:52
285
原创 vue2项目 运行 import.meta 报错
void 0 : _import$meta.url)这一句代码中,是因为使用了 import。低版本的node环境不支持。在vue2老项目中,运行时报错,错误定位在 defined((_import。在vue.config.js中添加配置。
2024-07-19 10:53:22
476
原创 解决无catch回调promise失败会导致程序报错问题
注意使用场景,因对失败情况做统一处理,避免开发过程中 因失败情况导致一些错误难以排查。对与以上使用遇到的问题,对promise进行了再次封装。使用 myPromise 重新封装请求。此时请求失败控制台会有以下报错。平时我们封装的api请求。你必须对请求失败做处理。
2024-03-29 16:39:34
338
原创 typescript Constructor Set requires ‘new‘
使用typescript的class继承时报错 “构造函数集需要’new’”只需要在tsconfig.json文件中添加以下配置即可。
2023-06-30 18:23:37
576
原创 flexble.js自适应布局
flexble.js自适应布局一,flexible.js 的使用方式:(一),引用方式(二),flexible.js原理(三),把视觉稿中的px转换成rem一,flexible.js 的使用方式:github地址:https://github.com/amfe/lib-flexible官方文档地址:https://github.com/amfe/article/issues/17本文中有部分内容引至上面这个文档。(一),引用方式1,引用cdn地址<script src="http://g
2022-03-04 20:27:41
685
原创 vue-cli代理服务器
vue-cli代理服务器配置详解在vue.config.js中写如下配置module.exports = { devServer: { proxy: { // /api为代理服务器前缀,例如项目中的请求地址为http://location:8080/api+参数 '/api': { target: '<url>', // 需要请求服务器地址 pathRewrite: {'^/api',''}, // 将请求地址中api替换为空
2022-02-16 21:27:57
411
原创 防抖节流函数
防抖节流函数备份防抖节流函数,防抖函数非立即执行: delay时间内,点击的最后一次执行函数,需要等待delay时间后才执行fn立即执行:立即执行,需要delay时间后才能执行下一次fn/** * @param {Function} fn 需要执行的方法,因this指向问题,建议不使用箭头函数, * @param {Number} delay 间隔时间,默认值100 * @param {Boolean} promptly 是否立即执行,默认false * **/const debounc
2021-11-09 17:52:27
80
原创 js实现sticky粘性定位
var dom = document.querySelector('.count_money'), domTop = dom.offsetTop; window.addEventListener('scroll',scrollFunc) function scrollFunc() { // 定位底部 if(window.pageYOffset < domTop - window.innerHeight){ ...
2021-10-20 11:53:36
949
原创 HTML onclick 绑定事件阻止冒泡
HTML onclick 绑定事件阻止冒泡<li class="add" onclick="click(this)"></li> function click(elem) { var even = window.event || arguments.callee.caller.arguments[0]; even.preventDefault(); even.stopPropagation(); }...
2021-08-20 17:43:48
1441
原创 uniapp踩坑避雷
uniapp踩坑避雷在uniapp中一个循环内不能fliter(过滤器)和 自定义 v-model 一起使用,小程序端,自定义组件内获取不到 v-model 传递的值。使用属性传值的方式错误写法应使用这种写法
2021-08-03 18:38:04
208
原创 优惠券样式
优惠券样式使用css实现下图的优惠券样式拆分样式这个优惠券样式由凹圆和凸圆组成,凹圆可以使用mask来实现,凸圆可以用背景来实现;由于使用了mask后块超出mask的部分会被减掉,所以将凹圆和凸圆分为两个块样式(利用伪类before和after)实现凹圆附上大神优惠券样式【仅凹圆】详细教程 https://juejin.cn/post/6945023989555134494-webkit-mask: radial-gradient(circle at 15px,#0000 15px
2021-06-23 17:00:18
675
原创 原生js 跑马灯
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>跑马灯
2021-06-10 18:12:46
170
原创 css 实现多行展开收起自动隐藏(全兼容)
css 实现多行展开收起自动隐藏(全兼容)学习笔记<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.
2021-05-23 00:01:38
835
原创 动画库收藏
https://codepen.io/Tibixx/pens/public?cursor=ZD0wJm89MSZwPTEmdj0yMjkyMjY4Mg==
2021-02-02 17:40:28
75
原创 转换函数 processfn(笔记)
//箭头函数 const processfn = data => {} //解构赋值 //数组 const [a,b] = [1,2]; // a=1,b=2; //对象 const {key,value} = {key:'name',value: '小明'} // key = 'name',value = '小明' // 扩展运算符 const data = { key: 'name', value: '小明' } const data2 = { ...da...
2021-01-29 10:31:51
99
原创 文本两端对齐
width: 100px; display: block; text-align: justify; text-align-last: justify; text-justify: distribute-all-lines; //兼容ie
2020-12-28 10:38:37
292
原创 阻止冒泡无效问题
经常遇到用js渲染的div,绑定事件需要用到事件委托,此时阻止冒泡不能使用在时间委托中实现,比如// 这种方法无效,阻止不了冒泡$(document).on('click','#id',function(event) { event = event || window.event; event.stopPropagation();})正确的写法是// 这是正确写法$(document).on('click',function() { $('#id').on('click',functio
2020-12-07 11:57:39
1510
原创 原生js自定义下拉框
原生js自定义下拉框,可以设置下拉框中链接跳转,仅需在option中设置type为jump,设置url为跳转地址即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义下拉框se
2020-11-26 15:29:45
1616
原创 获取浏览器地址栏内容
w3school 地址https://www.w3school.com.cn/js/js_window_location.asp
2020-11-25 23:15:09
210
原创 浏览器当前页面前进后退
history.back() //后退一个页面history.forward() //前进一个页面// 指定页面,前进一个页面传1,后退一个页面传-1// 以此类推history.go(X)
2020-11-25 23:08:19
97
原创 判断浏览器
在这里插入代码片//判断是不是IE浏览器使用//('ActiveXObject' in window),//ActiveXObject是IE浏览器特有的属性if('ActiveXObject' in window) { alert('我是ie浏览器');}else { alert('我不是IE浏览器');}//完整的判断是var ua = navigator.userAgent;if(/firefox/i.test(ua)) { alert('我是火狐浏览器');}else
2020-11-25 22:59:03
62
原创 关于取消浏览器默认事件方法
return false; 该方法不适用用两种情况,1.在ie中不支持使用;2.使用addEventListener()方法绑定的响应函数不支持使用event.preventDefault() 该方法是使用addEventListener()方法绑定的响应函数时使用;在ie中取消默认事件,可以使用事件捕获来实现obj.setCaptrue(); 将下一次点击事件捕获到obj,obj.releaseCapture();取消捕获...
2020-11-24 23:48:28
593
原创 拖拽功能(取消浏览器默认事件兼容问题)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1 {
2020-11-24 23:01:48
650
原创 鼠标滚轮事件
/* 给dom对象绑定鼠标滚轮事件,使用onmousewheel事件,但是火狐浏览器 * 不支持这个事件,火狐浏览器使用DOMMouseScroll事件来绑定鼠标滚轮事* 件,且必须用addEventListener来绑定事件* /obj.onmousewheel = function(event) { /* 其他浏览器使用event.wheelDalte 来获取鼠标滚动方向, * 当event.wheelDelte > 0 时是向上滚,event.wheelDelte < 0 时
2020-11-24 22:36:43
125
原创 绑定响应函数的几种方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box {
2020-11-24 00:18:45
249
原创 事件委托
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box {
2020-11-23 23:24:16
58
原创 阻止事件冒泡
//使用event.cancelBubble = true 来取消事件冒泡,cancelBubble 属性是IE浏览器有的,但其他浏览器也能使用
2020-11-23 23:11:53
59
原创 获取滚动条滚动距离兼容写法
在chrome中,浏览器的滚动条是属于body的,可以通过document.body.scrollTop来获取垂直滚动距离,document.body.scrollLeft来获取水平滚动距离,火狐等浏览器中,浏览器的滚动条是属于html的,通过document.documentElement.scrollTop来获取垂直滚动距离,document.documentElement.scrollLeft来获取垂直滚动距离,兼容写法应该是var top = document.documentElem
2020-11-23 23:06:14
439
原创 事件对象event兼容写法
在IE8及其以下,响应函数被触发时,浏览器不会传递事件对象event,它们是将事件对象作为window对象的属性值保存的,应该使用window.event,window.event 不兼容火狐var div = document.geiElementById('div');div.onclick = function(event) { //event 不兼容IE 8及其以下, event = event || window.event; //if(!event) { // event = wi
2020-11-23 22:59:14
165
原创 jq跑马灯
html块 <div class="hdle"> <div id="line"> <div class="item"> <a href="" style="width: 100%;" target="_blank" class="txt" >******</a>
2020-11-04 17:32:56
149
原创 ios 有动画的定位块,滑动抖动问题
ios 有动画的定位块,滑动抖动问题在ios浏览器中,我底部用两个fixed定位块,没用动画的定位块页面滑动没问题,就有动画的定位块有会抖动,经过排查,发现导致问题的是动画的元素,删除动画后就不会抖动了,也可以在动画元素添加transform: translateZ(0);-webkit-transform: translateZ(0);样式就可以解决,在fixed元素上无效...
2020-09-30 18:02:51
447
原创 js写入缓存和读取缓存
js写入缓存和读取缓存写入缓存读取缓存写入缓存localStorage.setItem('name',data); //缓存名称为name,值为data 的数据如果要给缓存设置有效期,可以在数据中存上时间戳进行计算有效期读取缓存localStorage.getItem('name') // 读取缓存名为name的值...
2020-09-01 11:37:20
2843
原创 css3 禁止点击
禁止点击div pointer-events: none; //想要后代元素点击,添加pointer-events: auto;值auto与pointer-events属性未指定时的表现效果相同,对于SVG内容,该值与visiblePainted效果相同none元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可...
2020-04-09 10:15:35
362
原创 文本超出截取(单行/多行)
文本超出隐藏(单行/多行)单行隐藏多行隐藏-webkit-line-clamp说明单行隐藏width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;多行隐藏width: 100px;overflow: hidden;display: -webkit-box;-webkit-box-ori...
2020-04-09 09:32:08
200
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人