- 博客(87)
- 收藏
- 关注
RSS订阅
原创 使用vue-table-with-tree-grid的树形表格组件
我们平常在使用Element-ui组件库的时候，用的很多组件都能解决日常工作的需要，但是有时候也满足不了，比如属性结构的表格，此时我们就需要自己去找第三方组件来实现这个功能，铁汁们先让我们看看效果图如下：如何使用这个组件呢第一步：npm install vue-table-with-tree-grid第二步：在main.js引入import TreeTable from 'vue-table-with-tree-grid'Vue.component('tree-table',
2021-06-28 15:54:25
12319
4
原创 Vue+ElementUI Cascader级联选择器 省市区编辑回显（通过CodeToText,TextToCode辅助）
一、首先引入element-china-area-dataimport { regionData,CodeToText,TextToCode } from 'element-china-area-data'二、使用时的HTML结构<el-form-item label="地区"> <el-cascader size="large" :options="options" placeholder="请选择地区" expand-trigger="hover"
2021-06-22 12:05:32
21825
24
原创 前端常见的适配方法
作为一个真正的前端攻城狮，我们经常会谈到web前端怎么做适配，然而平常经常做的事，一旦问起来突然好像脑子一片空白，只能想到rem、flex、媒体查询那些，因此想记录一篇文章以此警醒自己。一、固定布局（pc端）（静态布局）以像素作为页面的基本单位，不管设备和浏览器宽度，只设计一套尺寸（这种不太现实）二、根据不同根据不同的分辨率，加载不同的CSS样式文件（可切换的固定布局）自适应布局<script> // 分辨率大于等于1680，大部分为1920的范围情况下，调用此css if(wi
2021-05-27 11:10:27
21963
2
原创 vue实现列表自动滚动、向上滚动的效果（vue-seamless-scroll）
今天研究了一个插件 列表自动滚动的插件vue-seamless-scroll感受这是个做大屏可视化时可靠帮手请欣赏一下效果图如图所示可以看到 它自动向上滚动 以及鼠标移动进入表格则停止滚动 这个使用起来也是非常的方便的，接下来我为各位老铁记录一下使用的过程1.第一步进行安装npm install vue-seamless-scroll --save2.在main.js直接导入使用import scroll from 'vue-seamless-scroll'Vue.use(..
2021-05-19 11:52:03
24353
13
原创 什么是原型、原型链？原型和原型链的作用（有图方便理解）
原型：JS声明构造函数(用来实例化对象的函数)时，会在内存中创建一个对应的对象，这个对象就是原函数的原型。构造函数默认有一个prototype属性，prototype的值指向函数的原型。同时原型中也有一个constructor属性，constructor的值指向函数对象。通过构造函数实例化出来的对象，并不具有prototype属性，其默认有一个__proto__属性，__proto__的值指向构造函数的原型。在原型对象上添加或修改的属性，在所有实例化出的对象上都可共享。/*代码基本架构1.每个函数.
2021-04-23 15:59:21
37472
3
原创 微信小程序如何获取自定义组件中properties的属性并修改，以及父组件和子组件相互传值
原因：因为自己想了解组件中properties里面的值如何获取到而记录这篇文章一、自创自定义组件，在json文件夹写上“component”：true二、父组件的操作步骤2.1.在json文件夹加上使用组件2.2 在js文件中写好要传的数组数据2.3 在wxml页面进行父组件传子组件的值，用属性传值三、字组件在自己的JS中properties接收父组件传过来的值，定义好type属性和value为[]，即为默认值（父组件传过来的值）四、用observers监听properties的属性
2021-03-31 09:38:28
29327
7
原创 封装element-table合计行Hooks方法
在我们常做的后台管理系统中，经常的会遇到关于表格合计行的计算以及显示，如下图，我们采用的是element框架这一套。由于考虑到该需求是最常见的，每个中心可能都会涉及到，我们封装公共方法，放在utils/tools这个方法下。
2023-11-04 11:48:32
441
原创 vue3 封装公共弹窗函数
博主封装了一个公共弹窗函数接收四个参数，（title：弹窗标题, ContentComponent：弹窗中显示的组件内容, opt：接收弹窗本身的属性和props, beforeSure：点击确定做的操作（请求后端接口））
2023-09-20 16:10:32
1279
原创 React18和React16合成事件原理（附图）
拿到我们需要的对应路径，如上图路径是(事件源->....->window),我们通过事件传播机制知道，拿到我们需要的路径在捕获阶段把它倒叙循环，拿到它onClickCapture的属性（是一个函数），如果存在就执行它，冒泡阶段则不需要倒叙，拿到它onClick的属性(是一个函数），如果存在同样就执行它,此时得到的结果如上图所示。当每一次事件触发的时候，如果传播到了委托的元素上（documnet），在委托的方法中，我们首先会对内置事件对象做统一处理，生成合成事件对象！
2023-07-22 15:54:41
2297
原创 JS事件传播机制和事件委托
再通过代码来了解一下ev.stopPropagation,ev.stopImmediatePropagation的区别，在上面的代码增加。2.某些需求必须基于事件委托处理，例如：除了点击XXX外，点击其余的任何东西，都显示对应的处理逻辑。2.如果单独做的事件绑定中，做了事件传播机制的阻止，那么事件委托中的操作也不会生效。最重要的：ev.target：事件源(根据事件源做不同的事情)1.提高JS代码运行的性能，并且把处理的逻辑都集中在一起！事件委托：利用事件的传播机制，实现的一套事件绑定处理方案。
2023-07-19 16:16:02
2271
原创 手写对象浅比较(React中pureComponent和Component区别)
PureComponent会给类组件默认加一个shouldComponentUpdate这样的周期函数。
2023-07-15 10:31:32
3257
原创 TS手写简陋版reactive响应式原理(依赖收集，依赖更新)
我们首先new了一个weakMap，weakMap只接受object的类型，target正好是一个对象，然后我们通过target获取到对应的内部Map，我们在通过key获取到Set的集合，此时内部存储的就是一个个所收集到的依赖。我们简单的可以就把他理解成一个依赖，用户使用了effect函数过后，里面的响应式数据发生变化后会重新执行传递进去的回调函数，vue2中收集的依赖对应watcher，vue3收集的依赖实际是effect，他们两者实现功能实际上是一样的。，然后去递归进行依赖收集，并不是直接像。
2023-05-31 15:09:55
5637
原创 Vben Admin 关闭指定的tabs标签页
使用Vben Admin开发时，一般新增是抽屉或者model框来操作，当我们有需求场景新增是新开一个页面，新增结束后需要关闭对应打开的tabs标签页。
2023-05-11 10:24:23
7633
原创 微前端micro-app的使用
博主在项目中由于多个团队开发项目，需要相互嵌套，从而了解到微前端micro-app嵌套项目，从而简单记录一下使用过程。
2023-04-12 14:05:41
10564
3
原创 Vue.observable()的使用,小型Vuex的使用
让一个对象可响应，vue内部会用它来处理data函数返回的对象，返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器，observable()方法，用于设置监控属性，这样就可以监控viewModule中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性则通过返回一个函数给viewModule对象中的属性，从而来监控该属性。返回的对象可以直接用于渲染函数methods和计算属性computed内，并且会在发生改变时触发相应的更新。.....
2022-07-21 10:34:41
11461
2
原创 前端单张图片下载，批量下载图片成压缩包
各位铁子们，博主最近手撕了一个图片管理模块，效果如下图所示，其中有个下载图片的功能，包含了单张图片下载，以及多张图片批量下载成压缩包，认为很有意思，分享给你们首先我们需要引入对应的安装包如下 import axios from 'axios' import FileSaver from 'file-saver' import JSZip from 'jszip'下载功能主要代码如下//批量图片下载//this.currentChooseImgList参数是当前选.
2022-05-25 15:01:29
13898
6
原创 Vue项目设置Eslint规则
一、需求当我们创建完vue的新项目后，希望写完代码后会自动格式化代码二、Vscode安装插件安装 ESLlint、Vetur、Prettier 这三个插件。1.eslint在团队协作中，为避免低级 Bug、产出风格统一的代码，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量2.Vetur这个插件主要作用就是让vscode识别.vue文件，实现语法高亮。3.Prettier它的作用是将我们散漫的风格迥异的代码格
2022-04-27 14:52:08
19171
原创 Element-Ui级联选择器递归显示某一级树形结构数据
博主遇到了业务场景有一次创建/二次创建时，当一次创建选择了对应的树形结构数据如下二次创建时需要回显第一次创建时选中的级联选择器的数据，级联选择器只显示该当前数据以及下级的树形结构数据 ，效果如下后端返回数据的结构如下图所示因此需要通过递归拿到对应的数据 ，递归算法如下//code 是后台返回你对应的code码 list是你原来的数组数据recursiveFindWarZone(code, list) { let findZone = null
2022-04-01 13:49:43
12797
原创 VbenAdmin（Vue）-- 下载文件功能（图片、MP3/MP4）点击下载、没有下载成功，反而打开了新窗口的问题
java web中下载文件时,我们一般设置Content-Disposition告诉浏览器下载文件的名称,是否在浏览器中内嵌显示.Content-disposition: inline; filename=foobar.pdf表示浏览器内嵌显示一个文件Content-disposition: attachment; //这里表示会下载文件两种解决方案：1.后端返回的照片url带上Content-disposition: attachment;2.前端自己拼接'?respon...
2022-02-18 18:17:17
12416
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人