前端
A-飞龙在天
本人喜欢学习, 也非常喜欢交朋友, 专研前端最新技术, 具备5年前端经验 也有个人公众号hzj520,通过此平台我们可以一起交流技术 一起进步, 专业解决前端疑难杂症
展开
-
vue使用promise、async、await 2分钟让你记住(必看)
Promise返回一个对象,这个对象的构造函数里面可以传入函数,函数的第一个参数是一个回调函数,即成功的回调函数。函数的第二个参数也是回调函数,失败的回调函数。这个对象可以.then().catch(),所以可以写成new Promise().then().catch(),也可以写成var a = new Promise(); a.then().catch();Promise构造函数的参数是一个函数,函数里面的代码是异步的,即Promise里面的操作,和Promise()外面的操作时异步"同时"进行的,原创 2020-12-05 20:53:57 · 1614 阅读 · 1 评论 -
前端input输入框, type类型是number 输入小数会提示“请输入有效值,两个最接近的有效值为0,1”问题, 请看解决方案
在用到表单里,发现把鼠标移到type="number"的input框上时有时候会显示“请输入有效值,两个最接近的有效值为0,1”的提示,代码里面并没有这个提示,发现只有当输入小数时会出现提示,原来是浏览器默认输入整数,如果要输入小数需要修改步长,比如将step设为0.1。...原创 2020-12-05 20:47:15 · 4333 阅读 · 0 评论 -
关于通过前端xslx解析excel日期少一天原因
关于通过前端xslx解析excel日期格式数据转化问题以及自定义时间格式YYYY-MM-DD转化const workbook = XLSX.read(data, {type: “binary”,cellDates: true,//设为true,将天数的时间戳转为时间格式}定义一个转换日期格式的方法(转成日期格式:YYYY-MM-DD)注意的点:xlsx将excel中的时间内容解析后,会小一天如2020/11/3,xlsx会解析成 Mon Nov 02 2020 23:59:17 GMT+08原创 2020-12-05 20:41:59 · 3106 阅读 · 0 评论 -
vue下载表格 兼容ie 绝对好使
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入axios ( {method : ‘post’,url : api.exportPlayTime , // 请求地址原创 2020-05-25 13:02:32 · 541 阅读 · 0 评论 -
vue组件里面如何让pre和code标签里面的内容不被编译?
templateprecodediv test divcodepretemplate原创 2020-03-22 16:36:38 · 1244 阅读 · 0 评论 -
vuejs实现折叠面板展开收缩动画效果
vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画。原创 2020-03-16 11:05:43 · 985 阅读 · 0 评论 -
纯前端使用vue如何导出表格
1、 安装依赖安装依赖xlsx,file-savernpm install --save xlsx file-saver2.在组件中引入import FileSaver from ‘file-saver’import XLSX from ‘xlsx’3.添加下载方法#out-table为table节点的idoutTab () { /* generate workbook ob...原创 2020-01-07 10:27:09 · 910 阅读 · 0 评论 -
前端JS如何校验 座机号码
var reg = /^[0-9-{0,}$/原创 2019-12-30 16:37:52 · 1213 阅读 · 0 评论 -
前端使用ElementUI +Vue table表头添加tooltip悬浮提示框
<el-tableempty-text=“正在加载中…”:data=“contentList”style=“width: 100%”@sort-change=“sort”class=“pro-table-item”tooltip-effect=“dark” <template v-for="(item,index) in titleList"> <...原创 2019-12-30 10:23:16 · 7848 阅读 · 1 评论 -
js字符串中不能包含中文与英文用来校验座机号码
var reg = /1{0,}$/0-9- ↩︎原创 2019-12-27 10:43:05 · 276 阅读 · 0 评论 -
前端表格无限滚动
使用安装npm install --save el-table-infinite-scroll1全局引入import Vue from ‘vue’;import elTableInfiniteScroll from ‘el-table-infinite-scroll’;Vue.use(elTableInfiniteScroll);1234局部引入123456...原创 2019-12-25 20:14:26 · 1089 阅读 · 0 评论 -
react如何使用react-router-dom路由
import React from ‘react’;// 引入hashHistoryimport {HashRouter, Route, Switch, hashHistory} from ‘react-router-dom’;import Home from ‘./v/home.jsx’;import Mine from ‘./v/detail’;const BasicRoute = ...原创 2019-12-24 17:03:17 · 167 阅读 · 0 评论 -
react中如何跳转路由
通过a标签跳转a href=’#/detail’>去detail</a通过函数编程import {HashRouter, Route, Switch, hashHistory} from ‘react-router-dom’;<button onClick={() => this.props.history.push(‘Mine’)}>通过函数跳转...原创 2019-12-24 17:01:11 · 1300 阅读 · 0 评论 -
前端如何创建 react脚手架 1分钟就能创建成功
(1)npm install -g create-react-app(2)create-react-app my-app(3)cd my-app(4)npm start原创 2019-12-23 10:44:21 · 136 阅读 · 0 评论 -
前端页面使用表格文字超出30字后显示省略号
1.设置过滤器filters: {ellipsis(value) {if (!value) return “”;if (value.length > 30) {return value.slice(0, 30) + “…”;}return value;}},2.使用过滤器el-table-column label=“题干” width=“600”template sl...原创 2019-12-20 14:00:56 · 784 阅读 · 0 评论 -
前端使用Element-ui表格内容过长时候,添加悬浮效果
1.el-table是有这个控制属性的::show-overflow-tooltip=“true”2.悬浮颜色覆盖.el-tooltip__popper{max-width:20%;}.el-tooltip__popper,.el-tooltip__popper.is-dark {background:#f5f5f5 !important;color: #303133 !import...原创 2019-12-20 13:56:18 · 3664 阅读 · 0 评论 -
前端js闭包详解(面试管用)
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。下面就是我的学习笔记,对于Javascript初学者应该是很有用的。一、变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种:全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。var n=999;...原创 2019-09-08 19:13:00 · 255 阅读 · 0 评论 -
前端生成唯一id解决SessionId不一致
在项目开发中我们常需要给某些数据定义一个唯一标识符,便于寻找,关联。node-uuid模块很好的提供了这个功能。https://github.com/broofa/node-uuid/使用起来很简单,两种:1、uuid.v1(); -->基于时间戳生成 (time-based)2、uuid.v4(); -->随机生成 (random)通常我们使用基于时间戳 v1() ...原创 2019-12-19 16:26:10 · 1748 阅读 · 0 评论 -
element-ui表格内容过多样式优化
el-table-column:render-header=“labelHead”:prop=“col.filedName”show-overflow-tooltip=“true”sortable:label=“col.alias”:formatter=“formatterTableCol”>el-table-column>methods: {labelHead: f...原创 2019-12-19 16:18:54 · 1644 阅读 · 0 评论 -
前端element-ui表格滚动条样式优化
原创 2019-12-18 10:30:49 · 786 阅读 · 0 评论 -
IE浏览器如何获取本地ip地址
function GetAdapterInfo() {//var locator = new ActiveXObject(“WbemScripting.SWbemLocator”);var service = locator.ConnectServer("."); //连接本机服务器var properties = service.ExecQuery(“SELECT * FROM Win...原创 2019-12-13 19:04:29 · 1803 阅读 · 0 评论 -
IE浏览器如何获取IP地址
<object classid="CLSID:76A64158-CB41-11D1-8B02-00600806D9B6" id="locator" style="display:none;visibility:hidden"></object><object classid="CLSID:75718C9A-F029-11d1-A1AC-00C04FB6C223"...原创 2019-12-13 18:52:51 · 1182 阅读 · 0 评论 -
js获取ip地址
function getUserIP(onNewIP) { // onNewIp - your listener function for new IPs//compatibility for firefox and chromevar myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || ...原创 2019-12-13 14:48:47 · 277 阅读 · 0 评论 -
纯前端js获取电脑本地IP地址(必用)
注意 启动本地服务才能获取到:function getUserIP(onNewIP) { // onNewIp - your listener function for new IPs//compatibility for firefox and chromevar myPeerConnection = window.RTCPeerConnection || window.mozRTCPe...原创 2019-12-13 11:56:32 · 4936 阅读 · 2 评论 -
Vue下载文件,如何把后端返回的文件流变为下载地址
axios({method: ‘post’,url: ‘api/user/’,data: {firstName: ‘Fred’,lastName: ‘Flintstone’},responseType: ‘blob’}).then(response => {this.download(response)}).catch((error) => {})methods...原创 2019-12-09 15:26:57 · 2249 阅读 · 0 评论 -
前端使用Element-ui上传文件如何添加Token
<el-upload action="test" :headers="myHeaders"></el-upload>var token = localStorage.getItem(‘token’) // 要保证取到export default {data () {return {myHeaders: {Authorization: token}}}}...原创 2019-12-09 14:08:34 · 2033 阅读 · 0 评论 -
前端ES5与ES6继承
es5的继承原型链继承function Parent(){this.name=‘kevin’;}Parent.prototype.getName=function (){console.log(this.name);}function Child(){}Child.prototype=new Parent();var child=new Child();child.getNa...原创 2019-12-05 14:58:54 · 242 阅读 · 0 评论 -
js面向对象与继承
function Person(name,sex){// var this=new Object();//这里注释的代码 假想 new操作时系统内部帮我们做了这些 this.name=name; this.sex=sex; //不建议方法写在构造函数里 this.showSex=function(){ con...原创 2019-12-03 20:21:09 · 105 阅读 · 0 评论 -
前端表格懒加载
那如何判断滚动条滚到底部了呢?scrollHeight-scrollTop-clientHeight=0,这个时候可以就是滚动条滚到底部的时候了。在第一次请求数据的时候,先设置一个变量来记录请求次数(其实后台也是做分页的处理)this.currentPage = 1,this=this;this.this = this;this.this=this;this.axios.fun().th...原创 2019-12-02 16:19:12 · 1611 阅读 · 0 评论 -
vue中事件修饰有哪些?
<a v-on:click.capture="dothis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit">提交</form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="dothat">&...原创 2019-11-26 16:12:10 · 254 阅读 · 0 评论 -
Ajax请求原理(只需要2分钟就能看懂原理)
<script type="text/javascript"> // 创建XMLHtppRequest对象并做兼容性 var xlmlHttp if (window.XMLHttpRequest) { xlmlHttp = new XMLHttpRequest() xlmlHttp.open('post', 'www.baidu.com', true) // 第一个...原创 2019-11-21 10:48:10 · 211 阅读 · 0 评论 -
vue项目中滚动到某元素位置或者到页面顶部
// 跳转后返回顶部router.afterEach((to,from,next) => {window.scrollTo(0,0);})1.使用a标签+#号我跳到box112上面这一种的缺点是,url会发生改变,会在url最后面加上片段识别符#box2,这样就改变了URL的路径,这是我们不想看到的。因为再次刷新的时候回出现问题。当使用 vue-router回退时,发现需要...原创 2019-11-20 19:38:33 · 2325 阅读 · 1 评论 -
vue中this.$router.push、replace、go的区别
1.this.$router.push()描述:跳转到不同的url,但这个方法回向history栈添加一个记录,点击后退会返回到上一个页面。:2.this.$router.replace()描述:同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。3.this.$router.go(n)相对于当前页面向前或向后...原创 2019-11-20 13:38:31 · 441 阅读 · 0 评论 -
vue后台管理系统登录权限
做后台项目区别于做其它的项目,权限验证与安全性是非常重要的,可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能。我们所要做到的是:不同的权限对应着不同的路由,同时侧边栏也需根据不同的权限,异步生成。这里先简单说一下,我实现登录和权限验证的思路。登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到cook...原创 2019-11-18 20:20:52 · 1147 阅读 · 1 评论 -
require.context妙用-实现前端自动引入同一文件夹下多个文件(替代import)
今天在看vue-element-admin,发现了一个很好的关于批量导入多个文件的做法,不需要手动import同一文件夹下的多个文件,便于前端自动化配置,特此拿出来做一次分享。import Vue from ‘vue’import Vuex from ‘vuex’Vue.use(Vuex)// 知识点1: 可用于模块的批量导入,类同于import引入同一文件夹下多个文件。// requi...原创 2019-11-18 19:53:42 · 1814 阅读 · 1 评论 -
js数组去重(看完就懂了)
一、利用ES6 Set去重(ES6中最常用)function unique (arr) {return Array.from(new Set(arr))}var arr = [1,1,‘true’,‘true’,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,‘NaN’, 0, 0, ‘a’, ‘a...原创 2019-09-12 17:13:49 · 882 阅读 · 0 评论 -
前端批量下载后台表格
$(function () { alert('开始自行js代码'); var paths = ["xmanager.rar","201908192041687.zip","201908191635835.msi","instantclient_12_1.zip"]; var urls = ["http://localhost:8083/downUp/downfiles/xmana...原创 2019-08-26 20:20:46 · 234 阅读 · 0 评论