- 博客(36)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 swiper堆叠图实现分析及参数解释
swiper 4.5.1、首先我们是基于effect切换效果中的"coverflow"来实现，然后配合coverflowEffect里的一些参数设置，达到上述效果
2023-03-30 16:31:45
667
1
原创 vue 在方法的默认参数中加入自定义参数
原方法 ： fnName()加自定义方法： (默认参数)=>fnName(默认参数, 自定义参数)tip：默认参数不一定要全部列出用element的表格formatter举例
2022-04-14 10:09:46
2003
2
原创 vue页面单独引入外部JS，并处理callee语法报错
使用情景：登录页需要引入一个外部js插件实现背景动效，1是不想全局引用，2是全局引用时触发时机也有问题。如果js中有入口方法，可直接export 方法，再在vue页面执行方法即可我要加载的js，需要整个加载执行，于是把整个js作为一个对象export，再在页面执行start()即可实现整体加载效果在加载的时候，js报语法错误：Uncaught TypeError: 'caller', 'callee', 'arguments' properties may not be acces.
2022-03-30 11:24:13
1908
1
原创 css 实现局部模糊 backdrop-filter
css3有很多属性，平时没用到真没注意。百度的时候词不达意，但其实很简单，记录给有缘人^_^先看效果，这是一张canvas地图，我需要在上面局部加上毛玻璃效果。网上很多说使用两张图片再对其中一张进行filter。但其实在图片的位置上面定位一个你需要模糊的块，再使用backdrop-filter就行了代码示例： <!-- 地图 --> <div id="mapContent"> <!-- 左右区域 --> &.
2022-03-08 10:20:39
1639
原创 xlsx导出表格合并单元格边框样式缺失
工作的时候遇到这个问题，找了很久，最后根据这位大哥的方法稍做修改解决了问题。在此记录总结一下，以免之后用到//调用传参addRangeBorder(wb['Sheets']['分组表']['!merges'], wb['Sheets']['分组表'])//给合并行列赋值样式 addRangeBorder (range, ws) { let cols = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L",
2021-08-18 15:18:02
2234
1
原创 vue使用print.js详解（打印不全、样式丢失等）
首先网上已经有很多使用步骤，比如https://www.jianshu.com/p/c5363ddf7d43相关链接：pringt.js github地址里面也有使用说明主要记录以下使用时发现的问题：1.样式问题我使用的element组件，发现分栏布局 xs\md\lg没有效果。我想大概这种组件封装的样式使用都有点问题。从这思路去入手解决吧。我看了许多，目前好像没有什么好的解决样式的方法。（我的改动不大，把css改成了本地媒体查询显示百分比。当然打印时，只使用基础的显示样式，不会根据屏.
2021-07-12 15:12:57
10583
7
原创 vscode保存自动格式化+eslint语法格式化配置
{ "editor.tabSize": 2, "eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复 "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验 "prettier.semi": false, //去掉代码结尾的分号 "prettier.singleQuote": true, //使用单引号替代双引号 "javasc.
2021-03-22 10:46:25
523
原创 弹窗组件封装： 原生js封装toast 、二次封装element $confirm
/** * 自定义toast弹窗 * @param {*} value * @param {*} type text\fail\success 默认不传使用 text * @param {*} duration 持续时间 */ static _toast (value,type,duration=3000){ // 唯一id标识 let uniqueIds = 'poemTast_' + parseInt(Math.random() * 1000)...
2020-12-11 11:17:07
825
原创 前端通过http请求外网反馈，判断当前是内网还是外网
遇到一个需求，项目私有化部署后，不能使用外网，无法使用外部资源链接。需要程序判断当前环境是外网还是内网，以兼容内、外网两种使用方式，分别做处理。 // 当前vue项目，所以没有使用jquery、ajax。而使用原生httpRequest let that = this // 第一步：建立所需的对象 var httpRequest = new XMLHttpRequest() // 第二步，获取一个公网链接，可以是你原本要访问的地址 .
2020-09-15 19:25:54
3834
原创 vue动态配置路径，多路由复用同一页面地址，并分别缓存
在工作中有这样一个需求，同一页面，根据不同的路径地址，在页面上使用不同的配置参数在vue官方文档中有以下描述，仔细就会明白其次这个动态路径的参数，我们想要可不传也同样能访问，在路径上加一个?号即可...
2020-06-23 16:46:30
5031
5
原创 windows vue-cli打包用nginx部署详记
百度答案千千万，不行咱就换~ 这是我部署vue-cli的过程记录，如有帮助到其他人，也很开心鸭1.下载nginx windows版本http://nginx.org/en/download.html1.1 nginx基础控制命令start nginx 启动nginxnginx -s reload 重新加载配置文件nginx -s quit 退出ngin...
2020-03-20 17:03:58
451
原创 js自动识别显示url链接对应的网站ico图标
如图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
2019-11-22 12:02:22
2574
原创 npmjs 注册上传代码流程
记录贴，初次使用的过程，很多也是百度的，在此作详细记录以便其他同学使用网站链接：https://www.npmjs.com1.注册用邮箱注册，注册成功后会发送一封邮件，到邮箱点击链接即可。ps: 这么简单还用的着说? 因为我注册好后，发现点了邮箱的链接，还是提示我未认证，看着邮箱里的一串认证ID也不知道往哪儿填。最后发现，最先发的一封邮箱我没看到，点了就可以了。（注意邮箱是否有遗...
2019-10-16 12:01:58
755
原创 src链接一张透明的png图片，解决使用img标签不写src出现灰色边框
我的功能需求是，在富文本里使用img标签，但我用的是background显示图片，img有宽高，src里没有值，导致显示了默认灰色边框。解决办法：src里链接一张透明的png图片，不影响背景图片显示，并且能使用img标签,不会再出现边框...
2019-06-06 09:26:34
1689
原创 vue 父组件向子组件audio传值并实时更新
自己封装了一个audio组件，从父组件获取数据后更新到其子组件上父组件：（theUrl 为传过去的值）<el-row class="check_audio"> <VueAudio ref="audio" :theUrl="checkForm.recodrFile" /></el-row>子组件：：我自己的配置项就不多放在上...
2019-04-15 13:30:27
939
原创 微信小程序antv使用详解
1.配置项目到github上把项目下载下来，我的微信开发版本没有更新，用的是旧版本，新版本地址2.目录结构按时github上的提示，配置出来项目是这样的3.使用图例假设我们要使用这种图例样式，在antv-f2 demo里找的一个,把右边的代码中，script标签里的代码复制过来index.json{ "usingComponents": { ...
2019-01-18 16:42:38
6240
原创 js判断ios和android 分别加载不同的css
原本是为了解决line-height在两个端显示不一样的问题，干脆就分别使用样式好了var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 ...
2019-01-10 11:42:02
991
原创 IOS兼容问题（复制到剪贴板）
本来使用的document.execCommand("Copy"),结果发现IOS复制不到剪贴板我的html结构如下<div class="form_copy"> <label class="form_copy_item" for=""> <b class="text">加盟热线：&l
2018-11-14 16:30:16
3346
1
原创 IE浏览器兼容问题
1.flex-direction: column;不竖向排列解决方案：在IE中，flex-direction: column和align-item不能同时使用,需要把align-item删掉2.位置偏移解决方案：在高版本浏览器中使用了position:absolute，有时候只指定top或left，在IE上不行，需要两个边距都有固定的值。3.ie对自定义标签例如main、foote...
2018-11-14 15:38:35
476
原创 拖动滚动条，显示阶段数据的值
实现如下图的操作，拖动红色块改变滚动条及块上的值 。该值代表 x 人团购享受 xx% 的折扣 源文件已上传下为源代码，只是没有图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport
2018-10-24 18:52:12
565
原创 移动端字体点大小转像素转rem
1.ctrl+k把字体的单位改为像素2.如果用px那直接除以倍数就好，我用的less计算//less代码// 手机端适配@media (min-width: 320px){html{font-size: 32px;} }@media (min-width: 360px){html{font-size: 36px;} }@media (min-width: 375px){ht...
2018-10-09 11:21:07
435
原创 Plupload 节点改变后不再触发上传事件
如图上传成功后，把上传元素往后移了，位置发生了变化，再次点击就不打开文件选择框，点击元素原来的位置可以。这时候，需要在上传成功后，使用uploader.refresh(); 重新加载一下事件，就可以了。 $(function () { // 图片上传成功后 uploader.bind('FileUploaded', function (up, f...
2018-09-29 11:59:47
1102
转载 nth-child的使用
:nth-child(n) ---->选中某个元素，该元素必须是某个父元素下的第n个子元素；p:nth-child(n) ---->选中p元素，且该p元素必须是某个父元素下的第n个子元素注意：n是从1开始的如下代码，p:nth-child(1)，只会选中第二个div中第一个子元素p;不会选中第一个div中的第一个p，因为第一个div中第一p元素不是第一个子元素...
2018-09-28 16:43:05
1794
原创 微信小程序view中文字、rich-text无法换行
扎心的效果是这样的，超出的部分它居然。。不自。。动换行在试过 white-space:pre-line / flex-wrap:wrap 什么的无果后只需轻轻的加一句 word-break:break-all; OK...
2018-09-28 15:02:43
7151
原创 windows下nginx简单使用说明
在调试h5页面的时候想在手机端看效果对不对，对于公司这个电脑配置~不想多开一个webstorm或者hbuilder来访问地址。IIS又搭不好~~~~~1.下载nginx2.nginx常用指令start nginx 启动nginx nginx -s reload 重启nginx nginx -s stop 关闭nginx 3.配置访问路径（conf/ngin...
2018-09-04 10:59:54
191
原创 vscode 自动添加 css 兼容代码插件
在用一些css3的样式的时候，在ie浏览器可能会出现不兼容的情况，而兼容性代码自己写太麻烦。我使用的编辑器：vscode1.打开扩展程序，输入 autoprefixer 查找插件2.安装好后运行：npm i -g autoprefixer3.在菜单里设置：File -> Preferences -> Keyboard Shortcuts:{ "key"...
2018-08-22 15:06:08
17349
4
原创 全套安装node、git、npm、cnpm、vue-webpack
每次用vue的时候都要去百度这些地址，为了方便，就自己记录一下安装过程，以便查看。1.安装node.jsNode.js 官方下载页面：https://nodejs.org/en/download/current/ 直接下载最新版进行安装查看是否安装成功：node -v2.安装npm输入命令：npm install查看是否安装成功： npm -v3.安装cn...
2018-08-13 11:35:07
4035
原创 码云身份认证失败
1.控制页面--用户账户--凭据管理器--windows凭据2.删除git凭据3.重新填写 git config --global user.name 和user.email注意：（我是删除后再执行上传，提示输入用户名和密码，此时的用户名密码为登录时的账号和密码（非三方登录））...
2018-07-10 17:48:17
4332
原创 flex多行弹性布局
在父元素设置display: flex;flex-flow:row wrap;justify-content: space-between;原本以为使用align-content这个属性，结果一直不成功，然后在一个角落看到一个说明 align-content：在父元素内设置，用于确定子元素之间在纵轴上的排列，前提是子元素的宽度之和比父元素的宽度要大，且父元素要设置换行（flex-wrap：w...
2018-06-07 18:29:49
11881
6
原创 h5页面ios无法识别二维码（iframe）
估一个微信公众号活动的页面，结果发现ios无法长按识别二维码，安卓可以。看了很多说法，但是！都没有解决~。最后发现是iframe的原因，那个长按识别二维码的页面是通过iframe里点击再打开，还是属于iframe里的页面，无法识别到。解决方法：不要从iframe打开，直接跳转到那个页面。（今后打洗你我都不用iframe了）...
2018-06-06 13:42:56
3495
原创 echart 柱状图+折线图重叠+虚线、点样式调整
需求需要，第一次使用echart，记录一下，先看一下最终效果图直接看代码及注释吧。html<div id="x_count_echart"></div>css#x_count_echart{ height: 460px; width: 500px;}js，设置的有点多哈，可以看最后说明// 基于准备好的dom，初始化echarts实例 var myC...
2018-05-25 17:57:25
6828
原创 前端常见bug备忘录
css设置滚动条并加hover效果::-webkit-scrollbar{}//滚动条大小宽度等::-webkit-scrollbar-thumb{}//滚动条滑块::-webkit-scrollbar-track {}//滚动条滑道要增加hover效果直接在里面写&:hover{}eg:鼠标移上去改变滑道的样式 ::-webkit-scrollbar-track {...
2018-04-16 15:32:22
466
原创 vue2.0 audio/img 绑定 src 无效(unknown) 的解决方案
如果 :src=’value’ 或者 v-bind:src = ‘value’ 都不行的话，试试这样：这是dom里的内容&lt;audio ref="audio" src="" controls="controls"&gt;&lt;/audio&gt;在事件里给ref为audio的节点赋值audioUrl = r
2018-04-12 17:32:14
10443
1
原创 前端性能优化基础知识--幕课网
作为一个前端小码农，在页面样式都能实现以后，就开始考虑：同一个效果，我该用什么样的方式和代码去实现它比较规范？前两天逛幕课网发现了两门课程–《前端性能优化-基础知识认知》和《前端性能优化-通用缓存SDK》，哎哟，这不正是我想了解的吗~reflow和repaintreflow（回流）：是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。因为回流可能导致整个...
2018-03-17 11:16:27
269
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人