- 博客(20)
- 收藏
- 关注
RSS订阅原创 Rem布局的原理解析
需要了解的知识html{font-size:16px}p{font-size:1rem}1rem = 16px;rem 和 em 类似，em相较于父元素的字体大小，而rem相较于html的字体大小；实现原理有了这个以上的前提可以通过监测屏幕大小改变html的字体大小，从而实现自适应大小的效果；获取设备宽度与设计稿宽度的比例 作为html font-size的大小；假如是750/750 那么font-size：1px;设计稿上200px,代码就要写200rem;这样写太大.通常750/75
2022-05-09 22:05:05
891
原创 前端项目如何使用svg矢量图
不管我们是在做web项目还是后台管理类的项目时，都会用到各种各样的图标，对于图标我们可能会采用切图的方式来实现，但是切图是图片会有这样的问题：1、页面放大会导致图片放大会变的模糊2、如果页面中的图片过多的话会造成有很多请求也就代表页面加载慢。所以基于以上问题我们一般使用svg的矢量图，矢量图一般由设计师提供给前端来转换成字体图标，在项目中使用。优点：1、放大不会模糊 2、只加载一次不会有多余的请求。如何使用：1、我们可以借助iconfont-阿里巴巴矢量图库，把设计好的svg文件通过上传图标至项
2022-05-09 13:14:23
5270
原创 echarts 各个配置项详细说明总结
实例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script&g
2022-04-24 15:52:07
496
原创 前端图片裁剪cropper.js
背景：我们在项目中常常都会有更换登陆人头像的需求，这个很简单直接上传一张图片展示就可以了，但是如果上传的图片需要剪裁成正方形的话就需要我们来做一些特殊的处理；这里我们会用到一个图片剪裁插件：cropper.jsgithub地址：https://github.com/fengyuanchen/cropperjs在github中有插件初始化的代码大家按部就班到自己的项目中，先实现初始化看看样子；我这里针对于cropper.js插件做一些特殊的配置，实现正方形裁切；代码：const cropper =
2022-04-06 16:55:49
2639
原创 自己项目中曾用到过的一些 echarts图标案例
之前做的一个项目中用到的一些图表，echarts虽然有文档但是有些特殊的还是需要耗费时间来找，我整理了一些，希望能帮助到大家；因为这部分共用比较多，我先声明了一个公共的对象以便下边实例使用：let chartTheme = { xAxis:{ axisLine: { lineStyle: { color: '#0f5143', // y坐标轴的轴线颜色 width: 1, //这里是坐标轴的宽度,可以去掉 }
2022-03-25 17:27:50
876
原创 前端工程化和模块化
模块化相关规范一、浏览器的模块化规范1、AMDrequire.js2、CMDsea.js二、服务器模块化规范1、CommonJS模块分为 单文件模块与包模块成员导出 module.exports 与 exports模块成员导入：require(‘模块标识符’)三、大一统的模块化规范—ES6模块化在这之前已经存在一、二模块化规范但是存在差异性和局限性，所以咱们以后尽量使用ES6模块化；ES6模块化规范中定义每个js文件都是一个独立的模块导入模块成员使用import 关键字暴露模
2022-03-15 13:23:25
1438
原创 解决前端html页面缓存的问题
对于一个html页面，缓存分3部分，一个是页面内容，一个是css样式，一个是js文件1、页面内容<meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
2022-03-14 15:41:40
4415
1
原创 基于3.x和2.x版本的vue-cli脚手架搭建vue项目大全
首先我们电脑先安装vue脚手架最好安装3.x的版本，3.x版本同时也可以创建2.x的项目；npm install -g @vue/cli基于3.x版本的脚手架创建vue项目1、基于 交互式命令 的方式，创建新版本vue项目vue create my-project出现这个是问你使用默认模版还是手动创建；（我一般会选第二个手动创建）你可以自定义安装需要的功能，这里我安装了babel、router、linter（上下键移动位置，使用空格键来选中）然后回车下一步；问你是否安装历史模式的路
2022-03-11 18:00:12
1022
原创 vue配置请求拦截和响应拦截
背景：vue项目中我们可以自定义http请求，这样我们所有的请求都会走同一个import axios from 'axios'import { Message } from 'element-ui'import store from '@/store'import router from '@/router'import { getTimeStamp, getRefreshToken, getExpiresIn } from '@/utils/auth'const TimeOut = getE
2022-02-20 10:57:39
6015
原创 elementUi上传视频组件
背景vue+element后台管理系统中的表单提交中需要上传视频，利用饿了吗组件可以这么搞。要求：文件上传之前需要处理：限制视频格式限制视频大小限制视频时长实现代码：HTML说明：action 必选参数，上传的地址 stringbefore-upload 上传文件之前的钩子 function(file)on-progress 文件上传时的钩子 function(event, file, fileList)http-request 覆盖默认的上传行为，可以自定义上传的实现 fu
2022-02-11 16:49:11
5507
原创 el-upload上传多张图片组件
背景vue+element后台管理系统中的表单提交包含“资质上传”功能（就是需要多图片上传）要求：文件上传之前做处理限制最多只能上传10张图片格式限制 ‘image/jpeg’, ‘image/png’, ‘image/jpg’图片不能超过2MB上传图片的宽高限制为宽：750，高：500实现代码：HTML说明：action 必选参数，上传的地址 stringlist-type 文件列表的类型 string text/picture/picture-cardfile-list
2022-02-10 16:56:47
3094
4
原创 bootstrap实现轮播图-大全
轮播图就不做过多的介绍了，大家都知道，只是轮播的实现有多种方式，例如使用纯js写，费时费力，且还不适用于各种终端设备，但是bootstrap就不一样了，只需写一套代码，无论是手机端还是ipad端，再或者是PC端，都可以正常使用。如何创建轮播步骤：准备轮播需要的图片，大于等于两张。准备bootstrap的css和js以及jquery1.10+的js文件文件，这个网上一搜一大堆，也可以去官网下载。将下载的css文件放入项目的css目录内，js文件放如js目录内，以及图片放在img(专放图片
2022-02-09 11:01:28
16288
1
原创 文字一行横向滚动效果
最近在做大屏的一个项目，主要是以列表的形式展示一些数据，由于有的数据过长无法全部展示，要求横向滚起来，本来打算用js做，后来发现有个非常好用的标签一样代码搞定对的的简单粗暴符合我小帅的审美，废话不多说代码安排：一、marquee标签用法<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="2
2022-02-08 10:32:54
465
原创 js让页面全屏展示
全屏APIH5有一个全屏API，Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。需要注意的是：只有包含在顶层文档内部的标准HTML元素、svg元素和math元素，以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素，以及object的内部元素不能进入全屏模式。示例代码如下：<!doctype html><html> <head> &l
2022-02-08 10:03:50
18170
1
转载 js监听键盘事件
只要你定义了这些键的动作，你在浏览器里按下这些键就会响应，兼容目前所有浏览器。<script type="text/javascript" language=JavaScript charset="UTF-8"> document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e
2022-02-08 09:59:59
7481
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人