- 博客(33)
- 收藏
- 关注
RSS订阅
原创 自定义选择弹窗
适用于表单下拉选择，多协议选择。做了多个协议以弹窗的形式展示，所以封装了个下拉弹窗。 只针对协议做了样式处理，可能不是太完美，仅供参考。子组件 Agreement.vue<template> <div> <div class="wx-actionsheet"> <div class="wx-actionsheet...
2020-04-01 10:46:12
811
原创 高德，百度地图获取省市区
近期，遇到一个根据定位获取省市区的需求，前期用了加载百度地图js的方式，经过实验，https在部分ios手机上都获取不到省市区。后来发现是百度地图API中getCurrentPosition方法提示错误。现在的解决方案：先获取H5经纬度，获取到后调用高德地图接口的方式获取，如果失败，再去请求百度地图服务端api的方式。如果经纬度获取失败，则尝试加载高德地图js的方式。把它封装起来：...
2020-10-12 10:52:43
1829
转载 JS 原型和继承
**参考文献**添加链接描述proto除null和undefined，JS中的所有数据类型都有这个属性； 它表示当我们访问一个对象的某个属性时，如果该对象自身不存在该属性， 就从它的__proto__属性上继续查找，以此类推，直到找到，若找到最后还是没有找到，则结果为undefined我们把一个对象的__proto__属性所指向的对象叫该对象的原型；我们可以修改一个对象的原型来让这个对象拥有某种属性或某个方法// 修改一个Number类型的值的原型const num = 1;num.__p
2020-05-26 14:49:15
243
原创 js获取ios或安卓版本号
//获取安卓版本号getAndroidVersion(ua) { ua = (ua || navigator.userAgent).toLowerCase(); var match = ua.match(/android\s([0-9\.]*)/); return match ? match[1] : false; }//获取ios版本号getIosVersion(){ var str= navigator.userAgen
2020-05-26 14:28:59
1702
原创 日期选择器快速选择今天，昨天，本周，上周，本月，上月，本年，最近七天，最近三天
日期选择器，年月日的，开始日期和结束日期 <el-date-picker v-model="startStart" type="daterange" unlink-panels range-separator="至" start-place...
2020-05-08 11:01:10
3787
原创 H5表单填写，展示当前完成的进度。（进度条封装）
最近做了一个表单填写的进度条，根据表单的填写情况，展示他已经完成的进度。所以，封装了一个小组件。子组件 progressBar.vue<template> <div> <div class="xui-wrapper xui-myPromption-wrapper"> <div class="xui-m...
2020-04-01 10:01:28
1287
原创 前端引入特殊字体，数字千分位逗号分割
选一个公关配置的文件夹，放置字体然后在全局配置的地方引入这个字体文件，根据自己当前项目的路径去配置把需要改变字体的样式改成设置的字体就可以假如还想把数字改成以千分位分割的逗号形式的，如下<template> <div> <div class="ceshi">{{amount}}</div> </div>&...
2019-12-27 10:37:04
1201
原创 Vue.directive自定义指令改变颜色
最好在全局写，这样都会生效，或者当前页面，必须引入import Vue from ‘vue’Vue.directive('rest-styleBackground', function(dom, definition) { //背景颜色 dom.style.background = definition.value})<template> <div> ...
2019-12-27 10:17:54
1699
原创 webpack多入口文件页面打包配置
webpack 多页应用配置的基本思路是采用多入口配置，然后多次调用 html-webpack-plugin 来生成 html 文件。src下的目录，module下可配置每个单页面1.webpack.base.conf.js修改（配置多个页面的js入口）var path = require('path')var config = require('../config')var utils...
2019-11-28 11:20:42
711
原创 git命令
查看lOGgit log --oneline 单行显示提交历史记录。 git log -2 显示最近N次提交的提交历史记录。 git log -p -2 用diff显示最近N次提交的提交历史记录。 git diff 在工作树中显示所有本地文件更改。 git diff myfile 显示对文件所做的更改。 git blame myfile 显示谁更改了文件的内容和时间。 git rem...
2019-10-21 18:27:28
127
转载 如何快速查资料？
有时候遇到一些困惑，疑问，如何查资料呢？以下就是Google hacking语法 可以很好的查询site :可以限制你搜索范围的域名搜素方式：site: 网址 关键词 或者 关键词 site : 网址注意事项：1、site:后边跟的冒号必须是英文的“:”，中文的全角冒号“：”无用2、url前不能带http://3、url后边不能带斜杠“/”，其实是哪里都不能带/4、url...
2019-10-18 15:26:10
571
原创 前端性能优化以及前端安全
1.用户体验和性能优化的理解html部分： a、要避免代码的深层级嵌套。因为层级越深的节点在初始化时更占内存。 b、尽量不要使用h5摒弃的iframe标签，因为在页面加载的时候iframe标签会阻塞父文档onload事件的触发，这恰恰影响了初始化UI c、诸如img、link、script等元素的src或href属性的值不为空，因为就算我们写为src=""浏览器仍会发送h...
2019-10-18 12:00:05
950
转载 vue3.0 摒弃 Object.defineProperty，基于 Proxy 的观察者机制探索
一.为什么要取代Object.defineProperty既然要取代Object.defineProperty，那它肯定是有一些明显的缺点，总结起来大概是下面两个1.在Vue中，Object.defineProperty无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。 为了解决这个问题，经过vue内部处理后可以使用以下几种方法来监听数组（评论区有提到，Object...
2019-10-12 11:56:01
323
转载 短信验证码，在键盘显示验证码
以往iPhone手机获取短信验证码后，需要查看短信，并记住短信验证码，然后再回到APP手动输入短信验证码，过程比较麻烦，也怕记错了短信验证码。现在，iOS12系统版本出了了个新功能，即UITextFielld的textContentType属性多了枚举值UITextContentTypeOneTimeCode，可以在UITextFielld成为第一响应者isFirstResponder时，在键...
2019-08-19 15:20:28
8249
原创 系统判断功能，判断是pc端or移动端
方法1：function IsPC(){ var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var flag = true; for...
2019-08-16 12:00:30
1039
原创 获取地址栏参数
1.获取地址栏参数 getParamsUrl(name) { let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); if (window.location.hash.indexOf("?") < 0) { return null; } ...
2019-08-16 10:41:24
266
原创 前端页面列表循环的图片加载不出来
在列表循环数据时，有时候用img标签动态加载图片，有时候资源不会那么快加载出来后来换了一种方式，已背景的形式加载。 <span class="bianImage" :style="{backgroundImage:'url('+item.logo+')'}"></span>...
2019-08-15 10:36:30
1354
原创 封装toast弹窗
js部分import vue from "vue";// 这里就是我们刚刚创建的那个静态组件import toastComponent from "./toast.vue"; //把vue组件引进来// 返回一个 扩展实例构造器const ToastConstructor = vue.extend(toastComponent);// 定义弹出组件的函数 接收2个参数, 要显示...
2019-07-24 11:25:07
249
转载 vue中使用scss，写代码会更方便快捷（瞬间种草）
首先要了解什么是CSS 预处理器？ SCSS是一种CSS预处理语言定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS那么SCSS和SASS 有什么区别呢· 文件扩展名不同，文件后...
2019-07-24 11:16:14
528
原创 js身份证号码加权因子校验
/** * 身份证校验算法 */ //检查号码是否符合规范，包括长度，类型 isCardNo: function(card) { //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X var reg = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/; ...
2019-07-23 18:02:55
798
原创 vue点击按钮打开新页签，并传参
今天遇到一个新需求，需要打开新页签展示，之前用ruter.push都不管用，现在结合window.open和$router.resolve亲测有效以下附上代码：<div class="target" @click="ceshi" ref="target">测试</div>ceshi() { let routeData = this.$router.re...
2019-07-17 15:50:15
7690
1
原创 h5唤醒app
首先，需要判断是安卓还是ios，我们是无法知道是否打开app的，只能通过延迟的方法 var ua = window.navigator.userAgent; var isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (!isiOS) { var t = Date.now(); //...
2019-07-16 17:02:36
171
原创 封装输入框文字限制，超出标红（elementui）
<template> <div class="text-size"> <span class="textarea-tip" :class="{isActive: total > max}">{{ total }}/{{ max }}</span> </div></template>&...
2019-07-16 15:16:03
1021
原创 渲染从后台获取到的整个HTML页面
场景：后台返回整个动态的html页面，前端通过获取渲染出来，进行转义解析实现方式：通过接口获取返回的html的数据，document.getElementById(“container”).innerHTML = this.decodeUnicode(接口返回的数据);js方法decodeUnicode(str) { str = str.replace(/\\/g, "%");...
2019-07-16 10:52:10
12678
2
原创 移动端click事件会有300ms延迟
解决移动端300ms的延迟问题产生问题的原因: 移动端的双击会缩放导致click判断延迟浏览器为什么会设置300ms的延迟呢，这个跟双击缩放有关，浏览器捕获第一次单击后，会先等待一段时间，如果在这段时间区间里用户未进行下一次点击，则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作，则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟。解决方式：1。css touc...
2019-07-16 10:38:06
309
转载 h5单页面移动端PC端的适配问题
把script引入html页面`` <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', ...
2019-07-08 11:56:31
2887
1
原创 超炫的loading小花加载动画，四种样式（sass函数）
<template> <div class="holder"> <div class="preloader flower1"> <div></div> <div></div> <div></div> <div></...
2019-06-06 15:05:04
435
1
原创 微信浏览器input关闭键盘后导致页面底部空缺
在微信webview打开我们h5页面的时候，就固定了页面的高度，如果这个input在页面的底部，当呼出软键盘时，由于高度问题，整个webview会被键盘顶上去，而取消时没有恢复原状。解决办法：绑定一个blur事件，当其触发时，使scrollTo为0 <input type="tel" ref="user-label" ...
2019-06-06 14:39:09
277
原创 移动端h5单页面背景占满全屏
<div class="ceshi"></div><style lang="scss">.ceshi{ max-width: 375px; //按一倍图适配 overflow: hidden; height: 100%; position: absolute; left: 0px; width: 100%; top: 50%;...
2019-06-06 14:33:44
9946
8
原创 用sass函数写加载动画,超实用
<template> <div class="preloader loading"> <span class="slice"></span> <span class="slice"></span> <span class="slice"></span> ...
2019-06-06 14:25:21
1309
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人