- 博客(138)
- 收藏
- 关注
原创 vue监听浏览器被关闭,完美区分是关闭还是刷新
有一个需求是用户在编辑时关闭了浏览器需要存储用户填写的内容,下次进入页面时提示 并恢复保存的数据,但是发现beforeunload事件会同时触发刷新关闭,经过调试 发现刷新和关闭有个时间差,我们可以用时间戳来区分是关闭和刷新。
2023-07-12 11:06:26
2131
3
原创 vue WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2
我直接升级到1.33.0 版本就可以了。网上找到的例子并没有解决我的问题,我的版本是低于1.33.0的。
2022-12-09 17:00:15
694
原创 el-date-picker 类型为 datetime,禁用当天之前的时间
el-date-picker 类型为 datetime,禁用当天之前的时间
2022-06-22 16:22:55
1194
原创 js正则表达式清除html标签中的class属性,去除html标签,替换内容
js正则表达式清除html标签中的class属性,去除html标签
2022-06-08 18:00:01
2438
1
原创 elementui select 可异步搜索可选择可输入
可输入后异步搜索可输入自定义内容<div > <el-select v-model="editForm.mcc" clearable filterable remote reserve-keyword placeholder="请选择" class="ele-block" :remote-method="addRemoteMccName" :loading="loading" @clear="addRemoteMccName"
2022-05-12 14:40:41
847
1
转载 js多层对象对比键值是否相同
// 判断是否为obj对象function isObj(object) { return object && typeof(object) == 'object' && Object.prototype.toString.call(object).toLowerCase() == "[object object]";}// 判断是否为数组对象function isArray(object) { return object && typ.
2022-04-09 14:51:01
600
1
原创 去除字符串中除html标签的特殊字符
我处理的是将标签外的空格替换成 替换特殊字符或内容修改一下即可function removeNotHtmlBlank(str){ var str = ">" + str + "<"; var repStr=str.replace(/>[^<]*[^<]*</g, function(word){ return word.replace(/\s/g," "); } ); repStr = r.
2022-03-20 15:13:20
286
原创 CSS - 纯CSS实现多行文本溢出省略(兼容所有浏览器)
<div class="mutil-line-ellipsis"> <div>CSS - 纯css实现多行文本溢出省略(兼容所有浏览器)CSS - 纯css实现多行文本溢出省略(兼容所有浏览器)CSS - 纯css实现多行文本溢出省略(兼容所有浏览器)</div> </div> .mutil-line-ellipsis { height: 40px !important; width:400px; line-height.
2022-03-14 11:38:46
716
原创 【无标题】将字符串分割分成固定长度为一组
let str = '混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项';let regex = /<\/?.+?\/?>/gm, n = 20, strArray=[], tmapText = str.replace(regex, ''); for (var i = 0, l = tmapText.lengt..
2022-02-22 13:49:37
517
2
原创 element 使用date-picker选择器时出现跑偏到左上角错位
问题:使用两个时间选择器,切换错乱的问题1.2.解决方法有两个1.把v-if改成v-show2.指定el-date-picker的key 用来区分
2021-12-24 18:10:11
2208
4
原创 时间戳转字符串
1.字符串转时间戳new Date("2021-01-01").getTime()2.时间戳转字符串function timeFormate(timeStamp) { let year = new Date(timeStamp).getFullYear(); let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMont.
2021-09-27 15:33:48
1903
原创 使用高德地图,点击位置定位,可搜索,带周边搜索点击可选,气泡事件
.container_main{position: relative;width: 800px ;height:511px ;margin-bottom: 200px;}#result{margin: 0;padding: 0;z-index: 999;position: absolute;background-color: white;max-height: 100%;overflow-y: auto;top: 0;left: 0;width: 280px;}.content-window...
2021-09-17 17:25:50
1616
转载 JS如何判断滚动条是否滚到底部
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的.
2021-08-25 14:52:38
1989
原创 vant 使用上传视频组件获取视频时长
场景需求如下:上传视频获取用于活体检测,需要控制时长,避免服务器压力实际上audio这个标签需要隐藏起来(不需要显示他只要他的时长)<div class="transcribeVideo"> <audio id="audioId" controls autoplay loop></audio> <van-uploader accept="video/*" capture="camera" :before-read="befor.
2021-08-18 11:39:34
1358
原创 vue使用vantUI框架字体适配字体过小问题
1.安装需要的依赖amfe-flexiblepostcss-pxtoremnpm install amfe-flexible --savenpm install postcss-pxtorem -D2.main.js引入import 'amfe-flexible'3.postcss.config.js引入rootValue值 根据你自己的图做适配,做判断主要是实现vant组件与自己css里的px保持一致// module.exports = {// plugin
2021-08-09 14:44:17
1774
原创 使用tracking.js 实现移动端webapp浏览器调用摄像头并检测人脸
直接使用<videoid="video" >发现ios的自带浏览器Safari 有问题解决问题:1.视频不能直接播放(需要触发),2.且直接全屏显示,<!doctype html><html><head> <meta charset="utf-8"> <title>tracking.js - face with camera</title> <link rel="style...
2021-08-03 15:27:25
1288
转载 vue项目 node 错误运行 node-sass@4.14.0 postinstall: `node scripts/build.js`
npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! node-sass@4.14.0 postinstall: `node scripts/build.js`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the node-sass@4.14.0 postinstall script.npm ERR! This is probably not a problem with npm. There is.
2021-07-20 23:11:13
1331
转载 JS实现判断滚动条滚到页面底部并执行事件的方法
需要了解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。offsetHeight:是指元素内容的高度。依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分。scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度。举例,如果一个DI
2021-07-16 11:55:49
603
原创 vue使用vant移动端rem的适配时报错误问题
使用vant实现开发环境rem适配任意门vant如果需要使用rem单位进行适配,推荐使用以下两个工具:postcss-pxtorem是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位 lib-flexible用于设置 rem 基准值npm install postcss-pxtorem --save-devnpm i -S amfe-flexible在根目录下新建一个postcss.config.jsmodule.exports = { pl...
2021-07-13 14:58:09
579
原创 判断IE浏览器的版本
<script type = "text/javascript"> function IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器 var isE.
2021-07-12 11:35:25
191
转载 理解call和apply方法
1、Call和Apply的作用完全一样2、Call传递的是单个参数,Apply传递的是一个数组参数3、Call和Apply可理解为--被准许使用的意思打个比方,之前农村家里比较穷,农村也没有路灯啥的,一到晚上到处是漆黑一片,那个时候也没有几家有手电筒的,自己家没有怎么办,就要到别人家里借,不然走夜路真的怕!//亲戚家var otherHome = { tips: '我家有电筒', flashLight: function(meg){ if(!meg) meg
2021-06-29 18:05:42
84
原创 父页面监听多个iframe中的多种事件
我遇到的问题,后台是通过创建iframe窗口来添加页面显示的,公共页需要编写公共的事件,用正常的jquery的绑定事件无法获取到iframe内的DOM后台多个iframe动态创建的窗口写的监听如下:我这里使用的是标签document.getElementsByTagName("iframe") 是因为有多个iframe如果只有一个就不用for循环遍历了,只有一个完全可以使用document.getElementById('id');$(document).ready(funct..
2021-06-22 15:42:49
3510
原创 JS判断鼠标的滚轮滚动方向,鼠标是否在某个元素中 是向上还是向下滚动
var x = null; var y = null; $(document).mousemove(function(e){ x = e.pageX; y = e.pageY; }); var scrollFunc = function(e) { var e = e || window.event; var m = null; if(e.wheelDelt...
2021-04-23 10:19:26
1670
原创 vue2.X使用watch监听对象
废话不多说,直接上代码对比变量与对象用watch监听的区别<script> export default { name: 'home', data() { return { name:"", user:{ name:"张三" } }; }, mounted() { }, compute
2021-03-21 16:36:55
1660
转载 vue的刷新页面方式
window.location.reload(),是原生JS提供的方法,this.$router.go(0):是vue路由里面的一种方法,这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按F5刷新页面,会有短暂的白屏,相当于页面的重新载入。控制<router-view></router-view>的显示与否,在全局组件注册一个方法,该方法控制router-view的显示与否,在子组件调用即可APP.vue页面<template>
2021-03-17 11:17:47
629
原创 Uploader 上传插件示例用法和更新传递传输方法
废话不多说,直接上代码;使用Uploader 插件示例如下。html需引入plupload.full.min.js博客园插件文档任意门 var uploader = new plupload.Uploader({ //创建实例 runtimes: 'html5,flash,silverlight,html4', //上传插件初始化选用那种方式的优先级顺序 browse_button: 'btn', // .
2021-03-15 17:02:23
1804
原创 vue2.x使用mock.js 实现模拟数据
现实就是前端确认需求后,无法与后端及时对应联调接口或者调用接口,再这个过程中前端会非常痛苦,只能自己模拟数据,比如data.json 。虽然能用但是这种操作加大了我们的工作量,那么我们使用mock 会更加方便本例子是 vue-cli 脚手架已经搭建好后的安装axiosnpm install vue-axios --savenpm install qs.js --save //这一步可以先忽略,它的作用是能把json格式的直接转成data所需的格式首先安装mockjsmock.js
2021-03-08 18:39:11
3078
2
原创 vue 页面之间的传值交互方式
第一种传参 name 与 结合使用params ,传参时需要配置路由第二种传参 path 与 query结合使用 ,区别:query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示1.传值方式//第一种seeDetail(oid){ this.$router.push({name:"orderDetails",params:{id:oid}});}//第二种seeDetail(...
2021-02-25 18:06:51
2030
转载 解决vue 直接图片引入报错问题
废话少说了,直接上代码<div class="login_title"> <img :src="logo" class="mk_logo" /></div>//方法1.直接将图片引入为模块require imageSrc from "../assets/logo.jpg"//方法2.把图片放在数据中 export default { name: 'HelloWorld', data () { return { ..
2021-01-08 17:48:50
2365
原创 Safari浏览器不支持window.open解决方案
Safari浏览器出于安全问题不能异步自动触发比如请求后使用,window.open(直接使用window.open属于浏览器行为,所以被阻止打开新窗口);那我们需要做兼容,其他的浏览器使用open。苹果浏览器使用a链接模拟点击的方式来实现 新窗口。<span class="m_score" >实现新窗口跳转</span><a target="_blank" id="open_href" href=""></a><script>.
2020-12-10 18:46:20
2494
1
转载 jquery keyup事件 500ms 延时输入 事件处理
var last;$(".input").keyup(function(event){//.input为你的输入框 last = event.timeStamp; //利用event的timeStamp来标记时间,这样每次的keyup事件都会修改last的值,注意last必需为全局变量 setTimeout(function(){ //设时延迟0.5s执行 if(last-event.timeStamp==0) .
2020-10-19 18:06:45
594
原创 JavaScript使用高德地图可视化3D地图区域上添加自定义的图标及工具的使用
如果开发者账号包括Key已经有了,请忽略此步骤 首先,注册开发者账号,成为高德开放平台开发者 登陆之后,在进入「应用管理」 页面「创建新应用」 为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 记住这个Key,引入地图API时使用。效果图如下:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8">.
2020-09-03 19:17:34
3969
2
原创 jQuery 实现点击div以外其他地方隐藏div
<p><a href="javascript:void(0)" class="a">按钮</a></p><div class="menu"> <p>显示弹窗</p></div>$(".a").on("click", function(e){ if($(".menu").is(":hidden")){ $(".menu").show(); }else{ $("..
2020-07-28 19:10:15
887
转载 JS 正则表达式从地址中提取省市县
直接上代码,一看就懂, 一般国内地址返回Array前三项就是省市县,若要扩展到社区、街道等可自行扩展。var add1 = '四川省成都市都江堰市天马镇34号';var add2 = '北京市北京市东城区前门大街1号' var add3 = '新疆维吾尔自治区乌鲁木齐市天山区中山路479号';var add4 = '四川省成都市双流县幸福社区23号';var add5 = '香港特别行政区中西区尖沙嘴路';var reg = /.+?(省|市|自治区|自治州|县|区)/g;console
2020-06-12 16:21:31
1262
原创 完美解决移动端手机熄屏、黑屏计时器停止计算问题
因为浏览器安全机制问题,手机黑屏后,后台运行浏览器停止运行该机制,这里是用的是一个H5的一个PageVisibility API,熄屏时,开始计算黑屏时间,重启时,再次计算;另一个思路是也可使用iframe引入另一个页面代码使用全局变量进行计算时间,文本暂不深入;废话不多说,直接上代码:<input type="text" name="user-phone" class="user-phone" maxlength="11" oninput="value=value.replace
2020-05-11 15:28:53
5949
原创 js获取(最近1周,最近2周,最近1月,最近2月,最近半年,最近一年,本周,本月,本年)
//格式化时间function formatTime(param) { let y = param.getFullYear(); let m = param.getMonth() + 1; let d = param.getDate(); m = m < 10 ? ("0" + m) : m; d = d < 10 ? ("0" + d) : d; retu...
2020-04-13 16:38:14
3250
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人