木雷双雄7-CSDN博客

转载 axios的封装和使用

目录转载特性安装引入环境切换设置请求超时post请求头的设置求拦截响应拦截错误处理封装错误描述封装跳转登录页封装封装GET方法和POST方法对象拼接在url上axios的使用转载愣锤写的确实不错，我收益匪浅，其中我也加入了自己的一些见解。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.j...

2019-07-25 11:33:05 3037

原创 vue-cli 3.0安装详解

全局安装@vue/clinpm install -g @vue/cli创建新项目vue create project-name1、是否使用淘宝镜像（淘宝镜像可以加快安装速度）2、选择预设（默认/手动选择特性）默认包含了基本的 Babel + ESLint 设置的预设手动选择特性：Babel：转码器，可以把ES6代码转为ES5代码TypeScript：J...

2019-07-23 13:15:43 561

原创 element-ui 实战小技巧汇总

一、带有删除操作的Table 表格与分页1、表格数据只能单选当前页currentPage，数据tableData当前页数据只剩1条，删除数据时，需要当前页-1，然后重新刷新数据；但当当前页为1时，不用-1，只需判断总条数是否大于10来显示与隐藏分页。if(this.currentPage > 1 && this.tableData.length == 1...

2019-02-27 13:44:04 798

原创 vue-cli 3.0详解以及配置webpack目录别名alias

vue-cli 3.0安装安装命令：npm install -g @vue/cli如果已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，卸载命令：npm uninstall vue-cli -g检查其版本是否正确 (3.x)：vue --versionvue -V创建一个新项目:vue create hello-worldwindows上的Git B...

2019-02-14 15:07:57 4991

原创 Swiper3实现简易的大事记展示效果

项目设计图：项目实现效果：1、年份从左到右依次递增，默认显示最后一年2、每屏显示7个年份，点击左右按钮切换一个年份，点击年份也可随时切换实现过程：页面结构：<div class="about3"> <div class="about3_wrap swiper-container"> <ul class="swiper-wrapper...

2018-12-03 16:47:18 1193

原创 swiper3实现包含视频的轮播效果

给需要添加视频的slide添加一个特有的类ban_video，来识别需要添加视频的slide。因为我是动态添加video元素的，所以需要给slide添加视频的第一帧图片，避免加载视频带来的轮播空白问题，同时也为了撑开元素。把视频相对定位，覆盖在图片的上面，实现图片到视频的无缝连接。实现视频播放的逻辑：通过判断当前slide（swiper-slide-active）是否包含ban_v...

2018-10-24 14:38:09 9653 4

原创手机端video默认全屏的兼容写法

需求：希望视频播放时可以全屏播放，没有进度条、播放按钮等与系统相关的元素，视频的宽度大于高度，并自动播放浏览器效果展示：实现全屏：苹果全屏兼容，属于文档内全屏playsinline="true"x-webkit-airplay="true"webkit-playsinline="true"安卓全屏兼容，脱离文档全屏，当我退出全屏隐藏video以及外层盒子时，会有短暂...

2018-08-20 16:22:44 6629

原创 audio音频兼容性问题小结

我在页面上放一个<audio loop="loop" src="flash/music.mp3" id="media" autoplay></audio>结果苹果微信端、苹果safari、UC浏览器都无法播放，我的华为荣耀8微信及内置浏览器均可播放！首先给微信浏览器做兼容处理：audioAutoPlay('media');function audioAutoPl...

2018-08-01 17:27:56 2842

原创轮播（fade）+左右按钮点击+分页器点击+循环

今天自己写了一个渐隐的轮播效果，记录一下。轮播包括图片结构、左右按钮结构、分页器结构。效果图HTML<div class="container"> <div class="wrap"> <div class="item"> <img src="images/bnimg01.

2018-08-01 16:39:46 1483

原创透明遮罩在IE浏览器的兼容性—RGBA

1、rgba基本能解决透明背景带来的遮罩效果：rgba(0, 0, 0, 0.5)，效果如图：2、但是rgba在IE8及以下是不兼容的，可以使用IE滤镜处理：filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7F000000, endColorstr=#7F000000);前两位是十六进制的不

2018-01-22 22:46:29 727

原创 js获取地址栏上的参数

1、把参数和参数值解析对象内，通过urlParse().参数获取参数值例如：https://www.baidu.com/?id=12345&name=b返回的obj为：{id: "12345", name: "b"}function urlParse() { let url = window.location.search let obj = {} let

2017-11-24 10:52:54 385

原创 js扩展Date将时间格式化为"yyyy-MM-dd hh:mm:ss"格式的字符串

扩展Date，将时间转换为指定格式的字符串。例如：当前时间指定格式的格式化：var time1 = new Date().Format("yyyy-MM-dd"); // 2017-11-20时间戳指定格式的格式化var time2 = new Date(1469281964000).Format("yyyy-MM-dd hh:mm:ss"); // 2016-07-23 21

2017-11-20 16:20:01 8338

原创 vue-router动态路由详解

平时做项目时遇到的点击列表页，显示详情页面，此时就需要我们传递列表唯一的标识，然后显示对应的内容。通常做法是以“参数=值”的形式传递参数，而动态路由将参数融入到路由的路径定义之内成为路径的一部分。在参数名称之前加“：”，然后将参数写在路由的path内。下面是给详情页detail传递唯一标识id，从而调取详细的内容。routes: [ { path: '/',

2017-10-20 09:10:03 13338

原创 vue-router命名路由

/Home是在Router的全局配置中配置的path值。这种显示的引用路径定义的URL一旦变更，所有引用的地方都需要改，其工作量可想而知。但是vue-router提供了一种隐式的引用路径，即命名路由，通过路由的名称取代URL的直接引用。因此需要给Router的全局配置进行重构：router/index.jsimport Vue from 'vue'import Router

2017-10-19 15:08:26 4450

原创 vue-router嵌套路由详解

嵌套路由顾名思义就是路由的多层嵌套。结合vue-router仿天猫底部导航栏，给组件Me添加嵌套路由，也叫子路由。总共添加两个子路由，分别命名Collection.vue（我的收藏）和Trace.vue（我的足迹）1、重构router/index.js的路由配置，需要使用children数组来定义子路由，具体如下：import Vue from 'vue'import Rou

2017-10-18 10:20:19 45197 1

原创 vue-router仿天猫底部导航栏

首先把天猫的导航贴出来，里面包括精选、品牌、会员、购物车、我五个导航及对应的图标。分析：1、图标的获取进入阿里巴巴矢量图标库，网址http://www.iconfont.cn。点击官方图标库，选择天猫图标库，选中放入购物车。点击添加至项目，点击创建新项目按钮，创建tianmao项目，点击确定。此时会有查看在线链接和下载至本地两种方式，我选择第一种，因为后

2017-10-17 08:41:46 13578 8

原创 vue-router路由基础入门

首先使用脚手架工具vue-cli快速创建vue项目时，可以直接安装vue-router。项目创建完成后，项目文件src/router/index.js是设置路由的核心文件。其中引入Vue、vue-router和组件，数组routes来配置路由。import Vue from 'vue' import Router from 'vue-router'import HelloWorld f

2017-10-12 09:09:57 397

原创 $("#audio").play()报错 not a function

$('#audio').play();报错原因：play()方法属于DOM对象方法，$('#audio')为jquery对象解决办法：将jquery对象转换为DOM对象首先打印jquery对象$('#audio')两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index); (1)jQuery对象是一个数据对象，可以通过[index]

2017-09-30 10:55:25 13240

原创 echarts饼图实现多环形对比图

要求：展示室外温度、室内温度设定点、室内温度的多环形对比图最终实现效果图：代码实现详解：var total = 50;//最大温度数据单独出来定义，方便环形总数的修改var myChart = echarts.init(document.getElementById('pie');placeHolderStyle = {

2017-09-25 17:30:40 17535

原创 webstorm 2017开发less、stylus报错

最近在学习Vue，然而在组件内写样式时，总是一堆错误，甚是烦躁！起初使用的stylus、弃用后使用less，仍然如此，但是外部引用的.stylus和.less却没事！报错代码展示：经过查阅资料，终于找到问题所在：需要在style内加入type属性，错误消失了！！！

2017-09-22 17:44:36 1986

原创 d3实现横向柱状图数据展示（V4）

一、最终实现效果二、实现步骤1、在现有的id为chart的div中添加一个长宽都是300的SVG元素var svg = d3.select('#chart').append('svg').attr('width','300').attr('height','300')2、在绘制矩形之前，我们给出一组数据[ 0.5 , 2 , 1 , 1.3 , 0.9]，由

2017-09-11 16:51:30 2325

原创脚手架vue-cli从不会到入坑

一、安装vue-cli前提是已经安装了Node.js（首选6.x版本）、NPM（3.x版本）1、然后输入命令npm install -g vue-cli，进行全局安装安装完成，输入vue -V（必须大写），查看Vue版本2、vue -h查看帮助文档init：从指定模板中生成一个新的项目list：列出所有的可用的官方模板vue list查看官方那个模板有以

2017-09-06 18:12:35 1164

原创 css解决设置宽度百分比，高度跟宽度相等，防止内部图片抖动

1、前提：我的图片宽高比是1：1，在图片外层div高度未设置时（即使设置高度为100%，默认为内容的高度），运行程序会出现图片抖动的现象，代码如下： *{padding:0; margin:0;}.box{width:100%; font-size:0;}.box img{width:100%; height:100%; }.con{width:100%; h

2017-07-20 16:50:35 7420

原创 Echarts中tooltip超出外层div显示不全问题

1、问题：提示框是根据鼠标位置实时变化的，但是当echarts图标高度较小，数据较多时，就会产生提示框显示不全的问题，如下图：2、分析：要想提示框不超出当前外层div，不考虑x轴显示位置的情况下，y轴显示位置必须固定，此时就需要设置tooltip的position属性。position属性可以设置提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。属性值可以设置如下：1）Arr

2017-07-12 11:21:48 34831 6

原创 getElementsByTagName的详解

今天在看《JavaScript权威指南第六版》根据元素标签获取元素时，有讲到getElementsByTagName返回对象为NodeList，经过测试多个浏览器的运行结果都是HTML集合HTMLCollection。getElementsByTagNamevar tagDiv = document.getElementsByTagName("div");console

2017-06-30 09:03:08 20418 2

原创 js中对Date日期进行格式化和把日期转换为毫秒数

1、将中国标准时间格式化为（2017-06-06 15:05:04）function formatDateTime(theDate) {var _hour = theDate.getHours();var _minute = theDate.getMinutes();var _second = theDate.getSeconds();var _year = theDate.g

2017-06-06 15:23:22 27162 2

原创 echarts实现双y轴，并实现不同的参数使用不同的y轴

需求：折线图实现双y轴，并实现不同的参数使用不同的y轴方法：1、yAxis中添加双轴[{type: 'value',name: '温度',axisLabel: {formatter: '{value}℃' }},{type: 'value',name: '百分比',min: 0,max: 100, axisLabel: {formatte

2017-05-27 17:33:44 23277

原创 jquery点击回车键实现登录效果并默认焦点

最近在做项目登录时，每次都需要点击登录按钮才可以进入相应的页面，给用户一个很不好的体验，所以我就添加使用回车键来实现登录。方法：登录$(function () { $('#username_txt').focus(); //用户点击按钮 $("#login_btn").click(function () {

2017-05-22 13:37:51 4137 1

原创 Css Sticky Footer将页脚固定在页面底部

概述：Css Sticky Footer如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。实现方法： Css Sticky Footer *{padding:0; margin:0} html,body{height:100%;} .wrapper{min-height:100%; heigh

2017-05-19 10:17:05 675

原创第一次面试前端的心路历程

昨天作为前端行业的小学生，面试了3位顶着多年经验的前端人才，在和经理谈完之后，我们在一起谈笑风生，互相切磋，互相学习。在谈笑之于就敏锐的捕捉到了他们技术的分量。首先第一位，是一位女生，工作2年，一些js效果可以独立完成，而且简历上多项技能写的精通，我瞬间精神大增，原来是隐藏的大神，精通angularJS，Oh My God，她就是我们公司想要的，还可以带我，幸福感油然而生。但当细问时，并不是我

2017-05-09 09:25:35 2611

原创整理回忆那些年做过的网站

1、北京艺彩轩辕广告有限公司（http://ycxy2008.com）这是一家设计公司，以前和我们是楼上楼下的办公，有什么需求，就去他们办公室坐会，还有冷饮喝，美滋滋，很怀念那个时候，在CBD一个“北大写字楼”里，我们团队10个人，2个设计，1个前端（就是我啦），3个后台，2个业务，2个老板（1个管技术，一个管业务），日子过得充实而又满足，即使工资不高，环境一般，但是我们配合相当默契。

2017-05-08 11:41:15 574

原创 echarts中图例legend和坐标系grid实现左右布局

1、效果图2、实现方法将图例legend纵向排列（orient: 'vertical'），宽度给150（width: 150），坐标系grid左侧距离200（left: 200），中间有50的边距3,、代码展示grid: { left: 200},legend: { x: 'left', data: ['送风温度', '混风温度', '

2017-05-08 11:33:45 37095 1

原创 Javascript定时器调用有形参的方法

1、问题：定义了一个获取日期的方法，包括判断上下午，但是获取到时间之后，时间是一直不变得，到了下一天不会改，上下午也不会变，所以我打算用定时器来控制一下，但发现方法名不能带有参数，若带参数会一直报错function wecome(truename) { var theDate = new Date(); var _hour = theDate.getHours(); var _year

2017-05-02 14:52:08 398

原创 PS“无法完成请求，因为智能对象不能直接进行编辑”解决办法

今天用PS对图片进行编辑时，PS弹出“无法完成请求，因为智能对象不能直接进行编辑”，那么怎么解决智能对象不能进行编辑的问题呢？解决办法：格栅化图层方可编辑也可直接在图层区，右键选择格栅化图层

2017-04-27 10:45:07 37535

原创 easyui实现tabs选项卡之间的切换（只显示一个）

一、创建菜单项 aa1 bb1 bb2 二、点击菜单生成tabs选项卡，并添加刷新按钮，实现选项卡之间切换（只显示一个）$(".tree-node").cli

2017-04-20 14:47:36 12698

原创在easyui中为tabs标签页面板添加刷新按钮

1、创建标签页（Tabs） tab1 2、点击标签页添加相应的标签页面板（tab panel）其中：title：标签页面板（tab panel）的标题文字。content：标签页面板（tab panel）的标题文字。closeable：当设置为 true 时，标签页面板（tab panel）将显示一个关闭按钮，点击它就能关闭这个标签页面板

2017-04-14 16:10:39 2003

原创在easyui中DataGrid 里的列数据进行格式化

DataGrid 里的列数据进行格式化，需要设置 formatter 属性，它是一个函数。这个格式化函数包含三个参数：value：当前列对应字段值。row：当前的行记录数据。index：当前的行下标。创建数据网格（DataGrid）设备名称设备ID 送风温度回风温度室外温度室外湿度

2017-04-13 16:17:01 4919

原创 Echarts中legend图例默认只有一个为选中状态

问题：Echarts中legend图例默认全部选中，折线图全部显示方法：使用legend.selected，例的选中状态，让对应data[i]的值为false代码：legend: { x: 'left', data: ['送风温度', '回风温度', '室外温度', '室外湿度', '', '室内1温度

2017-03-30 17:43:00 39300 5

原创 Echarts中legend图例太多与title重叠问题

问题：由于legend图例太多导致与title的文字重叠方法：像legend.data[i]中添加特殊字符串''，实现图里的换行代码：加粗加下划线部分legend: { x: 'left', data: ['送风温度', '回风温度', '室外温度', '室外湿度', '', '室内1温度', '室内1湿度', '室内2温度', '室内2湿度'], inactiv

2017-03-30 17:35:34 22052 1

原创 iframe设置height为100%，scrolling为no，还是出现垂直滚动条

easyui中点击菜单生成tab选项卡时，iframe设置height为100%，并且scrolling为no，仍然出现了下图的滚动条。问题原因：iframe为行内元素，空白符被解析。解决办法：1、改变父级样式，如font-size: 0; 或者line-height: 0; 2、改变自身样式，如display: block 或者vertical-align: middle

2017-03-23 13:56:18 10709 1

空空如也

节流里面有异步请求时，节流失效啦？

canvas循环插入多张图片，部分图片显示不出来？

webstorm中.vue文件中写stylus，总是出现警告和错误，但不影响编译