自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

这是我的博客

有压力更有动力!前进。。。

  • 博客(124)
  • 论坛 (1)
  • 问答 (3)

原创 小程序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 169

原创 网页整体放大或者缩小

案例:非PC端项目,做的是固定设备上的项目。由于固定设备上的分辨率和正常的触屏设备不一,所以在开发的时候未做适配工作(即使用的是px单位)。现阶段需要将该项目来一个PC端版本的,第一想法就是使用媒体查询去处理,不过这样的工程量就有点大了,需要对每个界面每个样式做更改;后面想的是能不能整体进行一个适应的放大缩小的,这样岂不很nice,于是就碰到了css3中zoom属性官方介绍document.getElementsByTagName('body')[0].style.zoom = 0.8;注意点:zoo

2020-08-14 18:10:28 81

原创 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 183

原创 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 329

原创 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 1770

原创 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 3928

原创 js 获取两日期间所有日期

我们在做图表类使用dates日期插件的时候,有时候从后台获取的日期往往是有数据的天数,那么其他没有数据的日期就需要前端进行补全咯!!! // 获取所有日期 getBetweenDateList(start,end){ let result = []; let beginDay = start.split("-"); let endDay = end....

2020-01-10 16:10:21 163

原创 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 77

原创 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 140

原创 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 1025

原创 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 575 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 1294

原创 文字转语音播报链接

男音: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 236 2

原创 移动端点击延迟处理--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 97

原创 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 12101 1

原创 数据数组获取重复字段数组集合

有时候我们对数据进行处理会放在前端进行,这样减少http请求,也算是一种优化方案。例如我们想做这种效果那我们第一想法就是点击不同区域的时候去请求后台数据,这样会导致反复请求http,增加宽带。解决方法:我们可以第一次就将所有的数据拿到,再根据不同区域去进行数据的处理,代码如下:let data = body.data;for (var i = 0; i < data.length...

2019-09-05 10:44:39 374

原创 外部js调用vue实例方法

vue函数 mounted () { window.testFun = this.testFun; // 方法赋值给window }, methods: { // vue内部方法 testFun () { }, }外部js调用<script> function test() { testFun(); // 直接通过w...

2019-08-30 14:46:14 8737 2

原创 vue axios 拦截器

Vue 项目在发布新版本的时候,往往会出现新旧版本不一致导致报错,这样就会给用户一个误导。所以在发布版本的时候出现报错的错误码时就需要给用户一个提示为此就需要在axios请求的时候来个拦截器interceptors去处理不同的response.status了import Axios from 'axios'// http response 响应拦截器Axios.interceptors....

2019-08-29 17:00:34 201

原创 下载文件流文件

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 263

原创 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 5876 6

原创 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 10155

原创 css 取消鼠标双击选中

有时候我们在页面上操作的时候,总会碰到鼠标连点的情况下,这样会导致你点击的文字地方出现一片蓝色选中状态,例如:导致体验效果不理想。取消上面情况:(css) -moz-user-select:none; -ms-user-select: none; -webkit-user-select: none; user-select: none;做个记录,防止遗忘。。。...

2019-07-09 09:56:55 1351

原创 去掉页面的滚动条

去掉页面上的滚动条 body::-webkit-scrollbar {display: none;}如果使用了iframe,则可以使用scrolling="no

2019-07-05 15:44:44 1675

原创 encodeURI和encodeURIComponent的比较

有时候我们在url跳转的时候往往会携带参数,参数中可能会包含一些特殊字符,例如:空格,下划线,加号…,这时候对后台或者前台解析的时候就读取不到这些特殊字符存在,这个时候我们就需要对特殊字符进行编码。下面针对encodeURI和encodeURIComponent做个比较:相同点:都可以对url进行一个编码;区别:encodeURI()不会对本身属于URI的特殊字符进行编码,例如冒号、正斜杠、...

2019-06-03 15:53:11 1360

原创 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 2189

原创 移动端开发底部元素margin-bottom失效的处理方式

在移动端开发的过程中,经常会有在底部进行一个元素固定定位在,这样我们主体数据有需要设置margin-bottom 去防止主体数据被底部遮挡的情况。这在android手机中这样设置是完全没有问题的,不过在ios手机上就会出现底部定位遮挡了主体内容。当时还尝试了使用padding-bottom去处理,然效果还是不太理想。查询方法后,一下两种方式是可行的:主体最后设置一个空白的div(设置好高...

2019-05-09 17:44:50 1059 1

原创 vue 时间戳转日期

封装: datetimeparse (timestamp, format, prefix) { if (typeof timestamp =='string'){ timestamp=Number(timestamp) }; //转换时区 let currentZoneTime = ne...

2019-05-09 17:28:34 638

原创 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 1541 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 5872

原创 vue + echarts 饼图

html:<!-- 饼图--><div id="myChart2"/>js:// 饼图 getPie () { // 基于准备好的dom,初始化echarts实例 let myChart = echarts.init(document.getElementById('myChart2')); // 绘制图...

2019-05-06 19:16:21 3506

原创 vue + echarts 多条折线图

html:<!-- 折线图--><div id="myChart1"/>js: // 折线图 getLine () { // 基于准备好的dom,初始化echarts实例 let myChart1 = echarts.init(document.getElementById('myChart1')); /...

2019-05-06 18:23:25 3891

原创 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 514

原创 vue 调用虚拟键盘

有时候在大型触屏设备(如双屏设备)中,往往就没有键盘去操作,而且在触屏input或者textarea的输入时候就无法去输入值,所以就需要去建立一个虚拟键盘去操作vue-touch-keyboard 详细介绍及操作链接*记录下...

2019-04-26 15:26:47 4071 1

原创 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 1624 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 15696 3

原创 小程序input,textarea 保持软键盘打开状态

往往我们在小程序中做评论或者聊天类型的研发的时候,为了用户有更好的体验,就需要评论或者聊天输入后点击发送按钮的时候使得软键盘一直保持着打开状态。。。查看了一些文档和官网,其解决的方式都是为 <input placeholder="请输入文字" focus="{{focus}}" /> <button bindtap='btnSend'>发送</button&gt...

2019-03-18 10:22:40 2737 2

原创 vux scroller 插件使用注意事项

1. scroller标签内部必须紧套一层div标签2. 注意sceoller的enabled属性,表示可以下拉刷新特别是第一条,如果不注意,就会出现页面向下滑动后回弹到顶部去了...

2019-02-26 18:26:34 1828

原创 vue 关于input和textarea自动聚焦问题

如果是单纯的聚焦行为(即input或者textarea的value值为空的状态下),用以下代码即可解决方法一: <textarea name="" id="" :placeholder="placeholder" v-model="newMessage" ref="focusTextarea"></textarea> mounted()

2019-02-22 11:10:05 6701

原创 webpack vue build配置中修改assetsPublicPath为"./"

之前由于没有特别要求,故在项目之初没有将assetsPublicPath进行"./“的配置,在项目后续的nginx反向代理,所以刚开始只单纯的修改了assetsPublicPath为”./",结果扔到线上页面无法显示,不能解析到首页。。。查询后得知,除了修改assetsPublicPath这外,还需要修改其他地方config/index.js文件中:router/index.js文件中:...

2019-02-20 10:49:57 23779 5

原创 vue js中添加图片

新年来到现在才将心思真正的摆在了工作上,故在此记录一个小要点引以作为新年博客坚持的起始吧~~~~vue在js中去添加图片的方式如下:方法一:在data里面将图片路径保存好imgList: [ { openItem: '../static/icon/ic_police.png' }, { ...

2019-02-20 10:29:48 9559

空空如也

echarts饼图修改样式

发表于 2017-12-15 最后回复 2018-01-02

提示
确定要删除当前文章?
取消 删除