自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(40)
  • 资源 (2)
  • 收藏
  • 关注

原创 前端项目使用js将dom生成图片、PDF

教你怎么将前端dom转换成图片,也可以转换成PDF文件进行下载、上传等操作

2024-09-11 16:21:25 1021 1

原创 js 使用正则表达式实现搜索结果高亮显示(处理中英文符号问题)

【代码】js 使用正则表达式实现搜索结果高亮显示(处理中英文符号问题)

2024-08-11 16:46:06 564 1

原创 深入了解 Stylus:简洁优雅的 CSS 预处理器

Stylus 是一种基于 Node.js 平台的 CSS 预处理器,它具有简洁灵活的语法结构,允许使用者通过缩进来表示 CSS 的层级关系,省去了大量的花括号和分号,使得代码更加简洁优雅。通过本文的介绍,我们了解了 Stylus 这一款简洁优雅的 CSS 预处理器,它具有灵活的语法结构和丰富的功能特性,可以帮助我们更高效地编写和管理 CSS 代码。同时,我们还学会了如何将 Stylus 引入到项目中,并进行基本的样式编写。希望本文能够对前端开发工程师们在项目中使用 Stylus 有所帮助。

2024-05-09 09:56:19 598

原创 前端AI辅助:如何利用人工智能提高内容生产效率

AI技术为前端开发工程师们提供了许多新的可能性,可以帮助他们更高效地创建和管理内容,提高用户体验和网站的竞争力。但是,AI技术也只是工具,最终的内容质量和创意还是需要人类的思维和创造力来保证。因此,在利用AI技术的同时,前端开发工程师们仍需保持对内容创作的热情和责任感,不断追求更高的品质和创新。

2024-05-09 09:36:04 727

原创 深入探索:npm详解

通过本文的介绍,我们详细了解了npm的使用方法,以及如何将自己的资源和Vue组件发布至npm。npm作为JavaScript生态系统中的重要组成部分,为前端开发者提供了便捷、高效的包管理和分享平台,帮助他们更好地构建和维护自己的项目。希望本文能够对你有所帮助,欢迎开始使用npm,并将你的资源分享给更多的开发者!

2024-05-08 09:51:47 1144

原创 Edge浏览器的前端开发体验与深度探索

Edge浏览器作为一款现代化的Web浏览器,为前端开发者提供了丰富的功能和优秀的性能表现。通过深度探索Edge浏览器的特性和优势,我们可以更好地利用它来开发出高质量、高性能的Web应用程序,为用户提供更好的浏览体验。期待Edge在未来的发展中能够继续保持创新,并为前端开发者带来更多惊喜和便利!

2024-05-08 09:29:31 580

原创 解锁程序员的实用神器:提升效率的工具与技巧--入门篇

作为一名程序员,我们时常需要处理繁重的任务、解决复杂的问题,而在这个过程中,合适的工具和技巧可以事半功倍地提升我们的效率和工作质量。本文将介绍一些实用的工具与技巧,帮助程序员们更高效地进行编码、调试和团队协作。

2024-05-07 14:21:52 503

原创 掌握前端开发的利器:实用的 Chrome 浏览器命令

作为前端开发工程师,我们经常需要在浏览器中进行调试、分析和优化我们的网站或应用程序。而 Google Chrome 浏览器作为最受欢迎的浏览器之一,提供了丰富的开发者工具和命令,帮助我们更高效地进行开发工作。在本文中,我将介绍一些实用的 Chrome 浏览器命令,希望能够帮助到正在学习或使用前端开发的同学们。

2024-05-07 14:14:51 492 1

原创 vue 输入框@人功能组件,支持复制粘贴

vue 输入框@人功能组件,支持复制粘贴,多端通用

2024-05-07 11:48:41 2543 8

原创 javascript的微任务和宏任务,以及其执行顺序

简单的说,就是在程序中(不一定是浏览器)中跑两个线程,一个负责程序本身的运行,作为主线程;每当遇到异步的 setTimeOut ,setInterval 这些异步任务,交给 EventLoop 线程,然后自己往后运行,等到主线程运行完后,再去 Event Loop 线程拿结果。宏任务是指需要在任务队列中排队执行的任务,而微任务是指在当前任务执行结束后立即执行的任务。4. 主线程查询任务队列,执行微任务,将其按照顺序执行,全部执行完毕。5. 主线程查询任务队列,执行宏任务,取的第一个宏任务,执行完毕。

2023-08-03 15:15:23 434

原创 uniapp 微信小程序 编译后文件过大

2、查看微信代码文件分析,发现每个组件文件编译后,大小都在90KB左右,经资料查证,uniapp会将公共资源(JS,CSS)编译到每一个组件文件上,这有违背与小程序的初衷;小程序使用uniapp进行开发,uniapp编译成微信小程序代码后,文件过大,微信限制每个包大小不能超过2MB,之前经过优化后,主包大小为1.77MB,总代码包大小3.45MB;查看方法:在编译后的文件夹(MP-WEIXIN)中,查看app.wxss,看其中引用了哪些资源文件,通常是这个问题。

2023-05-25 10:40:08 1708 4

原创 node.js报错 ReferenceError require is not defined 解决方案

【代码】require is not defined。node.js报错 ReferenceError require is not defined 解决方案。

2023-04-25 15:25:02 1689

原创 网站吊唁效果(黑白)

网站吊唁效果(黑白)

2022-12-01 17:53:20 329

原创 element-ui 使用小坑

element 表格有合计项和固定列,固定列下方滚动条无法滚动,解决办法

2022-01-13 10:26:10 575

原创 Vue 常用的修饰符

vue常用的修饰符,v-mode,事件修饰符

2021-12-21 16:59:53 296

原创 提示execCommand 被弃用?JS点击复制文字的替代办法

虽然还能用,但是会提示你即将被废弃,找了一个替代方法,基于Promise,不用像execCommand一样还得选中范围;看了一下兼容性也挺不错的navigator.clipboard.writeText(value);navigator.clipboard.writeText(value).then(() => {});相关文档:Clipboard.writeText()...

2021-12-15 10:37:15 17447

原创 Element + Vue 封装的table组件,可动态生成列,可通过npm进行安装

封装 Element Tble 列表 动态 列 Vue

2021-12-01 14:10:29 2531 3

原创 vue config配置 proxy、打包拆包处理

const path = require('path')function resolve(dir) { return path.join(__dirname, '.', dir)}module.exports = { publicPath: './', productionSourceMap: false, devServer: { proxy: { // 替换 '/commonApi': { .

2021-08-31 17:36:28 1263

原创 Javascript格式化日期

/** * 格式化日期 * @param {*} value 日期 */function formatDate(value) { if (!value) return ''; const date = new Date(value); const year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); let hour = date.g.

2021-05-13 11:12:43 217

原创 css3 实现页面加载动画(pc+移动)

先看一下效果吧css<style> html, body { width: 100%; height: 100%; } #load_more_box { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: #fff; z-index: 99999..

2021-04-25 12:03:47 392

原创 上传excel文件验证

使用element的文件上传组件<!-- 在调用接口上传文件时,使用变量<isUpdata>来替换按钮,实现选择文件完成后按钮的加载状态 --><!-- 如果当前上传文件按钮存在于按钮组中,记得添加类名添加左右外边距10px --><el-uploadv-if="!isUpdata"class="upload-demo mr10"action="url":before-upload="beforeImport":show-file-lis...

2021-03-03 11:57:37 336

原创 blob下载文件

// 下载模板 download() { // 调用接口获取到文件 new Promise(res => { const blob = new Blob([res], { type: "application/vnd.ms-excel" }); // 下载文件名 const fileName = "fileName.xls"; const linkNode = document.createElement.

2021-03-03 11:50:54 782

原创 flex 解决子元素高度问题

父元素上增加align-items:flex-start; 交叉轴的对齐方式,默认是stretch

2020-06-11 10:58:19 2746 1

原创 将input type=file 获取到的图片展示到页面上

我们创建一个函数,用于接收拿到的files[0],并将生成的base64地址返回出去getBase64(file) { return new Promise(function(resolve, reject) { let reader = new FileReader(); let imgResult = ""; reader.read...

2020-04-16 16:27:17 899

原创 js 获取页面鼠标选中的文字

js获取页面鼠标选中的文字,最主要的代码event.selection = window.getSelection();页面代码<div> <p class="content"> 爱神的箭偶家阿佘的疯狂啥叫看到你看见的ask的房价开始大幅九点六十分静安寺附近啊阿斯蒂芬了解了的萨芬加拉 福建省拉萨附近的拉丝机奥省的浪费空间大历史飞机拉萨附近拉萨的反馈吉拉斯飞机...

2020-01-08 18:06:55 969

原创 Element + Vue之封装的Echarts折线图组件

调用该组件需要传以下几个参数**id:**该echarts盒子的id(可以随意设置,它是echarts渲染的关键要素,同时我用它来在一个页面多次调用该组件而做的区分)**option:**该折线图的option配置代码,主要是大部分折线图每一个配置都不一样,不是单纯的改改数据而已,由于时间问题,我也没有再进行进一步的封装。<template> <div :id=...

2019-12-25 15:09:01 2623

原创 JS 实现下拉刷新

纯JS实现下拉刷新window.onload = function() { window.addEventListener('touchstart',touchstart,false) window.addEventListener('touchmove',touchMove,false)}var _start = 0var _end = 0function touch...

2019-12-16 11:52:56 360

原创 VS Code 插件整理;前端常用编辑器插件

此文章就是记录一下常用的 Vs Code 的插件,编辑器的插件, 以及一些快捷键,能使前端开发起来事半功倍

2019-12-13 17:30:12 942 1

原创 CSS3禁止点击、禁用、一切禁用效果

一、pointer-events:none 是什么?pointer-events 是css3的一个属性,它的属性值有很多,基本上平时用的最多的就是 none 属性了。pointer-events:none; 意思就是 禁止鼠标事件,包括hover,js点击事件,甚至你F12选中元素的箭头都选中不到它,所以这个属性我们可以简单的实现按钮、tab选项卡的禁用。当你想点击它的时候,一般就是在外边...

2019-12-13 08:52:50 738

原创 Vue + iview实现动态添加路由 + 动态侧边栏

碰到的动态路由问题,由于我是小白,网上搜的看不懂,就用自己的方式实现了,毛病弊端什么的肯定有,但是最起码靠自己的双手给实现了。麻烦各位大佬看看有什么问题,以及动态路由正确的 一般的写法以及逻辑router index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Ho...

2019-12-06 17:00:36 1881

原创 Nginx配置反向代理;vue打包上线处理

前言:当我们把vue项目打包放到服务器上之后,打开项目发现接口会报错,小伙伴们都会想,明明vue配置了代理啊。其实这时候就跟vue没多大关系了,需要nginx配置反向代理一:打开nginx>conf>nginx.conf修改80端口的配置文件server { listen 80; server_name localhost; /...

2019-11-27 11:35:34 253

原创 将npm镜像替换为淘宝镜像

// 用来查看现在的镜像地址npm get registry(默认是 https://registry.npmjs.org/)// 将镜像地址更换成淘宝的npm config set registry http://registry.npm.taobao.org/yarn config set registry http://registry.npm.taobao.org/// ...

2019-11-25 11:46:33 321

原创 Element + Vue之封装的分页组件

调用该组件需要传以下几个参数一种是数据量少的时候,后端将全部数据给到你,你来进行分页功能 需要将全部数据传过来 pageData进行选择设置每页条数 pageCurrent<template> <div class="block"> <div class="page-desc">共{{total?total:pageDat...

2019-11-21 18:03:59 262

原创 Element + Vue 之 封装的日期组件

<template> <el-date-picker style="width: 247px;height:32px;padding: 0 15px;" v-model="value" :clearable="false" type="daterange" range-separator="~" start-placehol...

2019-11-21 17:59:17 859

原创 超级无敌符合测试需求的邮箱正则表达式

找了无数个正则,都不合测试胃口,这个牛逼/^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|trave...

2019-11-21 17:51:09 182

原创 TypeScript

初识TypeScript** TypeScript就是JavaScript的超集,适用于大型应用或多人协作 **TypeScript vs JavaScriptTypeScript更适用于大型应用是javascript的超集(typescript文件最终还是要编译成javascript文件)TypeScript是跨平台且开源的语言TypeScript可以引入javascript流...

2019-10-11 15:31:59 213

原创 Element-ui number输入框长度限制以及不能输入e、+、-符号

Element-ui number输入框长度限制以及不能输入e、+、-符号<el-input v-model="scope.row.sort" type="number"@input.native="if(scope.row.sort.length>3)scope.row.sort=scope.row.sort.slice(0,3)" onkeypress='return(...

2019-10-09 11:53:41 2532

原创 ajax请求成功后进入错误回调

ajax请求成功后进入错误的回调明明ajax请求成功了,返回状态码为200,为什么会走ajax回调函数呢?原因就在于 dataType ,当后台给你返回的值为text,你是写的 dataType: ‘json’,时,就会进入错误的回调,这个就像vue-axios,当你success回调里边逻辑错误时,也会跳到错误回调一样。...

2019-10-08 10:54:53 726

原创 重新认识 ES6

原来用到es6的地方,只有箭头函数,解构,导入导出,let,回过头来看看es6,感觉真的好不一样啊Symbol我刚看到这个真的不认识,没见过,这是es6新引入的一种原始数据类型 它声明的值是独一无二的,例如:let a = Symbol('1')let b = Symbol('1')console.log(a) // Symbol(1)console.log(b) // Symbol...

2019-08-14 16:58:21 167

原创 Node.js+Vue实现实时通讯

Node.js+Vue实现实时通讯使用Node.js 包含的ws模块来实现实时通讯的功能Node.js代码vue代码我刚开始写的时候,把连接ws写到了点击事件里边,点击按钮的时候才去连接ws,这样的写法我发现两点问题:发送消息接收到了服务器打印消息使用Node.js 包含的ws模块来实现实时通讯的功能第一次接触实时通讯,而且是自己利用空闲时间去了解websocket,偶然见看到了Node.js...

2019-08-14 10:29:20 1345

使用elementUI-table二次封装的表格带分页.rar

基于Element-ui封装的表格组件、分页组件,可动态生成el-table-column父组件用几行代码就能搞定报表的开发,极大的节约了开发时间

2021-12-17

纯css实现的20种loading效果

本资源提供了完全基于CSS技术实现的20种不同风格的Loading加载动画效果。无需任何JavaScript或复杂的前端框架,仅通过CSS3的特性(@keyframes、transform、transition等)即可在网页上呈现丰富多样的动态加载指示器。 将提供的HTML和CSS文件添加至您的项目中,根据需要调整样式参数即可轻松实现所需的加载效果。 这些加载动画不仅美观且易于集成到您的网站项目中,无论是作为页面加载提示、按钮状态反馈还是其他需要显示等待状态的地方,都能为用户体验加分。每个动画都经过优化以确保良好的性能表现,并且兼容主流浏览器。 无论您是初学者希望学习CSS动画的基础知识,还是专业开发者寻找现成的加载动画解决方案,这份资源都将满足您的需求。每个动画都附有详细的代码注释,帮助理解其实现原理,同时提供修改和扩展的空间。

2024-09-12

Element + Vue 封装的table组件

基于Element-ui封装的表格组件、分页组件,可动态生成el-table-column父组件用几行代码就能搞定报表的开发,极大的节约了开发时间

2021-12-07

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除