- 博客(41)
- 收藏
- 关注
原创 解决IE中a标签中的图片有边框
1、通过CSS去除边框:在CSS中为img标签添加border:0 none;样式,例如:img{border:0 none;这种方法适用于大多数现代浏览器12。3、通过JavaScript去除点击后的虚线框:在a标签中添加outline:none;和text-decoration:none;这可以同时去除点击后的虚线框和下划线。
2024-10-08 10:17:41 249 1
原创 vue的sync语法糖的使用(父子组件双向绑定)
有些时候子组件需要修改父组件传递过来的prop,要去改变父组件的状态的时候就需要使用aync,sync修饰符可以双向绑定父子组件中的数据。注:sync这个语法糖只有在2.3.0这个版本以及上才会有这个方法。
2023-12-01 09:25:26 719
原创 微信小程序开发步骤
授权:部分接口(位置、麦克风、摄像头等)需要经过用户授权同意才能调用,如果用户未接受或拒绝过此权限,在调用相应的api时会弹窗询问用户,用户点击同意后方可调用接口,也可以使用 wx.authorize 在调用需授权 API 之前,提前向用户发起授权请求。需要配置项:配置服务器域名(获取到AppID和AppSecret)、白名单(可通过后台开启/不开启白名单保护、开启后只有白名单内的IP可以调用参数为AppSecret的接口、微信公众号是强制的需要设置白名单)、配置业务域名。前期配置:(微信公众平台)
2023-03-18 17:08:18 305
原创 阻止google浏览器提示更新密码及阻止默认账户密码回显
其根本原因是input type=password时浏览器会自动填充优化场景:用户在重置密码,去请求接口之后未修改成功,浏览器也会提示更新错误密码。解决方法是通过使用input type=text 修改css属性达到预期效果(不兼容ie、element-ui)上面的能完美解决除ie外的其他浏览器,但是在ie浏览器中它不会加密展示,而是直接把文本展示出来了,ie就需要区分处理(ie就用password)二、阻止默认回显场景:google在报错过账户密码之后,去新增用户会自动回显当前用户的账号密码
2022-07-01 16:20:26 2799
原创 js实现pc网页等比缩放到移动端(h5)展示
pc网页在手机端预览时,会存在样式混款,横向滚动,此时我们想让pc的网页等比缩小到移动端展示网页,直接加以下js就好啦:
2022-07-01 15:57:42 4254
原创 微信公众号授权登录,微信sdk的使用,及ios配置微信sdk失败
前期配置:(微信开放平台)需要配置项:服务配置、业务域名、js接口安全域名、网页授权域名1 服务配置由后端提供url和token进行配置2 业务域名、js接口安全域名、网页授权域名配置需要授权的网站域名地址(前台页面地址),不需要加http以及子路径3 授权流程1) 获取code//微信授权 let redirect_uri = encodeURI(window.location.href).split('#')[0], appid = "";
2022-04-20 20:46:54 8135
原创 css响应式布局及分辨率(PC端、H5端)
PC端按屏幕宽度大小排序分辨率 比例 | 设备尺寸1024*500 (8.9寸)1024*768 (比例4:3 | 10.4寸、12.1寸、14.1寸、15寸; )1280*800(16:10 |15.4寸)1280*1024(比例:5:4 | 14.1寸、15.0寸)1280*854(比例:15:10 | 15.2)1366*768 (比例:16:9 | 不常见)1440*900 (16:10 17寸 仅苹果用)1440*1050(比例:5:4 |
2022-01-18 16:26:16 3329
原创 canvas绘制图片,html2canvas截图绘制
canvas绘制图片html代码:<canvas id="myCanvas"></canvas>js代码:var mycanvas=document.getElementById("myCanvas");var ctx=mycanvas.getContext("2d");var img=document.createElement("img");img.src='';//图片路径img.onload=function(){ mycanvas.width=im
2022-01-12 11:11:09 408
原创 a标签点击出现横线,移动端
在移动端点击a标签链接时出现横线闪动,当跳转的当前页面时,横线还不会消失,如下:在css样式上和元素上找不到相关影响的,后面发现其实是a:visited里面有个下划线影响的,可以去掉那个css样式:a:visited:{text-decoration: none;}...
2021-12-14 20:44:34 1519
原创 TS用法整理
介绍1.是js的超级,遵循es6 es5的规范,扩展了js语法2.像java面向对象语言(规范、工程化、模块话),适合开发大型企业项目数据类型(11种)1.布尔类型 boolean2.数字类型 number3.字符串类型 string4.数组类型 array数组定义的三种方式(1) 在元素类型后面接上 []:let list: number[] = [1, 2, 3];(2)数组泛型,Array<元素类型>:let list: Array = [1, 2, 3];(3)定义
2021-10-24 20:24:01 2142
原创 图片破图后让其展示默认图片
在前端页面中,拿到的图片路径已经丢失,错误,找不到时,展示在页面中的图片就是一张破图需要将其换成一张默认图片(原生js定义html字符串的写法)<img src="错误图片.png" onerror="this.src='./images/mrt.png'" alt="" />./images/mrt.png就是一张默认图片同理如果需求是破图不展示图片的写法:<img src="错误图片.png" onerror="this.style.display='none';" alt
2021-10-13 14:54:13 448
原创 移动端select样式问题
设置select的背景色在网页上有变化,但是移动端流量是发现背景色还是白色代码:只需要在样式中加上-webkit-appearance: none;就会有效.input-100{ width: 100%; height: .65rem; -webkit-appearance: none; background-color: rgba(255,255,255,.15); border-radius: .06rem; color: #fff; padding: 0 .2rem; fon
2021-10-10 15:30:59 720
原创 移动端vh布局软键盘弹起改变高度问题
问题描述在移动端使用vh布局。当页面中包含input、textarea输入框的时候,或者有调起软键盘的操作时,安卓浏览器下,可视窗口的高度改变,导致页面上的vh重新计算,页面被压扁。ios下的浏览器(safari)没有这个问题。原因在ios下,软键盘是叠在可视窗口上面的,也就是不影响可视窗口的大小。但是在安卓,软键盘是在窗口中,即占用窗口的面积。解决方案理论:给viewport设置height值,可用window.innerHeight赋值。旋转的时候重新设置<meta name="vie
2021-10-10 15:23:46 1566
原创 总结一下适合前端码农去看的一些网站
1.echarts案列库:https://www.makeapie.com/explore.html#sort=ranktimeframe=allauthor=all点击进入(各种图表案例)2.jquery插件库:https://www.jq22.com/点击进入(可以找到各种炫酷特效)
2021-09-17 15:44:01 603 1
原创 vue中使用element打包上线后图标偶尔出现乱码
在使用vue element打包上线后图标偶尔乱码找了网上的有关dart-sass,node-sass解决方法发现并没有用以下是我线上项目展示效果最后发现我的图标打包文件样式被影响了,换成cdn引入element的样式就解决了...
2021-07-13 17:48:22 2613 4
原创 使用Object.assign IE提示对象不支持“assign”属性或方法兼容处理
原始代码:function renderRecommended(data){ let searchRankHtml = ''; var n = 1; $.each(data.list, function (i, e) { searchRankHtml += "<li><a class='c" + n +"'>" + e.title + "</a></li>" if(n > 3){ n = 0 } n++; })
2021-06-23 16:25:29 958
原创 接口请求跨域携带cookie
一个需求,在a域名下要去调用b域名下的接口,并且将a域名下的cookie携带过去jq中的ajax处理$.ajax({ url:'', type:"get", data:{}, async:false, timeout:3000, dataType:"json", xhrFields: { withCredentials: true //解决跨服务传递时不传递cookie的问题,允许携带证书 }, success:funct
2021-05-19 15:19:36 1544 1
原创 iframe根据内容自适应高度
以下方法适用于两个网页同源如果两个网页不同源,就无法拿到对方的DOM<iframe id="iframe" width="1200" src="" ></iframe><script type="text/javascript">window.onload = function () { document.getElementById("iframe").height=0; document.getElementById("iframe").heig
2021-05-18 16:50:11 349
原创 ie接口请求缓存(ajax,axios)
项目在ie中测试时,经常发现缓存非常严重,你删除一个列表,如果请求地址没有变化的参数。你会发现ie浏览器直接从缓存中拿数据,这就造成了列表不会刷新。1.在ajax请求中加一个cache:false这个参数。2.在url里添加一个随机数,保证每次请求的url发生变化。3.vue中的全局配置Axios.defaults.headers.get['Cache-Control']='no-cache'Axios.defaults.headers.get['Pragma']='no-...
2021-05-11 11:39:00 595
原创 网站换肤(兼容ie)
方案一:使用var变量在app.vue文件设置变量<!-- color就可以动态的去改变 --><div id="app" :style="{'--mailPrimary':color"> <router-view /></div>根据路由参数来设置肤色风格(vue+ts的写法)color:String='#0b77cd';//color默认值//监听路由变化@Watch('$route')routechange(to:
2021-05-10 16:25:17 323
原创 后端返回图片验证码数据流,前端ajax请求处理显示在页面
验证码后端返给前端的是一张图片,如下:再看看response里的返回此时前端用jquery的ajax请求如果直接去拿返回值,就会发现...额...乱码了啊(数据流)于是就对这对数据流进行各种转换,发现都有不能展示,最后换了使用XMLHttpRequest发送Ajax请求方式进行如下操作//html代码<img src="" id="code" alt="" />//js代码//获取图片验证码function getImgCode(){ var wind
2021-05-10 15:53:19 3051 2
原创 移动端检测更新安装包
app常常会遇到检测安装包版本并且更新版本的需求,直接上代码: let os = navigator.userAgent; document.addEventListener('plusready', () => { plus.runtime.getProperty(plus.runtime.appid, inf => { let ver = inf.version; if (/iPhone/.test(os)) { this.$http.
2021-01-21 10:16:42 184
原创 深拷贝浅拷贝的理解
如上,通过对数组的for循环,即可实现对数组的深拷贝了。通过Array对象的纯函数能更快的实现一层深拷贝:[2,3,5,7,11].map(x=>x)
2020-11-16 11:31:52 545
转载 前端常用的动画库
一、Animate.css目前最通用的动画库,是一个CSS3动画库,内置了很多典型的css3动画,兼容性好使用方便。动画演示使用文档二、Anime.js一个强大的、轻量级的用来制作动画的javascript库。它适用于任何CSS属性,单个CSS转换,SVG或任何DOM属性以及JavaScript对象。使用文档三、Magic.css一款独特的CSS3动画特效包,你可以自由地使用在您的网页中。只需简单的在页面上引入 CSS 文件: magic.css 或者压缩版本 magic.min.css
2020-10-22 17:17:09 6309
原创 js加减乘除保留2位小数
在写代码时直接使用+ - * / 对数字进行计算时不注意可能会一些bug(特别是两小数之间的运算),比如你不小心传入的值不是number类型,整数和浮点数相乘出现了很多位小数,两个小数相加减出现多个小数等…整理一下方法:传入a,b,运行结果得到c,并且始终保持两位小数加 addfunction add(arg1,arg2,num){//num为保留位数,不传时不四舍五入 arg1=Number(arg1); arg2=Number(arg2); var r1=0,r2=0,m try {r1
2020-10-21 15:42:45 2770 1
在线wps完整使用示例
2022-09-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人