- 博客(40)
- 收藏
- 关注
RSS订阅原创 css属性clip-path的使用说明
当ui设计上的图片、div等的形状不是长方形，而是多边形的时候，就可以借助clip-path这个css属性来实现。clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。【from:MDNclip-path可以理解为一把剪刀，将图片、div等剪裁成我们所希望的形状。下面，将着重介绍下clip-path的三个函数，分别是polygon()、circle()、ellipse()关于clip-path的介绍就到这里，如果觉得自己去写太麻烦的话，网上也有一个工具。
2023-10-27 16:00:21
487
原创 使用print-js打印时，页面设置字体不生效问题
在使用打印功能时，打印内容对比页面展示的内容有缺失。原因是页面上显示的文字font-size是9pt，然而调用print-js时，字体变大了，导致同样的高度展示的文字内容少了，造成了内容缺失的现象。查看nodemodules/print-js/dist/print.js文件发现，print-js接受一个font_size的入参，而这个参数的默认值是12pt。所以，当我们没有传font_size时，print-js就会将所有的字体大小都设置成12pt，就导致了上述问题。
2023-10-11 13:51:47
1162
2
原创 vue-cli2项目运行时中断解决方案记录
随着项目越来越庞大，在前端项目运行过程中，时常出现如下报错，随后服务中断。前前后后尝试了以下几种方案，最后一种生效了，之后没有再中断过。，据说此方案还需要关掉所有命令工具。
2023-09-27 18:04:36
243
原创 el-button禁用后，按钮上el-tooltip的内容无法触发的问题
页面上有一个编辑按钮，当按钮禁用时，鼠标hover按钮时，tooltip显示不能编辑的原因。但在一些同事的chrome浏览器上查看的时候，发现hover按钮时，tooltip没有显示出来。通过百度，发现问题出现的主要原因是：el-button disbled的时候，影响到了el-tooltip。所以通过对el-button包裹一层div能够解决该问题。观察发现同事的chrome版本较低，进行升级后，页面能正常显示。
2023-09-15 10:50:19
535
原创 el-table实现表头列宽自适应（即表头文本不换行）
前情提要leader提出，希望表头文本能够将列宽适应内容宽度变长，而非换行显示。接收到需求，首先去element官网查看文档看有没有相关属性可以设置。经查验，fit属性的说明是“列的宽度是否自撑开”，我一想，这个描述跟我的需求挺像的呀，但仔细一看，这个属性默认就是true，也就是说这个属性本就打开了，但表现出来的效果和我们想要的不一样。这个属性应该是指，在所有列宽加起来<表格宽度时，列宽是否撑开以填满表格宽度。效果如下图：fit=“true”fit=“false”没有发现element有提
2021-06-17 17:34:25
14134
14
原创 【css】移动端开发中，字体/字体图标垂直居中问题
前情提要使用插件，自动将px转rem，所以开发中都是使用px；在移动端网页开发过程中，写了一个类似tag（定高）的东西，但在一些设备上字体和字体图标没有垂直居中；字体存在一个line-height，不等于尝试了以下几种方法：设置字体line-height为tag高度，问题：在一些设备上，由于字体的font-size最小为12px，而line-height并没有最小的限制。×给字体加行高，给tag加padding的方式。 ×设置tag的高度，再设置display: inline-flex;
2020-08-12 18:52:26
1223
原创 【前端小技巧】记录开发中运用到的小技巧
HTML…CSS给div元素添加display: inline-block;可以让div的宽度随内容的增减而增减；…JS设置JSON.stringify的第三个参数（缩进空格数），可以轻松将JSON数据转化为带缩进的JSON字符串格式。…
2020-07-14 15:37:00
152
原创 【js】vue项目内的图片转换为File的形式
前情提要后端项目中已有一个接口，接收前端input[type=file]上传的图片文件。但前端需要添加一个重置功能，即将图片重置为默认图片，且不添加新接口。因此，想要利用此接口实现重置功能，即是将项目内的默认图片转换为file形式，便可使用此接口进行上传。主要实现主要步骤为：图片 —> base64 —> Blob —> File。1）图片转base64其中，$.Deferred是使用了JQuery的方法。// 实现将项目的图片转化成base64function getB
2020-06-23 12:48:04
5961
2
原创 【ECharts】使用vue-echarts数据实时更新导致dataZoom（数据缩放）被重置问题
前情提要在使用vue-echarts进行可进行数据缩放的图表的渲染，并且图表数据是实时更新的。每一次更新都会刷新图表，导致用户选择的缩放范围在更新后被重置。基于此，希望在刷新图表数据时，能够保持缩放范围。实现过程1. 基本思想监听图表的dataZoom（缩放）事件，记录缩放后的start和end（缩放范围）。在刷新图表前，将上述记录的缩放范围设置到option中dataZoom的start和end值。2. 具体实现1）设置事件监听<Echarts :style="{ h
2020-06-16 16:21:49
2790
1
原创 【jwt】使用jwt进行token的创建和验证（包括前后端）
前言用户访问网站时，都希望这一次登录完成后，下一次再访问时能够记住其登录的状态，而不是每一次进入都要重新进行登录。因此，本文记录了使用jwt来创建和验证token，以达到记住用户登录状态的过程前端：vue-cli3后端：node.js的express框架jwt：jsonwebtoken主要内容后端安装jwtnpm install jsonwebtoken封装创建...
2020-05-01 15:34:13
865
原创 【vue-cli3】vue-cli3项目更换标签页的图标
前言由于每次都会忘记更换的步骤，所以记录一下。主要步骤将自己的ico图标，存储到public下，并命名favicon.ico替换原有的ico文件。新建vue.config.js文件，并作以下配置。module.exports = { pwa: { iconPaths: { favicon32: 'favicon.ico', ...
2020-04-30 00:27:23
2346
原创 【vue-cli3】关于在vue.config.js做资源路径的配置
前言今天使用npm run build打包一个项目，然后访问打包文件的index.html发现资源文件都加载失败了。仔细查看之后，发现它们加载的路径不太对。过程发现问题之后，就是查了一下，发现有人说在vue.config.js文件中设置publicPath: '././'（这个属性默认的是./）即可。备注：vue.config.js需要自己在项目根目录下创建，然后在module.ex...
2020-04-16 17:53:42
2911
原创 【ECharts】使用日历热力图显示某人一年来的工作量（实现与gitlab的contributions类似效果）
前情提要日历热力图能够直观的查看某人一年内（一年前的今天到今天）的工作量/工作情况，并且对其点击事件进行监听，可以进行对应操作，比如说，获取某一天的具体工作。主要实现以下代码是在echarts的编辑器中直接进行实现的，这是编辑器地址。let today = new Date();// 获取一年前的今天var date = new Date(today.getFullYear()-1...
2020-03-26 17:09:47
1713
原创 【js】vue项目中实现点击复制过滤条件，获取并处理粘贴板内容
前情提要有这样一个需求：每次重复选过滤条件太麻烦啦，需要一个可以复制过滤条件的功能！过滤条件类似下图。主要步骤第一步：复制工具的选取。这里我选用的是原生的Document.execCommand()方法，该方法允许运行命令来操纵可编辑内容区域的元素。详情可查看MDN。第二步：设计一个按钮，当click这个按钮的时候，执行handleCopy()方法。this.viewVa...
2020-03-25 16:40:34
2791
2
原创 【js】限制字符长度时区分中英文
前情提要在我们做字符串长度限制时（中、英文都可以输入的情况下），如果简单限制字符串长度的话，在英文情况下会稍显不合理。因此，对中、英文进行区分来做长度限制会更好一些。主要步骤这里我们可以封装一个函数，识别中文字符则长度+2，其余字符长度+1，然后返回字符长度function getStringLength (str) { let len = 0; for (let i = 0;...
2020-03-24 14:49:59
1566
原创 【express】express写的接口，前端访问时返回的是We're sorry but ... doesn't work properly without JavaScript enable
前情提要【express】express写的接口，前端访问时返回的是We’re sorry but … doesn’t work properly without JavaScript enable，？？？搜索搜索到的结果是与前端router的mode使用了history有关，但是改为hasn依旧有问题。那算了，还是改为hisitory，寻找其他方法吧。然后，转机来了！看到了官网有说明...
2020-03-21 19:37:04
902
原创 在阿里云服务器上部署easy mock
前情提要鉴于使用easy-mock的过程中请求常常会失联，导致请求失败，阻碍项目开发进程，故选择在自己的阿里云服务器上进行部署。进入服务器方式之一：进入阿里云服务器，进入控制台，点击服务器，点击远程连接，填写登录信息，进入主要过程接下来的教程参考【建议收藏】Easy-Mock服务器部署-看这篇就够了下载并配置git下载git在linux服务器上安装git（注意要往后看）注：...
2020-01-21 16:31:04
782
1
原创 【CSS】结合自我理解翻译《6 Methods For Vertical Centering With CSS》
前言本文根据《6 Methods For Vertical Centering With CSS》这篇文章结合自己的理解翻译而来，若有解释不恰当或不合理的地方希望能不吝赐教。垂直居中的六种方法（2-7）：（1）vertical-align（2）line-height（3）CSS表格方法（4）绝对定位和负边距（5）绝对定位和拉伸（6）大小相等的上padding和下padding（7...
2019-09-14 22:56:49
137
原创 【服务器端（java）】通过request.getSession().getAttribute(key)获取的值为null的问题记录
一、前言前提：该请求下是在跨域情况下，并且跨域解决方案为cors。在已经将值存入session的情况下，使用request.getSession().getAttribute(key)获取的值却为null，经查证，原来是跨域情况下，默认不允许传送cookie。因此，需要对前后端进行设置。二、设置前端：axios.defaults.withCredentials=true后端：res...
2019-07-26 23:58:12
9940
3
原创 【SVG&requestAnimationFrame】圆环增长和数字增长
一、前言圆环和数字增长的场景我们经常能见到，下面先来看一下效果图：从初始值350增长到750的一个过程，其中圆环增长和数字增长都是1s。二、实现过程Code Of HTML从如下html代码中可以看出，svg中画了两个圆，不填充，但都进行了描边。第一个<circle>是较浅的背景色；第二个<circle>是较深颜色，记录圆环增长的路径，并且可以看到将str...
2019-07-05 17:24:00
439
原创 【移动端】移动端页面适配方案
前言以下文章是在设计稿尺寸为750 * 1340的基础上展开讨论的，如需参考，须根据实际尺寸作出相应更改。一、使用rem适配的方案（一）什么是rem这是MDN上的解释：这个单位代表根元素的 font-size 大小（例如 元素的font-size）。当用在根元素的font-size上面时 ，它代表了它的初始值也就是说，rem单位取值的大小和根元素html的font-size取值直...
2019-05-16 21:15:55
1310
原创 【算法】斐波那契数列与跳台阶
一、斐波那契数列斐波那契数列为1，1，2，3，5，8，13，21，34…等数组成的数列，用数学公式表达为F(1) = 1;F(2) = 2;F(n) = F(n-1) + F(n-2); (n>=3,n∈N*)；二、代码实现（Javascript）题目描述：要求输入一个整数n，请你输出斐波那契数列的第n项（从0开始，第0项为0）。我的实现（利用递归）：function Fi...
2019-03-30 17:11:07
321
1
原创 【webpack】webpack开发单页面应用（spa）
一、前言前面【webpack】webpack4基本的构建过程和【webpack】webpack之管理资源及管理输出作了一些基本的配置，接下来我们就用vue来开发一个spa应用。二、准备安装并配置babel（1） 安装npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loaderet...
2019-03-27 21:41:54
355
原创 【js】理解闭包
一、引言我们知道，在Javascript中，函数内部可以访问函数外部的变量，而反之，函数外部不可以访问函数内部的变量。那么问题来了，如何才能让函数外部访问到函数内部的变量呢？二、闭包闭包就是有权访问一个函数内部变量的函数，也即函数里的函数。看一个例子：function f1(){ var n=999; function f2(){ alert(n); } r...
2019-03-26 23:49:20
86
原创 【js】分析一道涉及JavaScript运行机制的题
引言无意中看到这样一道题，问最后结果是什么？由此分析并记录一下这道题的执行过程以及结果。async function a1 () { console.log('a1 start') await a2() console.log('a1 end')}async function a2 () { console.log('a2')}console.log(...
2019-03-25 20:33:46
189
原创 【webpack】webpack之开发环境中的常用工具
前言使用开发工具能提高开发效率，但仅用于开发环境，请不要在生产环境中使用它们。Source map以追踪错误和警告。webpack.config.jsconst path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = r...
2019-03-20 22:44:45
199
原创 【webpack】webpack之管理资源及管理输出
前言本文将从进行管理资源和管理输出两方面进行记录，两部分都需要用到【webpack】webpack4基本的构建过程中的代码示例管理资源webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。一、加载CSS1.为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中 安装并添加 sty...
2019-03-20 21:32:44
263
原创 【webpack】webpack4基本的构建过程
前提安装node，npm（新版本的node安装时会同时安装npm）。如果想提高下载安装包时的速度，可以安装淘宝镜像cnpm。接下来，开始讲解webpack的基本构建过程。过程1.在项目目录下，执行npm init --yes，执行完生成一个package.json的文件。2.安装webpack（以下两种方式自选）：npm install --save-dev webpack【本地安装，默...
2019-03-20 17:36:22
677
原创 【js】事件委托/事件代理
概述“事件处理程序过多”问题的解决方案就是事件委托，利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。事件冒泡：由接收事件的元素开始，向上逐渐传播。比如页面结构为document->html->body->div，当点击div时，首先触发div的click事件，然后click事件向上传播，在每一级上都会发生，直至传播到document对象。引入原因事件...
2018-12-22 10:58:15
1309
1
原创 【vue】Vue CLI 3创建项目
前提条件① 若你的计算机已经安装了旧版本的vue-cli，你需要先卸载它。npm uninstall vue-cli -g② 卸载完旧版本之后，安装新版本。（注：node.js版本要求8.9以上）npm install -g @vue/cli③ 使用vue --version检查当前版本是否正确。创建项目推荐使用cmd来创建，因为涉及到一些设置。① 新建项目hello-wor...
2018-12-01 21:47:42
642
1
原创 【CSS】css变量的使用
一、变量声明全局变量:root选择器能让我们选择DOM树里的最顶级的元素，也就是文档树。所以，这样定义的变量，也就相当于全局变量了。:root{ --primary-color: #f2f2f2;}局部变量b与em为兄弟节点，在b定义--boldsize变量，对em元素不生效。b{ color: var(--primary-color); --boldsize: 30...
2018-11-20 22:18:41
182
原创 【webpack】webpack4带来的新特性
一、webpack4不是必须要有配置文件默认入口点：./src/index.js默认输出模块包：./dist/main.js若要覆盖以上默认配置，则"scripts"中进行配置。如："build": "webpack -mode production ./enout/index.js --output ./enout/main.js"二、production/development...
2018-11-19 22:30:24
342
原创 【webpack】安装babel的踩坑之旅
Loader用于对模块的源代码进行转换，可以使你在 import 或&amp;amp;quot;加载&amp;amp;quot;模块时预处理文件，可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL，甚至允许你直接在 JavaScript 模块中 import CSS文件！使用loader有三种方式，推荐的使用方式是在 webpack.config.js 文件中进行配置。modul...
2018-11-07 21:08:00
5143
原创 【webpack】构建webpack项目
前提已经安装node和npm。创建一个文件夹，这里创建的是webpacklearn文件，cd到该文件夹下，输入命令（快速初始化项目）npm init --yes执行这个命令之后根目录下会多出一个package.json文件。创建步骤First安装webpack及webpack-dev-server（用于开发的本地服务器）$ npm i -g webpack webpack-de...
2018-11-07 16:14:00
335
原创 【vue】记录vue-cli打包前的操作
前言当项目编辑好运行`npm run build`打包好后，将dist文件发给后台，但后台跑起来之后，发现页面一片空白，对静态资源的加载都显示404。什么原因呢？原来是打包前少了这两步。①修改静态文件的路径在config -&gt; index.js 下，找到**build**，将其中的assetsPublicPath修改为assetsPublicPath: './' ...
2018-11-02 14:52:15
293
2
原创 【git】将vue-cli项目git远程提交到github
1.初始化仓库 git init2. 查看当前库状态git status3.添加到暂存区 git add .4.提交到仓库git commit -m &amp;amp;amp;quot;描述by yourself&amp;amp;amp;quot;5.在github上创建仓库，然后复制SHH key，关联远程库git remote add xx SSH-key，其中，xx为自己的帐号名，SSH-key则为刚刚在github上复制的。6.提交到远程库gi
2018-10-26 00:12:21
1270
原创 【vue】在vue-cli2下用axios模拟请求本地数据
前请提要：在未与后台进行交互时，前端先自行对接口进行测试是很有必要的。那么，要如何来模拟数据请求呢？如何请求本地的json文件呢？接下来将会详细说明。创建一个json文件（存放未知自行选择，这里我选择放在全局目录下）——db.json。{ &amp;quot;student&amp;quot;:[ { &amp;quot;name&amp;quot;: &amp;quot;Liz&a
2018-10-24 18:57:50
2739
原创 【小程序】使用button的open-type="getUserInfo"引导用户进行授权
一、 前言小程序官方文档，上面说明 wx.getUserInfo(OBJECT) 注意：此接口有调整，使用该接口将不再出现授权弹窗，请使用 &amp;amp;lt;button open-type=&amp;quot;getUserInfo&amp;quot;&amp;amp;gt;&amp;amp;lt;/button&amp;amp;gt; 引导用户主动
2018-05-12 22:43:59
68198
20
原创 【css】关于css3的多列布局出现错乱问题
一开始给外部的container设置了column-count：2；当里面的每个item是偶数个时，布局是正常显示的；而当我们设置了奇数个item时，会出现下图的错乱布局。在item里面设置了以下两个属性之后 height: 100%; overflow: auto;布局就恢复到我们原本期望的样子了。...
2018-05-05 18:18:49
2401
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人