自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(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

原创 Echarts 点击空白位置,获取点击的数据索引

echartsInstance.getZr()获取点击位置。

2024-01-03 11:56:57 686

原创 vue跑马灯

【代码】vue跑马灯。

2023-12-25 17:34:37 616

原创 typescript Constructor Set requires ‘new‘

使用typescript的class继承时报错 “构造函数集需要’new’”只需要在tsconfig.json文件中添加以下配置即可。

2023-06-30 18:23:37 576

原创 浏览器预览pdf(无须下载插件)

使用浏览器自带的预览功能。

2023-06-01 11:17:46 414

原创 three + cesium 深度融合

three + cesium 深度融合,并实现鼠标对three中的操作

2022-10-13 11:10:07 1880 5

原创 vue + cesium项目配置

vue+cesium 项目配置

2022-10-13 09:53:19 398

原创 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

原创 谷歌浏览器显示input,video等自闭和标签的隐藏dom

2021-08-28 16:58:03 331

原创 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关注的人

提示
确定要删除当前文章?
取消 删除