- 博客(64)
- 收藏
- 关注
RSS订阅
原创 自己觉得有用的链接
1 https://blog.youkuaiyun.com/qq_36279445/article/details/78889305 js，正则实现金钱格式化2 https://www.jb51.net/article/120073.htm 谈谈VUE种methods watch和compute的区别和联系3 https://www.cnblogs.com/goloving/p/901261...
2018-07-30 16:08:11
256
原创 Vue中nexttick
nexttick是什么？官方的定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM用法：接收一个回调函数作为参数，作用是将回调函数延迟到下一次dom更新完毕后使用。如果没有传入回调函数，并且在支持promise的环境中，会返回一个promise对象使用场景：在对数据进行赋值之后，需要对新dom做一些操作的时刻，但是此刻最新的dom还没有进行更新。为什么数据赋值后，不会立马更新dom原因：vue 更新dom是异步执行的。监听到
2022-03-16 16:13:32
12776
1
原创 vue 超出多行，省略，展示显示更多按钮
前期准备：根据字体大小和行数确定这个块整体的高度template<div class="desc" ref="desc">{{desc}}</div><button v-show="showButton">显示更多</button>script //获取高度是否超过4行判断是否展示查看更多按钮 getShowMore(){ const height = this.$refs.desc? this.$refs.desc.clien.
2022-03-15 11:26:27
4441
原创 css 省略，三个元素一行，按顺序排放，超出一行，中间元素缩小省略，其他两个正常展示
css缩放要求css代码ps要求三个元素，第一个是选择框，第二个是公司全称，第三个是公司简称。展示一行，按照选择框，全称，简称的顺序展示。选择框和简称完全展示，全称根据情况省略css代码 .li{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
2022-02-23 10:55:00
796
原创 vue联想词飘红
vue联想词飘红要求代码ps要求不对输入字段进行任何处理，对输入字段按字符匹配，不区分英文大小写。代码 const charReg = /[\[\]\\]/gi; //替换需要转义的字符（这些字符在正则中代表特殊含义） const newText = searchKey.value.replace(charReg, '\\$&')//把输入中需要转义的字符替换（替换后正则规则就匹配原有字符本身） const reg = new RegExp(`[${new
2022-02-23 10:46:11
642
原创 Vite的使用及基础原理
Vite的使用及基础原理1使用vite创建vue3项目1.1工具要求1.2创建项目1.3启动1.4使用vue工具2配置vite3vite相比webpack的优点3.1优点一：构建速度快3.2优点二： 开发启动快3.2.1webpack开发启动过程3.2.2vite开发启动过程3.3优点三：热更新速度更快4vite基本原理4.1EMS4.2基本架构4.3 项目分析参考文章1使用vite创建vue3项目1.1工具要求node ：>=12@vue/cli ：>=4.3.11.2创建项目
2022-02-07 19:40:37
2809
4
原创 css控制一行文本，左侧占据剩余空间，自由放大缩小超出省略，右侧完整展示在右边
template <div class="div-flex"> <div class="left"> {{ info.left }} </div> <div class="right"> {{ info.right }} </div> </div>style .div-flex { display: flex; flex-direction: row; justify-co
2022-02-07 10:55:51
743
原创 css 控制多个标签进行裁剪 仅展示一行（vue代码）
css 控制多个标签进行裁剪 仅展示一行templatestyle总结展示template <div class="tag_div" v-if="judgeShowTag()"> <span class="tag" v-for="(tag, index) in info.tags" :key="`tag${index}`" >{{ tag }}</span > </div>styletag_div {
2022-02-07 10:39:25
807
原创 umi + react+antd遇到的问题
Q1:antd下拉选项偏移，如何固定？使用getPopupContainer属性Q2:antd表格table设置width不起效，原因？解决方法？原因：若当前column字段为超长连续单词或数字就会破坏表格布局。解决方法：可为其他column加上宽度，在表格上加上style：style={{ wordBreak: 'break-all' }}，为了美观，还可以给超长连续单词column加上ellipsis属性Q3:umi更改生成文件的hash值，只添加其他异步文件的ha...
2021-09-01 10:24:52
1078
原创 配置http请求
目录axios配置使用umi-request配置使用axios配置import axios from 'axios-jsonp-pro'import message from '@/util/message'const NODE_ENV = process.env.NODE_ENV //判断开发环境还是线上花镜const http = axios.create({ baseURL: NODE_ENV === 'production' ? '//a.xxx.com' : '//b.xxx.
2021-03-31 20:36:15
564
原创 设计模式之工厂模式
目录前言设计模式七大原则类图之间关系总体分类工厂模式定义分类优缺点ts代码实现简单工厂工厂方法抽象工厂类图关系简单工厂前言设计模式七大原则开闭原则：对扩展开放，对修改关闭里氏代换原则：任何基类出现的地方，子类一定可以出现。（抽象化）子类可以扩展父类的功能，但不能修改父类对父类的功能依赖倒转原则：针对接口编程，依赖于抽象而不依赖于具体实现。接口隔离原则：使用多个隔离的接口，比使用一个接口好。（降低耦合度）迪米特法则：一个实体应尽量少的和其他实体之间发生相互作用合成复用原则：尽量使用合成聚合，
2021-03-23 17:29:00
331
原创 一天一个前端小技巧之js
关于页面跳转路由不要在路由参数后面加’#’ 和’/’，很容易导致找不到路径错误示范：//www.baidu.com?Id=12&name=xiao**#/**
2021-02-19 13:03:35
164
原创 一天一个前端小技巧之代码风格
需要经常改动的地址或者其他链接之类的，可以设置一个配置文件来进行配置。进而减少代码改动记得写注释（尤其是难以让人理解的地方）需要使用encodeURI转译的地方，代码中应该写上未转译的，在使用encodeURI转译。而不是直接使用转译编码后的代码...
2021-01-28 16:14:57
139
原创 g6中多个树图分别根据数据多少来重新设置高度，进而保持所有树图大小基本一致
template中页面代码 <div v-for="(item, index) in treeData" :key="index"> <div :id="item[tree].id" class="graph-wh"></div> //树图容器(根据传递来的多个树型数据数组) </div>树图对数据格式有要求，必须有id和children两个字段官网数据格式示例：https://g6.antv.vision/zh/graphmar
2021-01-26 11:21:00
2262
原创 h5页面点击按钮打开app某个页面，若未下载app，则打开下载
h5页面点击按钮打开app某个页面，若未下载app，则打开下载h5页面点击按钮打开app某个页面，若未下载app，则打开下载h5页面点击按钮打开app某个页面，若未下载app，则打开下载·```const downloadUrl = ‘downloadurl’ //下载地址const schema = ‘ ’ //app协议地址function launchZcm(androidurl, schema = ‘bangjob://’, delay = 3000) {let timer;cons
2021-01-22 16:53:51
976
2
原创 一天一个前端小技巧之css
##css1设置div块宽度根据内容适应可设置width: fit-content/max-content2查看css属性兼容浏览器地址https://caniuse.com/?search=fit-content3像类似于fit-content宽度不兼容问题，可给元素设置两个宽度width：300px（自己定义一个兼容的大小）width：fit-content若fit-content不起效，就会使用上一个明确值的宽度。...
2020-12-24 14:37:51
142
原创 ant-design-vue使用之路
目录引入ant-design-vue1.全局引入2. 局部引入局部引入组件局部引入图标使用1message的使用2 日期范围组件本地化3组件化的小技巧listform优化webpack分析插件优化强依赖插件moment引入ant-design-vue1.全局引入1. 命令行使用npm安装npm install ant-design-vue --save2. main.ts文件中导入import Antd from 'ant-design-vue';import 'ant-design-vu
2020-12-21 16:28:49
27207
3
原创 Vue双向绑定学习
1mvvm模型vue中就是用了mvvm模型的思想。mvvm模型相较于mvc模型的升级版。mvc模型即指model数据、view视图、controller控制器，通过controller来处理各种逻辑和用户交互。随着项目复杂度的上升，controller的逻辑和代码也越来越复杂，越来越难以维护就出现了mvvm模式。mvvm是controller变成了viewmodel，view和viewmodel双向绑定，互相影响。mvvm模式的优点：1较低的耦合度，开发人员可以专注于逻辑和视图的开发，viewm
2020-09-27 17:41:47
184
原创 Vue中diff原理学习
1函数式编程与命令式编程命令式编程关注于解题步骤，函数式编程关注于数据映射。命令式编程是一步一步来的，如我们小学解决数据题，没有数据之间的公式，只能一步一步算，函数式编程像升了上了初中之后，开始学习公式，遇到小学那样的问题，套一套公式就出来了，无需再一步步计算。再如二叉树翻转，命令式编程是需要判断节点是否为null,然后开始翻转左树，翻转幼树，最后在左右树互换，关注了解题步骤；而函数式编程考虑了二叉树翻转和原二叉树的关系，翻转二叉树和原二叉树每一个节点都递归的相反，故可以通过反向递归原二叉树得到二叉
2020-08-28 14:27:41
2540
2
原创 Charles使用技巧
1 在线上环境中运行自己本地修改后的代码，即测试自己的代码基础：手机已经连上charles代理，能够抓取https或http包场景：一个项目的真实环境必须引用后端返回的模板或接口及其他部门的资源，如收银台资源。在本地运行后，只是死数据，不能进行真实购买或其他操作。使用：switchhost切换到你要使用的测试环境，便于进行测试。切换host文件本地代码修改后，使用npm run build 指令会生成dist文件夹，文件夹里有js文件和css文件，这两个文件夹里的内容就是你要在线
2020-08-14 16:36:55
698
原创 await/promise 宏任务 微任务 执行顺序
1eventloopjs是单线程，故同时只能执行一个任务，eventloop是保证执行事件不阻塞的一个事件执行机制。js中分为同步任务和异步任务。异步任务又分为宏任务和微任务。js主线程在执行代码时，首先执行同步任务，然后执行异步任务。在按照代码顺序执行时，主线程执行同步代码，遇到异步代码，判断宏任务还是微任务，将其注册事件，分别加入宏任务队列和微任务队列，同步代码执行完毕后，判断微任务队列是否有事件，若有，将微任务队列所有事件执行完毕，在按照先进先出的顺序执行的一个宏任务事件。await
2020-07-31 17:14:44
903
2
原创 物理像素、独立像素、viewport、移动端适配问题
1物理像素是指的手机或电脑显示器的晶体管？大小，如手机分辨率为1080x980,那宽一共有1080个晶体管，即1080个物理像素2独立像素设备上逻辑上衡量的长度，一般是设备可视区域的大小。独立像素大小也比较不固定，一般为320像素、375像素等等。3window.devicePixelRatiodpr=物理像素/独立像素。用以衡量一个独立像素代表了多少个物理像素，来保证字体、或图片的清晰图。电脑的分辨率为1080*980，但电脑屏幕却比较大，说明电脑上物理像素比较大。手机的分辨率
2020-07-22 15:27:48
321
原创 vue2 和 vue3区别
1 创建方式vue2： vue init webpack vuedemovue3: vue create vuedemo2 项目目录vue2:有bulid+config文件夹，node-modules需要npm install来安装vue3:无build+config，node-modules自动安装build文件是配置webpackconfig配置开发环境vue3可在项目根目录创建vue.config.js文件来进行webpack+环境的配置3运行方式vue2中sc
2020-07-16 14:37:35
3248
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人