前端
关注
分享
扫一扫
Lv骚年
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
iframe内嵌页面 获取麦克风权限
iframe嵌入mic权限获取原创 2022-08-15 21:56:03 · 4876 阅读 · 1 评论 -
flex容器内部溢出内容无法滚动
问题： flex容器内部溢出内容无法滚动原因：flex容器内默认使用的flex-end 贴靠方式，会导致浏览器以为容器最后没有内容溢出解决： justify-content： flex-start原创 2022-01-21 00:00:17 · 1140 阅读 · 0 评论 -
axios发起请求 路径解码后多出点号
原因： 直接在swagger上复制的请求路径，有时候会有些稀奇古怪的问题， 手写一次就好原创 2021-06-16 23:28:23 · 220 阅读 · 0 评论 -
js判断是否是移动端并缩放
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { // 是移动端打开 document.getElementsByTagName('body')[0].style.zoom=0.2} else { // 不是移动端打开}原创 2021-03-23 10:39:16 · 311 阅读 · 0 评论 -
webpack 使用 NormalModuleReplacementPlugin 项目差异化打包
情景：项目中包含多个模块，不同场景需要打包的模块不同，需要设置对应命令进行差异化打包。解决方案：使用NormalModuleReplacementPlugin 插件判断打包场景，引入需要的模块文件1：vue.config.js 中使用插件，设置识别字符串‘-APP_TARGET’plugins: [ new webpack.NormalModuleReplacementPlugin( /(.*)-APP_TARGET(\.*)/, function(resource) {..原创 2021-02-21 17:53:30 · 2319 阅读 · 0 评论 -
接口返回Excel文件二进制流，接收下载
1：首选请求头需要加上接收类型responseType: 'arraybuffer'2：数据下载// type：文件类型； fileName: 文件名称getExcelExport(param).then((res) => { this.isExcel(this.type, this.fileName, res)})isExcel (type, name, data) { const link = document.createElement('a') con原创 2020-11-27 18:06:34 · 1608 阅读 · 0 评论 -
webpack根据需求配置打包模块及打包指令
问题：一个系统包含多个功能模块，打包的时候如何根据设置 只选择其中的部分模块方法：不用系统需求设置不同的打包配置，步骤如下1package.json中添加打包指令（这里的jdi是自定义的字符串）code："build:jdi": "vue-cli-service build --jdi",2vue.config.js配置文件中使用‘NormalModuleReplacementPlugin’插件，打包时动态替换资源code：plugins: [ new w原创 2020-10-10 15:19:41 · 1316 阅读 · 1 评论 -
css 设置border透明度
border的color使用rgba()border-bottom: 1px solidrgba(20,81,154,0.5);0.5 就是透明度注意：使用rgba 不是 rgb原创 2020-05-19 18:16:26 · 22972 阅读 · 0 评论 -
js获取手机型号和系统
在H5页面的开发中，肯定会遇到获取手机的型号等需求，使用js的navigator对象，能获取到有关浏览器的相关信息，但想获取手机使用的系统等更多内容还是有局限性的。在网上搜到一个好用的获取手机型号和系统的插件 mobile-detect.js使用方法下载地址：https://github.com/hgoebl/mobile-detect.js/2.引用mobile-detect.js...转载 2019-07-29 17:53:29 · 1453 阅读 · 0 评论 -
h5页面div拖动
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <...原创 2019-07-22 14:23:03 · 1810 阅读 · 0 评论 -
IOS在Input失焦后，页面移位了，无法点击
解决代码：var u = navigator.userAgent; var flag; var myFunction; var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isIOS) { document.body.addEventListener('focusin', () => { //...原创 2019-08-19 15:32:37 · 322 阅读 · 0 评论 -
同时使用vue 和 jquery， jquery事件绑定失效
问题：一个h5项目同时引用了vue.js和jquery.js， 发现jquery绑定的事件失效。原因是：vue会重新渲染dom,加上是异步实例vue.所以正常写程序的话jq的$()获取的元素不是vue渲染后的元素.解决办法：先加载vue.js，让页面渲染完成后加载jq，给jq绑定ready事件$(document).ready(function(){ ...原创 2019-08-21 15:36:01 · 6522 阅读 · 0 评论 -
canvas滑动验证码
演示地址：https://yeild.github.io/jigsaw/demo.html用法： 引入jigsaw.min.js jigsaw.init({ el: document.getElementById('container'), onChangeImgSrc:[ ... ], onSuccess: function () { ....原创 2019-09-04 18:12:10 · 676 阅读 · 0 评论 -
移动端页面在IOS里滑动不顺畅解决办法
开发移动端的同学可能都知道，当在你用overflow-y:scorll属性的时候，内容超出容器溢出滚动的效果很迟顿，特别是在IOS系统里，通常情况下，我们为了追求好的用户体验，会使用屏幕滚动插件better-scroll了，这个插件是真心好用，但是有些情况下我们可能并不想那么麻烦，而且页面的体验要求也没有那么高，下面给大家介绍一个简单偷懒的办法．这时候可以使用-webkit-overf...原创 2019-09-20 13:30:38 · 3841 阅读 · 0 评论 -
css3动画设置无效
首先 确认设置的元素为块级元素 或是 inline-block原创 2019-09-20 15:08:54 · 7639 阅读 · 0 评论 -
css 设置文字 周边阴影效果
color: #440700; font-weight: 600; text-shadow: 2px 2px 3px #fff, -2px 2px 3px #fff, 2px -2px 3px #fff, -2px -2px 3px #fff;直接在样式中给text-shadow设置多个值即可。...原创 2019-09-20 15:23:28 · 1119 阅读 · 0 评论 -
v-for搭配swiper渲染轮播
如果设置的swiper循环轮播，即loop=true，v-for渲染的slide前后会复制多个循环的占位slide，当v-for 渲染的内容更新时，需要重新更新swiper 前后复制的 占位slide，这要求实例化swiper时设置observer:true,observeParents:true,...原创 2019-09-25 17:07:57 · 1649 阅读 · 0 评论 -
input标签 设置纯数字输入
input标签 设置纯手机号输入（键盘输入或粘贴时自动去除非数字字符）解决方案：<inputtype="tel"placeholder="请输入11位手机号码" oninput="value=value.replace(/[^\d]/g,'');if(val...原创 2019-09-26 18:38:46 · 9814 阅读 · 0 评论 -
解决移动端line-height不居中问题
问题：在移动端中使用line-height=height实现文字垂直居中时，在安卓手机会发现文字偏上！解决：1、利用flex布局中的垂直居中属性实现垂直居中,父元素设置display:flex;height:1rem;align-items: center;子元素 transform: scale(0.5); transform-origin: left cent...原创 2019-09-27 16:25:28 · 1875 阅读 · 0 评论 -
webstorm注册
https://licensez.com/原创 2018-09-25 15:52:17 · 928 阅读 · 0 评论 -
webpack配置
错误整理1：TypeError: CleanWebpackPlugin is not a constructor参考：https://blog.youkuaiyun.com/qq_36242361/article/details/907092582：原创 2019-07-09 17:38:54 · 108 阅读 · 0 评论 -
前端页面布局常见问题
1，position：absolute 定位后元素超出页面；解：需要设置父级元素 position：relative。2，z-index 设置无效；解：z-index仅对position relative或是absolute定位的元素有效。...原创 2019-06-03 17:07:52 · 798 阅读 · 0 评论 -
css3 精灵图制作动画
示例：background-size: 1600% 100%;-webkit-animation: FireAnimation 3s steps(16) infinite;-o-animation: FireAnimation 3s steps(16) infinite;animation: FireAnimation 3s steps(16) infinite;@-webkit-...原创 2019-06-06 17:31:28 · 628 阅读 · 0 评论 -
判断微信，安卓及提取URL参数代码Code
//终端判断var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端/*alert('是否是Android：' + isAndroid);alert...原创 2018-10-31 15:38:37 · 1291 阅读 · 0 评论 -
微信浏览器 点击 出现卡顿现象及解决方案
做的小游戏在手机微信中打开测试和在UC浏览器中测试， 点击时候微信浏览器出现明显的卡顿现象， 查阅发现是：主要是由于200ms超时导致内核不一定会一直处理touchmove事件，一旦超时会将后续所有的事件转交给UI处理，导致touchmove不会一直触发。系统浏览器也存在同样的问题，为了解决开发者需要，建议开发者在touchstart时调用event.preventDefault，这样就可以保...原创 2018-10-22 17:21:47 · 7358 阅读 · 0 评论 -
用JQuery 不能直接获取到canvas对象
在跟着慕课教程敲‘爱心小鱼’的时候，看到老师用的javascript获取的DOM对象，然后进行getContext('2d')操作，我就想着使用Jquery来试一试， 结果发现提示jquery的对象提示.getContext('2d') is not a function,调试半天无果，百度发现Jquery的对象无法使用getContext()的原生js方法，真的是给自...原创 2018-10-16 00:27:33 · 2042 阅读 · 1 评论 -
CSS浮动(float,clear)通俗讲解
首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图： 可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。 注意，以上这些理论，是指标准流中的div。 无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元...转载 2018-09-16 09:52:32 · 172 阅读 · 0 评论 -
sublime 修改emmet兼容jsx文件
安装PC上ctrl+shift+p（MacCmd+shift+p）打开面板输入emmet安装使用方法打开 preferences -> Key bindings - Users，把下面代码复制到[]内部。 { "keys": [ "super+e" ], "args": { "action": "ex...转载 2018-09-08 09:31:05 · 497 阅读 · 0 评论 -
webpack安装插件时--save和--save-dev的区别--
--save：将保存配置信息到pacjage.json。默认为dependencies节点中。--dev：将保存配置信息devDependencies节点中。因此：--save：将保存配置信息到pacjage.json的dependencies节点中。--save-dev：将保存配置信息到pacjage.json的devDependencies节点中。dependencies：...转载 2018-08-28 20:07:17 · 2658 阅读 · 0 评论 -
nginx安装
http://www.keydatas.com/html/nginx.htmlhttps://blog.youkuaiyun.com/qq_39081974/article/details/80439687 一、安装准备首先由于nginx的一些模块依赖一些lib库，所以在安装nginx之前，必须先安装这些lib库，这些依赖库主要有g++、gcc、openssl-devel、pcre-devel...转载 2018-11-12 18:02:17 · 104 阅读 · 0 评论 -
iphone 适配
https://www.cnblogs.com/lolDragon/p/7795174.html转载 2018-11-21 11:08:55 · 131 阅读 · 0 评论 -
安卓微信浏览器上css3动画 不显示
移动端在使用css3 + 精灵图 制作动画时微信打开ios显示正常， 安卓机不显示；先后试过rem，px单位，同样不好使。问题代码（不显示）：background-size: 83.2rem 5.0266666667rem;修改成（正常显示）：background-size: 1600% 100%;类似问题链接：https://www.cnblogs.com/luc...原创 2019-06-06 16:55:03 · 553 阅读 · 0 评论 -
idea或webstorm 配置sass
第一步 找到idea preferences第二步 在Plugins中下载File Watches 插件（如果Tool里面有，此步略过）第三步 点击File Watches 面板左下角的+，新增监听任务，建议选择Scss第四步 配置Scss 监听命令其中，Program是你Scss在你本地的路径，下载好s...转载 2019-05-01 10:19:07 · 726 阅读 · 0 评论 -
JavaScript中的Date对象在Safari与IOS中的Invalid Date
当我们用JavaScript实例化一个日期对象时，我们可以这样用:var date =new Date();上面这段代码是获取当前日期，这段代码在Firefox、Chrome、Safari浏览器中都可以运行。但是如果我想根据字符串获取日期，问题就来了。看下面代码。var date =new Date("2016-05-31 08:00");这段代码是获得字符中指定的日期，它Fi...转载 2019-04-29 20:52:38 · 362 阅读 · 0 评论 -
遍历JSON对象中的key 和 value
var json= { "Type": "Coding", "Height":100 }; for (var key in json) { alert(key); //Type, Height alert(json[key]); //Coding, 100 }$.each(json, function(i) { alert(json[...转载 2019-04-25 10:15:45 · 4871 阅读 · 0 评论 -
webstrom out of memory
找到WebStorm.exe.vmoptions这个文件，路径如下webstorm安装主目录>bin>WebStorm.exe.vmoptions更改为第二行：-Xms526m第三行：-Xmx1024m（ps：这里-Xms最大值不能超过1024，否则webstorm将无法打开）---------------------作者：bossxu_来源：优快云...转载 2019-05-05 14:41:10 · 508 阅读 · 0 评论 -
前端cookie 读写和删除
https://www.cnblogs.com/maderlzp/p/7843365.html转载 2019-04-16 16:49:32 · 1429 阅读 · 0 评论 -
让sublime text3支持Vue语法高亮显示
让sublime text3支持Vue语法高亮显示文章转自http://www.cnblogs.com/kongxianghai/p/6732429.html1.准备语法高亮插件vue-syntax-highlight。下载地址：https://github.com/vuejs/vue-syntax-highlight下载页面并下载：解开压缩包vue-sy...转载 2019-04-11 14:27:12 · 116 阅读 · 0 评论 -
html页面定位到指定位置的4种实现方式
主要运用.scrollintoView()跳转定位；示例： location.href = "#top"; $("html,body").animate({scrollTop: $("#jys").offset().top}, 500); $("#cao")[0].scrollIntoView(); document.forms[0].scrollIntoVie...转载 2019-02-22 10:38:12 · 12099 阅读 · 1 评论