- 博客(105)
- 资源 (13)
- 收藏
- 关注
RSS订阅原创 基于vue3封装了一个coverflow轮播图(层叠轮播图)组件
效果如下, 可以适配多张图片 ,小于五张会是平铺展示;大于五张按顺序轮播 , 每次切换有动画。最近公司有这个需求, 但是网上找了一圈 , 没有合适的能用在vue3里面的、且长这样的组件,干脆自己动手写了一个;
2024-10-22 18:11:42
147
原创 HTML5调用系统摄像头结合canvas进行拍照以及文件上传，调用结束后关闭浏览器对摄像头的占用
【代码】HTML5调用系统摄像头结合canvas进行拍照以及文件上传，调用结束后关闭浏览器对摄像头的占用。
2024-06-22 15:47:20
300
原创 一个筛选方法, 从一个数组对象里按参数对象遍历筛选出需要的符合条件的数据, 按着参数对象的键去匹配数组对象的键, 值相同即为符合条件,要注意的是需要与参数对象的每一个键值对都符合
从一个数组对象里按参数对象遍历筛选出需要的符合条件的数据, 按着参数对象的键去匹配数组对象的键, 值相同即为符合条件,要注意的是需要与参数对象的每一个键值对都符合
2023-07-10 14:17:23
396
原创 vue3+ts+elementPlus：表单回显数据，无法清空问题，清空表单验证问题
vue3+ts+elementPlus：表单回显数据，无法清空问题，清空表单验证问题
2023-05-08 17:21:12
2158
1
原创 一个低调、奢华、有内涵且好看的滚动条样式，收藏一下
::-webkit-scrollbar { width: 8px; height: 8px;}::-webkit-scrollbar-track { background-color: transparent; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em;}::-webkit-scrollbar-thumb { background-color: rgb(147, 1
2023-05-06 16:30:28
434
原创 一个很好用的判断是否为空 / null /undefined 等的方法，判空
一个很好用的判断是否为空 / null /undefined 等的方法，如果是 空 / null /undefined 则返回true。
2022-12-30 11:30:25
803
原创 前端项目用hbuilder打包成APP后，调用api开启摄像头进行拍照, 5+app框架
前端项目用hbuilder打包成APP后，调用api开启摄像头进行拍照, 5+app框架
2022-06-21 15:18:54
2176
原创 vue异步请求, 等待处理的回调方法, 解决 拿不到请求rueturn出来的数据 问题
：有的时候我们需要在网络请求结束后，再进行后续动作，例如，在一段网络请求结束后执行跳转，如果不做处理，会有可能出现网络请求未完成的时候页面就已经跳转走不存在了，所以要在调用网络请求的方法中加入一个回调函数，函数里边写请求结束的代码，然后等待网络请求结束后，再去执行这个回调函数.........
2022-06-09 16:14:10
2927
原创 JS实现鼠标拖动 , 不会因为鼠标移动太快, 脱离范围导致停下来
调用该方法即可, 原理是将鼠标移动和松开左键(弹起) 从div转移到window上/** * 鼠标拖动 拖动 * @param id 这里是 querySelector获取 , 因此需要 '#dragBox' ,带选择器 * @returns {{}} */function Drag(id) { //获取元素。 let demo = document.querySelector(id) // '#dragBox' let canMove = false let x = 0,
2022-05-19 19:32:04
2359
原创 css实现气泡对话框
细节自己改一下css 很简单<div id="wrapper"></div>#wrapper { position: relative; width: 800px; height: 800px; border-radius: 12px; background: #ffffff; filter: drop-shadow(0 0 5px rgba(0, 0, 0, .3)); padding: 12px !important; ove
2022-04-15 14:15:51
528
原创 js 获取元素在页面上的绝对位置
getSet(el) { var Box = el.getBoundingClientRect(), doc = el.ownerDocument, body = doc.body, html = doc.documentElement, clientTop = html.clientTop || body.clientTop || 0, clientLeft = html.clientLeft ||
2022-01-17 16:30:36
1439
1
原创 css实现文字无缝横向滚动
<div style="height:20px;font-size:14px;" class="water_tips"> <span class="water_text">公告内容</span></div>.water_tips { width: 100%; line-height: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.7);
2022-01-17 15:32:05
2959
1
原创 使用JS获取N个月(前后都可)的日期
2022年1月7日 16:49:37 获取 6个月前 的 日期时间 ;如果传参 为 正数 则是获取 N个月前 的时间如果传参 为 负数 则是获取 N个月后 的时间function getDate(params) { var dt = new Date(); dt.setMonth(dt.getMonth() - Number(params)); return dt.toLocaleString().replace(/\//g, '-') //这里只是把 "/" 替换为 "-"
2022-01-07 16:51:58
1276
2
原创 js 列表自动上下滚动, 开始自顶向下,到底后向上滚动 ,周而复始；
js 实现列表自动上下滚动, 开始自顶向下,到底后向上滚动 ,周而复始;
2021-12-30 20:15:15
2230
1
原创 记录一下elementUI message组件的BUG: 刷新页面, 消息提示空内容
折腾我一早上 , 万万没想到BUG是存在于UI框架!!! 我把好多页面删了,再去看项目居然这个 空的消息提示一直都在, 气哭…Vue.use() 这种写法可能会页面刷新时自动弹出 message，可将下图红框里换成 Vue.component(Message)重点:红圈内两种应用组件的方式...
2021-12-06 11:26:52
370
原创 js快速获取 年月日时分秒 格式的时间
new Date( +new Date() + 8 * 3600 * 1000 ).toJSON().substr(0,19).replace("T"," ")
2021-10-25 15:09:49
476
原创 移动端h5页面监听用户手势滑动
直接整个代码复制丢进去运行;需要加入自己的操作可以在最底下 alert(‘XX’)的地方加 var h = document.documentElement.clientHeight, mybody = document.getElementsByTagName('body')[0]; mybody.style.height = h + 'px'; //返回角度 function GetSlideAngle(d
2021-10-11 15:56:37
4013
原创 vue：使用国际化
简单说，有2个地方：main.js里把new Vue包起来，如下window.vm = new Vue({ // 重点是window.vm = 先将vue挂在window上，在进行第二步 router, i18n, render: h => h(App),}).$mount('#app')需要使用国际化的js文件中，如下使用：window.vm.$t('authentication.failed.message')有用，点赞，嘿嘿嘿.........
2021-09-24 17:58:23
768
原创 JS让页面全屏显示
$('#btn').click(function(params) { requestFullScreen(document.documentElement);})function requestFullScreen(element) { var requestMethod = element.requestFullScreen || //W3C element.webkitRequestFullScreen || //Chrome element.mozRequestFullScreen
2021-09-08 11:07:00
404
原创 纯CSS修改复选框checkbox
效果图：细节的话，自己改，有用点赞下面是css:input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin-left: 5px; -webkit-appearance: none; background-color: transparent; border: 0;
2021-08-13 11:18:13
316
原创 vue2： data中的this指向问题
类似这样，此时this指向并不是我想要的，因为我没法this.XXX拿到对应的数据，使用在这个lazyLoad方法中。直接记录一下解决方法，很简单把lazyLoad方法改成箭头函数。this指向就对了。
2021-07-28 17:29:04
1020
原创 web页面的回流，认识与避免
一、什么是回流？回流是会导致页面重新渲染的一些元素，从而影响性能。二、哪些因素会导致回流？1、调整窗口的大小；2、改变字体，如果用rem 设置了根目录的字体大小，这样就减少了回流的次数；3、增加或者移除样式表；4、内容的变化，用户在input中输入了文字（这是不可避免的）；5、激活CSS的伪类；6、操作class属性；7、基本操作DOM(包括js中的domcument等)；8、计算offsetWidth与offsetHeight 属性，获取元素在窗口中的位置；9、在html代码中直接
2021-07-15 17:01:00
550
转载 前端性能优化小结
前言移动互联网时代，用户对于网页的打开速度要求越来越高。首屏作为直面用户的第一屏，其重要性不言而喻。优化用户体验更是我们前端开发非常需要 focus 的东西之一。从用户的角度而言，当打开一个网页，往往关心的是从输入完网页地址后到最后展现完整页面这个过程需要的时间，这个时间越短，用户体验越好。所以作为网页的开发者，就从输入url到页面渲染呈现这个过程中去提升网页的性能。所以输入URL后发生了什么呢？在浏览器中输入url会经历域名解析、建立TCP连接、发送http请求、资源解析等步骤。http缓存优化是
2021-07-15 16:54:37
950
原创 js 字符串中提取多个网址 并替换成 超链接a标签
直接将字符串当参数，调用该函数即可function getHref(content) { if (!content) { return ""; } let urlPattern = /(https?:\/\/|www\.)[a-zA-Z_0-9\-@]+(\.\w[a-zA-Z_0-9\-:]+)+(\/[\(\)~#&\-=?\+\%/\.\w]+)?/g; content = content.replace(urlPattern, function(match) {
2021-04-14 16:02:03
2517
3
原创 echars中国地图，省份名字居中
百度网盘，echars中国地图省份居中chain.js链接: https://pan.baidu.com/s/1zu0O1fMUYhZ9-YAtZN0q1w提取码: jjhxechars中国地图上的省份名字所在的位置，本质上是坐标，我要改成居中，也是修改这个坐标即可。这一份是已经改好了坐标的js，地图所需要的json就在js中定义了。直接替换这份js即可，或者替换地图中的json。...
2021-03-19 10:11:28
852
原创 移动端让页面 竖屏显示的 方法
将以下两个方法，放进你的methods里，在需要竖屏的地方调用 this.detectOrient() 即可。如果不是vue项目，可以把方法内容搬过去，也一样的，运行就完了。methods: { detectOrient() { var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, //$wrapper = document.getE
2021-02-23 17:17:04
589
原创 用width或者height缩小 多倍图，图片变模糊的解决办法
今天拿到一张 294*72 的3x图片，用width或者height缩小，但是发现略有模糊。加入下面的代码就解决拉.logo { width: 98px; height: 24px; /* 加入下面css */ image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edg
2021-01-27 17:47:20
1673
vue3模板项目, 上手直接yarn或者npm i 直接加载依赖使用即可
2024-10-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人