- 博客(45)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 楼层号按顺序进行筛选，且不重复的方法（优化版）
上次的方法不适合大量添加，且不适合一次性添加多个在选择，这次通过使用优化的方法进行判断，功能强大了。 <div id="app"> <div> <ul> <li v-for="(item,index) in floorlist" :key="index"> <span>{{item.floor}}</span> <select
2020-06-23 08:49:04
313
原创 Vue 数据双向绑定原理 （适合初学者）
面试过程，经常会遇到面试官问到 v-model的实现原理，作为一个vue使用者，这是必须了解的。下面是数据绑定原理的图：1、view ------》model (视图变，引起数据改变） <div id="app"> <p></p> <input type="text" /> </div> <script src="vue.js"></script> <
2020-05-25 08:13:26
233
原创 瀑布流布局之一（css）
column多列布局实现瀑布流，主要使用了column-count和column-gap属性，column-count属性用来设置列数，column-gap属性用来设置列于列之间得间距。项目菜单下拉数据太多，无法一次性展示全，项目经理就提出来要仿阿里云做个平铺展示的菜单详情，搞了半天才知道右侧展示是瀑布流，学到了就记录下来，以此为鉴。
2022-12-21 17:26:05
449
原创 token失效登录后跳转到之前页面
打开页面长期没有使用，再次使用或者刷新就会返回登录页的情况，对于登录后，希望能够返跳转到之前的页面，只需要做一个重定向就行。
2022-12-12 18:13:27
826
原创 配置用户代码片段（vue.code-snippets）
为了提高开发效率，很多时候会在vscode中配置好一些常用的代码片段，省时省力还显示你很NB。说明：vue.code-snippets文件放在**.vscode**里面。以下是基于vue3跟Ts个人的配置，分享出来（代码直接复制到。文件即可使用，可根据个人情况进行修改prefix)。
2022-12-09 10:20:51
1481
原创 vue项目中，js代码动态控制网页的link标签与title内容
最近正在开发一个微模块系统，产品想要根据子系统的不同，动态生成link标签与title中的内容，于是就做了一个简单的demo，希望分享出来给到后续有同样需求的伙伴，共勉。首先肯定是需要有一套**.svg**的图标来对应相应的系统，那就安排（我是放在public文件中，这样build的时候不会进行处理，方便随时根据ui设计进行替换）。
2022-12-08 16:28:15
2132
原创 加密与解密方法的封装（基于crypto-js），个人推荐js-md5,用起来更方便
在登入或者传参的时候，为了保证信息的不公开信，有时候就需要用到加密，下面是自己封装的一套方法，可以直接使用。
2022-12-02 11:13:49
516
原创 node实现读取文件并输出文件名，lodash进行处理不同的文件名
每次前端打包生成的dist文件，可能会有很多的文件，对于未修改的情况，多次build后，会出现打包的文件名（hash值）变化的问题（参考vue官网history与hash路由的区别:https://router.vuejs.org/zh/guide/essentials/history-mode.html），，无法判断最终导致的副作用，这个时候就需要去进行文件的对比。
2022-12-02 10:45:56
616
原创 仿百度控制台输出、控制台输出版本等
需求：项目上线后，有时候出现问题，无法知道是哪个版本、发布时间、打包机器之类的信息，当然对于有特殊信息展示的，针对特定人群，那就需要在控制台进行记录一些东西，方便查看。对于直接在index.html中写的方式，更倾向于静态的一些资源展示，比如图片，文案，链接等。2.单独文件进行处理。（下面就以vite.config.ts为例）标签的嵌入写法就可以。对于类似的输入，下面介绍两种方式进行实现。
2022-11-23 09:22:35
184
原创 使用group by让数据快速归类（可以指定归类依据）
使用group by方法之前需要下载 npm install lodash-es及引入import { groupBy } from ‘lodash-es’;
2022-10-11 11:51:33
276
原创 handsontable 踩过的坑（渲染不全、错位）
第一次使用handsontable ，遇到了一些问题，希望能帮助后来人。问题1：表格渲染一部分或展示不全的问题。解决方式： <HotTable v-model="changeFlag" :root="root" ref="testHot" :settings="hotSettings" > </HotTab...
2022-03-23 14:15:37
1977
1
原创 样式操作（className)
通过className属性对元素的类名进行操作。通过HTML5新增的classList属性对元素的类名进行操作。通过Style属性设置元素的行内样式。通过getComputedStyle方法获取元素的计算后样式。通过offset系列，scroll系列，client系列属性来操作元素的组合样式。ClassName操作说明：通过ClassName操作元素的类名是最简单的方式，但是如果仅仅想增加或者删除某一个具体的类名的时候，不是特别方便。ClassList属性说明：使用classList.
2021-09-30 08:57:36
900
原创 通过CSS生成网格线背景
前段时间，设计图有背景是网格线的，开始想着直接用svg图进行展示，后面老大不同意，说可以直接用css样式生产的，最好不要svg,加载好性能，经过尝试，css处理起来也是特别简单的：附上代码：.grid_line { width: 100%; height: 100%; text-align: center; color: blue; box-sizing: border-box; border: 1px solid #ccc; background: -webkit
2020-12-29 19:09:09
1908
原创 封装根据年月得出有某个月多少天
由于所处项目上经常会用到时间的组建，对于每个月多少天默认值就不太好处理，后面查了一些文件，自己就直接封装了一套Ts的方法。传入参数：time 2020-11private formatDate(time: string)｛let data = new Date（）let currentYear = +time.split("-")[0] // 2020let currentMouth = +time.split("-")[1] //11const haveBigMouths =
2020-11-23 13:29:02
153
原创 el-tree的懒加载数据除去没有用到的三角形图标或最后一级三角形）
由于点击节点才去渲染子层（下一层）的数据，通过操作dom的方法去获取元素并改变其样式（display:none）并不容易，而且容易获取失败！通过多次尝试，利用el-tree固有的属性props中的isLeaf可以直接指定你需要隐藏某个节点的三角形！html结构如下：<el-tree :props="props" lazy :date="data" :load="loadNode"></el-tree>ts代码（js在data中申明即可）去定义***props***:pr
2020-10-09 14:37:48
4700
5
原创 javaScript encodeURL与encodeURLComponent区别
1. URL编码及解码方式Global对象的encodeURL()和encodeURLComponent()方法可以对URL进行编码。有效的URL中不能包含某些字符串，例如空格。他们用特殊的UTF-8编码替换所有无效的字符，从而让浏览器理解。encodeURL()主要用于整个URL，而encodeURLComponent()主要用于对URL中的某一段。它们的区别在于，encodeURL()不会对本身属性url的特殊字符进行编码，例如“冒号、正斜杠、问号、井号”；而encodeURLComponent(
2020-08-18 16:39:39
1630
原创 控制页面无法右键及复制的两种方式（js 与 css)
js控制页面无法复制： <script type="text/javascript"> //Method one //<![CDATA[ //document.oncontextmenu=new Function('event.returnValue=false;'); document.oncontextmenu = function (e) { e = e || window.event; e.returnValue = false; } document.
2020-08-13 09:10:15
303
原创 解决异步过程获取数据的问题（Promise.all() 与$nextTick())的区别
开发过程中，经常会需要对请求回来的数据进行处理在渲染，QUESTION就出现了，此时拿不到最新的数据，在Vue官网提供了$nextTick()的方法进行解决这个问题，但有时还是无法满足多层次的渲染数据（自己实际遇到的)，那这个时候使用Promise.all（）就so easy 了。列子：// 删除事件触发 del (id) { this.$store.commit('del', id) setTimeout(() => { console.lo
2020-08-12 09:46:23
474
原创 数组去重的N种方法（面试必备）
在面试的过程中，经常被问到Array (数组）如何去重，回答的好不好直接可以影响到offer拿不拿的到，还可以为作为一个谈薪资的筹码。（还有其他的可以提供一起来交流学习）数组去重的N个方法：通过ES6中的Set语法（会有兼容性问题）： function unique (arr) { return Array.from( new Set(arr)) } function unique1 (arr) { return [ ...new Set(arr)]
2020-07-10 19:08:31
220
原创 三元运算符，你看懂的了吗？（a ? b ? c ? ‘a‘ : ‘b‘ : ‘c‘ : ‘d‘)
在很多时候，三元运算符对于简单的逻辑特别适用，不过偶然你看到 a ? b ? c ? 'a' : 'b' : 'c' : 'd'是不是特别的懵逼，那里面具体是怎么运算的呢？拆分下来就一目了然Lee。 <style> .red { color: red; } .blue { color: blue; } .green{ color: green; } .font {
2020-07-03 18:03:08
4233
原创 手机号隐藏中间四位数字方法
隐藏手机号中间四位数字在表单的时候很常见，一些信息确认也是需要的，简单处理下：<div id="app"> <div class="validate"> <input type="text" v-model="value" /> 手机号隐藏中间四位：<span>{{result}}</span><br /> <br /> </div>
2020-06-25 20:48:35
1936
原创 时间的格式化，获取格式化的时间与获取临近的时间（格式{yyyy}--{mm}--{dd}）
以当前时间为例子，进行转化成标准格式： <div id="app"> <div class="validate"> <input type="text" v-model="value" /> 时间：<span>{{result}}</span><br /> <br /> </div> </div> <s
2020-06-25 20:48:13
206
原创 数据格式话（例如：1234567.089转换成1，234，567.09）
针对于复杂数字需要进行数据格式化，千分位加逗号进行区分，保留小数位等，进行封装的一个方法<div id="app"> <div class="validate"> <input type="text" v-model="value" /> 数据格式化：<span>{{result}}</span><br /> <br /> </div>
2020-06-24 09:02:49
350
原创 对象数组封装的去重方法，传入唯一值进行
对于给定的数组，例如: oldArr: [{ id: 1, name: 'zs' },{ id: 2, name: 'ls' },{ id: 3, name: 'ww' },{ id: 4, name: 'zl' },{ id: 5, name: 'zs' }] 去掉相同name的一项呢，下面就简单封装一个方法 <div id="app"> <div class="validate"> 原来的数组：<span>{{oldArr}}<
2020-06-24 09:01:10
249
原创 浮点数与百分比之间的转化（封装方法）
开发过程中，从后台获取的数据百分比（31.4%）或者浮点数（0.314）需要相互转换展现在table表格中，这个时候大量的话，就需要封装成一个方法，方便随时进行调用处理，下面就提供个人在工作中封装好的方法（真实项目中，只要把方法放在utils文件下就可以）。 <div id="app"> <div class="validate"> <input type="text" v-model="value" /> 浮点数转化成百
2020-06-22 11:18:59
2257
原创 项目中常用的一些数据处理方法封装（姓名格式、手机号码、邮箱格式、身份证、正整数并保留两位小数、整数、出租率等）
1、校验百分比（出租率）及保留位数 <div id="app"> <div class="validate"> <label>校验：</label> <input type="text" v-model="value" @input="isPercentage(value)" /> <br /> <span>{{result}}</spa
2020-06-18 17:38:06
307
原创 Vue 中自带指令（v-text、v-if、v-on、 v-bind等）解析（封装方法）
vue中自带指令分为三类，第一类是只有指令名的，如v-text、v-html、v-if等，第二类是指令名+参数的，如v-bind：class。第三类是指令名+参数+修饰符的，如v-on:click.stop。类别不同，所产生的功能就有所不一样，下面就通过自定义指令v-mytext,v-myon与v-mybind来实现v-text,v-on,v-bind的一样的功能。v-mytext 指令 <body> <div id="app"> <h2>我是..
2020-06-12 20:29:58
628
原创 VUE 自定义指令详解（五个钩子函数及参数的剖析）
Vue 中提供了14个比较常用的指令，如v-text、v-html、v-on、v-model等，而在实际的开发过程中，对于表单元素获取焦点也会常用到，而autofucos属性在vue中是失效的（移动端的Safarit也会失效），那如何来实现这个效果，这个时候就需要用到自定义的指令了。下面就简单两个例子v-focus(获取焦点）、v-color(设置字体颜色）：<body> <div id="app"> <h2 v-color>{{msg}}</h
2020-06-11 21:47:01
5582
原创 Vue 插槽了解一波（匿名插槽、具名插槽、作用域插槽）使用最新 v-slot指令，简单易懂
为什么要使用插槽？随着技术的不断创新，为了开发的便利，越来越多的插件应运而生，这个时候就会出现一个弊端，随着使用者的不同，对插件的定义就会有所偏差，那对于开发者来言，需要满足所有的使用者才能体现插件的便利性，那对于插件中内容的定义及要求，交给使用者，这是唯一的办法，插槽的使用就能解决了，话不多说，开发中的过程多多少少会遇到，直接上一波经验总结。<!DOCTYPE html><html lang="en"> <head> <meta chars
2020-06-08 15:46:01
292
原创 vue 中非父子之间的传值 （事件总线bus详解）
对于vue中父子之间的传值，都是依赖组件中可以相互找的到，而非父子组件，就需要通过一个中间的组件(bus -图中标明）来实现传值.
2020-06-05 09:26:24
143
原创 Vue中传值问题 ，子传父 或者 父传子 （适合初学者）,对于兄弟传值与隔代传值可用bus或者vuex管理工具进行
在开发Vue项目中，使用了组件化开发的方式，有点有三：①便于后期维护。②可阅读性强。③组件复用。那么问题来了，如何解决组件之间的传值问题，这个对于初学者特别容易踩坑，搞不懂里面到底如何实现的，下面就用一个demo之间来把Vue中常用的两种方式（子传父、父传子）传值方式进行阐述：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="vie
2020-06-04 00:22:28
171
原创 Vue中动态添加属性的方法，添加的属性视图中不更新（初学者容易踩坑）
很多时候在代码中通过添加已有对象的属性的时候，视图却无法更新，就像这样通过在add()方法中添加了一个hobby的属性<div id="app"> <button @click="add">添加属性</button> <br /> <hr /> <div class="init"> {{person.name}} --{{person.age}}--{{person.hobby}} </
2020-06-03 08:23:06
754
原创 vue 中如何在更改数据后拿到最新数据的方法（nextTick），解决vue异步更新获取数据问题（新手容易踩坑）
初始代码结构展示：<div id="app"> <button @click="edit">更改数据</button> <br /> <hr /> <div class="init"> {{msg}} </div> </div> <script src="vue.js"></script> <script> cons
2020-06-01 22:49:31
3279
原创 Truthy(真值）非 true
truthy 值的是在布尔值上下文中，转化后的值为真的值。假值： false 、 0 、 “” 、 null 、 undefined 、 NaN真值：除以上之外的值。真值示例：if（true） if（[]) 空数组 if({}) 空对象 if(444) 正数 if('welcome') 字符串 if(new Date()) 构造函数 if(-43) 负数 if(infinity) 正负无穷...
2020-05-31 21:22:27
574
原创 前端如何简单方便的直接启用服务（http-server）
对于前端来说，启用服务比较不方便，不想php，Java工作者一样直接就有，那么如何解决这个问题了，其实只要在你的电脑安装全局的http-server，就搞定了。效果：
2020-05-29 08:57:05
653
空空如也
tags标签右键中刷新当前的逻辑是什么。
2020-06-09
TA创建的收藏夹 TA关注的收藏夹
TA关注的人