- 博客(82)
- 收藏
- 关注
RSS订阅
原创 Vue中利用Js实现鼠标滚轮控制盒子横向滚动（监听鼠标滚轮滚动事件，火狐DOMMouseScroll、谷歌mousewheel）
思路：使用js来实现监听鼠标滚轮滚动监听事件<div id="box" class="box"> <div></div></div>mounted() { this.scrollInit() },methods: {scrollInit() { // 获取要绑定事件的元素 const scrollDiv = document.getElementById("box"); // docume.
2021-12-03 09:44:56
1695
1
原创 一次表格及分页优化完善实践，表头固定及分页固定（模仿禅道）
需求：1、当表格数据未查看到最后一条时，分页固定在页面最下方，直到查看表格最后一行，分页取消固定；2、当表格滑动到上方，表头固定在系统的上方思路：1、当鼠标滑动时判断表格距离浏览器上方的距离，当距离小于系统头部时，表头固定，反之取消固定， 获取滑轮滚动事件也可以使用@Wheel，也可以使用window.addEventListener监听滑动2、表头固定的方式有三种：方法一：给el-table的height赋值，获取表格中滚动条滚动到最后一行，始终差着点值，不知道什么原因，考虑不周，想加.
2021-11-19 15:40:25
1923
2
原创 是日前端交流
不知不觉中发现，距离第一次20年2月在“是日前端”上发表文章，已经有将近2年的时间了，由于种种原因吧，学习总结更新的不是很频繁，更多的是个人工作中使用时候踩的一些坑和常用的总结吧，但是也积累了近10万的浏览量，竟然有了100个粉丝，当上周快结束的时候，惊喜的发现有了98个粉丝时，我心里就暗暗下了决定，当到了100个粉丝时，我也创建一个交流群，今早一看这不就100个粉丝了，非常感谢大家喜欢我的分享，如果大家想一起交流学习，共同进步，欢迎扫码进“是日前端交流群”，进群可以改下备注，地区_昵称，群里请勿发广告，
2021-11-15 10:30:53
149
原创 vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航
早就实现了功能，但是发现点击的时候，选中的菜单项背景色会变白，周五时候仔细观察了一下，发现并不是调整样式的问题，而是选项没有被选中，于是好好研究了一下组件递归这块，总结记录一下心路历程一、概念递归：递归其实说白了，就是自己调用自己，样子就像是套娃一个套一个的，小时候玩过一个游戏汉诺塔就是利用的递归原理：函数递归：函数利用函数名还调用自己组件递归：所以组件递归利用的是vue组件中的name属性来实现的二、需求实现可折叠动态渲染多级侧边栏导航三、分析1、观察到侧边栏导航是一级一级的，第二.
2021-04-17 23:19:43
3963
6
原创 CSS3实现立体书效果
思路：利用CSS3中3D转换的perspective属性，通过左面和前面的旋转rotate、位移变化translate实现立体书的效果具体可参考：HTML5+CSS3学习总结(完结)该文章中的3D导航栏案例的思路示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
2021-02-08 11:56:09
709
1
原创 vue + elementUI中的滚动条el-scrollbar使用总结
由于需要使用滚动条，原生滚动条长的太丑，查到了elementUI中的滚动条el-scrollbar，使用简洁方便，样式如下：使用方法如下：外部的div必须给固定高度才行<!-- 外部div --><div style="height: 650px; display: flex" class="cab" > <el-scrollbar style="height:100%"> <!-- 内部div --> &l
2021-01-15 16:54:13
16135
7
原创 Vue组件化开发简单总结
组件化开发直观地将一个复杂的页面分割成若干个独立的组件，每个组件都包含自己的逻辑和样式（html、css、js），再将这些组件自由组合起来形成完整的界面。个人感觉组件化很符合编程的思想，能重复多次使用的就封装起来，提高代码的可维护性组件化开发的好处提高开发效率方便重复使用便于协同开发更容易被管理和维护组件分类按功能分页面级组件：一个页面就是一个组件基础组件：将可复用的部分抽离出来，形成基础组件按用法分全局组件：可以声明一次在任何地方使用，一般写插件或者是使用很频繁时候
2020-11-19 12:08:22
1145
原创 ES6部分内容（Vue前置知识）
一、JS数据类型基本数据类型：number string boolean null undefinedObject func…Symbol ( es6 )二、操作数组数组的变异能改变原数组的：pop push unshift shift splice reverse sort不能改变原数组的：indexOf lastIndexof concat slice常用方法：es5：forEach filter(过滤) map(映射) some every reducees6：incl
2020-11-15 15:44:52
789
1
原创 Vue中使用axios(Promise)
前端小白简单总结，参考黑马珠峰等课程以及其他内容整合，还望各位大佬多多指教~一、axios的使用axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSR.
2020-11-15 15:04:07
6022
原创 vue项目打包总结（babel安装问题、打包后直接访问dist文件夹、elementui样式失效等）
官方文档有简单的方法:npm install -g serve(全局安装) serve -s dist(运行打包后的文件)
2020-11-11 20:13:01
4345
原创 Vue + elementUI使用中总结，包括踩坑（更新中）
<el-table-column prop="reportName" label="报告名称"> <template slot-scope="scope"> <el-input v-model="scope.row.reportName" @blur="confirmData" clearable></el-input> </tem
2020-11-11 20:03:29
2628
2
原创 Vue实现pdf（excel）及压缩包或其他类型在线预览、导出下载功能总结(后端返回流，pdf.js)
先说这次的需求，需要在一个vue页面中的一部分实现预览pdf功能一、全屏预览模式先说直接全屏预览的，直接axios获取到数据，将流转为二进制文件，可以window.open也可以嵌入到a标签的href属性中二、利用pdf.js嵌入到iframe中预览第一步跟全屏一样，就是最后打开方式不一样pdf.js官网下载pdf.js文件将文件解压缩，将里面的build和web文件夹放在static目录下面，一定要是static目录目录结构如下接着在组件里就可以直接使用了，iframe的原理是
2020-11-05 20:30:58
4783
2
原创 vue中利用flex布局实现横向时间轴简化
最终效果：代码如下：<div class="timeline body-bgcolor"> <!--时间线--> <div class="timeline-title"> <span v-for="item in timeLineList" class="timeline-title-item">{{ item.title }}</span> </div>
2020-10-28 21:44:18
3970
原创 Vue中使用echarts实现仪表盘
实现效果：echarts使用说明请查看：Vue中使用echarts实现常用图表总结option配置：option = { tooltip: { formatter: '{a} <br/>{b} : {c}%' }, toolbox: { feature: { restore: {}, saveAsImage: {} } }, series: [
2020-10-26 16:13:14
3930
2
原创 Vue中使用echarts实现折线图
实现效果：echarts使用说明请查看：Vue中使用echarts实现常用图表总结option配置：option = { legend: { icon: 'rect',//形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none itemWidth: 10, // 设置宽度 itemHeigh
2020-10-21 09:11:41
6978
4
原创 Vue中使用echarts实现柱状图（双柱）
实现效果：echarts使用说明请查看：Vue中使用echarts实现常用图表总结option配置：option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999'
2020-10-21 09:08:14
7975
原创 Vue中使用echarts实现常用图表总结
一、使用echarts前准备1、安装echarts控制台输入安装echartsnpm install echarts --save2、vue main.js中注册import echarts from 'echarts' //引入echarts二、Vue组件中使用1、先找一个要放置图表的dom节点<template> <div class="hygrometer" ref="hygrometer"></div></template>
2020-10-21 08:52:57
5889
原创 Vue中使用echarts实现水球图
控制台输入安装echarts以及水球图npm install echarts --savenpm install echarts-liquidfill --savevue main.js中注册import echarts from 'echarts' //引入echartsimport 'echarts-liquidfill'组件中使用<template> <div class="hygrometer" ref="hygrometer"></div>
2020-10-20 20:37:43
11856
6
原创 Vue中使用echarts实现温度计
感谢大佬提供思路，稍加修改实现了需求<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.js"></script></head><body><
2020-10-19 14:16:11
5011
16
原创 webSocket使用及vue中封装使用（客户端和服务端搭建）
一、Websocket简介Websocket是一个持久化的网络通信协议，可以在单个TCP连接啥功能进行全双工通信，客户端和服务端没有了Request和Response的概念，地位平等，一旦连接建立，客户端和服务端之间可以实时进行双向数据传输。...
2020-10-19 02:33:26
5926
8
原创 Vue+elementUI+echarts项目从零开始使用总结
一、创建vue项目（Vue-cli脚手架）可以看Vue环境搭建（Vue-cli脚手架）二、安装echarts在项目目录中打开terminal命令行输入npm install echarts安装element-uinpm i element-ui -S字体颜色渐变background-image: -webkit-linear-gradient(top, #88b6d8 0%, #d3e4f1 100%);-webkit-background-clip: text;-webkit-text
2020-10-17 12:44:56
3668
原创 快速学习掌握移动Web开发布局总结（流式布局+flex伸缩布局+rem布局+Boostrap框架 ）
移动端常见布局移动端技术选型移动端布局和以前学习的PC端有所区别一、流式布局（百分比布局）流式布局，就是百分比布局，也称非固定像素布局通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式max-width 最大宽度（max-height 最大高度）min-width 最小宽度（min-height 最小高度）二、flex伸缩布局1）传统布局和flex布局2）布局原理flex是flexi
2020-10-14 23:50:35
1366
原创 Vue生命周期钩子函数以及实例上的属性和方法简单总结
Vue生命周期钩子函数大致分为三个阶段：1、初始化阶段：beforeCreate（组件创建前）：data和methods中的数据还未被初始化created（组件创建结束）：data和methods中的数据已经完成初始化beforeMount（组件挂载前）：模板编译完成，但还未渲染挂载到页面mounted（组件挂载结束）：渲染完成，挂载到页面2、运行阶段：触发条件：当数据发生变化时beforeUpdate（页面更新前）：数据已更新，页面中的数据还未更新updat
2020-09-23 13:08:50
498
原创 Vue组件间通信简单总结(更新中)
父传子：通过props属性1、直接传递值2、传递对象的方式例子：父组件：app.vue：<template> <div id="app"> <HelloWorld/> <Test weather="晴天" :day="today" :time="time"/> </div></template><script> import HelloWorld from "./component
2020-09-17 22:19:11
223
原创 Vuex简单总结
前端小白简单总结，还望各位大佬多多指教~之前刚开始看Vuex时候，有点晕，又仔细研究了一下，明白了，以下是个人的简单总结，仅供参考Vuex是什么Vuex 是一种状态管理模式，把应用中所有组件的状态都集中存储在store里，统一管理。单向数据流：数据变化导致页面发生变化Vuex的流程图整个流程大致如下：用户和vue组件发生交互触发了actions，actions传递state并提交（调用）mutations，mutations对state进行一系列逻辑处理得到新的state，因为stat.
2020-09-08 13:16:50
226
原创 Vue环境搭建（Vue-cli脚手架）
前端小白简单总结，还望各位大佬多多指教~一、Vue环境搭建（Vue-cli脚手架）1、你要安装nodejs；安装nodejs可以看：2、安装Vue-cli脚手架Vue-cli是官方的快速构建这个单页应用的脚手架。npm install -g vue-cli3、创建一个工作目录，用来存放你的vue的项目4、打开控制台，进入到你的工作目录中，选择webpack模板初始化项目 // vue_demo，是你的项目名，不能有大写字母 vue init webpack vue_demo 5.
2020-09-02 11:20:25
1297
2
原创 HTML5+CSS3学习总结(完结)
一、HTML5的语义化二、CSS3动画三、CSS3阴影四、CSS3过渡(非常重要)五、弹性布局六、栅格布局七、渐变八、媒体查询
2020-06-14 21:45:05
29379
15
原创 91算法学习总结(更新中)
给定一个由整数组成的非空数组所表示的非负整数，在该数的基础上加一。最高位数字存放在数组的首位， 数组中每个元素只存储单个数字。你可以假设除了整数 0 之外，这个整数不会以零开头。示例 1:输入: [1,2,3]输出: [1,2,4]解释: 输入数组表示数字 123。示例 2:输入: [4,3,2,1]输出: [4,3,2,2]解释: 输入数组表示数字 4321。来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/plus-one著.
2020-06-05 08:59:28
425
原创 Vue学习总结(更新中)
一、Vue的基本使用及模板语法1、Vue简介 1.1 Vue是一套用于构建用户界面的渐进式框架：声明式渲染—>组件系统—>客户端路由—>集中式状态管理—>项目构建 1.2 优点：易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue灵活：在一个库和一套完整框架之间自如伸缩高效：20kB运行大小，超快虚拟DOM2、Vue的基本使用 &
2020-05-19 11:23:39
3243
6
原创 vue+elementUI重复点击导致多个弹框出现解决方案
需求：系统中提示多个弹框不能同时出现，一次只弹出一个弹框新建resetMessage.js/** 防止重复点击重复弹出message弹框 **/import { Message } from 'element-ui';const resetMessage = (options) => { if (document.getElementsByClassName('el-message').length){ Message.closeAll() } Message(optio
2021-12-30 15:44:06
1923
原创 el-table鼠标滑过某行，当前行样式（图标）变化
需求：鼠标滑过某行，当前行的图标变化效果：鼠标滑过某行后P.s.：深拷贝这块内容有待完善<el-table ref="table" class="table" :data="tableData" border :height="tableHeight" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" stripe @cell-mouse-enter="cel
2021-12-30 09:42:53
2397
原创 Vue中axios全局配置响应拦截器超时重新请求，跳转到错误页面
需求：调用后台接口时如果调用响应失败，重复请求10次，如果还是不成功则跳转到错误页面提示用户http.jsimport axios from 'axios' // 引入axiosimport router from '@/router'// 设置axios请求urlaxios.defaults.baseURL = window.config.baseURL// 设置重新请求次数axios.defaults.retry = 10;// 设置请求延时axios.defaults.ret.
2021-11-10 17:10:10
2933
5
转载 （转载）mac升级新系统Big Sur掉电快 关于Mac合盖睡眠后掉电快的解决方法
升级到Big Sur之后，如果发现自己的Mac在合盖睡眠后掉电严重的话(没有升级系统可能也会遇到此问题)，这可能是因为Mac的休眠模式被更改了。我们可以通过终端输入相关命令查看自己Mac的休眠模式，并解决掉电快的问题(此方法黑苹果用户也可尝试)。查看Mac休眠模式❶ 打开启动台→其他→终端；❷ 复制命令：pmset -g，在终端窗口粘贴后回车，如果提示输入「password」，直接输入自己的开机密码，密码是不会显示出来的，直接输入就行，输完回车即可；输出如上图，查看「hibernatemod
2021-10-12 09:16:43
3570
原创 vue中文件上传和下载使用总结
上传文件核心代码<el-upload class="upload-demo" action="uploadFileUrl" ref="upload" multiple :show-file-list=false :on-change="handleFileChange" :before-upload="beforeUpload"> <el-button type="primary" size="mini">上传</el-butt
2021-08-26 15:22:33
510
原创 vue elementUI实现双（多）列表格，内容均自定义
需求类似这样的：使用普通table实现，样式需要自己设置：<table class="person-info" border="1" cellspacing="0"> <tbody> <tr> <th>档案编号</th> <td>{{ personInfo.name }}</td> <th>姓名</th> &
2021-02-07 16:41:14
6996
2
原创 vue + elementUi中el-table表格高度自适应
首先html里设置table的高度<el-table ref="recordTable" :data="tableData" border :height="tableHeight"><el-table>data(){ return { tableHeight: 50 //默认初始值 }}根据浏览器高度设置初始高度，并监听浏览器高度变化，改变表格高度，70表示表格距离浏览器的高度mounted(){ this.$nextTick(() =>{
2021-01-15 17:07:10
4637
4
原创 mac系统升级后npm安装依赖报错gyp: No Xcode or CLT version detected
mac更新系统后，npm安装依赖包报错如下：gyp: No Xcode or CLT version detected原因：缺少了XCODE的CLI（command-line tools ）工具解决方法：1、查看原来CLI工具路径xcode-select --print-path查看 command-line tools 的安装路径，显示的结果应该是/Library/Developer/CommandLineTools2、将原来的CLI工具移除sudo rm -r -f /Librar
2021-01-08 11:39:33
968
原创 2020年个人年终总结与计划
2020年，有人见尘埃，有人见星辰，不过都没关系，就要翻篇了，2021年，一切都会好起来的！回首即将过去的2020年，现将今年总结一下，工作学习上：1）赶上疫情，准备随时跳槽：过年了，结果今年赶上疫情来临，多在家里呆了1个多月的时间，再经历了领导的多次催促以及买了2次一切准备就绪，航班取消后，3月11日终于坐在了飞机上，后来又在宿舍自行隔离14天，才开始去公司上班，另外又在这一个多月的时间里，每天远程打卡上班，加班也是常有的事，不过远程上班也有好处，多了很多摸鱼的时间，让我真正地思考自己到底想.
2020-12-31 23:59:54
2468
9
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人