- 博客(29)
- 收藏
- 关注
RSS订阅
原创 VueRouter-导航守卫
在用户浏览网页，跳转页面的时候我们都会进行一些验证，这是网站项目中很普遍的需求。对此VueRouter为我们提供了7个钩子函数，也就是常说的导航守卫（Navigation-guards）。而VueRouter也对这7个导航守卫分为三类：全局守卫、路由独享守卫、组件内的守卫。下面是结合了vue实例的生命周期钩子函数和导航守卫的钩子函数进行的测试：<div id="app">...
2019-09-05 13:59:23
309
原创 Vue的生命周期
下面是Vue官网对生命周期的介绍Vue是一个构造函数，在这个构造函数执行的过程中会经历开始创建、初始化数据、编译模板、实例挂载到真实的DOM、数据渲染 ----> 视图更新等一系列过程，而在这个过程中会在特定的阶段默认调用一些函数，这些函数就是Vue生命周期的钩子函数。下面对这些钩子函数进行详细说明：1、实例通过new Vue（）创建后，就会初始化事件和生命周期，然后就会调用be...
2019-09-01 15:51:29
185
原创 项目中遇到的问题8：修改ele-ui的样式不生效
问题描述：在vu项目中，我们都会使用到ele-ui的组件，但麻烦的是在调节组件的样式的时候，总会出现不生效的情况，这是因为ele-ui有自己的样式，我们想要修改就要用自己的样式覆盖ele-ui本来的样式，而我们的样式一般都会写在中，这样会导致覆盖的样式不生效解决方法1<style lang="less" scoped>// 取消打印功能默认的左右边距@media print...
2019-12-30 17:41:52
917
原创 项目中遇到的问题7：element-ui的table组件，给某些列设置了fixed属性后，滚动条无法拖动
问题描述在使用ele-ui的table组件时，给前四列设置了fixed属性，让前四列可以固定，不随着滚动条滚动移动，结果发现设置后，拖动横向的滚动条的前半部分无法拖动。后来发现原因是设置了fixed属性的列把滚动条覆盖了，一般是看不到，但是把页面缩小就发现了，如下图：解决方法：.el-table__fixed { height:auto !important; // 让固定列的高自...
2019-12-27 16:10:31
3681
2
原创 项目中遇到的问题6：小数转换成百分数
原理：把小数*100，然后使用toFixed选择保留几位小数，再进行字符串拼接一个%function f(num) { if (num == 0) { return `0%`; } var str = Number(num * 100).toFixed(2); str += "%"; return str;}console.log(...
2019-12-27 11:30:16
432
原创 微信小程序
基础内容学习在小程序中JSON扮演的是静态配置的角色。JSON文件都被包裹在一个大括号中，通过 key：value 的方式记录数据。JSON的key必须被双引号包裹。JSON文件中不能使用注释。进入小程序开发工具的项目中，会看到如下结构，有一个pages文件这个是用来存放所有的页面的，在每一个页面的文件夹下还有.js.json.wxml.wxss文件。WXML文件wxml文件相当于h...
2019-12-26 17:44:41
819
原创 uni-app视图容器
viewview:相当于HTML中的div，独占一行，不设置宽度时，宽占满整个屏幕<view hover-class='click' hover-start-time='1000' hover-stay-time='1000'>1</view>hover-class：相当于设置了一个class名，可以在style标签中设置样式，这个样式会在点击元素时生效...
2019-12-24 15:43:47
788
原创 项目中遇到的问题5：单击复制文本
<span id="copy">要复制的文本</span><p onclick="clickCopy()" style="color: #66b1ff">点击复制</p><input id="copyContent" type="text" style="border:none;opacity:0;position:absolute;top...
2019-12-24 12:00:46
169
原创 时间转换，将2019-10-24 10:34:39转换为2019年10月24日10时34分
需求描述：后端返回的时间格式是2019-10-24 10:34:39，要求转换为2019年10月24日10时34分方法：使用字符串的replace和正则结合let time = '2019-10-25 10:39:30';function timeTransformation(time) { console.log(arguments) time = time.repl...
2019-12-24 11:44:20
621
原创 Canvas转图片，图片转Canvas
Canvas转图片知识点：toDataURL原理：可以理解为获取到canvas的地址，创建一个Image对象，把这个Image对象的src设置为获取到的canvas的地址，然后将这个Image添加到指定的div元素中<canvas id="canvas" width="200" height="200"></canvas><div id="pic">...
2019-12-20 10:17:56
1124
原创 canvas
前述canvas本身没有绘制能力，必须使用脚本来完成实际的绘图任务getContext()：方法返回一个对象，该对象提供了用于在画布上绘图的方法和属性<canvas id="canvas"></canvas> // 定义一个ID名为canvas的canvas元素let canvas = document.getElementById('canvas');//...
2019-12-18 15:59:06
382
原创 axios请求文件流下载
axios({ method: 'post',// 设置请求方式 url: `/modelapi/report/non-blocking`,// 设置请求地址 data: {// 参数 Id: this.activeTab, ProjectId: this.projectId }...
2019-12-18 11:15:51
2740
原创 项目中遇到的问题4：请求数据，并用watch监听，刷新页面会执行两遍接口
问题描述：通过项目ID向后端请求数据，数据请求成功后会向数组中push内容，通过watch监听项目ID变化后重新执行这个方法，但接口会执行两遍，数组中也会被push两次，在请求中清空了数组但依然会push两次内容，所以页面显示也会出错原代码如下：// data中定义了一个空数组studentData，请求到数据后向这个数组中push数据data() { return { ...
2019-12-17 16:51:59
3171
原创 项目中遇到的问题3：给数字指定长度，长度不足的时候在前面补0
问题描述：在项目中遇到产品要求自动生成序号，序号要求是四位，如果不足四位就以0补充，例如一个数字是32，则显示应该为0032以下使用num代表需要转换的数字，length代表需要保留的位数解决方法1：let num = 38;function fn(num, length) { return (num/Math.pow(10,length)).toFixed(length).subst...
2019-12-06 10:24:54
960
原创 项目中遇到的问题2：写好的页面右击打印预览出现空白
写好了一个页面，因为想让用户可以保存成PDF，在谷歌浏览器自己试了下，如下图，左侧和内容中间出现了空白区域：尝试了很多办法都没解决，就把中间内容的样式注释了重新检查，发现我在写页面的时候为了让内容在一行显示使用的时flex布局，后来改成了float：left；再右击打印预览内容部分的空白消失了，但是左侧的灰色区域还存在。在测试的过程中发现是因为浏览器的打印自带了边距所以出现了这个问题，在CSS...
2019-12-05 16:22:18
1131
原创 项目中遇到的问题1：iframe嵌套跨域内容，src变更但内容未刷新问题
**问题描述：**在A页面中通过iframe嵌套了B页面，B页面的内容是通过A页面的query里面的参数请求到的使用watch监听了route变化，当query中传入的参数变更后就需要让iframe的src和内容同步变更，但在项目过程中，iframe随着变更了，但是iframe中的内容却没有同步更新在网上查询到了下面的解决方法：方法1：document.getElementById(ifr...
2019-11-28 15:50:59
2264
原创 axios.CancelToken
在公司项目中看到之前代码使用了axios.CancelToken，但自己对这个并不了解，所以去查了查，下面是我的一些总结，如有错误，一经提出立即改正。axios.CancelToken官方文档：使用方法如下：需要注意的是在get请求中CancelToken作为第二个参数传入，在post请求中CancelToken作为第三个参数传入const CancelToken = axios.Cance...
2019-11-02 10:31:41
7440
1
原创 Git命令大全
初始化配置1、配置使用git仓库的人员的姓名git config --global user.name "Your Name Comes Here"2、配置使用git仓库的人员emailgit config --global user.email you@yourdomain.example.com3、配置到缓存 默认15分钟git config --global credentia...
2019-09-22 18:58:10
162
原创 JSONP跨域
由于浏览器有同源策略的限制，在非同源的请求下都会产生跨域请求的问题，而JSONP就是为了解决这个问题出现的一种解决方案。首先说下同源和非同源，同源策略：协议、域名、端口这三个都相同则为同源，只要其中有一个不相同则为非同源，这时候就产生了跨域的问题。举例如下：http://qianwandu.com/3000 到 https://qianwandu.com/3000 ...
2019-09-22 18:23:02
162
原创 VueRouter中$router和$route的区别
在使用路由的时候有如下步骤：1、创建要使用路由的组件2、创建routes，配置路由映射表3、new一个Vue Router命名为router，并将routes作为一个对象添加到router中4、将router在Vue中进行注册let home = { data(){ return {} }, template:"<div>我是home组件&...
2019-09-22 15:28:01
473
原创 Gemerator函数
Generator函数是ES6的一种特殊的函数语法，最大的特点是可以交出函数的执行权（即暂停执行）。Generator函数不同于普通函数，是可以暂停执行的，写法也与普通函数不同，需要在函数名前面加一个星号 " * " 。Generator函数其实就是一个封装好的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都需要用yield语法著名。写法如下：let x = 100;functi...
2019-09-19 23:46:02
178
原创 Vue-Cli 目录架构
目录解构├── build // 构建相关├── config // 配置相关├── src // 源代码│ ├── api // 所有请求│ ├── assets // 主题 字体等...
2019-09-08 11:06:58
181
原创 VueRouter-路由传参
1、使用router-link传递参数语法：<router-link to=‘/路由路径/参数’></router-link>代码演示：<router-link to="/home/参数">首页</router-link><router-view></router-view>路由配置：const route...
2019-09-05 00:27:28
226
原创 es6的变量解构赋值
解构的含义按照一定的模式，从数组和对象中取值，对变量进行赋值，称为解构。解构赋值时，只要等号两边不是对象，就先将其转换成对象。可以说这种方式就是等号两边的解构相同，左边的变量就会被赋予右边的对应值。代码演示：数组： let [a,b,c] = [10,20,30];console.log(a,b,c); ==> 输出结果：10，20，30对象：let {a,...
2019-09-04 00:28:23
1017
原创 Vuex中的actions的参数
actions可以说是mutation的加强版，它可以通过commit mutations中的方法改变状态，最重要的是它可以进行异步操作，在组件中通过$store.dispatch来触发action中定义的方法。今天是要来说一下action函数的参数一般在使用actions方法时我们会像下面的书写方式：actions:{ add_num({commit}){ c...
2019-09-03 23:42:31
17013
2
原创 数组的方法
在工作中很多地方都会用到数组，我们也经常会用数组来存数据，在处理数组数据的时候，JS为我们提供了很多内置的方法，下面就从数组方法的作用、是否需要参数、数组方法的返回值、是否会改变原有数组几个方面来写一下常用到的数组方法1、pop作用：删除数组的最后一项参数：不需要参数返回值：被删除的那一项原数组：被改变代码演示：let ary = [1,29,391,182,39,29];...
2019-09-03 00:07:16
321
原创 static --- es6中类的静态方法
如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”验证如下：我们定义一个类，如下：class Father{ constructor(){ } getX = function(){ console.log(1); ...
2019-09-01 23:12:08
878
原创 jQuery中ajax的参数
1、url：请求数据的路径2、type：请求方式，（get、post、put、delete、patch），如果不写默认为get，工作中最常用的是get和post两种【一般客户端向服务端请求数据使用get方法，客户端向服务端传送数据使用post方法】，具体情况具体分析。3、async：同异步，（true、false），默认为true；true为：异步请求，false为同步请求；同步请求需要等到数...
2019-09-01 00:22:10
343
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人