- 博客(129)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 cmd打开跨域浏览器
情景：本地调试的时候，碰到跨域代理不了的情况，可使用跨域浏览器进行调试Mac： chrome49以前版本 open -a "Google Chrome" --args --disable-web-security chrome49以后版本 法一：open -a /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir 法二：open -n /Applications/Google
2021-06-04 15:13:18
943
原创 css边框两色效果
box:after { content: ''; display: block; width: initial; height: 2px; background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%); background: .
2021-03-31 09:40:38
1279
原创 js双层循环拿到二层循环的index值
情景描述 ：多个房间，每个房间的人数不尽相同。后端获取的数据格式是根据房间走的，如：data: [ { roomNo: '201', ... guestList: [ { name: '张三', ... }, { name: '李四', ... } ], }, { roomNo: '202', ... guestList: [ { name: '张三三', ... }, {
2021-02-26 11:21:20
1382
原创 input框在chrome浏览器下粘贴的默认底色
Chrome浏览器对于input输入框的值会有一个默认的记录，导致后续在输入的时候出现选择后在input框会出现一个默认底色，如图：这样对整个界面而言就感觉恨不协调，为了消去这种现象，可以在css中引入一下代码：input:-webkit-autofill { box-shadow: 0 0 0 1000px #ffffff inset !important;/* 浏览器记住密码的底色的颜色 */ -webkit-text-fill-color: #606266 !important;
2020-12-09 17:51:18
482
原创 小程序嵌入h5并传值
1、小程序嵌入h5页面使用web-view，这就不多说了，详看小程序官网2、小程序传值给h5，在web-view的src属性中直接拼接，例如：小程序传token给h5// 小程序端<web-view src='h5网址链接?tokenId={{token}}'></web-view>需要传多个参数使用&并列为了token安全，一般在传值时加密处理 encodeURI(token)// h5端// 接收值function getParams(name) {
2020-12-04 17:50:10
3049
6
原创 小程序swiper动态数据不显示
情景一：swiper的current不在第一页了，导致第一页的数据看不到。处理方法：在请求数据的时候重置current为0，即 <swiper class="banner swiper-box" circular="true" current="{{ current }}" next-margin="16px" previous-margin="16px" bindchange="swiperChange1" duration="500" interval="5000"> ... &l
2020-09-02 10:12:55
3222
1
原创 网页整体放大或者缩小
案例：非PC端项目，做的是固定设备上的项目。由于固定设备上的分辨率和正常的触屏设备不一，所以在开发的时候未做适配工作（即使用的是px单位）。现阶段需要将该项目来一个PC端版本的，第一想法就是使用媒体查询去处理，不过这样的工程量就有点大了，需要对每个界面每个样式做更改；后面想的是能不能整体进行一个适应的放大缩小的，这样岂不很nice，于是就碰到了css3中zoom属性官方介绍document.getElementsByTagName('body')[0].style.zoom = 0.8;注意点：zoo
2020-08-14 18:10:28
891
原创 css 宽高等比例设置
往往在处理自适应的图片在渲染为正方形的时候：第一种想法就是把图片裁剪成宽高比例1:1的图形；第二种方式我们使用js去控制图片img父盒子div的高度去和宽度相等（以上方式就比较繁琐了）；第三种使用简单的css去控制。下面就说下第三种方式啦！html格局为：<div class="box"> <img src="图片路径" alt=""></div>css布局：.box{ width: 40%; // 父盒子的宽度%，自适应 看实际情况去设置百分比
2020-07-30 14:23:17
3881
原创 element el-table 日期动态做表头table_header，并实现左右分页处理
实现的效果图：类似这种就需要日期去做表头，不能一贯使用思维去使用table去处理，很费时费力。由于本项目基于element，所以第一想法就是使用element中的el-table组件，然发现里面的demo只有一些简单的，无法满足；所以想到度娘寻求帮助，故在此做个记录。不多说，直接上代码html部分：// 这里dateArr只处理日期和星期table_header部分，前面两个el-table-column自行补充啦// :render-header是处理表头日期的分页处理<el-tab
2020-05-20 09:51:54
3321
6
原创 element-ui 使用el-backtop无效问题
基本格式：<template> <el-backtop target=".父级盒子class" :visibility-height="100" :bottom="60"></el-backtop></template>target可以省略，即：<el-backtop></el-backtop>有时候会发现这...
2020-03-31 19:28:21
6154
原创 The play() request was interrupted by a new load request
切换音频会报错The play() request was interrupted by a new load request处理方式：playPause() { var audio = this.$refs.music; // music为vue 中audio的ref值 if(audio !== null) { if(this.playFlag) { // 暂停 ...
2020-01-10 16:53:46
13581
原创 js 获取两日期间所有日期
我们在做图表类使用dates日期插件的时候，有时候从后台获取的日期往往是有数据的天数，那么其他没有数据的日期就需要前端进行补全咯！！！ // 获取所有日期 getBetweenDateList(start,end){ let result = []; let beginDay = start.split("-"); let endDay = end....
2020-01-10 16:10:21
719
原创 fatal: Not a git repository (or any of the parent directories): .git
在提交代码运行git push命令行的时候出现fatal: Not a git repository (or any of the parent directories): .git错误，是由于没有和远程git进行连接造成的。第一步：关联远程gitgit remote add origin 远程git路径第二步：提交代码到master上git push -u origin master...
2020-01-10 14:53:53
729
原创 input，textarea type为text时模拟number进行数据判断
情景：input输入值颜色与提示语颜色不一致的情况输入数字时，数字型number输入0（或者0.0）时，颜色还是placeholder颜色一样，体验不佳。故采用文本型text进行下面进行的是对输入的值进行number型和最多只能输入两位小数的判断let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/; // 判断是否是数字if ((this.mo...
2019-12-16 11:05:15
466
原创 vue与Android之间的传值
背景：Android设备中使用h5项目，这里只是说vue的使用方法vue调用Android方法：window.android.方法名 // 方法名后加()vue接收Android传过来的值methods : { // 接收Android传过来的值方法 getAndroidValue(value) { console.log(value) }},mounte...
2019-11-20 16:36:07
2657
原创 vue 封装提示语
toast.vue：<template> <div> <div class="toastTip"> <img src="../../assets/ic-tig.png" alt=""> <p>{{toastTxt }}</p> </div> </div>...
2019-11-20 09:46:58
1228
1
原创 vue 嵌套iframe并进行传值
子级iframe向vue父级传值：<template> <div> <iframe src="链接" ref="iframe"></iframe> </div></template>父级vue中mounted：mounted(){ window.addEventListener(...
2019-11-15 17:31:52
7668
5
原创 文字转语音播报链接
男音：http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=+“您要播报的文字”；女音：http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=+“您要播报的文字”...
2019-10-17 11:15:08
653
3
原创 移动端点击延迟处理--fastClick
vue安装fastClick就不用多说了吧（ npm install fastclick --save）下面主要讲的是使用fastClick的时候，在做项目的时候不要全局作用在body上面，如import fastClick form 'fastClick'fastClick.attach(document.body);这样导致的后果就是项目中所有的input和textarea点击聚焦...
2019-09-19 15:05:14
259
原创 vue 对数据进行排序
单纯的数组数字进行排序，见vue使用sort()方法排序根据数组中对象为数字情况进行排序，见下面代码sortBykey(ary, key) { return ary.sort(function (a, b) { let x = a[key] let y = b[key] return ((x < y) ? -1 : (x > y) ? 1 : ...
2019-09-10 15:48:40
35261
4
原创 数据数组获取重复字段数组集合
有时候我们对数据进行处理会放在前端进行，这样减少http请求，也算是一种优化方案。例如我们想做这种效果那我们第一想法就是点击不同区域的时候去请求后台数据，这样会导致反复请求http，增加宽带。解决方法：我们可以第一次就将所有的数据拿到，再根据不同区域去进行数据的处理，代码如下：let data = body.data;for (var i = 0; i < data.length...
2019-09-05 10:44:39
808
原创 外部js调用vue实例方法
vue函数 mounted () { window.testFun = this.testFun; // 方法赋值给window }， methods: { // vue内部方法 testFun () { }, }外部js调用<script> function test() { testFun(); // 直接通过w...
2019-08-30 14:46:14
13686
4
原创 vue axios 拦截器
Vue 项目在发布新版本的时候，往往会出现新旧版本不一致导致报错，这样就会给用户一个误导。所以在发布版本的时候出现报错的错误码时就需要给用户一个提示为此就需要在axios请求的时候来个拦截器interceptors去处理不同的response.status了import Axios from 'axios'// http response 响应拦截器Axios.interceptors....
2019-08-29 17:00:34
531
原创 下载文件流文件
downloadPdf(result) {let blob = new Blob([result], {type: ‘application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8’}); //application/vnd.openxmlformats-officedocument.wo...
2019-07-15 17:47:58
796
原创 vue-pdf 通过文件流预览pdf文件
用过vue-pdf的同志应该都知道，如果拿到的是一个pdf的在线链接在使用这个的时候会出现一个跨域问题。而后端不想去处理跨域情况，所以后面就考虑到使用文件流的形式去处理。首先，下载vue-pdfnpm install vue-pdf -D其次，模板里面引入vue-pdfimport pdf from 'vue-pdf'html：<pdf :src="src"></...
2019-07-15 17:39:59
14860
28
原创 js数组对象里面获取某个属性值相等的对象
例：var outArr=[ {"name":"张三","id":1,age:18}, {"name":"李四","id":2,age:19}, {"name":"王五","id":3,age:18}, {"name":"小红","id":4,age:20}, {"name":"小明","id":5,age:17}, {"name":"小白","id":6,age:18}];va...
2019-07-15 16:57:49
21958
原创 css 取消鼠标双击选中
有时候我们在页面上操作的时候，总会碰到鼠标连点的情况下，这样会导致你点击的文字地方出现一片蓝色选中状态，例如：导致体验效果不理想。取消上面情况：（css） -moz-user-select:none; -ms-user-select: none; -webkit-user-select: none; user-select: none;做个记录，防止遗忘。。。...
2019-07-09 09:56:55
3215
原创 去掉页面的滚动条
去掉页面上的滚动条 body::-webkit-scrollbar {display: none;}如果使用了iframe，则可以使用scrolling="no
2019-07-05 15:44:44
4094
2
原创 encodeURI和encodeURIComponent的比较
有时候我们在url跳转的时候往往会携带参数，参数中可能会包含一些特殊字符，例如：空格，下划线，加号…，这时候对后台或者前台解析的时候就读取不到这些特殊字符存在，这个时候我们就需要对特殊字符进行编码。下面针对encodeURI和encodeURIComponent做个比较：相同点：都可以对url进行一个编码；区别：encodeURI()不会对本身属于URI的特殊字符进行编码，例如冒号、正斜杠、...
2019-06-03 15:53:11
2374
原创 vue 使用sort()方法报错：“You may have an infinite update loop in a component”
特意翻译了下You may have an infinite update loop in a component （组件中可能有无限的更新循环）；最近在做一个字母和数字组合排序的vue项目的时候，第一反应就是使用sort()函数，结果在直接对对应数组进行sort()的时候，居然报错了，奇怪。。。后面百度了下，看到大家都出现这种情况，就否定了自己代码写错的疑虑。仔细一想，我是从后台获取到数据之...
2019-05-30 16:43:48
5152
原创 移动端开发底部元素margin-bottom失效的处理方式
在移动端开发的过程中，经常会有在底部进行一个元素固定定位在，这样我们主体数据有需要设置margin-bottom 去防止主体数据被底部遮挡的情况。这在android手机中这样设置是完全没有问题的，不过在ios手机上就会出现底部定位遮挡了主体内容。当时还尝试了使用padding-bottom去处理，然效果还是不太理想。查询方法后，一下两种方式是可行的：主体最后设置一个空白的div（设置好高...
2019-05-09 17:44:50
2785
1
原创 vue 时间戳转日期
封装： datetimeparse (timestamp, format, prefix) { if (typeof timestamp =='string'){ timestamp=Number(timestamp) }; //转换时区 let currentZoneTime = ne...
2019-05-09 17:28:34
1137
原创 js 获取当前天的前几天或者后几天日期
封装函数：function fun_date(aa){ var date1 = new Date(), time1=date1.getFullYear()+"-"+(date1.getMonth()+1)+"-"+date1.getDate();//time1表示当前时间 var date2 = new Date(date1); d...
2019-05-09 17:24:48
2108
4
原创 vue + webpack + emelent-ui打包后element的小图标不显示
由于针对element-ui的组件样式，我引入了element-theme-chalk 样式，下载完依赖后注入的时候，循序为：import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css';import 'element-theme-chalk';导致了在项目打包后element-ui的图标显...
2019-05-07 17:59:50
8926
3
原创 vue + echarts 饼图
html：<!-- 饼图--><div id="myChart2"/>js：// 饼图 getPie () { // 基于准备好的dom，初始化echarts实例 let myChart = echarts.init(document.getElementById('myChart2')); // 绘制图...
2019-05-06 19:16:21
6808
原创 vue + echarts 多条折线图
html：<!-- 折线图--><div id="myChart1"/>js： // 折线图 getLine () { // 基于准备好的dom，初始化echarts实例 let myChart1 = echarts.init(document.getElementById('myChart1')); /...
2019-05-06 18:23:25
8017
1
原创 vue webpack打包 net::ERR_INCOMPLETE_CHUNKED_ENCODING 或者 weixin://preinjectjsbridge/fail
vue + webpack 项目在本地上是运行正常，结果发布到线上的时候出现打包的js报net::ERR_INCOMPLETE_CHUNKED_ENCODING 或者在移动端出现weixin://preinjectjsbridge/fail ，页面空白现象。查询后得知：后端没有及时删除日志，导致日志占满了服务器磁盘，将日志删掉就行了。...
2019-05-06 15:48:03
1253
原创 vue 调用虚拟键盘
有时候在大型触屏设备（如双屏设备）中，往往就没有键盘去操作，而且在触屏input或者textarea的输入时候就无法去输入值，所以就需要去建立一个虚拟键盘去操作vue-touch-keyboard 详细介绍及操作链接*记录下...
2019-04-26 15:26:47
8824
3
原创 vue项目在ie浏览器中不兼容问题的处理
安装babel-polyfill 插件npm install --save-dev babel-polyfill 或者 npm install babel-polyfill --save-dev 或者 npm install babel-polyfill -D在src目录中找到main.js，将该插件引入到项目中import 'babel-polyfill'重启浏览器...
2019-04-16 18:47:42
2997
1
原创 router-view 组件间传值
情况一：router-view 子组件发生变化导致父组件发生改变父组件中：<router-view @getMessage="showMsg"></router-view>showMsg (val) { // methods方法 val即为子组件传过来的值 console.log(val)}子组件中：this.$emit('getMessage', ...
2019-04-11 10:24:49
31449
8
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人