_let-CSDN博客

原创通过 git 实现微前端公共资源共享方案（subtree）

2021-04-02 10:26:50 727

原创 vue/cli4 单元测试与覆盖率体系搭建

探索 vue-cli4 创建集成 mocha + chai 的项目中，如何写单元测试和查看单元测试覆盖率。

2020-05-29 11:00:04 2591 1

原创使用 Element 上传组件读取文件

需求：支持 .txt 和 .sql 后缀文件内容的读取，最大 2MB。显示已读取文件名称、读取进度和读取成功状态。读取按钮重复点击时，已读取文件列表中的文件被新的文件替换。

2020-05-06 15:52:14 3484

原创 element 日期选择器如何动态限制选择范围

以开始日期和结束日期不能相同为例：data () { let _disabledDate = null return { dateRange: '', pickerOptions: { onPick ({maxDate, minDate}) { // 只选择了一个日期 _disabledDate = !maxDate ? mi...

2020-04-02 10:58:40 1281 1

原创 vue 中 loading 状态与值为空 filter

vue 中 loading 状态与值为空 filter/** * 值为 loading 状态时，显示 ‘-’ * * @param {*} value - 值 * @param {boolean} isLoading - 是否为 loading 状态 * @param {string} [loadingText='-'] * @returns */export...

2020-01-09 16:50:15 595

原创 axios 拦截器与取消 pending 状态请求

axios 拦截器与取消 pending 状态请求/** * axios 拦截器配置 */import axios from 'axios'import { Notification } from 'element-ui'import router from '../router/index.js'// 跳转到登录页面const gotoLoginPage = function...

2020-01-09 16:14:20 5915

原创 TypeError: Cannot read property 'indexOf' of undefined at VueComponent.resetField

本文首发于语雀在这个复用的弹出框中，有时操作成功后会在控制台报一个这样的错误：百思不解，直到在报错信息中点击 element-ui.common.js?5c96:17242 后看到这一行：再结合报错信息，我们可以得知，应该是我们每个 el-form-item 标签的 prop 属性有问题。果然，存在一个没有传入 prop 属性。...

2019-09-05 11:53:54 19231 5

原创 UI 组件二次封装之 props 传递与 v-model 实现

UI 组件二次封装之 props 传递与 v-model 实现我们知道在组件的二次封装的时候，有三点是必须做到的：原组件的 props 继承、事件传值的回掉函数、v-model 双向绑定。本文以 elemnetUI 为例，记录原组件的 props 继承以及 v-model 双向绑定相关的解决方案。一、props 继承以 el-select 为例，我们知道它的 change 事件只能获取选项...

2019-06-14 10:09:59 6794 2

原创 elementUI 输入框回车刷新页面

elementUI 输入框回车刷新页面如何出现？当 el-form 表单内只有一个 el-input 输入框时，在输入框内回车触发表单提交。<el-form :model="formData"> <el-form-item label="服务名称" :rules="[ { ...

2019-06-14 09:19:13 4857 3

原创 mac 下 vs code 配置 SonarLint

mac 下 vs code 配置 SonarLintSonarLint 与 SonarQube 区别：SonarLint 仅存在于 IDE（IntelliJ，Eclipse 和 Visual Studio）中。其目的是在您键入代码时提供即时反馈。为此，它专注于您要添加或更新的代码。SonarQube 是一个处理完整分析的中央服务器（由各种 SonarQube 扫描仪触发）。其目...

2019-05-29 17:21:57 1558

原创 jtopo 折叠与展开子节点

jtopo 折叠与展开子节点通过对象记录状态，简单实现功能：var foldOpenStatus = {}; // 记录折叠状态function foldOpen(e){ // 折叠展开 var thisNode = e.target.text; // 第一层以当前节点名称为 key 区分折叠状态 var tarlink = e.target.outLinks; ...

2019-04-09 17:36:10 1799 1

原创 JavaScript 原型链探索

JavaScript 原型链探索很早就知道了 JavaScript 的原型与原型链，但是关于原型链之间的关系却一直没有仔细思考，趁着有空探索一番。对象的原型每个对象都有一个隐藏的属性——__proto__（隐式原型），这个属性引用了创建这个对象的函数的 prototype。var obj = {a: 10};console.log(obj.prototype); ...

2019-03-12 14:42:34 177

转载 MV* 模式梳理与理解（还原真实的 MV* 模式）

还原真实的 MV* 模式作者：戴嘉华原文链接目录：前言MVCMVC Model 2前后端的 MVCMVPPassive ViewSupervising ControllerMVVM结语References前言做客户端开发、前端开发对 MVC、MVP、MVVM 这些名词不了解也应该大致听过，都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式。网上很...

2019-02-28 15:01:50 924

原创 React Router 4 笔记

React Router 4 笔记记录了一下学习 React Router 的笔记，学习文章均在 4. 学习资料这部分。1. React Router 4 介绍React Router4 是一个流行的纯 React 重写的包。现在的版本中已不需要路由配置，现在一切皆组件。据江湖传言，目前官方同时维护 2.x 和 4.x 两个版本。 3.x 版本相比于 2.x 并没有引入任何新的特性，只是...

2019-02-27 10:19:54 226

文章目录learn webpack4安装前提条件基本安装使用下一代 ECMAScript使用转换插件使用 @babel/polyfill资源管理加载 CSS使用 style-loader 和 css-loader使用 CSS Module使用 PostCSS加载图片使用 file-loader使用 url-loader 和 image-webpack-loader加载字体加载 Iconfont加...

2019-01-22 17:17:42 345

原创 npm 学习笔记

文章目录NPMNPM 是什么？如何安装 NPM 并管理 NPM 版本从 Node.js 网站安装 NPM更新 NPM使用版本管理器安装 Node.js 和 NPM如何安装 npm 包在本地下载和安装包通过命令行安装使用使用 package.json要求（Requirements）创建 package.json运行 CLI 问卷创建一个默认的 package.json 文件指定依赖项全局下载和安装包...

2019-01-11 11:16:25 755 1

原创在项目中引入本地自己创建的包（在模块化项目中使用 jtopo）

引入本地自己创建的包昨天有位群友问我怎么在项目中通过 npm install 命令安装 jtopo？据我所知，jtopo 并没有提供 npm 包可下载，于是就有了这个记录~~~记录一个完整的过程：从零开始写一个简单的包，然后在项目中引用。创建一个简单的包首先，新建一个文件夹 npm-demo，在文件夹中新建文件 index.js，并写入下面内容：;(function (global, f...

2019-01-10 16:15:46 4089 1

原创 ECMA 笔记之正则表达式

文章目录JavaScript之正则表达式小计转义字符两种创建正则的方法直接量语法通过内置对象 RegExp参数表达式（方括号）非 `^`或 `|`元字符量词贪婪匹配与非贪婪匹配子表达式 `()`RegExp 对象属性RegExp 对象方法`test()` 方法`exec()` 方法`exec()` 方法与子表达式 `()``compile()` 方法字符串上使用正则表达式字符串的 `match()...

2019-01-08 14:20:18 812

原创 classList.js

classList.js 是一个对 JavaScript 中的 element.classList 的一个跨浏览器的实现。如果对 element.classList 还不熟悉的可以参考MDN上的文档。classList.js适用于IE 7或更早版本以外的所有浏览器。CDN 使用：https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2...

2019-01-07 13:50:54 1125 5

原创 checkCard 组件

发现最近比较常用选择卡片这一类的效果，干脆封装一个组件~嗯。。。这个最近有点久 ^_^<template> <div class="group-content" :style="{width: row ? row*(iconSize + padW*2 + space*2) + space*2 +'px' : '100%',backgroundColor: compon...

2019-01-07 10:25:11 886

原创 CKeditor 编辑器使用记录（CKeditor 4 and 5 ）

文章目录CKeditor 编辑器CKeditor 4 使用自定义构建CKeditor 5 使用CDN 使用npm 使用自定义图片上传自定义图片上传（七牛云）自定义构建基本操作还原编辑器样式CKeditor 编辑器CKeditor 是一款可定制的适合开发人员使用的富文本编辑器编辑器官网CKeditor 4 使用官网自定义构建构建页面常用插件Code tagEasy ImageF...

2018-12-19 15:46:47 6991 1

原创 VUE 根据需要动态加载单文件组件

根据需要动态加载组件核心方法 // 动态添加需要的版式 registerComponent(templateName) { return import(`../component/plate/mainBoard/${templateName}.vue`).then(component =&gt; { const constructor = Vue.ex...

2018-12-19 15:25:10 5858 3

原创 git 与 github 小计

总是记不到，简单做个记录~git 准备git下载地址：https://git-scm.com/downloads配置 user git config --global user.name "let" git config --global user.email "[email protected]"连接 github生成 ssh key首先检查是否已生成密钥 cd ~/.ss...

2018-11-22 16:21:52 198

原创关于前端直播（videoJS与百度云web播放器：Cyberplayer3.0试用）

videoJSvideoJs 文档 https://docs.videojs.com/docs/实现PC/移动端适应直播，暂停播放出现广告（哎，万恶的广告）打开方式下载此demo，浏览器打开 index.html记录初始化直接在标签里面加上 class="video-js" 和 data-setup='{}' 属性。通过JS初始化// 初始化播放器var myPlayer =...

2018-11-22 16:09:25 12224 2

原创前端解决 API 跨域的几种方式

文章目录使用 webpack 配置代理使用 http-server 模块进行代理使用 nodejs 的 node-http-proxy 模块来处理使用 nginx 配置使用 webpack 配置代理webpack 对于前端来说是个强大的工具, 除了能够帮助你打包和启动调试服务器外, 代理的功能也值得你了解下中文文档地址 webpack 印记中国最简单的配置module.exports =...

2018-11-16 17:18:31 4078

原创 Nginx 反向代理 API 与 Nginx 教程

安装下载地址：http://nginx.org/en/download.html下载解压到 D:nginx/CMD运行命令：D:cd nginxstart nginxNginx基础命令查看nginx的版本号：nginx -v验证配置是否正确: nginx -t启动命令：start nginx快速停止命令：nginx -s stop正常停止命令：nginx -s quit...

2018-11-01 10:06:29 12477

原创 navicate mysql 使用记录

介绍“Navicat”是一套可创建多个连接的数据库管理工具，用以方便管理 MySQL、Oracle、PostgreSQL、SQLite、SQL Server、MariaDB 和/或 MongoDB 等不同类型的数据库，并支持管理某些云数据库，例如阿里云、‎腾讯云。Navicat 的功能足以符合专业开发人员的所有需求，但是对数据库服务器初学者来说又相当容易学习。Navicat 的用户界面 (GUI...

2018-10-29 11:19:50 771

原创 a标签download属性下载还是打开了文件~（下载地址跨域了）

解决办法~canvas//下载图片到本地export function downloadIamge(imgsrc, name) { //下载图片地址和图片名 var image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anonymous'); image...

2018-09-17 11:23:28 19763 4

原创 ECMAScript 5 中的数组方法

ECMAScript 5 中的数组方法ECMAScript 5定义了9个新的数组方法来遍历、映射、过滤、检测、简化和搜索数组。forEach()方法从头至尾遍历数组，为每个元素调用指定的函数。注意， forEach()无法在所有元素都传递给调用的函数之前终止遍历。如果要提前终止，必须把forEach()方法放在一个try块中，并能抛出一个异常。如果forEach()调用的函数抛...

2018-09-01 15:40:03 233

原创 vue 中使用防抖和节流

防抖和节流是我们在开发过程中常用优化性能的方式那么在 vue 中怎么使用呢：在公共方法中（如 public.js 中），加入函数防抖和节流方法// 防抖export function _debounce(fn, delay) { var delay = delay || 200; var timer; return function () { ...

2018-09-01 15:23:20 30052 22

原创 elementUI table组件获取表格当前行的索引

一般情况下，我们通过 scope.row 获取每一行的数据，但是怎么获取每一行的索引呢？答案就在下面： &lt;el-table max-height="290" :data="userTableData" border style="width: 100%"&gt; &lt;el-table-column la

2018-09-01 15:08:29 79524 6

原创 elementUI 上传组件 http-request （覆盖默认的上传行为，可以自定义上传的实现）使用

开篇一张图html代码 &lt;el-dialog title="批量导入" :visible.sync="importDialog" width="30%"&gt; &lt;div class="importDialog-content"&gt; &amp

2018-09-01 14:56:31 42476 13

原创记录一些 js 实用的方法

记录一些 js 常用方法// 从字符串中提取 img 标签，获取每个 img 的 srcexport function getImg(str) { let imgs = str.match(/&amp;amp;lt;img.+?&amp;amp;gt;/gi); imgs = imgs.map(function(item, index) { //提取出src let _src = item.matc...

2018-07-23 11:48:30 213

原创 echarts 自定义 markPoint 的 symbol 样式

/** * 获取文本宽高 * @param text 文本 * @param fontSize 代表汉字的大小，英文字会自动按照默认值 * @returns {{width: *, height: *}} */ function textSize(text,fontSize) { var span =...

2018-05-30 10:19:33 109987 10

原创关于选框的一些封装

原生此原生并非指原生js，而是原生的 checkbox 组件&amp;amp;amp;amp;lt;label for=&amp;amp;amp;quot;checkAll&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;input type=&amp;amp;amp;quot;checkbox&amp;amp;a

2018-05-14 15:44:18 194

原创使用webstorm找出指定文件夹内所有文件中包含的中文字符（webstorm利用正则查找内容）

首先在需要的目录右键，选择 Find in Path 如图填写正则（说明不仅仅可以查找中文这么简单哦！），勾选 Regular expression，查看目录是否正确，最后单击 Find 进行查找结果 ...

2018-04-27 16:04:12 8151

原创关于`1 + - + + + - + 1;`的理解（一元操作符 + - 的理解）

节选下面部分节选自：《你不懂JS：类型与文法》第四章：强制转换中的 “明确地：Strings <–> Numbers”除了String(..)和Number(..)，还有其他的方法可以把这些值在string和number之间进行“明确地”转换：var a = 42;var b = a.toString();var c = "3.14";var d = +c;...

2018-04-25 09:37:10 540

原创填补 window.isNaN 工具的缺陷

内容来自： You-dont-know-JS中类型与文法的第二章（值）不是数字的数字如果你不使用同为 number（或者可以被翻译为十进制或十六进制的普通 number 的值）的两个操作数进行任何算数操作，那么操作的结果将失败而产生一个不合法的 number，在这种情况下你将得到 NaN 值。NaN 在字面上代表“不是一个 number（Not a Number）”，但是正如我们即将看...

2018-04-24 16:15:42 801 1

原创使用“机械极小值（machine epsilon）”作为比较的容差处理JS中小数的比较

内容来自： You-dont-know-JS中类型与文法的第二章（值）小数值使用二进制浮点数的最出名（臭名昭著）的副作用是（记住，这是对所有使用 IEEE 754 的语言都成立的 —— 不是许多人认为/假装仅在 JavaScript 中存在的问题）：0.1 + 0.2 === 0.3; // false从数学的意义上，我们知道这个语句应当为 true。为什么它是 false...

2018-04-24 15:44:03 3333

原创 VUE 设置本地代理

配置proxyTable在vue-cli项目中的config文件夹下的index.js配置文件中，找到 proxyTable 的位置： dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assets...

2018-04-20 17:24:01 12906

空空如也

空空如也