Vincent.TM-CSDN博客

原创 Monaco Editor 编辑器enter以后光标定位错乱问题及解决方法

我这边手欠通过css设置了字体间距，因为默认的字体被修改后，显得不咋好看，然后发现光标的移动位置错位，删除的也不是当前光标所在位置的数据，后续查看api时发现monaco有一个字体的属性，分别时fontSize和fontFamily,然后去除letter-spacing样式，光标会根据字体大小和字体类型去计算每一个字符的宽度，这样才能保证光标位置的正确。希望给同踩坑小伙伴一点思路。以下是引发问题的代码。

2023-06-02 18:28:11 1113

原创 Monaco-editor使用指南，遇到问题详解

monaco-edtor使用详解，以及我自己开发的时候遇到的问题

2023-02-15 17:27:18 3590

原创前端URL最合法校验

大家开发过程中肯定遇到过URL校验的问题，写正则需要好长一串，光IP的校验久就需要老长一串了，主要很难检查错误点。今天分享一个非常简单的URL校验方法，由于我司只需要支持Chrome浏览器，其他的先不考虑的情况，结合ElementUI校验UIRL。...

2022-06-18 17:07:36 1492

原创 Vue页面刷新的三种方式

vue页面刷新的三种方式由于功能需求，需要离开页面前告知用户是否需要丢弃未保存的数据，这时候切换的菜单会失效，但是菜单依然会高亮错误。所以要进行一次页面刷新。方法一原地页面刷新this.$router.go(0)location.refresh()...

2021-07-16 14:45:51 7934 6

原创 vue 展示多个markdown文件

项目场景：需求如下：public文件夹下有多个.md文件，需要按需展示md文件vue-loader将markdown文件以vue格式加载， vue-markdown-loader转换markdown格式。markdown文件将被转换为vue组件方案一：导入每个组件并按需展示1.安装依赖 npm install vue-loader vue-markdown-loader --save2.修改webpack配置在vue.config.js中增加对md文件的解析配置（vue cli3配置）

2021-05-21 15:48:15 939 2

转载 webpack配置详解

使用sortablejs拖拽表格顺序不生效的问题解决方法表格拖动一、sortablejs二、使用方法1.引入库2.使用重点表格拖动一、sortablejssortablejs是一个功能强大的JavaScript 拖拽库，用于简单列表拖拽，多表拖拽和表格拖拽。二、使用方法1.引入库npm install sortablejs --save-devimport Sortable from 'sortablejs'2.使用表格拖拽对应方法(因为进行的对DOM元素的操作，所以要在挂载完成后触

2021-03-24 17:12:40 237

原创优化滚动的一个小技巧：scroll-snap-type

2021-02-24 18:38:41 5435

原创一篇文章告诉你Get和Post的本质区别。别再被骗了

一篇文章告诉你Get和Post的本质区别。别再被骗了平平无奇的你GET和POST在我们的项目中使用的算是比较多的http请求方法了，提起他们的区别时，我们总是充满自信的给出一个标准的答案：GET在浏览器回退时是无害的，而POST会再次提交请求。GET产生的URL地址可以被收藏为书签，而POST不可以。GET请求会被浏览器主动cache，而POST不会，除非手动设置。GET请求只能进行url编码，而POST支持多种编码方式。GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被

2021-01-21 15:48:57 165

原创 Vue代码规范（大部分适用）

vue代码规范（公司内部使用）UI框架选择PC端Vue项目UI框架优先选择：Element UI文件夹、组件命名规范，组件结构规范文件夹：1.文件夹名称应统一格式，小驼峰命名，见名思意，其余文件夹名称统一按照项目结构目录命名规范统一命名。2.文件路径按照菜单定义。顶级菜单对应一个一级文件夹，依次类推。⦁ 基础组件：当项目中需要自定义比较多的基础组件的时候，比如一些button，input，icon，建议以一个统一的单词开头，或者放到通用文件夹统一管理，这样做的目的是为了方便查找。公共组件应

2021-01-19 10:38:31 5294 2

原创 G6使用指北

G6使用指北欢迎使用Markdown编辑器G6介绍节点、边如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，

2021-01-18 18:03:11 2906

原创 linear-gradient和border-image合并使用，增加border渐变

linear-gradient和border-iamge合并使用，增加border渐变linear-gradientborder-iamge

2020-12-18 15:34:05 2176 2

原创 CSS中优秀的响应布局Grid

CSS中优秀的布局Grid设置响应单位fr合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。n行n列，之前需要通过css

2020-07-28 11:20:17 325

原创 0.1+0.2 != 0.3 ？ WHY ？？？

面试中经常问道0.1+0.2 ！= 0.3的原因小数的二进制表示相信很多人都能轻而易举的算出一个正整数的二进制表示，但是都没有考虑过小数怎么表示。JS中数值使用的为64位表示，这其中1位表示的是符号位（正数还是负数），52位表示小数，还有剩余的11位表示整数。对于整数大家应该都知道是对2取余，去求一个数的二进制，比如 9 这个正整数余数 9/2 --> 1 4/2--> 0 2/2 --> 0 1 从下往上一次得出 9的二进制为 1001 整数

2020-06-02 19:09:05 460

原创 NodeJs系列之stream流

NodeJs系列之stream流Stream流stream 流分为四种：所有的 Stream 对象都是 EventEmitter 的实例。常用的事件有：流的基本概念readfile、writefile文件读写对比Stream读写文件request和responseStream的弊端Stream流stream 流分为四种：Readable - 可读操作。Writable - 可写操作。Duplex - 可读可写操作.Transform - 操作被写入数据，然后读出结果。所有的 Stream

2020-05-18 14:38:58 349

翻译 Node学习笔记之node事件

node中事件Node.js 有多个内置的事件，我们可以通过引入 events 模块，并通过实例化 EventEmitter 类来绑定和监听事件1.注册事件并触发//events 模块只提供了一个对象： events.EventEmitter。EventEmitter 的核心就是事件触发与事件监听器功能的封装。const events = require('events')// 创建ev...

2020-04-05 18:51:52 249

原创正则中不以某些字符开头，或者不以某些字符结尾的解决方法

正则中不以某些字符开头，或者不以某些字符结尾的解决方法需要解决的问题如下：名称校验中只能包含数字大小字母下划线和点字符，但是不能以 - 和点字符开头，且不能以点字符结尾。1.不以某些字符开头正则的正常开头和结尾分别是 ^ 和 $ 符号，^ 表示这个正则开始了，$ 则表示这个正则到此结束。js中定义一个正则：1. let reg = /^[a-zA-Z0-9]$/ 2. let ...

2020-03-31 23:49:27 29750

原创 js中英文中文混合排序

js中英文中文数字混合排序问题简述：Array本身有sort方法，但是实现不了中英文混合排序。一、Array默认的排序Array的默认排序sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的let chinese = ['应用','服务器','张三','蓝天','随便什么吧']chines...

2020-03-18 00:23:03 6873

原创 elementui可展开表格多层嵌套，expand-change中使用异步方法Dom不更新。需要点击两次。

ElementUi可展开表格多层嵌套，expand-change中使用异步方法后dom不生效。再次点击才正常展示数据。一、问题描述项目中需要用到表格打开继续展开表格，点击expand打开时，请求下层数据，然后再将数据渲染到页面上，根据elementui的文档，我这边使用了el-table 的expand属性，@expand-change中请求下层数据。遇到了问题，异步请求获取到下层数据后，c...

2020-03-15 18:41:20 10763 11

原创 Vue.set向对象里增加多层数组属性不生效的情况解说

属性多层数组数据的添加修改一、为什么需要使用Vue.set？vue中不能检测到数组的一些变化，比如一下两种：1、数组长度的变化 vm.arr.length = 100　　2、数组通过索引值修改内容 vm.arr[1] = ‘aa’那么为什么vue要做成这样，不去监听数组的变化，数组在日常中使用频率还是比较高的，这个问题其实尤大说过，是为了性能，假设我们新建了一个数组，长度是1000 但...

2020-03-08 21:58:46 7938

原创 Base64编码解码

Base64编码解码1.window.btoa和window.atob2. node中内置方法编码解码3.使用开源的base64.js总结参考1.window.btoa和window.atob这两个方法是字符串到base64的编码和解码，使用方法具体如下： //对hello world进行编码(这里的window可以省略) var encodedData = window.btoa("He...

2019-12-19 15:06:16 1223

原创 JavaScript中的继承

一、关于继承我所知道的分类继承在java中可能更能一目了然一些，class代表类，extends代表继承，es6中将这种模式的继承已经加了进去。所以以后我们也可以用完整且易懂的继承了。这里我按照会不会使用Object.create()方法来划分。不使用Object.create()的继承。原型继承、构造函数继承、组合继承使用Object.create()的继承。原生式继承、寄生...

2019-09-25 18:18:24 85

原创背包问题-最优解

主要是想记录下学习的背包问题问题描述：给定n种物品和一背包。物品i的重量是wi，其价值为vi，背包的容量为C。问应如何选择装入背包的物品，使得装入背包中物品的总价值最大?对于一种物品，要么装入背包，要么不装。所以对于一种物品的装入状态可以取0和1.我们设物品i的装入状态为xi,xi∈ (0,1)，此问题称为0-1背包问题。数据：物品个数n=5,物品重量w[n]={0，2，2，6，5，4}...

2019-08-21 17:00:07 4175

转载神奇的flex+margin:auto

flex布局相信是大家现在开发中比较常使用的一种布局了，使用flex布局进行垂直水平居中相信大家都已经很熟悉了。相信下边的代码大家已经屡见不鲜了。div { width: 100px; height: 100px; background-color: black; display: flex; align-items: center;...

2019-08-19 18:08:21 3166

转载深入理解vue中的slot与slot-scope与scope.row

深入理解vue中的slot与slot-scopevue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”，于是就关闭了vue说明文档。我这里先来简单的介绍下插槽：插槽，也就是slot，是组件的一块HTML模板，这块模板显示不...

2019-04-25 11:56:48 65081 13

原创 vue中使用本地svg，抽为全局组件svg-icon

vue中使用本地svg，抽为全局组件svg-iconvue中使用本地svg，抽为全局组件svg-icon增加icon文件夹SvgIcon组件main.js中导入icons修改配置vue中使用本地svg，抽为全局组件svg-icon今天增加一个svg全局组件，却怎么都显示不出来，在这里记录下全过程。增加icon文件夹vue项目中src目录下增加icons文件夹，文件夹中放置页面需要用到的s...

2019-04-16 18:29:01 2288

原创 vue中全屏screenfull.js的使用

vue中全屏screenfull.js的使用安装screenfull1.使用npm安装 screenfullnpm install sreenfull --save使用方式在使用的页面正确引入import screenfull from ‘screenfull’ data(){ return { //默认不全屏 isFullscreen...

2019-04-11 16:35:50 10484 11

翻译深入浏览器缓存

浏览器缓存详解欢迎使用Markdown编辑器四种浏览器端缓存缓存的整个过程强缓存对比缓存又叫协商缓存如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...

2019-04-01 17:57:54 431

转载 Vue面试总结

Vue面试总结谈谈你对MVVM开发模式的理解MVVM分为Model、View、ViewModel三者。Model：代表数据模型，数据和业务逻辑都在Model层中定义；View：代表UI视图，负责数据的展示；ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和Vi...

2019-03-01 15:53:53 164

原创 WebUploader使用中踩的坑。

WebUploader使用中踩的坑。weuploader插件基本介绍 var uploader = WebUploader.create({ swf: './js/webuploader/Uploader.swf', //上传入口 server: common.BASE_URL_DEV+'/file/upload.do', //指定服务器 ...

2019-01-16 14:51:09 3073

原创 vue路由跳转时出现 TypeError: Cannot read property ‘_c‘ of undefined

vue路由跳转时出现 TypeError: Cannot read property ‘_c’ of undefined启动项目并点击跳转路由，出现上边的错误，在网上找了蛮久，发现各种解答都有。经过多种尝试，发下代码写错了。网上各种改配置，都不适用，所以决定贴出来。对应页面<template> <div> <el-form ref="form......

2019-01-07 20:26:40 19637 1

原创 js事件详解

事件详解事件的触发一般有三个阶段，事件捕获、目标事件、事件冒泡。1. 事件绑定事件绑定：即需要对操作动作做出响应。基本绑定有三种方式。1.嵌入DOM，给dom直接增加事件函数。 &amp;lt;button onclick=&quot;open()&quot;&amp;gt;按钮&amp;lt;/button&amp;gt;&amp;lt;button onclick=&am

2019-01-05 18:29:41 351

原创 es6学习笔记之let const和解构

es6学习笔记let和constes6新增了let命令，使用方式类似var ，均用作声明变量，但是let和var也是有很大的区别的。1.var存在变量提升，let不存在。会存在暂时性死区2.var不声明使用，相当于在全局声明变量。let不声明使用会报错。3.let声明为块级作用域，es5中只有全局作用域和函数作用域，没有块级作用域。4.let不能重复声明回报错。var重复声明时，会...

2018-12-25 17:57:58 686

原创前端跨域及其原理

前端跨域汇总什么是跨域要搞懂什么是跨域要明白同源策略，同源策略满足条件有三个：1.协议相同2.端口相同3.域名相同同源策略有什么限制？1.) Cookie、LocalStorage 和 IndexDB 无法读取2.) DOM 和 Js对象无法获得3.) AJAX 请求不能发送url中任意一个部分不相同都会造成跨域问题，但是也有例外，script标签的src和link标签的hre...

2018-12-21 18:38:26 1974

原创对象的深拷贝和浅拷贝

对象的深拷贝和浅拷贝完全赋值or引用对象的浅拷贝对象的浅拷贝，相当于地址的引用，这样拷贝出来的对象会随着原始对象的改变而改变。例子如下：var obj = {name:'zhangsan',age:18}var newObj = obj;var newObj2 = Object.assign(obj,true);console.log(obj,newObj,newObj2);ob...

2018-11-26 19:35:02 119

原创关于float，position几个属性值的理解

什么是浮动？float 属性定义元素在哪个方向浮动。主要作用是文本环绕图像，不过在 CSS 中，任何元素都可以浮动。元素设置了float值，且float值不为none，则浮动元素变成一个块级框，自动增加display：block属性，而不论它本身是何种元素。特点：1. float设置的浮动元素对块级元素不可见，会覆盖掉浮动元素，对文本元素和bfc元素可见。（BFC为块级格式上下文）。...

2018-10-30 18:00:19 1213

原创 2018前端面试问题汇总

1.清除盒模型的浮动方式way 1: 最后追加元素,设置 clear:both;way 2: 伪元素清除div::after{clear:both,content:’’,height:0;line-height:0;display:block;visiablity:hidden;}div{zoom:1; // ie下生效设置或者检索缩放比例}way 3: 父元素增加o...

2018-10-18 11:39:55 335

原创浏览器下调整字体小于12px

调整浏览器下字体大小小于12px* 看了好多博客，博客上都说用-webkit-font-size-adjust：none来解决，自己动手试了以后发现并不能解决这个问题，所以写个博客记录下* -webkit-font-size-adjust：none在chorme 27.0以下的版本有效，27.0以上的版本属于无效的，新的版本的浏览器下取消了这个设置调整字号的属性。所以...

2018-08-30 16:50:50 501

原创 js实现链表翻转

js实现链表翻转js中本身是不存在链表的，但是对象的属性值可以为另一个对象，这样我们就有条件自己使用对象的特性，自己手动的写出一个链表。首先创建多个对象，我这里就使用三个了，多了太麻烦，话不多说，代码里解释代码块 (function (){ //这里定义一个自执行函数 //构建链表这里要注意，链在最后的对象要最开始声明，不然取到next的值就...

2018-07-27 17:09:02 6041 1

原创 freemarker中contains和seq_contains详解

freemarker 中seq_contains和containscontains用于查找字符串是否存在某个子字符串或者某个字符contains是字符串string 上的方法，作用于字符串上，主要用来查找字符串或者字符是否存在于左侧字符串里，返回值为true或者false。seq_contains用于查找序列中是否包含指定元素如果要判断序列中是否包含某个指定的元素，可以使用...

2018-06-26 15:16:06 16951 8

原创持续动画的前端实现

前端实现持续动画有两种方式： 1. css实现持续动画。 2. JavaScript代码实现。先来说第一种： css3是在原有的css的基础上增加了些新的特性，其中就包含animation。css实现持续动画就是使用了animation这个属性。主要代码如下： div { width:100px; height:100px; background:red; ...

2018-04-27 16:02:13 656

2018整理的前端面试题

freemaker文档

空空如也