羡与-CSDN博客

开发登录页面时，我们通常需要实现回车即登录的功能。但是一旦点击回车键虽然表单提交了，但是页面快速刷新导致登录接口调用失败了。1. 实现回车提交表单只需要在form内的表单项上存在一个type=“submit”的input对象或button对象即可触发表单的submit方法<form @submit="handleSubmit"> <input type="submit" style="display: none"> ...</form>2..

2021-11-18 15:58:12 190

原创解决JavaScript heap out of memory

npm命令行启动前端项目时遇到了JavaScript内存不足的问题，查询资料后只需要一句命令就可以解决问题：FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory解决：打开任意终端窗口，执行命令：setx NODE_OPTIONS --max_old_space_size=10240然后重启代码编辑器，再启动项目就没问..

2021-10-26 16:36:37 1280

原创 vue 同一位置的元素相互影响

情景：两个按钮位于页面同一个位置，通过v-if判断按钮的显隐，当隐藏的按钮被禁用时，另一个显示的按钮也被禁用了原因：“Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。”---这是vue官网给出的解释。意思就是同一位置的的两个动态渲染的按钮，每次切换显隐的时候只是修改了按钮的文字，而按钮的内部属性并没有改变，这就导致了上面的问题。所以我们需要让两个按钮每次切换显隐的时候重新渲染，避免复用。因此只需添加一个具有唯一值的key属性即可解决方法：给按钮加上唯一的key属...

2021-07-05 16:27:02 240

原创点击表单内的按钮触发页面刷新

场景：vue项目中，点击表单内的某个按钮触发了页面刷新，表单内输入的数据都被清空了，并且页面路径前多了一个‘?’，例如：http://localhost:8082/?#/employee-login分析：在form表单内点击按钮触发了他的默认事件，从而导致页面刷新。解决：使用.prevent 事件修饰符可以解决这个问题，即阻止标签默认行为。用法：<button @click.prevent="handleFilter">搜索</button>..

2021-06-28 16:33:36 233

原创 vue项目实现移动端自适应

情景：前端开发经常需要根据一套原型来匹配不同的移动端，原型上标注的尺寸是px，如果需要匹配不同的像素，我们需要自己转换尺寸。通过引用插件可以实现一套像素适应不同的移动端，而开发人员只需要根据原型提供的标注来设置尺寸即可1. 安装依赖npm i -S amfe-flexible postcss-px2rem// lib-flexible已废弃2. index.html添加viewport设置<meta name="viewport" content="width=device..

2021-01-11 10:34:08 3825 4

原创 jquery实现点击按钮滚动页面

使用场景：因设备限制，无法像浏览器那样通过鼠标滑动来使页面滚动。只能通过代码来解决该问题1.实现效果：点击页面上的上、下、左、右四个按钮，实现页面可视区域移动/** * 翻页，每次滚动可视区域的80%高度或宽度（例：滚动区域以id="scroll-panel"元素包裹） * @param {string} type 翻页类型，上、下、左、右 * @param {string} id 滚动区域的包裹元素的id * */function movePage (type, id) { /.

2020-08-28 16:32:43 1635

原创前端实现token刷新

应用场景：在一个管理系统中，当用户登录进来后，我们期望用户在操作时，不会因为token过期而被迫登出。但token是有时效的，这时候我们就需要一个刷新token的操作来保障用户的登录状态。1. 原理3. 完整代码request.tsimport axios, { AxiosInstance } from 'axios'import router from '@/router'import store from '@/store'import { message } f...

2020-06-24 10:41:09 6404

原创 Ant Design Vue 限制数字输入框只能输入大于等于0的整数

四个关键属性：'min' , 'precision','fomatter','parser''min'：最小值 'precision'：数值精度(当输入02时，失焦后自动去掉0) 'fomatter'：指定输入框展示值的格式，传入方法 'parser'：指定从 formatter 里转换回数字的方式，和 formatter 搭配使用<a-input-number :value="text" :min="0" :precision="0" :f...

2020-06-21 11:18:36 17818

原创 js 实现点击复制

项目中有点击某个按钮即复制某文本的需求，这里总结两种方式。方法一原理：创建一个隐藏的input，并赋值需要执行复制的文本，选中input中的内容，执行dom自带的复制方法。function copyPwd(copyText) { let input = document.createElement('input')// 创建一个input input.value = copyText // 赋值需要复制的内容 document.body.append...

2020-05-29 18:06:48 1026

原创前端实现文件下载功能的三种方式

一些管理系统常常会有导出文件的功能，这里介绍三种文件下载的尝试1. 通过文件地址下载文件此方式最为简易，只需要知道文件在服务器上的地址，就可以通过a标签实现下载<a href="https://.../158ac1e6917445a4aa384a2a7209445a.xlsx" download="test">下载文件</a><a href="h...

2020-04-23 11:35:22 10311 7

原创 Ant Design Vue之自定义上传（Upload）

场景：项目中需要头像上传功能，后端提供的上传接口需要校验token。ant-design-vue框架的upload组件提供了customRequest接口，可以让我们覆盖默认的上传行为，自定义上传。1.目标实现效果如下点击相机图标或者图片，打开资源管理器——>选择图片——>头像预览自动更换为最新选择的图片。执行上传之前还需一些图片格式、大小的校验。在此过程中需调用两个接...

2020-03-25 13:13:11 19456 11

原创 vue 在自定义组件中实现v-model

本文主要涉及vue2.2版本新增的自定义组件的v-model下面以自定义的select组件为例1.子组件模板代码：<template> <div id="app" @click="hiddenSelection"> <div class="form_select"> <input v-model="s...

2020-01-14 18:04:04 789

原创 Ant Design Pro安装踩坑

1.按照文档第一步执行npm create umi报错如下：解决：安装一下create-uminpm install create-umi2. 再次安装报错如下解决：选择根目录下新建一个文件夹，并执行...

2020-01-09 11:55:50 1520

原创 js 实现一个简单的无限滚动

前言：vue项目中需要实现一个列表的无限滚动，引用的ui框架没有这个组件，就自己实现了个比较简单的无限滚动。无限滚动的核心在于对滚动事件的监听，当我们监听到滚动条距离滚动区域底部一定的距离时，即加载下一页的数据，合并到当页的数据中，这样就可以实现一个简单的无限滚动了。步骤：1.监听滚动条 > 2. 在监听事件里计算滚动条距离滚动区域底部的距离，当距离不足10像素时，则加载下一页数据...

2020-01-08 11:24:36 1509

原创 css 横线置于文字两侧

如图效果：html<a class="forgot" href="/passport/forget-password">忘记密码</a>less.forgot { display: inline-block; color: rgba(0, 0, 0, 0.25); position: relative; overflow: hidde...

2019-08-26 14:30:54 168

原创 win10 命令行修改文件或文件夹的控制权限

赋予test用户d:/workspace目录下所有文件的完全访问权限Icacls d:/workspace /grant test:F格式：Icacls ${dirName} /grant ${userName}:F注：F为权限掩码，根据需求决定，参考下面的权限掩码表。若使用Cacls命令会提示“不推荐使用 Cacls，请使用 Icacls”权限掩码简单权限序列:...

2019-08-12 14:26:46 28281

原创 vue中自定义select

在不使用ui框架时，原生的select元素可修改的样式非常有限，大多是不满足我们的需求的。因此花了点时间写了个可以自定义样式的select组件，以备以后使用。1.html<div id="app" @click="hiddenSelection"> <div class="form_select"> <...

2019-08-02 12:02:42 1516 3

原创 win10 使用nginx搭建本地测试环境（踩坑）

目录1.下载2.配置3.启动服务4.查看5.停止服务，重启服务6.参考链接1.下载地址：http://nginx.org/en/download.html下载到本地后解压安装包（我放在c盘方便寻找），无需安装，双击根目录下的应用程序即可启动nginx服务（暂时不用启动，先进行配置，稍后将通过命令启动）。2.配置打开/conf/nginx.con...

2019-07-31 16:58:44 2909

原创 webpack配置---实现某文件夹下的文件不打包

一、使用场景在项目中有时候需要保留一些文件不被编译压缩，比如一些配置文件，我们需要在打包后仍然可以更改配置文件并生效。这时候我们可以通过webpack的插件copy-webpack-plugin，保留某一文件夹下的的所有文件。二、使用方式1.安装插件 cnpm install --save-dev copy-webpack-plugin2. 在项目下新建一个文件夹...

2019-07-17 11:40:38 10327 1

原创 jquery之fullcalendar使用踩坑

一、基本配置注：此处 fullcalendar版本为1.6.0 $('#calendar').fullCalendar({ header: { left: 'prev,next', // 翻页按钮的位置 center: 'title', right: '' }, ...

2019-07-02 15:28:17 1458

原创 css 浮动元素会导致其兄弟元素不换行的解决方案

<div class="text-panel">  <div class="action-bar"> <span class="bar-title">操作栏</span> <span class="split-line">删除</span&gt...

2019-05-15 16:32:38 986

原创 js获取url中的参数

此方法用来提取url的search中携带的指定参数function getQueryString(name) { const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i') const r = decodeURI(location.search.substr(1)).match(reg)...

2019-05-13 15:57:17 100

原创解决遮罩穿透滚动的问题

针对很多弹出层的遮罩显示后仍然可以滚动底层页面的问题方法一：显示弹框时设置页面高度为100%，且溢出隐藏，关闭弹框时放开原先的设置// 打开弹框时let body = document.querySelector('body');body.style.overflow = 'hidden';// 关闭弹框时let body = document.querySelector...

2019-04-08 17:25:06 845

原创 React项目的国际化

最近做的react项目需要支持国际化，网上查了一下，发现一款很好的插件“react-intl-universal”，由阿里巴巴团队开发，这款插件是原先的国际化插件“react-intl”的升级版，“react-intl”因为一些“致命”缺陷现已被其取代，npm官网有罗列原因，有兴趣的可以去了解一下。下面具体介绍一下这款插件的使用方法。1. 安装npm install react-i...

2018-07-24 09:54:54 4312 3

原创 ionic v3版本创建项目失败的解决办法

首先确认npm，node，Ionic和Cordova均已安装成功。博主创建项目时先遇到经过查找，可能是网络问题，于是博主连了4G热点，且能够翻墙，于是问题就变成下面这样再次查找，得知Ionic V2以上版本可以添加"--v2"配置项，输入如下命令：，得知该配置项已经被移除了，如下：输入错误提示中推荐的配置项"--type=ionic-angular"，如下:创建成功！注：创建一个Ionic项目的详...

2018-06-29 10:49:43 1501 1

原创 reactjs前端数据导出

本篇总结了reactjs项目中将表格数据导出为csv文件的方法。引用插件：npm install file-saver --save或bower install file-saver（file-saver git地址：https://github.com/eligrey/FileSaver.js ）使用插件导出文件//引用插件import FileSaver from 'file-saver'...

2018-05-25 09:23:08 6587

原创 react单页应用不想出现竖直滚动条的解决方案

针对改变浏览器宽度，浏览器底部出现滚动条时的情况，解决方案是设置事件监听，根据浏览器的可视区域高度实时更新页面的高度。步骤1：在state中初始化页面高度为window.document.body.clientHeight(注：这里的clientHeight是去除页面底部滚动条高度的浏览器可视区域高度，应与window.innerHeight区分开)state = {height: window...

2018-04-17 16:24:30 4769

原创 jquery中关于事件绑定的问题

jquery中的事件绑定方法：1.将事件绑定到document上，当整个dom中发生点击事件时会先判断当前点击的对象是否匹配该className，再执行点击的回调方法。适用于多组重复元素的点击事件。$(document).on('click','.className',function(){});2.将事件绑定到该className的元素上，一旦该元素发生点击事件立即执行回调方法。如果是单独的元素

2017-12-28 14:57:29 230