vue
文章平均质量分 66
小智大愚
不断进阶的程序媛
展开
-
el-tree 数据懒加载实现异步搜索
天气晴 有风 温度适宜背景Element UI el-tree 官方对于数据量大希望异步加载的数据 支持懒加载, 懒加载会依赖 load 方法,自动触发加载,原创 2022-05-25 17:53:09 · 1523 阅读 · 0 评论 -
解决el-table 树形结构expand 操作后 stripe 显示失效问题
昨天是挫败感较大的一天,因为好久没有真正的精进技术了,事件循环机制 、nextTick 之前条件反射都会想到的问题,昨天竟然被困住了。问题背景项目中用到了el-table的树形结构,table 设置了 stripe 栅格属性,但是由于有展开行,展开后table 按照展开后的所有数据进行了栅格设置,但当展开收起时,栅格的设置是没变的,会导致看上去有写地方栅格失效。如下图:在ElementUI 文档看了el-table 的方法,没有什么可以设置的,项目中用的懒加载,数据也不在tableDa..原创 2021-12-15 10:14:08 · 3289 阅读 · 2 评论 -
Vue 项目打包时提取代码 git commit 信息
业精于勤 荒于嬉需求描述前端项目经常打包,发包部署,有可能存在不确定发包的版本是哪一个,于是想要将代码打包时的代码信息也就是commit 信息 提取出来作为参考。具体实现1、获取git commit 信息git 信息的获取指令 参考 官方文档是一切https://git-scm.com/docs/githttps://git-scm.com/docs/git-showgit show format选项:%H 提交对象(commit)的完整哈希字串 %h 提交对象.原创 2021-07-09 15:56:25 · 2742 阅读 · 0 评论 -
Echarts 雷达图 极坐标 及 折线图的完美结合
实践出真知效果图心路历程大多数时候,使用echarts 就是参考示例图,根据需求进行改造,更多的研究就是在配置项的配置,看到没有的示例还真的是有一点点慌,但是怎么看需求的样式都是那么的合理,实用,所以我想一定是可以实现的,因为它并非不常见。怎么办呢,研究,找到方法之后,最终的实现还是轻松的。需求分析Q:是雷达图吗?A:第一眼看上去,是雷达图,因为他有指示器,分割线都是雷达图的效果Q:发现一个问题,效果图是有断点没有完全连接在一起的,但是雷达图是没有断点连接,而且没有值或者.原创 2021-05-13 16:11:33 · 2090 阅读 · 6 评论 -
webpack 基础理解[二]之常用loader & plugin
业精于勤 荒于嬉webpack 中 常用的 loadercss 模块化:关键 modules:true rules: [{ test: /\.css$/, // loader: 'css-loader' // // loader 的执行顺序是从后向前面 // // webpack 遇到自己不认识的文件时 ,先去module找 ,定义的规..原创 2021-04-30 17:46:00 · 236 阅读 · 2 评论 -
webpack 基础理解[一]
好久好久好久 没有更新CSDN 了 ,四月两次奔波回家,转项目组,加班,整个时间被工作和紧张情绪充斥,现在现在,终于可以喘口气,整理记录webpack 系列。webpack 是什么?干什么?webpack 是构造工具,怎么构造?就是 把浏览器不认识的一些文件 或者支持不好的文件 ,编程成浏览器认识的文件或者代码。webpack 里的基础配置webpack 默认打包配置:webpack 在打包的时候会去找webpack.config.js 文件,如果没有,走自己默认的配置。// .原创 2021-04-30 17:34:04 · 571 阅读 · 7 评论 -
自定义穿梭框实现详解 table 穿梭框
业精于勤 荒于嬉需求:element 的 穿梭框el-transfer 使用起来样式很受限制,一般我们需要根据自己的需求实现数据的灵活选择,左右穿梭,就需要用到自定义的穿梭框了思路:封装自定义的穿梭框,要考虑的是自己的需求样式,以及数据展示格式A:什么样式?Q:穿梭框样式,一般分为左右两侧,此处不多说,根据自己的 UI 画页面就可以了A:展示的数据格式?Q : 主要是根据自己的页面展示,分析自己需要的是什么样的数据,A : 其他逻辑功能分析?Q:你需求的穿梭框需..原创 2021-03-03 13:47:50 · 5339 阅读 · 0 评论 -
Vue 如何清空已注册路由再按需重新注册
希望可以不断接受开发上的挑战 ,然后不断的进行技术精进。上面的图片大概是项目的一个portal 页 ,就是登陆后先来到portal 页面,根据当前用户的角色权限,显示当前赋予权限的系统,可能有一个系统,可能有两个系统,也可能没有任何权限。另外项目中的路由权限也是依据后台给前端的数据,因此对应的路由的注册,也是如果当前用户有这个系统的权限,根据系统管理的配置也可以配置到某个菜单的权限,服务端将当前用户的菜单权限给到前端,前端再进行动态的注册,这个的核心就是addRoute,关于去重等,不做详细的说.原创 2020-11-24 14:30:55 · 1585 阅读 · 0 评论 -
浅谈什么是前端SEO
SEO简介 全称:Search English Optimization,搜索引擎优化。自从有了搜索引擎,SEO便诞生了。 存在的意义:为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。简言之,就是希望百度等搜索引擎能多多我们收录精心制作后的网站,并且在别人访问时网站能排在前面。 分类:白帽SEO和黑帽SEO。白帽SEO,起到了改良和规范网站设计的作用,使网站对搜索引擎和用户更...转载 2020-10-27 16:09:23 · 2507 阅读 · 2 评论 -
Vue 进阶 [九] Vue 源码剖析03 模板编译 & 组件化机制
业精于勤 荒于嬉模板编译概述模板编译的主要目标是将模板(template)转换为渲染函数(render)template => render()模板编译的必要性Vue 2.0 需要用到VNode 描述视图以及各种交互,手写显然不切实际,因此用户需要编写类似HTML 代码的Vue模板,通过编译器将模板转换为可返回VNode 的 render 函数。整体流程如果用户设置了template 或者是el 选项,最终就会执行编译函数,compileToFuncti...原创 2020-10-20 15:23:50 · 345 阅读 · 2 评论 -
Vue 进阶 [八] Vue 源码剖析 02 批量异步更新 & 虚拟DOM Diff 算法
想多记录一点东西,好像有点不知道怎么怎么总结了,今天听了完了一节Vue 课程 ,主要关于Vue 异步更新策略 及 虚拟Dom 是 源码的剖析,因为没有太专注可能还得捋一捋,或者全部看完之后再回头看。Vue批量异步更新策略 虚拟DOM和Diffff算法 ====all to do ====...原创 2020-10-13 15:26:19 · 328 阅读 · 0 评论 -
Vue 源码解析
Vue 源码解析框架地址https://www.processon.com/view/link/5d1eb5a0e4b0fdb331d3798c#map原创 2020-09-30 13:38:24 · 172 阅读 · 0 评论 -
Vue 进阶 [七] Vue 源码剖析 01 剖析入口 & 数据响应式
业精于勤荒于嬉今天又听了一节课,吸收的没那么好,但也是有收获,一直想像看Android 源码那样,研究研究Vue的源码,苦于不知道从何下手,听了这节课,大概知道应该从哪里入手了。项目地址:https://github.com/vuejs/vue 迁出项目: git clone https://github.com/vuejs/vue.git 当前版本号:2.6.X入口 dev脚本中 -c scripts/config.js 指明配置文件所在 参数 TARGET:web-..原创 2020-09-29 17:24:48 · 319 阅读 · 0 评论 -
Vue 进阶 [六] 简单易懂的手写 Vue
人生当字面,学习需坚持代码地址https://gitee.com/xiaozhidayu/vue-study-zvuehttps://gitee.com/xiaozhidayu/vue-study-zvue.git前面看了一篇关于Vue响应式的原理分析文章收益匪浅,进行了转载,今天看了一节课成,敲了自己的Vue,整体思想等都收获很多,只是小demo 中没有涉及到虚拟DOM,因此类似是1.0 Vue。Vue 的设计思想MVVM 框架的三要素 :数据响应式,模板引擎及其数据渲染.原创 2020-09-25 16:58:19 · 391 阅读 · 0 评论 -
Vue 进阶 [五] 手写VueRouter
人生当自勉,学习需坚持。定义Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为VueRouter使用的核心步骤步骤一:使...原创 2020-09-23 20:32:33 · 204 阅读 · 0 评论 -
Vue进阶 [四] vue 组件化实战之通用表单组件实现
进阶会发现越往前走,知道的越多,不知道的也越多,但是通过学习,弱化知识盲区,对自己的实际开发选择会有很大的影响,也会影响变成思维。概述组件系统是vue的一个重要概念,因为它是一种抽象,让我们可以使用独立可抽象的组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树。所谓组件化,就是把页面拆分成多个独立的组件,每个组件依赖的 css js 模板 图片 等资源等放在一起开发和维护,所以组件化在系统内部可复用,组件之间可以嵌套。因此组件化能提高开发效率,方便重复使用,简化调试步骤,提升项目...原创 2020-09-18 14:53:17 · 1093 阅读 · 0 评论 -
Vue 进阶[三] vue 组件化之slot 插槽
进阶会发现越往前走,知道的越多,不知道的也越多,但是通过学习,弱化知识盲区,对自己的实际开发选择会有很大的影响,也会影响变成思维。概述组件系统是vue的一个重要概念,因为它是一种抽象,让我们可以使用独立可抽象的组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树。所谓组件化,就是把页面拆分成多个独立的组件,每个组件依赖的 css js 模板 图片 等资源等放在一起开发和维护,所以组件化在系统内部可复用,组件之间可以嵌套。因此组件化能提高开发效率,方便重复使用,简化调试步骤,提升项目...原创 2020-09-16 17:55:35 · 373 阅读 · 0 评论 -
前端上拉加载下拉刷新插件之mescroll.js
为什么要研究一款上拉加载下拉刷新的插件呢,因为最近新入职的新公司需要用,原来是用的mint-ui 的load-more ,存在兼容性问题,在浏览器模拟是完全没有问题的,但是在使用手机测试时,页面像被hidden 了一样,感觉可能是代码哪里写的有问题,百度了一下这个load-more确实也存在一些兼容问题, 不然也不能试了两台手机都不好使。因为项目比较这几,果断放弃了loadmore 的使用,换用mescroll,看官方文档的使用方法,真的是简单清晰易操作!官网:mescroll.js 官网有很多种支持.原创 2020-05-30 18:51:52 · 1288 阅读 · 0 评论 -
Element-UI 我所遇到的一点小问题
今天在自己写demo 的时候 用到Element-UI , 被一个小问题纠结了一小会,就是安装element-ui 在使用时 是没有样式的,之前的项目可能是可视化创建时直接下载的element-插件 所以有配置,我建的这个demo 是直接 npm i element-ui 安装 ,发现在使用时Element-ui 的 样式根本么有生效,那么怎么解决呢,我试了两种方法如下:1、在项目中引入 element-ui 的 css 样式,在你引入Element-ui 的地方就好 main.js 或者自己单独的配置原创 2020-06-04 10:41:19 · 188 阅读 · 0 评论 -
ElementUi 之el-table 的一点小总结[表头内容错位[自定义border问题][自定义列宽度]
前端在开发PC 端项目时,现在用的比较多的就是Element UI,而在PC端管理系统中,Table 可以说是必不可少,刚开始使用对table没有做过多的处理,可是在需要做一些处理时,对其文档不熟悉使用不熟练总出现一些意想不到的问题。自定义table 边框及单元格边框表格设置的border 覆盖掉自定义的border 而且只在最后一列,因为默认是灰色一直以为自己设定的没有生效 开两个效果吧没有添加table 的 border 属性添加table 的 border 属性之后 ,看最右侧的.原创 2020-06-21 20:47:49 · 1811 阅读 · 0 评论 -
Element-UI 之 Select 选择器
在使用Vue开发 SPA PC 端 管理系统项目时 ,Select 选择器必不可少,今天来看看Select 选择器的基本使用及问题解决原创 2020-06-25 12:30:49 · 1481 阅读 · 0 评论 -
Web Exception the data property is already declared Property or methond is not defined on the
最近有个任务,迭代了一个星期,还没结束需求就变了,但是一个小的功能模块已经几百行代码了,所以想着应该抽取出来封装一下,那么抽取的遇到了一些小问题记录一下,是那种类似笔下误的错误原创 2020-07-15 10:50:24 · 559 阅读 · 0 评论 -
如何开始一个Vue项目
Vue 开发环境配置原创 2020-05-19 18:43:46 · 213 阅读 · 0 评论 -
Vue 进阶 [二] Vue 组件化之组件间通信———组件通信看这一篇就足够了
今天又是收获满满的一天,但也会发现越往前走,知道的越多,不知道的也越多,但是通过学习,弱化知识盲区,对自己的实际开发选择会有很大的影响,也会影响变成思维。原创 2020-09-16 16:14:04 · 373 阅读 · 0 评论 -
Vue 进阶[一] vue.js 双向数据绑定的实现原理 [看完一定有收获哈哈哈哈]
前段时间学习了react ,主要是入门了解没有实际的项目支撑,相当于扩展了了解知识的广度,最近这段时间感觉有必要从深度下手了,因为项目开发用的vue,所以先进行vue的进阶吧。整篇文章参考 :https://www.cnblogs.com/kidney/p/6052935.html这篇文章没有从实际的解析vue源码,因为源码太复杂,内容太多,牵一发而动全身,所以只是鉴于vue双向数据绑定的实现原理进行了响应的实现,而我为了加深印象要把自己的理解再梳理到我的博客中以作记录。说是参考其实是比着人.转载 2020-09-09 10:42:42 · 388 阅读 · 0 评论 -
实现前端页面局部转 pdf 及 打印 加分页防止内容截断
再次强调实践出真知,新项目迭代涉及到一个管理报告的下载及打印,但是项目中以往的这种功能实现主要核心在后端,如pdf 的生成,打印也是有现成的文件地址等,但这次的报告中内容比较复杂,有表格,有几个echars 数据,以及长篇的描述,后端表示这个由后端生成pdf 不太现实,因此主要任务就留在了前端。核心库html2Canvas jspdf print-js实现思路1、html2Canvas可以将特定容器标签的内容转换为图片,通过特定API 转换为对应的base64 格式的数据...原创 2020-09-01 20:14:12 · 10039 阅读 · 25 评论
分享