
Web前端
文章平均质量分 54
Web
优小U
Keep on learning as long as you live.
展开
-
Tauri 入门教程
Tauri:构建跨平台的快速、安全、前端隔离应用。Tauri 是一个相对较新的框架,允许您利用基本的 Web 技术和Rust编程语言快速创建跨平台应用程序。Tauri 基于 Rust 构建,在设计上具有安全性和高性能,与任何前端框架兼容,并允许您为所有主要桌面平台(包括macOS、Windows和Linux操作系统)创建可执行应用程序。每个 Tauri 应用程序都包含一个核心进程,作为应用程序的入口点,并且是唯一可以完全访问操作系统的组件。原创 2022-11-28 08:00:00 · 15731 阅读 · 6 评论 -
JS 中如何优雅的使用多层嵌套属性而不会发生报错
JS中使用多层嵌套属性时如何优雅的判断是否存在防止程序报错,小伙伴看过来~原创 2022-11-24 23:47:32 · 775 阅读 · 0 评论 -
VSCode 代码风格统一设置eslint + stylelint
安装依赖"babel-eslint": "^10.0.1","eslint": "^5.16.0","eslint-plugin-vue": "^5.0.0","stylelint": "^13.13.1","stylelint-config-standard": "^22.0.0"配置eslint配置以下主要是考虑到代码格式化及可自动修复的常用配置,具体配置可查看官网配置:module.exports = { root: true, env: { browser: tr原创 2021-06-10 14:16:11 · 1149 阅读 · 0 评论 -
postMessage跨域、跨iframe窗口消息传递
文章目录1. 作用2. 语法3. 使用4. 兼容性5. 应用场景说起postMessage 可能平时大家也不遇到,但是如果遇到问题了,又想不起它,这里记录下防止后面忘记它。1. 作用window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如,在一个页面和它生成的弹出窗口之间,或者是页面和嵌入其中的iframe之间。通常情况下,受浏览器“同源策略”的限制跨域问题一直是个问题,window.postMessage()提供了一个受控的机制来安全地规避这个限制(如果使用原创 2021-03-17 16:16:32 · 2986 阅读 · 15 评论 -
VSCode设置命令行终端为Git
VSCode 自带的终端集成的终端是windows系统自带的,看着是不是很丑呢,没有色彩,关键是没有Git信息,提交前还需要确认是不是当前分支,体验大大的不好。设置Ctrl + , 打开设置界面,搜索shell:windows,找到这个选项:点击Edit in settings.json ,然后设置"terminal.integrated.shell.windows"为本机git的路径:{ "workbench.startupEditor": "newUntitledFile",原创 2021-03-09 10:13:09 · 2197 阅读 · 4 评论 -
功能强大的JavaScript 拖拽库 SortableJS
功能强大的JavaScript 拖拽库 SortableJS官网:http://www.sortablejs.com/示例:配置项:var sortable = new Sortable(el, { group: "name", // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] } sort: true, // boolean 定义是否列表单元是否可以在列表容器内原创 2021-01-17 14:35:15 · 2867 阅读 · 6 评论 -
浏览器端判断当前设备的运行环境
浏览器端判断当前设备的运行环境可判断环境:androidiOSweixinLinuxwindowsIEMac直接先上代码:let device = function(t) { let userAgent = navigator.userAgent.toLowerCase(); let n = function(e) { let t = new RegExp(e + "/([^\\s\\_\\-]+)"); return e = (use原创 2021-01-03 20:50:23 · 3659 阅读 · 4 评论 -
uniapp 支付(支付宝,微信支付)
uniapp 支付前端处理:// 发送到后台的数据var payData = { "isUpgrade": 'N', "lavel": level, "userid": this.user.id // 用户id}uni.getProvider({ service: 'payment', success: function (res) { if(res.provider && res.provider.length > 0){ if(_self.i原创 2020-12-21 23:43:23 · 3982 阅读 · 3 评论 -
移动端根据设计稿宽度适配 px转换相对单位rem
为了计算方便,一般建议 1rem = 100px,要换算这样的比例需要设置html对应的fontSize,计算规则如下:fontSize = 屏幕宽度 / 设计稿宽度 * 基本宽度如果基本宽度是100,那么 1rem = 100px假如设计稿宽度是 750px , kaifa 如果想1rem=100px,那么fontSize=.wrap { width: 7.5rem; /* 6.4rem 10.8rem */}var baseSize = 100; // 1rem = 100px;var原创 2020-06-19 17:16:39 · 3240 阅读 · 0 评论 -
表单元素聚焦状态回车提交表单问题小记
表单元素聚焦状态回车自动提交表单问题情景多个表单元素且有个button的type没有写,或者写了type=submit;当表单只有一个元素方案问题1:将button 加上type=button问题2:这种情况无论有没有button,type是什么都会有问题,解决办法是加一个隐藏的 input 元素,元素不能是type=hidden, 只能用css隐藏,且不能加type=hidden;以上两个情况都可以用代码禁用回车事件,但是需要考虑到其他表单元素会不会受影响。...原创 2020-06-19 11:08:01 · 237 阅读 · 0 评论 -
CSS list-style样式集锦
大家在写网页的时候,免不了写ul li,并且很多人不喜欢自带的li样式,所以一般会将li的样式设置为none,但是在有的时候,我们需要对一类资源进行编号,如新闻列表,博客列表,商品列表等等,并且有的需要进行阿拉伯编号,有的需要字母编号,这时候如果自己手写的话就麻烦了。没错,不要忘记list-style这个属性,它的功能还是蛮强大的哦,请看: list-style定义:用于在一个声原创 2017-03-10 09:20:47 · 3479 阅读 · 1 评论 -
js或jQ监测div的高度
// jquery-resize.js(function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j="resize",d=j+"-special-event",b="delay",f="throttleWindow";e[b]=250;e[f]=true;$.event.special[j]={...原创 2018-03-09 12:56:08 · 2591 阅读 · 2 评论 -
带参数的正则表达式
需求:1.替换字符串中特定的字符 如: “abc123abc456” 将字符串中的abc替换为”$”var regStr = "abc";var reg = new RegExp(regStr,'g'); // 'g'代表全局var testStr = "abc123abc456";testStr.replace(reg,"$"); // $123$456如果需要更换规则,只需...原创 2018-02-13 14:55:08 · 4289 阅读 · 1 评论 -
Session过期,如何跳出iframe框架页的问题
Session过期,如何跳出iframe框架页的问题web开发中经常会有这种情况,在一个主页面中包含侧边导航菜单和iframe,点击菜单项,对应页面会在iframe中显示,整个页面不会刷新。但是如果设置了会话Session,在会话过期后再操作会自动redirect重定向到登录页面,经常会出现在session过期后,再点击菜单项,登录页面显示在iframe中而非显示在当前窗口的情况。解决办法,在登录页转载 2017-06-13 15:33:47 · 725 阅读 · 4 评论 -
递归方法无限级菜单--javascript v1.0
菜单遍历用递归的方法最简单,不用考虑有多少级,可以实现全部遍历,前提是后台代码的规范性,一般从后台返回的数据是json格式,这里有两种结构,一种是用pid的形式,一种是用children的形式。原创 2017-05-19 16:53:30 · 5361 阅读 · 5 评论 -
layui结合form,table的全选、反选v1.0
layui结合form,table的全选、反选v1.0原创 2017-05-17 16:59:47 · 11836 阅读 · 2 评论 -
ajax结合接口 分页插件
利用ajax调用接口数据做分页功能1. 分页方法,写在公共js里面以供调用,代码如下: 因为采用了layui中的样式,所以需要引入layui.css,可以去layui官网下载:http://www.layui.com 如果不想使用layui可以自己定义样式,下面的代码应该都看得懂吧。//分页 参数列表:当前页数(从1开始),总页数,方法名,分页容器的IDfuncti原创 2017-05-17 16:08:43 · 677 阅读 · 1 评论 -
js跨域 ajax跨域问题解决
想要通过ajax获取服务器内容,如果在本地获取,则会出现跨域问题:XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is t原创 2017-04-01 14:24:37 · 686 阅读 · 2 评论 -
jquery中attr和prop的区别
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单:对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。上面的描述也许有点模糊,举几个例子就知道了。转载 2017-04-01 12:00:22 · 352 阅读 · 1 评论 -
JS实现键盘监听(包括组合键)
转载自:http://blog.youkuaiyun.com/changqing5818/article/details/50037607 document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.argum转载 2017-03-31 09:26:12 · 942 阅读 · 1 评论 -
js中的时间与毫秒数互相转换,倒计时
1、日期格式转换成毫秒数var oldTime = (new Date("2017-03-22 11:11:11")).getTime(); //得到毫秒数 也可以支持 "2017/03/22 11:11:11"2、毫秒转化成时间 var date = new Date(oldTime); //得到普通格式的时间3、倒计时原创 2017-03-22 09:42:45 · 3776 阅读 · 2 评论 -
图片预览自适应固定宽高div
Document li{ list-style: none; float: left; margin-left: 10px; width: 200px; height: 160px; border: 1px solid #ccc; text-align: center; line-height: 160px; } img{ ve原创 2017-03-17 14:27:00 · 1720 阅读 · 2 评论 -
layui设置radio
前提:引入layui.css和layui.js1.用jquery设置layui表单的单选按钮 html代码如下: 性别 javascript 代码: res为结果集$('[name=sex]').each(function(i,item){ if($(item).val()==res.sex){ $(item).prop('checked',原创 2017-03-13 18:02:56 · 28104 阅读 · 9 评论 -
jquery触发点击事件
1.jquery触发事件函数trigger(type,[data])在每一个匹配的元素上出发某类事件。这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个submit,则同样会导致浏览器表单的提交。如果要阻止这种默认行为,应返回false。2.提交表单$("form:first").trigger("submit")3.给事件传递参数原创 2017-03-13 15:01:39 · 25553 阅读 · 2 评论 -
全选/反选
全选a a1 a2 a3 全选b b1 b2 b3 $(document).on('click','input[name^=checkAll_]',function(){ var name = $(this).attr('name').split('checkAll_')[1]; var state = $(this).pr原创 2017-03-13 10:48:46 · 418 阅读 · 2 评论 -
JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)
一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding、Border 与 Margin 的宽度,四个加起来才是 div 真正占有的宽度。JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)全都有了!var content = $(‘div’). wid原创 2017-03-13 10:18:06 · 44357 阅读 · 2 评论 -
ueditor video 设置宽高的问题(uni app)
ueditor 上传的视频的时候默认有宽高,默认款420px, 如果要想宽度是100%就不好设置了,这时候可以借助css实现:/deep/ .edui-upload-video { width: 100%; height: 400upx;}以上是uni-app的项目代码。原创 2020-07-04 22:11:22 · 5357 阅读 · 0 评论 -
ueditor 上传视频丢失src的解决方法
修改 udeitor.config.js 的 白名单,可以搜索 whitList, 然后修改以下代码:img: ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex','style','_url'],//加了style和_urlvideo: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', '原创 2020-07-04 20:35:40 · 974 阅读 · 0 评论 -
uni app map 地图 漂浮问题及方案
uni app map 地图 漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生组件渲染后位置固定了,而当页面图片加载完成后,就会有地图漂浮的感觉,如下图:解决方法:控制图片的宽高,让图片没加载完也占高度,这样就不会影响map加载和位置。...原创 2020-06-23 22:14:45 · 2754 阅读 · 0 评论 -
移动端 H5 分屏页面适配问题--设计稿比例与设备宽高比例不同
移动端 H5 分屏页面适配问题单位问题肯定用rem, 为了方便计算,一般取 1rem=100px, 需要根据设计稿的宽度设置合适的fontSize, 具体可以看这篇文章 :移动端根据设计稿宽度适配 px转换相对单位rem屏幕适配问题现在的设备宽高五花八门,按照rem 计算总是会出问题,因为设备的宽高比例是不同的,而设计稿的宽高是不变的,如果按照设计稿的尺寸来做,那么必须要求设备的宽高比例和设计稿是相同的,否则就会重叠或者间距过大。针对这个问题可以做一下适配,以下代码可以保证不会发生重叠:(func原创 2020-06-21 15:21:30 · 1168 阅读 · 0 评论 -
关于Chrome字体模糊解决方案
Chrome字体模糊解决方案在Chrome 浏览器有时候会发现网页字体变得很模糊,有时候又不会,当你把浏览器窗口缩小放大的时候你就会百分百看见这个微妙的过程,当然一般页面不会有这个情况,这个情况大多发生在页面弹窗 或者脱离文档流的情况。原因大多有以下几点:使用了z-index使用了 transform高度使用了百分比,而不是px使用了定位属性,且top值为百分比根本原因是以上这些...原创 2019-10-11 22:41:38 · 3453 阅读 · 1 评论 -
iOS 移动端overflow:auto 滚动不平滑及bug处理
在苹果手机上使用overflow:auto 默认滚动不平滑。 解决方案是使用-webkit-overflow-scrolling:touch bug: 会导致使用固定定位的元素,随着页面一起滚动。 fix bug: 把固定元素不放在可滚动区域,在外层在加一层。详细有关ios滚动惯性的问题移步:ios与惯性滚动...原创 2018-07-23 15:00:26 · 4164 阅读 · 1 评论 -
浏览器填写数据,跳转页面返回数据不消失
步骤一:点击按钮,保存数据,跳转页面$("#userAgree").on("click",function(){ var obj = {}; obj.username = $("[name=username]").val(); obj.telephone = $("[name=telephone]").val(); obj.verifiyCode = $("[name=veri...原创 2018-07-11 21:32:28 · 6970 阅读 · 1 评论 -
CSS 强制换行和禁止换行
强制换行 word-break: break-all; 只对英文起作用,以字母作为换行依据。 word-wrap: break-word; 只对英文起作用,以单词作为换行依据。 white-space: pre-wrap; 只对中文起作用,强制换行。禁止换行 white-space: nowrap; ...转载 2018-07-06 11:24:26 · 21139 阅读 · 1 评论 -
自定义复选框checkbox样式
html:<input type="checkbox" class="checkbox" ><label for="agree"></label>css:.checkbox { display: none;}.checkbox + label原创 2018-07-06 13:44:17 · 2509 阅读 · 1 评论 -
短信验证码倒计时代码
功能:点击获取验证码,开始倒计时,按钮不能点击,倒计时结束后,恢复原来的样子,可以继续点击。html代码:<div class="input-item"> <input type="text" name="verifiyCode" placeholder="短信验证码" maxlength="5"> <button原创 2018-07-06 14:09:38 · 1265 阅读 · 0 评论 -
ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
本文转自一位高人的博客:情郎 Blog写在前面 :从提出需求到完美的解决问题,实现过程是曲折的。需求:在前(web client)后(Restful Service)端完全解耦的模式框架下,webclient需要请求 Service 返回的图片文件(二进制流),并在client端显示。第一步思考:拿到此需求, 基于程序员的狂妄心里,思考到显示图片而已,jquery ajax直接get请...转载 2018-07-06 17:07:52 · 771 阅读 · 1 评论 -
vue-router嵌套路由,默认子路由设置
需求: 1. 底部5个tab选项卡 2. 其中一个里面又有tab选项卡 3. 显示active状态 4. 底部选项卡和子路由的选项卡都默认选择第一个选项卡举个栗子: 示例是随便写的。 1.路由文件 router/index.jsimport Vue from 'vue'import Router from 'vue-router'import Home from...原创 2018-05-17 16:25:01 · 47064 阅读 · 8 评论 -
判断textarea是否超过行数限制
限制textarea文本域只能输入5行:<textarea rows="5" id="demo"></textarea>1.判断是否有滚动条$("#demo").on("input",function(){ var realHeight = document.getElementById("demo").scrollHeight; document.getElementById("d原创 2017-09-14 19:55:23 · 9706 阅读 · 1 评论 -
ios(safar/微信)返回不执行js
问题:苹果手机返回上一页不执行js我在当前页存储了数据在webstorage,然后返回上一页,在上一页中把数据取出来。需要做的事: 1.添加头部信息:设置不缓存<meta HTTP-EQUIV="pragma" CONTENT="no-cache"> <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, ...原创 2018-07-11 11:52:44 · 3285 阅读 · 3 评论