yorcentroll的博客

但是其实还有一个小问题，那就是用户还是能看到面板闪了一下的，因为被关闭了又打开了一次。但是本人已经不想折腾， 谁有本事谁来解决这个问题。希望有大神看到最后，能伸出援手，给出更完美的方案，谢谢！

关于vue 动态引入（异步加载）组件的方法和坑（按需懒加载组件，动态生成路由）babel-plugin-dynamic-import-node 优化编译速度

本文档主要实现两个目标：用js写一个将上传的图片压缩的方法 将自己写的代码同步到github且发布到npm现在从0零开始操作，一步一步实现这两个目标；1. Prepare: 先注册NPM和github账号过程省略，进入各自的官网，创建账号npm:https://www.npmjs.com/github:https://github.com/2. Coding: 结合两个目标，编码默认你已经安装了node环境，node环境也包括了npm环境新建工程文件...

大部分前端开发人员在做项目的过程中应该都遇到过这个问题：在前端点击一个导出或者下载的按钮，从后端导出包含列表中的数据的excel文件。那么如何实现呢？方法一：如果项目中没有涉及要要权限验证的问题，可以直接让后端返回你一个下载文件的地址，然后前端直接访问该地址就可下载文件到本地。比如：window.location.href= url这个方法一般是不会用的，因为正常点的项目基本都会涉及到token验证等问题，你直接访问下载链接是会被拒绝的。当然你也可以选择将token直接带在.

场景：很多情况，我们一般是会选择本地的文件，然后预览并且上传文件到后端，但有的时候如果需求是让你从后端在线获取一个文本文件，并且直接读取展示在页面上，这个时候你该怎么实现这个需求？直接上代码：其实很简单，我们暂时忽略原生XMLHttpRequest请求的方式，直接使用jQuery封装的ajax来请求后端接口success之后直接将返回的函数中拿到文本文件里的内容result。然后将result的内容展示到富文本框中。下面的success回调方法中，四种方式都可以将读取到的文本内容动.

场景：使用过ant-design组件库的人基本都知道，它的time-picker组件并不像date-picker组件那样，支持时间范围选择。所以，这个时候就只能自己手动来封装一个了。下面正式开始：定义一些prop属性:props: { // 时间显示格式 timeFormat: { type: String, default: 'HH:mm' }, // 组件绑定的值 timeData: { type: .

Javascript有一个main thread主线程和call-stack调用栈(执行栈)，所有的任务都会被放到调用栈等待主线程执行。JS调用栈采用的是后进先出的规则，当函数执行的时候，会被添加到栈的顶部，当执行栈执行完成后，就会从栈顶移出，直到栈内被清空。Javascript单线程任务被分为同步任务和异步任务，同步任务会在调用栈中按照顺序等待主线程依次执行，异步任务会在异步任务有了结果后，将注册的回调函数放入任务队列中等待主线程空闲的时候（调用栈被清空），被读取到栈内等待主线程的执行。...

情景描述：有时，我们需在在前端项目中下载本地某个地址的文件模块，这个文件不想放在后端去下载。所以，在这个文件大小不是太大的情况下，我们可以把文件放在前端项目目录中，这样不管开发环境还是生产环境，都能在同样的路径下找到那个文件。实现：1. 先得把文件放在项目工程目录下的某个路径下，这个路径不管是开发环境还是打包之后在生产环境，都是一样的。在vue-cli 3.x+的版本中，这个文件...

场景描述：在表格第一列显示勾选框，支持行多选。然后在这一列的列头增加排序按钮，对已勾选和未勾选的行进行排序。解决方案：常用的解决方案有两种：1，利用table组件本身的rowSelections属性，对其进行封装改造，实现需求。2，给表格绑定的数据增加一列，列头样式为勾选框+排序按钮。数据列显示勾选框组件。这里为了充分利用table组件本身的接口方法，采用第一种...

原文链接：https://juejin.im/post/5cea1f7051882506400054721、综合我在2年之前，写过一篇中小型项目的前端架构浅谈。随着能力的上升，以及在阿里巴巴工作的经验，是时候写一篇大型项目的前端架构分析了。本篇文章不会更多侧重于具体技术实现，而是尝试从更高角度出发，分析为什么要这么做，这些设计能解决什么问题，成本和收益如何。由于作者能力有限，...

写在开头：element-ui的table组件有几个属性很好用，但是ant-design中table组件是没有的。比如：stripe：是否为斑马纹 table。highlight-current-row：是否要高亮当前行。当然，还有好几个其他的属性，但是本文先只讲这两个。既然element-ui有，ant-design没有，那我在用ant-design的table组件时，...

情景描述：如果有这样一个需求，在table中的某一列的数据，不能直接展示原始数据，而是使用加密符号代替，只有点击了某行某列之后，才能切换到真实数据，每次点击就是一次切换。这样类似的需求你会怎么实现？这里使用ant-design UI框架中的table组件做为例子来讲。首先，肯定会想到用filter(angular中叫pipe，vue里面叫filter)。上代码：&l...

情景描述：很多时候，如果一个树的数据父级节点太多，可能导致树需要展示的节点太多，这样不利于查找和勾选。所以，如果能对树的某一级父级节点进行筛选，每次筛选之后只展示该节点下的所有子节点，这样会增加查找和勾选子节点的操作效率。这里，采用ztree组件举例：1. 在树组件内加一个单选下拉框，下拉框绑定的数据是需要筛选的父级节点 列表。2. 切换该下拉框选项时，隐藏并展示相应的节点...

话不多说，直接进入主题。ant-design 在使用它的table组件的时候，不知道你们有没有需求说需要翻译列表头部名称：在切换语言的时候，table的列头名称 并不会同步更换对应语言， 而是需要你重新laod或者切换页面之后才生效。官方文档没有涉及相关问题的解决办法，其实很明显原因就是切换语言的时候，表头的i18n全局指令变量没有被触发：这是正常使用ant-design tabl...

1. 很明显，先注册NPM和github账号过程省略，进入各自的官网，创建账号2. 写代码默认你已经安装了node环境，node环境也包括了npm环境新建工程文件夹，然后执行下面的命令，初始化一个package.json文件npm init -y{ "name": "a-string-is-null-empty-undefined", "version":...

话不多说，上代码sortFieldMatch (string) { const stringArray = string.split('') // 将字符串分割成相应的字符串数组 let newField = field stringArray.forEach(t => { if (/[A-Z]/.test(t)) { ...

场景：很多时候，前端存在需要从后端下载文件的情况，典型的就是导出excel表格。一般存在两种方式：1，请求接口之后，直接打开请求该文件的地址，下载到本地。2，请求接口之后，将获取到的文件数据格式转换之后，再下载到本地。先说第一种:很简单，请求完接口之后，打开该文件的地址：window.location.href=res.request.responseURL...

1.将你项目中的图标打包下载下来2.下载到本地之后，将离线文件复制到你的项目路径下这是下载来的压缩包完整的文件列表这是我复制到项目对应路径里文件，其中红框标记的五个文件是必须要的3.导入ali图标css文件在项目主文件main.js(vue)中, 导入ali 图标 css文件，且移除之前添加的在线使用ali 图标的引用链接4.直接使用ali icon c...

最近由于新项目需要升级到@vue/cli3.x +, 所以我开启了本来以为非常简单顺利的升级踩坑之路。首先卸载vue-cli 2.xnpm uninstall -g vue-cli接着，全局安装@vue/cli3.x +npm install -g @vue/cli由于现在已经有了@vue/cli4.x的版本，所以默认一次性直接就升级到了@vue/cli 4.1.1本来...

推荐使用第二种方法方法一：使用第三方插件：clipboard.js官方链接：https://clipboardjs.com/1，直接下载js文件，在script脚本中直接引用<script src="static/clipboard.min.js"></script>或者：2，安装npm包npm install clipboard --s...

方法一： 容器使用table布局，元素使用table-cell布局.container{ display: table;}.item{ display: table-cell; border: 1px green solid; width: 460px; height: 200px; vertical-align: middle; text-align: c...

方法一：JSON.stringifyJSON.stringify(jsonObj, null, 4); // jsonObj是要JSON化的对象，4是spacing(换行之后添加的空格数)方法二：自定义转换格式和样式js：function customizeJsonObj(json) { if (typeof json != 'string') { ...

其实打开文件资源对话框的方式有好几种，但是世界使用input控件是最直接和方便的那种。ok，直接先上代码。<zl-button size="mini" class="upload-file"> <input @change="fileUpload" type="file" accept=".xls,.xlsx" ref="uploadFile" v-if="!isUp...

这种场景不多见，但有的项目也不可避免会有这种需求。那么，我们如何在地图里若干个点标记中，找到你想要的那个呢？其实不难！在高德地图开发文档中，关于marker的所有属性中，有一个很多属性非常好用，其中有一个属性名叫：extData，它的类型时any。那说明，你可以在创建marker对象时候，就可以塞任何你觉得可以用得上的数据进去。很明显，如果你想要一个marke...