自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(72)
  • 收藏
  • 关注

原创 Vue2.x 源码学习准备

虽然说 vue3.x 已经出来很久了,但是大部分人还是习惯使用 vue2.x 进行开发;所以这里我还是想先理顺 vue2.x 的源码。之前也零零散散的看过一些 vue2.x 的源码,但是比较分散,现在正好有个机会,我决定系统的看看 vue2.x 的整个源码,然后整理出来分享学习,同时也作为自己学习的一个总结。这篇文章主要介绍一下学习 vue 源码之前需要做哪些准备!1、个人能力想学习 vue 的源码,首先你需要会使用 vue 这个框架,至少有两个或者以上的项目开发经验,其次需要具备一定的原生

2021-08-27 16:15:14 570

原创 vue 文本超出宽度超出部分隐藏,鼠标移入展示全部组件封装

在 VUE + ElementUI 的项目里面,标题内容超出固定宽度超出部分隐藏,鼠标移入显示全部内容。由于项目里面这一类的需求比较多,这里我考虑封装一下,方便使用。组件封装的思路是借助 ElementUI 里面的 tooltip 组件来实现鼠标移入展示全部的效果,然后根据标题的长度来控制 tooltip 组件的显示隐藏。具体实现代码如下:父组件:<textOverflow maxWidth="400px" :content='item.subjectName'></textOve

2021-08-20 16:30:34 786

原创 用文件流下载文件( Blob)时各种类型文件的 type 整理

最近用 Blob 做文件下载的功能,涉及不同后缀的文件,但是每当设置转换的文件类型的时候就很头疼,因为这东西平时也不怎么常见,这里我参考 Blob 配置整理了一份,方便以后使用。拓展名文件类型MIME类型.aacAAC 音频audio/aac.abwAbiWord 文档application/x-abiword.arc存档文档(多个文件嵌入)application/x-freearc.aviAVI: 音频视频交错video/x-msvideo.

2021-08-20 13:57:09 981

原创 vue 下载本地静态资源(xls等)

需求是:将表格放到项目里面的静态资源文件夹内,然后点击下载,在浏览器上下载这个文件。将文件放到静态资源文件夹下面(vue-cli3.x 放到 public ),这里的文件不会被 webpack 处理,他们最终会被复制到打包目录下面。代码实现downLoad(){ let a = document.createElement('a'); let evt = document.createEvent('MouseEvents'); a.download = '投诉反馈模板'; a.href =

2021-08-17 14:36:18 816

原创 使用Echarts时,X轴文本太长的解决方案

在使用 Echarts 展示各种可视化数据的时候,经常会遇到 X 轴数据过多或者每一个刻度名称太长而导致的 X 轴混乱的问题。其实 Echarts 默认的配置是 X 轴刻度太多时回默认隐藏一部分,其他的正常显示,如下图:xAxis: [ { type: 'category', data: ['2021-01-11', '2021-01-12', '2021-01-13', '2021-01-14', '2021-01-15', '2021-

2021-08-13 13:19:57 742

原创 vue + element 动态表单(多层级)添加校验

以前遇到过给动态添加的表单项添加校验,但是做过之后就忘记了,时隔一年多,又遇到这样的需求,还是多层级的数据结构,所以决定借这个机会写一篇文章记录一下!!!废话不多说,直接上代码!<el-form :model="dataInfo" ref="dataInfo" label-width="40px"> <div v-for="(item,index) in dataInfo.list"> <el-form-item :label="`${index+1}、`

2021-08-11 17:16:47 836

原创 GIT 将 master 分支合并到当前迭代分支

工作中经常需要将 master 分支代码和当前开发分支代码进行合并,为防止出现问题,在此记录一下命令行操作过程;1、切换到master分支,拉取最新代码到本地//切换到master分支git checkout master//拉取最新代码git pull2、切换到当前开发分支,合并master分支//切换到当前分支git checkout myBranch//合并git merge master3、代码冲突解决这一步需要在编辑器上,把冲突部分解决掉(这一步特别重要,最好叫上相关负

2021-08-04 10:21:14 880

原创 点击按钮预览图片,可以预览多组图片(vue+element)

elementUI 提供的 Image 组件直接可以点击图片查看图片预览,我的需求也是查看预览图片,但是有很多小的区别!1、点击按钮预览图片;2、可以预览多个图片;3、预览的图片上显示当前图片的相关信息;4、展示图片当前页码信息;效果图如下:实现:由于需要图片上展示当前图片的一些相关信息以及页码,所以使用插件是没法满足需求了。我拿了 elementUI 里面的 image-viewer 源码,直接在这个基础上进行修改,封装一个组件,问题就解决了。代码:<template>

2021-07-21 18:32:49 1040

原创 点击按钮获取视频当前帧的图片

这篇文章适合:观看视频、视频聊天过程中,点击按钮获取视频当前时间节点的图片(视频快照)。主要使用的是 canvas 转为 image。html<!--文件视频--><video ref="video" controls="controls" style="width: 100px; height: 100px;" src="@/assets/a.mp4"></video><!--图片--><div style="width: 100px; he

2021-07-19 16:53:36 726

原创 vue + elementUi + tree只能同级拖拽排序(用于权限管控)

项目中遇到权限问题时,相信很多公司都会考虑使用树(tree)结构来实现。下面是我

2021-07-14 22:25:03 1070 1

原创 vue里tab菜单横向展示,可分页功能组件实现

这个功能思路跟轮播图差不多,下面实现思路是按照tab宽度移动,具体实现直接上代码子组件:<template> <div class="dataNav"> <el-button v-if="move != 0 && !dataLen" size='small' icon="el-icon-arrow-left" @click="navPrev"></el-button> <ul class="dataNavLis

2021-07-08 16:29:26 772

原创 git 配置 SSH 流程

这东西使用频率太低了,但是每次需要用到的时候又都记不住,正好今天又配了一次,顺便记录一下配置过程。1、安装 Git:网址2、鼠标右键,点击 ‘git bash here’3、配置一下name 、eamilgit config --global user.name '用户名'git config --global user.email '邮箱'4、生成 SSH KEYssh-keygen -t rsa -C '邮箱'一直确定直到结束;根据日志信息里面的 SSH KEY 存储路径找到 .

2021-07-01 17:45:14 706

原创 git clone 出现错误及解决方案

1、错误一error: RPC failed; curl 92 HTTP/2 stream 5 was not closed cleanly before end of the underlying stream解决:git config --global http.version HTTP/1.12、错误二error: RPC failed; curl 28 OpenSSL SSL_read: Connection was reset, errno 10054fatal: error rea

2021-07-01 16:55:14 1508

原创 前端 html 、 js 、css 面试题

文章目录1、宏任务和微任务1、宏任务和微任务基本数据类型引用数据类型js事件循环浏览器缓存栈和堆深拷贝和浅拷贝cookie和token区别数组去重cdn缓存margin合并重绘和回流promise和await区别extend和extends区别map和forEach区别浏览器最小字体是多少,如何实现10pxjwtwebpack优化原型链...

2021-06-23 17:48:54 792 1

原创 2021 前端 VUE 面试题总汇

一、vue面试题1、vue的生命周期beforeCreate:实例初始化之后;数据观测和事件配置之前调用,组件的选项对象还没有创建,el挂载和data都没有初始化,无法访问方法和数据。created:实例创建完成之后调用;已经完成了数据观测,属性方法的运算,watch/event 事件回调,data数据初始化已经完成,el挂载还没有开始。beforeMount:挂载之前调用;el初始化已经完成,vdom已经完成data和模板的结合生成html,但是还没有挂载到html页面里。mounted:挂载

2021-06-02 15:35:19 6375 4

原创 websocket 和 http 协议的区别

一、http 协议的实现超文本传输协议,用于从 www 服务器传输超文本到本地浏览器的传输协议。http 是基于 tcp 协议的一个应用层的协议,由请求和相应构成;是一个无状态的协议。工作过程:1、客户端和服务端建立连接,http开始工作;2、建立连接后客户端发送请求给服务器;3、服务器收到请求后,给予相应的响应信息;4、客户端接收服务器返回的数据并在浏览器上展示,然后客户端和服务器连接断开。在这个过程中客户端和服务器之间的连接和断开是怎么实现的呢?1、三次握手建立连接第一次:建立连

2021-05-19 15:43:17 820

原创 前端开发跨域问题解决

一、什么是跨域跨域是指没有建立信任关系的两个域之间进行通讯,出于安全考虑,浏览器默认是禁止的。跨域问题其实是浏览器的同源策略引起的。同源策略是一种约定,也是浏览器最核心最基本的安全功能;如果缺少同源策略,浏览器很容易受到 XSS、CSFR 等攻击。所谓的同源是指:协议、域名、端口 三者都相同。如果有一个不同就是不同源,也就属于跨域。同源策略限制了下面几种行为:cookie、localStorage、indexDB 无法读取DOM 和 JS 对象无法获取AJAX 请求无法发送二、跨域问题

2021-05-08 18:05:25 730 9

原创 elementUI表格数据过长没有出现省略号而是隐藏文本问题解决

今天遇到一个 elementUI table 表格内容展示超长,在表格列上添加 show-overflow-tooltip 属性之后,超长的内容直接被隐藏而不是出现省略号。<el-table-column align="left" prop="name" label="名称" show-overflow-tooltip> <template slot-scope="scope"> <el-button type='text'>{{scope.row.name}}&

2021-05-07 10:07:58 1320

原创 vue 部署上线清除浏览器缓存

vue 项目打包上线之后,每一次都会有浏览器缓存问题,需要手动的清除缓存。这样用户体验非常不好,所以我们在打包部署的时候需要尽量避免浏览器的缓存。下面是我的解决方案:一、修改根目录index.html在 head 里面添加下面代码<meta http-equiv="pragram" content="no-cache"><meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

2021-04-29 17:27:06 3026 4

原创 elementUI 的 table 表格改变数据不更新问题

预期效果:点击输入框旁边的图标,输入框变为可输入状态;这里控制输入的 editable 字段不是 data 原有的属性,也不是 data 赋值时就存在的字段。问题原因:在 Vue 实例创建时,以及 data 赋值时 editable 并未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视图的更新。解决方法:1、给 data 赋值前把 editable 属性添加到数组里这里就不贴代码了,大概思路就是:获取到列表信息之后缓存在一个临时数组里(不可以是 data 里面定义好的对象),循环遍历

2021-04-28 17:20:57 3488

原创 web 开发用到的几种会话跟踪技术

一、为什么要对会话进行跟踪?主要原因是因为 HTTP 请求是无状态的;只有当用户发出请求时,服务器才会做出响应,客户端与服务端之间的联系是离散的、非连续的;如果用户想在同一个网站的多个页面之间转换时,无法确定是否是同一个用户;对会话进行跟踪就是为了解决这样的问题。二、会话跟踪技术1、token(令牌 )全称是 Access Token,是访资源接口(API)时所需要的资源凭证;是目前前后端分离项目最常用到的一种会话跟踪技术。一般 token 组成:uid:用户唯一身份标识。time:当前时间

2021-04-27 17:34:05 722 2

原创 Vue 的 DOM 更新策略和 nextTick() 的使用

一、Vue 的 DOM 更新策略Vue 的响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。那么 DOM 更新的策略是什么样的呢?Vue 官网说明:Vue 在更新 DOM 时是 异步执行 的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新

2021-04-26 17:34:06 806 1

原创 vue 的 for 循环体里面的 element UI 表单项添加必填校验

今天遇到一个需要给 for 循环体里面的 form 表单项添加校验的需求,为每一个循环的模块单独添加校验,实现如下:<el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeh

2021-04-15 13:58:58 1342 1

原创 vue-cli3 修改默认图标、 title 、端口号、根路径以及代理配置

直接在 package.json 文件同级创建 vue.config.js 文件,具体配置如下:module.exports = { //跟路径 baseUrl:'/', //图标路径设置 pwa: { iconPaths: { favicon32: 'favicon.png', favicon16: 'favicon.png', appleTouchIcon: 'favicon.png', maskIcon: 'favicon.pn

2021-04-13 18:39:14 746 1

原创 js 类数组转成真正的数组的方法

一、类数组与数组的区别相同点:都有 length 属性,都可以用下标访问每一个元素不同点:数组的类型是 Array ,类数组的类似是 Object类数组不具备数组所具备的所有方法类数组只能用 for 循环来遍历例://下来这个就是一个类数组obj = { 0:'1', 1:'2', length:2}二、类数组转化为真的数组1、使用拓展运算符(ES6)let arr = [...obj];2、Array.from(arr)(ES6)let arr = Arra

2021-04-08 18:34:09 706 1

原创 bind、call、apply 的区别、使用及实现

一、首先来看一下他们的区别相同点:这三个 api 都可以改变 this 的指向第一个参数都是 this 指向的对象如果第一个参数是 null undefined ,则函数的 this 不改变都可以传递参数不同点:1、call 和 apply 都可以对函数进行直接调用,bind 方法返回的是一个函数,需要手动调用函数let obj= { name:'小米', print(){ console.log(`${this.name}`) }}let obj1 = { name:'

2021-04-08 16:01:44 736 1

原创 git 提交代码的时候报错: ! [remote rejected] xxx -> xxx (pre-receive hook declined)

在使用 git 命令行提交代码的时候,在最后一步 push 的时候报错 : ! [remote rejected] xxs -> xxs (pre-receive hook declined)控制台截图如下:解决办法:打开电脑 C 盘,找到 known_hosts 文件,然后清空这样代码就可以正常提交了。known_hosts :C:\Users\Administrator.ssh\known_hosts...

2021-04-01 18:02:05 2408 1

原创 vue-cli2.x线上刷新页面空白问题以及项目配置基础路径 base

在vue-cli 2.x项目中路由为 history 模式时,打包部署到nginx服务器上后页面刷新空白的问题。我遇到过nginx服务器的根目录和子目录下部署页面刷新空白的情况,在这里做一下记录。一:部署到nginx服务器根目录下找到config/index.js文件的build模块把 assetsPublicPath改为 ‘/’:build:{ index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path

2021-03-30 12:07:12 786 3

原创 vue-cli3.x 项目配置基本路径 base

今天运维同学提出一个需求,在访问前端项目的时候,需要添加一个基础路径,用来区别其他的前端项目。案例:http://xxx.com/test/ ,需要前端配置一下 /test/ 作为这个项目的基础路径。具体步骤如下:1、在定义路由的时候,配置一下 base 属性,这个属性默认值是根目录也就是 base:’/’ ,我们需要将根目录替换成 /test/const router = new Router({ mode:'history', base:'/test/', routes})2、在根目录

2021-03-30 11:12:18 1296 1

原创 js 实现模糊搜索功能

最近遇到一个需要前端对已有数据做模糊查询的功能。方法有很多种,个人比较推荐使用正则表达式来实现,下面是我实现的方法:封装一个公用的方法://list 是已有的数据,search 是模糊搜索的关键字export function fuzzySearch(list,search){ let data = []; if(list.length != 0 && search){ let str = `\S*${search}\S*`; let reg = new RegExp(st

2021-03-24 15:14:03 1152 1

原创 vue 中 get / delete 传递数组参数方法

在前后端交互的时候,有时候需要通过 get 或者 delete 传递一个数组给后台,但是这样直接传递后台无法接收数据,因为在传递的过程中数组参数会被转译,结果如下:参数:{ name : [ 1, 2, 3 ] }转译效果:http://aaa.com?name[]=1&name[]=2&name[]=3目标效果:http://aaa.com?name=1&name=2&name=3解决办法:使用 qs 插件 将数组参数序列化1、qs.stringify({

2021-03-19 17:57:47 2052 3

原创 element-ui 表单重置 resetFields 方法不起作用的解决方法

问题描述:经常有新增和编辑需要复用同一个弹窗的情况;刷新一下页面,先点开编辑关闭弹窗后再点击新增,这个时候再弹窗关闭的时候重置表单方法没有效果:this.$refs.form.resetFields();resetFields作用:1、对整个表单进行重置,字段重置为初始值2、移除校验结果问题分析结果:1、resetFields 重置的是初始值2、form 的初始值在 mounted 生命周期执行的时候被调用3、如果在 mounted 生命周期执行之前修改了初始值,那么resetFi

2021-03-19 17:37:01 1236 1

原创 从源码理解 Vue-Router 实现原理

路由是前端构建单页面应用的关键技术,它的原理核心是:更新视图但不重新请求页面。一、路由安装 install在 src / install.js 文件是 Vue-Router 的安装程序。这里提供了一个 install 方法,使用 Vue.mixin 混入 beforeCreate 和 destroyed 钩子函数,并全局注册 router-view 和 router-link 组件。import View from './components/view'import Link from './com

2021-03-17 18:44:38 756 1

原创 本地项目关联远程 git 仓库

用了几年 git 来管理代码,除了常用的提交代码的一些指令,其他的每次用到都需要查一次资料,这样很麻烦。最近有一个新项目需要关联远程仓库,我自己也整理了一下。下面介绍几种方法:一、代码 clone 到本地这种方法是直接 clone 代码,这样不需要在手动关联仓库。1、本地创建空白文件夹2、右键 Git Bash Here 打开控制台3、直接 clone 远程仓库的代码git clone 远程地址(ssh、http)然后正常的代码提交就可以了。二、命令行关联//初始化git init

2021-03-16 17:15:29 776 1

原创 vue 全局注册过滤器 filter

随着 vue 的脚手架不断更新,搭建项目的时候很多东西都需要我们自己来配置,比如说过滤器 filter。以我个人习惯为例:1、创建一个 filters.js 文件,在这里定义多个过滤器//时间过滤器let formatTime = time => { if (time) { var a = new Date(time).toJSON(); var date = new Date(+new Date(a) + 8 * 3600 * 1000).toISOString().replace

2021-03-11 16:40:42 1138 1

原创 vue-cli3 搭建项目流程

上一次用脚手架从零开始搭建项目已经是两年前的事情了,正好最近有一个新项目启动,我决定重新搭建一个,然后梳理一下流程。操作步骤:1、安装 node:需要在node官网下载一个稳定版本安装一下就可以了。2、安装脚手架://这里是脚手架3npm install -g @vue/cli3、创建项目:vue create 项目名然后出现下面的选项,现在是选择 vue2 和 vue3 ;这里我选的是 vue2 ,主要考虑是 vue2 比较成熟,方便其他同事参与和维护。安装好之后,依赖包会自动安装

2021-03-10 11:57:29 806 1

原创 vue 不同环境打包指令的配置 (vue-cli2、vue-cli3)

针对前后端完全分离项目,为不同环境配置不同的打包指令是非常必要的。vue-cli2 和 vue-cli3 的配置有所不同,下面分别介绍一下。一、vue-cli2详细步骤:1、安装 cross-env,它可以处理 windows 和其他 Unix 系统在设置环境变量的写法上不一致的问题。npm i --save-dev cross-env 2、配置不同环境下的文件和参数,在 config 目录下创建test.env.js、prod.env.js、dev.env.js 文件(如果已经有了就直接下面操

2021-03-04 17:20:14 832 2

原创 vue-router 使用 addRoutes 动态添加路由跳转后页面刷新空白问题

问题描述:在做菜单权限的时候,使用了 router.addRoutes() 方法把不同权限获取到的路由表动态的添加到路由里面去。菜单正常展示,在点击菜单跳转之后,浏览器刷新一下,页面没有跳转到 404 页面,而是变成了空白。问题原因:addRoutes 和 vuex 一样,在浏览器刷新后数据会丢失,因为刷新页面 Vue 会重新实例化,路由也会恢复到初始路由。解决方案:在页面刷新之后重新获取到通过权限修改后的路由表,然后再次使用 router.addRoutes() 方法将新路由表动态添加到路由里面

2021-03-03 18:08:11 3728 9

原创 vue 菜单级别权限控制实现

之前写了一篇 《 vue 按钮级别权限控制实现》,里面介绍了前端页面对于按钮权限的控制,这一篇来说说前端页面对于菜单权限的控制。前端菜单权限就是根据根据用户的权限不同控制菜单的显示隐藏,不同的场景,实现的方式也有所不同。一、前端控制路由表前端配置好路由表,然后根据接口返回权限数据处理成的路由表,然后使用 addRouters 方法添加到路由,最后根据路由表渲染菜单。实现如下:新建一个 routerList.js 文件,里面配置好路由表;通过 isShow 字段控制菜单的显示隐藏。const ro

2021-03-02 17:24:07 1200 1

原创 vue 项目中添加水印效果

在项目中有给部分区域或者是整个页面添加水印的需求。加水印其实很简单,它的原理是使用 canvas 生成图片在使用 toDataURL 转化为 base64 格式,然后将转换后的图片设置为背景图,从而实现水印的效果。下面是结合我在项目里的需求实现水印的方法:一、自定义指令:1、在 directives 文件夹下面 创建一个 watermark.js 文件import Vue from 'vue';export default () => { Vue.directive('watermark'

2021-02-26 14:12:27 1932 10

空空如也

空空如也

空空如也

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

TA关注的人 TA的粉丝

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